Browse Source

refactored, renamed events, e2e passes

Daniel Zlotin 6 years ago
parent
commit
ea7db1d7cc

+ 2
- 2
lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationEvent.java View File

10
 import static com.facebook.react.modules.core.DeviceEventManagerModule.RCTDeviceEventEmitter;
10
 import static com.facebook.react.modules.core.DeviceEventManagerModule.RCTDeviceEventEmitter;
11
 
11
 
12
 public class NavigationEvent {
12
 public class NavigationEvent {
13
-	private static final String onAppLaunched = "RNN.appLaunched";
13
+	private static final String onAppLaunched = "RNN.onAppLaunched";
14
 	private static final String componentDidAppear = "RNN.componentDidAppear";
14
 	private static final String componentDidAppear = "RNN.componentDidAppear";
15
 	private static final String componentDidDisappear = "RNN.componentDidDisappear";
15
 	private static final String componentDidDisappear = "RNN.componentDidDisappear";
16
-	private static final String onNavigationButtonPressed = "RNN.navigationButtonPressed";
16
+	private static final String onNavigationButtonPressed = "RNN.onNavigationButtonPressed";
17
 
17
 
18
 	private final RCTDeviceEventEmitter emitter;
18
 	private final RCTDeviceEventEmitter emitter;
19
 
19
 

+ 3
- 3
lib/ios/RNNEventEmitter.m View File

7
 
7
 
8
 RCT_EXPORT_MODULE();
8
 RCT_EXPORT_MODULE();
9
 
9
 
10
-static NSString* const onAppLaunched	= @"RNN.appLaunched";
10
+static NSString* const onAppLaunched	= @"RNN.onAppLaunched";
11
 static NSString* const componentDidAppear	= @"RNN.componentDidAppear";
11
 static NSString* const componentDidAppear	= @"RNN.componentDidAppear";
12
 static NSString* const componentDidDisappear	= @"RNN.componentDidDisappear";
12
 static NSString* const componentDidDisappear	= @"RNN.componentDidDisappear";
13
-static NSString* const onNavigationButtonPressed	= @"RNN.navigationButtonPressed";
13
+static NSString* const onNavigationButtonPressed	= @"RNN.onNavigationButtonPressed";
14
 
14
 
15
 -(NSArray<NSString *> *)supportedEvents {
15
 -(NSArray<NSString *> *)supportedEvents {
16
 	return @[onAppLaunched, componentDidAppear, componentDidDisappear, onNavigationButtonPressed];
16
 	return @[onAppLaunched, componentDidAppear, componentDidDisappear, onNavigationButtonPressed];
35
 }
35
 }
36
 
36
 
37
 -(void)sendOnNavigationButtonPressed:(NSString *)componentId buttonId:(NSString*)buttonId {
37
 -(void)sendOnNavigationButtonPressed:(NSString *)componentId buttonId:(NSString*)buttonId {
38
-	[self send:onNavigationButtonPressed body:@{@"componentId":componentId , @"buttonId": buttonId }];
38
+	[self send:onNavigationButtonPressed body:@{@"componentId":componentId , @"buttonId": buttonId}];
39
 }
39
 }
40
 
40
 
41
 - (void)addListener:(NSString *)eventName {
41
 - (void)addListener:(NSString *)eventName {

+ 2
- 2
lib/src/adapters/NativeEventsReceiver.ts View File

22
     return this.emitter.addListener('RNN.componentDidDisappear', callback);
22
     return this.emitter.addListener('RNN.componentDidDisappear', callback);
23
   }
23
   }
24
 
24
 
25
-  registerOnNavigationInteraction(callback: (componentId: string, params) => void): EventSubscription {
26
-    return this.emitter.addListener('RNN.onNavigationInteraction', callback);
25
+  registerOnNavigationButtonPressed(callback: (componentId: string, buttonId: string) => void): EventSubscription {
26
+    return this.emitter.addListener('RNN.onNavigationButtonPressed', ({ componentId, buttonId }) => callback(componentId, buttonId));
27
   }
27
   }
28
 }
28
 }

+ 9
- 9
lib/src/components/ComponentWrapper.test.tsx View File

145
   describe('component lifecycle', () => {
145
   describe('component lifecycle', () => {
146
     const componentDidAppearCallback = jest.fn();
146
     const componentDidAppearCallback = jest.fn();
147
     const componentDidDisappearCallback = jest.fn();
147
     const componentDidDisappearCallback = jest.fn();
148
-    const onNavigationInteractionCallback = jest.fn();
148
+    const onNavigationButtonPressedCallback = jest.fn();
149
 
149
 
150
     class MyLifecycleComponent extends MyComponent {
150
     class MyLifecycleComponent extends MyComponent {
151
       componentDidAppear() {
151
       componentDidAppear() {
156
         componentDidDisappearCallback();
156
         componentDidDisappearCallback();
157
       }
157
       }
158
 
158
 
159
-      onNavigationInteraction() {
160
-        onNavigationInteractionCallback();
159
+      onNavigationButtonPressed() {
160
+        onNavigationButtonPressedCallback();
161
       }
161
       }
162
     }
162
     }
163
 
163
 
164
-    it('componentDidAppear, componentDidDisappear and onNavigationInteraction are optional', () => {
164
+    it('componentDidAppear, componentDidDisappear and onNavigationButtonPressed are optional', () => {
165
       const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
165
       const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
166
       const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
166
       const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
167
       expect(() => tree.getInstance()!.componentDidAppear()).not.toThrow();
167
       expect(() => tree.getInstance()!.componentDidAppear()).not.toThrow();
168
       expect(() => tree.getInstance()!.componentDidDisappear()).not.toThrow();
168
       expect(() => tree.getInstance()!.componentDidDisappear()).not.toThrow();
169
-      expect(() => tree.getInstance()!.onNavigationInteraction()).not.toThrow();
169
+      expect(() => tree.getInstance()!.onNavigationButtonPressed()).not.toThrow();
170
     });
170
     });
171
 
171
 
172
     it('calls componentDidAppear on OriginalComponent', () => {
172
     it('calls componentDidAppear on OriginalComponent', () => {
185
       expect(componentDidDisappearCallback).toHaveBeenCalledTimes(1);
185
       expect(componentDidDisappearCallback).toHaveBeenCalledTimes(1);
186
     });
186
     });
187
 
187
 
188
-    it('calls onNavigationInteraction on OriginalComponent', () => {
188
+    it('calls onNavigationButtonPressed on OriginalComponent', () => {
189
       const NavigationComponent = ComponentWrapper.wrap(componentName, MyLifecycleComponent, store);
189
       const NavigationComponent = ComponentWrapper.wrap(componentName, MyLifecycleComponent, store);
190
       const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
190
       const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
191
-      expect(onNavigationInteractionCallback).toHaveBeenCalledTimes(0);
192
-      tree.getInstance()!.onNavigationInteraction();
193
-      expect(onNavigationInteractionCallback).toHaveBeenCalledTimes(1);
191
+      expect(onNavigationButtonPressedCallback).toHaveBeenCalledTimes(0);
192
+      tree.getInstance()!.onNavigationButtonPressed();
193
+      expect(onNavigationButtonPressedCallback).toHaveBeenCalledTimes(1);
194
     });
194
     });
195
   });
195
   });
196
 });
196
 });

+ 3
- 3
lib/src/components/ComponentWrapper.tsx View File

39
         }
39
         }
40
       }
40
       }
41
 
41
 
42
-      onNavigationInteraction(buttonId) {
43
-        if (this.originalComponentRef.onNavigationInteraction) {
44
-          this.originalComponentRef.onNavigationInteraction(buttonId);
42
+      onNavigationButtonPressed(buttonId) {
43
+        if (this.originalComponentRef.onNavigationButtonPressed) {
44
+          this.originalComponentRef.onNavigationButtonPressed(buttonId);
45
         }
45
         }
46
       }
46
       }
47
 
47
 

+ 10
- 10
lib/src/events/ComponentEventsRegistry.test.ts View File

12
     eventRegistry = {
12
     eventRegistry = {
13
       componentDidAppear: jest.fn(),
13
       componentDidAppear: jest.fn(),
14
       componentDidDisappear: jest.fn(),
14
       componentDidDisappear: jest.fn(),
15
-      onNavigationInteraction: jest.fn()
15
+      onNavigationButtonPressed: jest.fn()
16
     };
16
     };
17
 
17
 
18
     mockComponentRef = {
18
     mockComponentRef = {
19
       componentDidAppear: jest.fn(),
19
       componentDidAppear: jest.fn(),
20
       componentDidDisappear: jest.fn(),
20
       componentDidDisappear: jest.fn(),
21
-      onNavigationInteraction: jest.fn()
21
+      onNavigationButtonPressed: jest.fn()
22
     };
22
     };
23
 
23
 
24
     store = new Store();
24
     store = new Store();
30
   it('register for lifecycle events on eventRegistry', () => {
30
   it('register for lifecycle events on eventRegistry', () => {
31
     expect(eventRegistry.componentDidAppear).toHaveBeenCalledTimes(0);
31
     expect(eventRegistry.componentDidAppear).toHaveBeenCalledTimes(0);
32
     expect(eventRegistry.componentDidDisappear).toHaveBeenCalledTimes(0);
32
     expect(eventRegistry.componentDidDisappear).toHaveBeenCalledTimes(0);
33
-    expect(eventRegistry.onNavigationInteraction).toHaveBeenCalledTimes(0);
33
+    expect(eventRegistry.onNavigationButtonPressed).toHaveBeenCalledTimes(0);
34
     uut.registerForAllComponents();
34
     uut.registerForAllComponents();
35
     expect(eventRegistry.componentDidAppear).toHaveBeenCalledTimes(1);
35
     expect(eventRegistry.componentDidAppear).toHaveBeenCalledTimes(1);
36
     expect(eventRegistry.componentDidDisappear).toHaveBeenCalledTimes(1);
36
     expect(eventRegistry.componentDidDisappear).toHaveBeenCalledTimes(1);
37
-    expect(eventRegistry.onNavigationInteraction).toHaveBeenCalledTimes(1);
37
+    expect(eventRegistry.onNavigationButtonPressed).toHaveBeenCalledTimes(1);
38
   });
38
   });
39
 
39
 
40
   it('bubbles lifecycle to component from store', () => {
40
   it('bubbles lifecycle to component from store', () => {
41
     const params = {};
41
     const params = {};
42
     expect(mockComponentRef.componentDidAppear).toHaveBeenCalledTimes(0);
42
     expect(mockComponentRef.componentDidAppear).toHaveBeenCalledTimes(0);
43
     expect(mockComponentRef.componentDidDisappear).toHaveBeenCalledTimes(0);
43
     expect(mockComponentRef.componentDidDisappear).toHaveBeenCalledTimes(0);
44
-    expect(mockComponentRef.onNavigationInteraction).toHaveBeenCalledTimes(0);
44
+    expect(mockComponentRef.onNavigationButtonPressed).toHaveBeenCalledTimes(0);
45
     uut.registerForAllComponents();
45
     uut.registerForAllComponents();
46
     eventRegistry.componentDidAppear.mock.calls[0][0](refId);
46
     eventRegistry.componentDidAppear.mock.calls[0][0](refId);
47
     eventRegistry.componentDidDisappear.mock.calls[0][0](refId);
47
     eventRegistry.componentDidDisappear.mock.calls[0][0](refId);
48
-    eventRegistry.onNavigationInteraction.mock.calls[0][0](refId, params);
48
+    eventRegistry.onNavigationButtonPressed.mock.calls[0][0](refId, params);
49
     expect(mockComponentRef.componentDidAppear).toHaveBeenCalledTimes(1);
49
     expect(mockComponentRef.componentDidAppear).toHaveBeenCalledTimes(1);
50
     expect(mockComponentRef.componentDidDisappear).toHaveBeenCalledTimes(1);
50
     expect(mockComponentRef.componentDidDisappear).toHaveBeenCalledTimes(1);
51
-    expect(mockComponentRef.onNavigationInteraction).toHaveBeenCalledTimes(1);
52
-    expect(mockComponentRef.onNavigationInteraction).toHaveBeenCalledWith(params);
51
+    expect(mockComponentRef.onNavigationButtonPressed).toHaveBeenCalledTimes(1);
52
+    expect(mockComponentRef.onNavigationButtonPressed).toHaveBeenCalledWith(params);
53
   });
53
   });
54
 
54
 
55
   it('defensive unknown id', () => {
55
   it('defensive unknown id', () => {
57
     expect(() => {
57
     expect(() => {
58
       eventRegistry.componentDidAppear.mock.calls[0][0]('bad id');
58
       eventRegistry.componentDidAppear.mock.calls[0][0]('bad id');
59
       eventRegistry.componentDidDisappear.mock.calls[0][0]('bad id');
59
       eventRegistry.componentDidDisappear.mock.calls[0][0]('bad id');
60
-      eventRegistry.onNavigationInteraction.mock.calls[0][0]('bad id', {});
60
+      eventRegistry.onNavigationButtonPressed.mock.calls[0][0]('bad id', {});
61
     }).not.toThrow();
61
     }).not.toThrow();
62
   });
62
   });
63
 
63
 
67
     expect(() => {
67
     expect(() => {
68
       eventRegistry.componentDidAppear.mock.calls[0][0]('myId');
68
       eventRegistry.componentDidAppear.mock.calls[0][0]('myId');
69
       eventRegistry.componentDidDisappear.mock.calls[0][0]('myId');
69
       eventRegistry.componentDidDisappear.mock.calls[0][0]('myId');
70
-      eventRegistry.onNavigationInteraction.mock.calls[0][0]('myId', {});
70
+      eventRegistry.onNavigationButtonPressed.mock.calls[0][0]('myId', {});
71
     }).not.toThrow();
71
     }).not.toThrow();
72
   });
72
   });
73
 });
73
 });

+ 6
- 5
lib/src/events/ComponentEventsRegistry.ts View File

5
   constructor(private eventsRegistry: EventsRegistry, private store: Store) {
5
   constructor(private eventsRegistry: EventsRegistry, private store: Store) {
6
     this.componentDidAppear = this.componentDidAppear.bind(this);
6
     this.componentDidAppear = this.componentDidAppear.bind(this);
7
     this.componentDidDisappear = this.componentDidDisappear.bind(this);
7
     this.componentDidDisappear = this.componentDidDisappear.bind(this);
8
-    this.onNavigationInteraction = this.onNavigationInteraction.bind(this);
8
+    this.onNavigationButtonPressed = this.onNavigationButtonPressed.bind(this);
9
   }
9
   }
10
 
10
 
11
   public registerForAllComponents(): void {
11
   public registerForAllComponents(): void {
12
     this.eventsRegistry.componentDidAppear(this.componentDidAppear);
12
     this.eventsRegistry.componentDidAppear(this.componentDidAppear);
13
     this.eventsRegistry.componentDidDisappear(this.componentDidDisappear);
13
     this.eventsRegistry.componentDidDisappear(this.componentDidDisappear);
14
-    this.eventsRegistry.onNavigationInteraction(this.onNavigationInteraction);
14
+    this.eventsRegistry.onNavigationButtonPressed(this.onNavigationButtonPressed);
15
   }
15
   }
16
 
16
 
17
   private componentDidAppear(componentId: string) {
17
   private componentDidAppear(componentId: string) {
28
     }
28
     }
29
   }
29
   }
30
 
30
 
31
-  private onNavigationInteraction(componentId: string, params) {
31
+  private onNavigationButtonPressed(componentId: string, buttonId: string) {
32
+    console.log(componentId, buttonId); //tslint:disable-line
32
     const componentRef = this.store.getRefForId(componentId);
33
     const componentRef = this.store.getRefForId(componentId);
33
-    if (componentRef && componentRef.onNavigationInteraction) {
34
-      componentRef.onNavigationInteraction(params);
34
+    if (componentRef && componentRef.onNavigationButtonPressed) {
35
+      componentRef.onNavigationButtonPressed(buttonId);
35
     }
36
     }
36
   }
37
   }
37
 }
38
 }

+ 5
- 5
lib/src/events/EventsRegistry.test.ts View File

46
     expect(mockNativeEventsReceiver.registerComponentDidDisappear).toHaveBeenCalledWith(cb);
46
     expect(mockNativeEventsReceiver.registerComponentDidDisappear).toHaveBeenCalledWith(cb);
47
   });
47
   });
48
 
48
 
49
-  it('exposes onNavigationInteraction event', () => {
49
+  it('exposes onNavigationButtonPressed event', () => {
50
     const subscription = {};
50
     const subscription = {};
51
     const cb = jest.fn();
51
     const cb = jest.fn();
52
-    mockNativeEventsReceiver.registerOnNavigationInteraction.mockReturnValueOnce(subscription);
52
+    mockNativeEventsReceiver.registerOnNavigationButtonPressed.mockReturnValueOnce(subscription);
53
 
53
 
54
-    const result = uut.onNavigationInteraction(cb);
54
+    const result = uut.onNavigationButtonPressed(cb);
55
 
55
 
56
     expect(result).toBe(subscription);
56
     expect(result).toBe(subscription);
57
-    expect(mockNativeEventsReceiver.registerOnNavigationInteraction).toHaveBeenCalledTimes(1);
58
-    expect(mockNativeEventsReceiver.registerOnNavigationInteraction).toHaveBeenCalledWith(cb);
57
+    expect(mockNativeEventsReceiver.registerOnNavigationButtonPressed).toHaveBeenCalledTimes(1);
58
+    expect(mockNativeEventsReceiver.registerOnNavigationButtonPressed).toHaveBeenCalledWith(cb);
59
   });
59
   });
60
 });
60
 });

+ 2
- 2
lib/src/events/EventsRegistry.ts View File

19
     return this.nativeEventsReceiver.registerComponentDidDisappear(callback);
19
     return this.nativeEventsReceiver.registerComponentDidDisappear(callback);
20
   }
20
   }
21
 
21
 
22
-  public onNavigationInteraction(callback: (componentId: string, params) => void): EventSubscription {
23
-    return this.nativeEventsReceiver.registerOnNavigationInteraction(callback);
22
+  public onNavigationButtonPressed(callback: (componentId: string, buttonId: string) => void): EventSubscription {
23
+    return this.nativeEventsReceiver.registerOnNavigationButtonPressed(callback);
24
   }
24
   }
25
 }
25
 }

+ 2
- 2
playground/src/app.js View File

22
 
22
 
23
 function start() {
23
 function start() {
24
   registerScreens();
24
   registerScreens();
25
-  Navigation.events().appLaunched(() => {
25
+  Navigation.events().onAppLaunched(() => {
26
     Navigation.setDefaultOptions({
26
     Navigation.setDefaultOptions({
27
       _animations: {
27
       _animations: {
28
         push: {
28
         push: {
46
             interpolation: 'decelerate',
46
             interpolation: 'decelerate',
47
           }
47
           }
48
         },
48
         },
49
-        pop : {
49
+        pop: {
50
           rotationY: {
50
           rotationY: {
51
             from: 0,
51
             from: 0,
52
             to: -360,
52
             to: -360,

+ 2
- 2
playground/src/screens/LifecycleScreen.js View File

15
     };
15
     };
16
   }
16
   }
17
 
17
 
18
-  didAppear() {
18
+  componentDidAppear() {
19
     this.setState({ text: 'didAppear' });
19
     this.setState({ text: 'didAppear' });
20
   }
20
   }
21
 
21
 
22
-  didDisappear() {
22
+  componentDidDisappear() {
23
     alert('didDisappear'); // eslint-disable-line no-alert
23
     alert('didDisappear'); // eslint-disable-line no-alert
24
   }
24
   }
25
 
25
 

+ 7
- 2
playground/src/screens/StaticLifecycleOverlay.js View File

10
       text: 'nothing yet',
10
       text: 'nothing yet',
11
       events: []
11
       events: []
12
     };
12
     };
13
-    Navigation.events().componentLifecycle(({ event, componentName, componentId }) => {
13
+    Navigation.events().componentDidAppear((componentId, componentName) => {
14
       this.setState({
14
       this.setState({
15
-        events: [...this.state.events, { event, componentName, componentId }]
15
+        events: [...this.state.events, { event: 'componentDidAppear', componentId, componentName }]
16
+      });
17
+    });
18
+    Navigation.events().componentDidDisappear((componentId, componentName) => {
19
+      this.setState({
20
+        events: [...this.state.events, { event: 'componentDidDisappear', componentId, componentName }]
16
       });
21
       });
17
     });
22
     });
18
   }
23
   }