Browse Source

complex layout e2e

yogevbd 6 years ago
parent
commit
448b367107

+ 22
- 0
e2e/ComplexLayout.test.js View File

@@ -0,0 +1,22 @@
1
+const Utils = require('./Utils');
2
+const testIDs = require('../playground/src/testIDs');
3
+
4
+const { elementByLabel, elementById } = Utils;
5
+
6
+describe('complex layout', () => {
7
+  beforeEach(async () => {
8
+    await device.relaunchApp();
9
+  });
10
+
11
+  it(':ios: shows external component in stack in modal', async () => {
12
+    await elementById(testIDs.COMPLEX_LAYOUT_BUTTON).tap();
13
+    await elementById(testIDs.EXTERNAL_COMPONENT_IN_STACK).tap();
14
+    await expect(elementByLabel('External component in stack')).toBeVisible();
15
+  });
16
+
17
+  it(':ios: shows external component in deep stack in modal', async () => {
18
+    await elementById(testIDs.COMPLEX_LAYOUT_BUTTON).tap();
19
+    await elementById(testIDs.EXTERNAL_COMPONENT_IN_DEEP_STACK).tap();
20
+    await expect(elementByLabel('External component in deep stack')).toBeVisible();
21
+  });
22
+});

+ 85
- 0
playground/src/screens/ComplexLayout.js View File

@@ -0,0 +1,85 @@
1
+const React = require('react');
2
+const { Component } = require('react');
3
+
4
+const { View, Text, Button } = require('react-native');
5
+
6
+const { Navigation } = require('react-native-navigation');
7
+const testIDs = require('../testIDs');
8
+
9
+
10
+class ComplexLayout extends Component {
11
+  constructor(props) {
12
+    super(props);
13
+  }
14
+
15
+  render() {
16
+    return (
17
+      <View style={styles.root}>
18
+        <Text style={styles.h1} testID={testIDs.CENTERED_TEXT_HEADER}>{this.props.text || 'Complex layout screen'}</Text>
19
+        <Button title={'External component in stack'} testID={testIDs.EXTERNAL_COMPONENT_IN_STACK} onPress={() => this.onExternalComponentInStackPressed()} />
20
+        <Button title={'External component in deep stack'} testID={testIDs.EXTERNAL_COMPONENT_IN_DEEP_STACK} onPress={() => this.onExternalComponentInDeepStackPressed()} />
21
+      </View>
22
+    );
23
+  }
24
+
25
+  onExternalComponentInStackPressed() {
26
+    Navigation.showModal({
27
+      stack: {
28
+        children: [{
29
+          externalComponent: {
30
+            name: 'RNNCustomComponent',
31
+            passProps: {
32
+              text: 'External component in stack'
33
+            }
34
+          }
35
+        }]
36
+      }
37
+    });
38
+  }
39
+
40
+  onExternalComponentInDeepStackPressed() {
41
+    Navigation.showModal({
42
+      stack: {
43
+        children: [{
44
+          component: {
45
+            name: 'navigation.playground.TextScreen'
46
+          }
47
+        },
48
+        {
49
+          externalComponent: {
50
+            name: 'RNNCustomComponent',
51
+            passProps: {
52
+              text: 'External component in deep stack'
53
+            }
54
+          }
55
+        }]
56
+      }
57
+    });
58
+  }
59
+}
60
+
61
+module.exports = ComplexLayout;
62
+
63
+const styles = {
64
+  root: {
65
+    flexGrow: 1,
66
+    justifyContent: 'center',
67
+    alignItems: 'center',
68
+    backgroundColor: '#f5fcff'
69
+  },
70
+  h1: {
71
+    fontSize: 24,
72
+    textAlign: 'center',
73
+    margin: 10
74
+  },
75
+  h2: {
76
+    fontSize: 12,
77
+    textAlign: 'center',
78
+    margin: 10
79
+  },
80
+  footer: {
81
+    fontSize: 10,
82
+    color: '#888',
83
+    marginTop: 10
84
+  }
85
+};

+ 9
- 0
playground/src/screens/WelcomeScreen.js View File

@@ -38,6 +38,7 @@ class WelcomeScreen extends Component {
38 38
         <Button title='Show Redbox' testID={testIDs.SHOW_REDBOX_BUTTON} onPress={this.onClickShowRedbox} />
39 39
         <Button title='Orientation' testID={testIDs.ORIENTATION_BUTTON} onPress={this.onClickPushOrientationMenuScreen} />
40 40
         <Button title='Provided Id' testID={testIDs.PROVIDED_ID} onPress={this.onClickProvidedId} />
41
+        <Button title='Complex Layout' testID={testIDs.COMPLEX_LAYOUT_BUTTON} onPress={this.onClickComplexLayout} />
41 42
         <Text style={styles.footer}>{`this.props.componentId = ${this.props.componentId}`}</Text>
42 43
       </View>
43 44
     );
@@ -413,6 +414,14 @@ class WelcomeScreen extends Component {
413 414
       }
414 415
     });
415 416
   }
417
+
418
+  onClickComplexLayout = () => {
419
+    Navigation.showModal({
420
+      component: {
421
+        name: 'navigation.playground.ComplexLayout'
422
+      }
423
+    });
424
+  }
416 425
 }
417 426
 
418 427
 module.exports = WelcomeScreen;

+ 2
- 0
playground/src/screens/index.js View File

@@ -22,6 +22,7 @@ const BackHandlerModalScreen = require('./BackHandlerModalScreen');
22 22
 const CustomTextButton = require('./CustomTextButton');
23 23
 const CustomRoundedButton = require('./CustomRoundedButton');
24 24
 const TopBarBackground = require('./TopBarBackground');
25
+const ComplexLayout = require('./ComplexLayout');
25 26
 
26 27
 function registerScreens() {
27 28
   Navigation.registerComponent(`navigation.playground.CustomTransitionDestination`, () => CustomTransitionDestination);
@@ -44,6 +45,7 @@ function registerScreens() {
44 45
   Navigation.registerComponent('navigation.playground.CustomTopBar', () => CustomTopBar);
45 46
   Navigation.registerComponent('navigation.playground.alert', () => Alert);
46 47
   Navigation.registerComponent('navigation.playground.BackHandlerModalScreen', () => BackHandlerModalScreen);
48
+  Navigation.registerComponent('navigation.playground.ComplexLayout', () => ComplexLayout);
47 49
   Navigation.registerComponent('CustomTextButton', () => CustomTextButton);
48 50
   Navigation.registerComponent('CustomRoundedButton', () => CustomRoundedButton);
49 51
   Navigation.registerComponent('TopBarBackground', () => TopBarBackground);

+ 3
- 0
playground/src/testIDs.js View File

@@ -55,6 +55,9 @@ module.exports = {
55 55
   MODAL_WITH_STACK_BUTTON: `MODAL_WITH_STACK_BUTTON`,
56 56
   CUSTOM_TRANSITION_BUTTON: `CUSTOM_TRANSITION_BUTTON`,
57 57
   PUSH_EXTERNAL_COMPONENT_BUTTON: `PUSH_EXTERNAL_COMPONENT_BUTTON`,
58
+  COMPLEX_LAYOUT_BUTTON: `COMPLEX_LAYOUT_BUTTON`,
59
+  EXTERNAL_COMPONENT_IN_STACK: `EXTERNAL_COMPONENT_IN_STACK`,
60
+  EXTERNAL_COMPONENT_IN_DEEP_STACK: `EXTERNAL_COMPONENT_IN_DEEP_STACK`,
58 61
 
59 62
   // Elements
60 63
   SCROLLVIEW_ELEMENT: `SCROLLVIEW_ELEMENT`,