Add SplitView e2e tests (#6140)

* Add splitView layout screen to the playground app.
* Add splitView e2e tests.

e2e/SplitView.test.js

@@ -0,0 +1,27 @@
+const Utils = require('./Utils');
+const TestIDs = require('../playground/src/testIDs');
+const cocktailsList = require('../playground/src/assets/cocktails').default;
+const { elementByLabel, elementById } = Utils;
+
+describe(':ios: SplitView', () => {
+  beforeEach(async () => {
+    await device.relaunchApp();
+    await elementById(TestIDs.SPLIT_VIEW_BUTTON).tap();
+  });
+
+  it('master screen updates details screen', async () => {
+    const secondCocktail = cocktailsList[1];
+    await elementById(secondCocktail.id).tap();
+    await expect(elementByLabel(secondCocktail.description)).toBeVisible();
+  });
+
+  it('push screen to master screen', async () => {
+    await elementById(TestIDs.PUSH_MASTER_BTN).tap();
+    await expect(elementByLabel('Pushed Screen')).toBeVisible();
+  });
+
+  it('push screen to detail screen', async () => {
+    await elementById(TestIDs.PUSH_DETAILS_BTN).tap();
+    await expect(elementByLabel('Pushed Screen')).toBeVisible();
+  });
+});

e2e/config.json

@@ -2,5 +2,8 @@
   "setupTestFrameworkScriptFile" : "./init.js",
   "testEnvironment": "node",
   "bail": true,
-  "verbose": true
+  "verbose": true,
+  "moduleNameMapper": {
+    ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
+  }
 }

package.json

@@ -90,7 +90,8 @@
     "ts-node": "5.x.x",
     "tslint": "5.x.x",
     "typedoc": "0.x.x",
-    "typescript": "3.2.2"
+    "typescript": "3.2.2",
+    "identity-obj-proxy": "3.0.0"
   },
   "jest": {
     "preset": "react-native",

playground/src/screens/LayoutsScreen.js

@@ -1,4 +1,5 @@
 const React = require('react');
+const { Platform } = require('react-native');
 const Root = require('../components/Root');
 const Button = require('../components/Button')
 const {
@@ -6,7 +7,8 @@ const {
   STACK_BTN,
   BOTTOM_TABS_BTN,
   BOTTOM_TABS,
-  SIDE_MENU_BTN
+  SIDE_MENU_BTN,
+  SPLIT_VIEW_BUTTON
 } = require('../testIDs');
 const Screens = require('./Screens');
 const Navigation = require('../services/Navigation');
@@ -30,6 +32,7 @@ class LayoutsScreen extends React.Component {
         <Button label='Stack' testID={STACK_BTN} onPress={this.stack} />
         <Button label='BottomTabs' testID={BOTTOM_TABS_BTN} onPress={this.bottomTabs} />
         <Button label='SideMenu' testID={SIDE_MENU_BTN} onPress={this.sideMenu} />
+        <Button label='SplitView' testID={SPLIT_VIEW_BUTTON} platform='ios' onPress={this.splitView} />
       </Root>
     );
   }
@@ -78,7 +81,7 @@ class LayoutsScreen extends React.Component {
     }
   });
 
-  onClickSplitView = () => {
+  splitView = () => {
     Navigation.setRoot({
       root: {
         splitView: {
@@ -89,7 +92,7 @@ class LayoutsScreen extends React.Component {
               children: [
                 {
                   component: {
-                    name: 'navigation.playground.WelcomeScreen'
+                    name: Screens.CocktailsListMasterScreen
                   },
                 },
               ]
@@ -101,17 +104,20 @@ class LayoutsScreen extends React.Component {
               children: [
                 {
                   component: {
-                    name: 'navigation.playground.WelcomeScreen'
+                    id: 'DETAILS_COMPONENT_ID',
+                    name: Screens.CocktailDetailsScreen
                   },
                 },
               ]
             }
           },
           options: {
-            displayMode: 'auto',
-            primaryEdge: 'leading',
-            minWidth: 150,
-            maxWidth: 300,
+            layout: {
+              orientation: ['landscape']
+            },
+            splitView: {
+              displayMode: 'visible'
+            }
           },
         },
       },

playground/src/screens/Screens.js

@@ -9,6 +9,7 @@ module.exports = {
   Buttons: 'Buttons',
   CocktailDetailsScreen: 'CocktailDetailsScreen',
   CocktailsListScreen: 'CocktailsListScreen',
+  CocktailsListMasterScreen: 'CocktailsListMasterScreen',
   ContextScreen: 'ContextScreen',
   ExternalComponent: 'ExternalComponent',
   FullScreenModal: 'FullScreenModal',

playground/src/screens/index.js

@@ -11,7 +11,8 @@ const Screens = require('./Screens');
 function registerScreens() {
   Navigation.registerComponent(Screens.Alert, () => require('./Alert'));
   Navigation.registerComponent(Screens.CocktailDetailsScreen, () => require('./sharedElementTransition/CocktailDetailsScreen'));
-  Navigation.registerComponent(Screens.CocktailsListScreen, () => require('./sharedElementTransition/CocktailsList'));
+  Navigation.registerComponent(Screens.CocktailsListScreen, () => require('./sharedElementTransition/CocktailsListScreen'));
+  Navigation.registerComponent(Screens.CocktailsListMasterScreen, () => require('./splitView/CocktailsListMasterScreen'));
   Navigation.registerComponent(Screens.EventsOverlay, () => require('./StaticLifecycleOverlay'));
   Navigation.registerComponent(Screens.EventsScreen, () => require('./StaticEventsScreen'));
   Navigation.registerComponent(Screens.ExternalComponent, () => require('./ExternalComponentScreen'));

playground/src/screens/sharedElementTransition/CocktailDetailsScreen.js

@@ -1,5 +1,11 @@
 const React = require('react');
-const { Image, Platform, SafeAreaView, StyleSheet, Text, View } = require('react-native');
+const { Image, Platform, ScrollView, StyleSheet, Text, View } = require('react-native');
+const {
+  COCKTAILS_DETAILS_HEADER,
+  PUSH_DETAILS_BTN
+} = require('../../testIDs');
+const Screens = require('../Screens');
+const Navigation = require('../../services/Navigation');
 
 class CocktailDetailsScreen extends React.Component {
   static options() {
@@ -14,17 +20,33 @@ class CocktailDetailsScreen extends React.Component {
       }),
       topBar: {
         title: {
-          text: 'Cocktails'
-        }
+          text: 'Cocktail Details'
+        },
+        rightButtons: [{
+          id: 'pushDetails',
+          testID: PUSH_DETAILS_BTN,
+          text: 'push'
+        }]
       }
     }
   }
 
+  constructor(props) {
+    super(props);
+    Navigation.events().bindComponent(this);
+  }
+
+  navigationButtonPressed({buttonId}) {
+    if (buttonId === 'pushDetails') {
+      Navigation.push(this, Screens.Pushed)
+    }
+  }
+
   render() {
     return (
-      <SafeAreaView style={styles.root}>
+      <ScrollView style={styles.root}>
         <View nativeID={'backdrop'} style={[styles.backdrop, { backgroundColor: this.props.color }]}/> 
-        <View style={styles.header}>
+        <View style={styles.header} testID={COCKTAILS_DETAILS_HEADER}>
           <Image
             source={this.props.image}
             nativeID={`image${this.props.id}Dest`}
@@ -37,7 +59,7 @@ class CocktailDetailsScreen extends React.Component {
           style={styles.description}>
           {this.props.description}
         </Text>
-      </SafeAreaView >
+      </ScrollView >
     );
   }
 }

playground/src/screens/sharedElementTransition/CocktailsList.js

@@ -1,165 +0,0 @@
-const React = require('react');
-const { Component } = require('react');
-const { TouchableOpacity, FlatList, View, Image, Text, Platform, StyleSheet } = require('react-native');
-const Navigation = require('../../services/Navigation');
-const { slice } = require('lodash');
-const Screens = require('../Screens')
-const data = require('../../assets/cocktails').default;
-const MULTIPLIER = 1.15
-const LONG_DURATION = 350 * MULTIPLIER
-const SHORT_DURATION = 190 * MULTIPLIER
-
-class CocktailsList extends Component {
-  static options() {
-    return {
-      ...Platform.select({
-        android: {
-          statusBar: {
-            style: 'dark',
-            backgroundColor: 'white'
-          }
-        }
-      }),
-      topBar: {
-        title: {
-          text: 'Cocktails'
-        }
-      }
-    }
-  }
-
-  render() {
-    return (
-      <FlatList
-        style={styles.root}
-        data={data}
-        keyExtractor={this.keyExtractor}
-        ItemSeparatorComponent={this.separatorComponent}
-        renderItem={this.renderItem}
-      />
-    );
-  }
-
-  separatorComponent = () => <View style={styles.separator} />;
-
-  renderItem = ({ item }) => (
-    <TouchableOpacity
-      activeOpacity={0.75}
-      style={styles.itemContainer}
-      onPress={() => Navigation.push(
-        this,
-        {
-          component: {
-            name: Screens.CocktailDetailsScreen,
-            passProps: { ...item },
-            options: {
-              animations: {
-                push: {
-                  content: {
-                    alpha: {
-                      from: 0,
-                      to: 1,
-                      duration: LONG_DURATION
-                    }
-                  },
-                  sharedElementTransitions: [
-                    {
-                      fromId: `image${item.id}`,
-                      toId: `image${item.id}Dest`,
-                      duration: LONG_DURATION
-                    },
-                    {
-                      fromId: `title${item.id}`,
-                      toId: `title${item.id}Dest`,
-                      duration: LONG_DURATION
-                    },
-                    {
-                      fromId: `backdrop${item.id}`,
-                      toId: 'backdrop',
-                      duration: LONG_DURATION
-                    }
-                  ],
-                  elementTransitions: [
-                    {
-                      id: 'description',
-                      alpha: {
-                        from: 0,
-                        duration: SHORT_DURATION
-                      },
-                      translationY: {
-                        from: 16,
-                        duration: SHORT_DURATION
-                      }
-                    }
-                  ]
-                }
-              }
-            }
-          }
-        }
-      )}>
-      <View style={styles.overlayContainer}>
-        <Image
-          source={item.image}
-          nativeID={`image${item.id}`}
-          style={styles.image}
-          resizeMode={'contain'}
-        />
-        <View nativeID={`backdrop${item.id}`} style={[styles.backdrop, { backgroundColor: '#aaaaaa' }]} />
-      </View>
-      <View style={styles.textContainer}>
-        <Text style={styles.title} nativeID={`title${item.id}`}>{item.name}</Text>
-        <View style={{ flexDirection: 'row' }}>
-          <Text style={styles.ingredients}>{slice(item.ingredients, 0, 3).map(i => i.name).join(' • ')}</Text>
-        </View>
-      </View>
-    </TouchableOpacity>
-  )
-
-  keyExtractor = item => item.id;
-}
-module.exports = CocktailsList;
-const SIZE = 150;
-const styles = StyleSheet.create({
-  root: {
-    paddingTop: 16
-  },
-  itemContainer: {
-    backgroundColor: 'white',
-    marginLeft: 16,
-    marginRight: 16,
-    height: SIZE,
-    flexDirection: 'row',
-    padding: 16,
-    elevation: 4
-  },
-  image: {
-    backgroundColor: 'white',
-    height: '100%',
-    width: 118,
-    zIndex: 1,
-  },
-  backdrop: {
-    width: 118,
-    height: 118,
-    backgroundColor: 'green',
-    marginTop: -112,
-    marginLeft: 6
-  },
-  overlayContainer: {
-  },
-  textContainer: {
-    flex: 1,
-    marginLeft: 16,
-  },
-  title: {
-    fontSize: 22
-  },
-  ingredients: {
-    fontSize: 12,
-    marginTop: 8
-  },
-  separator: {
-    height: 16
-  }
-});

playground/src/screens/sharedElementTransition/CocktailsListScreen.js

@@ -0,0 +1,97 @@
+const React = require('react');
+const { Component } = require('react');
+const CocktailsView = require('./CocktailsView')
+const { Platform } = require('react-native');
+const Navigation = require('../../services/Navigation');
+const Screens = require('../Screens')
+const MULTIPLIER = 1.15
+const LONG_DURATION = 350 * MULTIPLIER
+const SHORT_DURATION = 190 * MULTIPLIER
+
+class CocktailsListScreen extends Component {
+  static options() {
+    return {
+      ...Platform.select({
+        android: {
+          statusBar: {
+            style: 'dark',
+            backgroundColor: 'white'
+          }
+        }
+      }),
+      topBar: {
+        title: {
+          text: 'Cocktails'
+        }
+      }
+    }
+  }
+
+  render() {
+    return (
+      <CocktailsView 
+        onItemPress={this.pushCocktailDetails}
+      />
+    );
+  }
+
+  update = (item) => {
+    Navigation.updateProps('DETAILS_COMPONENT_ID', item);
+  }
+
+  pushCocktailDetails = (item) => {
+    Navigation.push(
+      this,
+      {
+        component: {
+          name: Screens.CocktailDetailsScreen,
+          passProps: { ...item },
+          options: {
+            animations: {
+              push: {
+                content: {
+                  alpha: {
+                    from: 0,
+                    to: 1,
+                    duration: LONG_DURATION
+                  }
+                },
+                sharedElementTransitions: [
+                  {
+                    fromId: `image${item.id}`,
+                    toId: `image${item.id}Dest`,
+                    duration: LONG_DURATION
+                  },
+                  {
+                    fromId: `title${item.id}`,
+                    toId: `title${item.id}Dest`,
+                    duration: LONG_DURATION
+                  },
+                  {
+                    fromId: `backdrop${item.id}`,
+                    toId: 'backdrop',
+                    duration: LONG_DURATION
+                  }
+                ],
+                elementTransitions: [
+                  {
+                    id: 'description',
+                    alpha: {
+                      from: 0,
+                      duration: SHORT_DURATION
+                    },
+                    translationY: {
+                      from: 16,
+                      duration: SHORT_DURATION
+                    }
+                  }
+                ]
+              }
+            }
+          }
+        }
+      }
+    )
+  }
+}
+module.exports = CocktailsListScreen;

playground/src/screens/sharedElementTransition/CocktailsView.js

@@ -0,0 +1,94 @@
+const React = require('react');
+const { Component } = require('react');
+const { TouchableOpacity, FlatList, View, Image, Text, StyleSheet } = require('react-native');
+const { slice } = require('lodash');
+const data = require('../../assets/cocktails').default;
+
+class CocktailsView extends Component {
+  render() {
+    return (
+      <FlatList
+        style={styles.root}
+        data={data}
+        keyExtractor={this.keyExtractor}
+        ItemSeparatorComponent={this.separatorComponent}
+        renderItem={this.renderItem}
+      />
+    );
+  }
+
+  separatorComponent = () => <View style={styles.separator} />;
+
+  renderItem = ({ item }) => (
+    <TouchableOpacity
+      activeOpacity={0.75}
+      style={styles.itemContainer}
+      testID={item.id}
+      onPress={() => this.props.onItemPress(item)}
+      onLongPress={() => this.props.onItemLongPress(item)}>
+      <View style={styles.overlayContainer}>
+        <Image
+          source={item.image}
+          nativeID={`image${item.id}`}
+          style={styles.image}
+          resizeMode={'contain'}
+        />
+        <View nativeID={`backdrop${item.id}`} style={[styles.backdrop, { backgroundColor: '#aaaaaa' }]} />
+      </View>
+      <View style={styles.textContainer}>
+        <Text style={styles.title} nativeID={`title${item.id}`}>{item.name}</Text>
+        <View style={{ flexDirection: 'row' }}>
+          <Text style={styles.ingredients}>{slice(item.ingredients, 0, 3).map(i => i.name).join(' • ')}</Text>
+        </View>
+      </View>
+    </TouchableOpacity>
+  )
+
+  keyExtractor = item => item.id;
+}
+
+module.exports = CocktailsView;
+const SIZE = 150;
+const styles = StyleSheet.create({
+  root: {
+    paddingTop: 16
+  },
+  itemContainer: {
+    backgroundColor: 'white',
+    marginLeft: 16,
+    marginRight: 16,
+    height: SIZE,
+    flexDirection: 'row',
+    padding: 16,
+    elevation: 4
+  },
+  image: {
+    backgroundColor: 'white',
+    height: '100%',
+    width: 118,
+    zIndex: 1,
+  },
+  backdrop: {
+    width: 118,
+    height: 118,
+    backgroundColor: 'green',
+    marginTop: -112,
+    marginLeft: 6
+  },
+  overlayContainer: {
+  },
+  textContainer: {
+    flex: 1,
+    marginLeft: 16,
+  },
+  title: {
+    fontSize: 22
+  },
+  ingredients: {
+    fontSize: 12,
+    marginTop: 8
+  },
+  separator: {
+    height: 16
+  }
+});

playground/src/screens/splitView/CocktailsListMasterScreen.js

@@ -0,0 +1,60 @@
+const React = require('react');
+const CocktailsView = require('../sharedElementTransition/CocktailsView')
+const { Platform } = require('react-native');
+const Navigation = require('../../services/Navigation');
+const Screens = require('../Screens');
+const CocktailsListScreen = require('../sharedElementTransition/CocktailsListScreen');
+const {
+  PUSH_MASTER_BTN
+} = require('../../testIDs');
+
+class CocktailsListMasterScreen extends CocktailsListScreen {
+  static options() {
+    return {
+      ...Platform.select({
+        android: {
+          statusBar: {
+            style: 'dark',
+            backgroundColor: 'white'
+          }
+        }
+      }),
+      topBar: {
+        title: {
+          text: 'Cocktails'
+        },
+        rightButtons: [{
+          id: 'pushMaster',
+          testID: PUSH_MASTER_BTN,
+          text: 'push'
+        }]
+      }
+    }
+  }
+
+  constructor(props) {
+    super(props);
+    Navigation.events().bindComponent(this);
+  }
+
+  navigationButtonPressed({buttonId}) {
+    if (buttonId === 'pushMaster') {
+      Navigation.push(this, Screens.Pushed)
+    }
+  }
+
+  render() {
+    return (
+      <CocktailsView 
+        onItemPress={this.updateDetailsScreen}
+        onItemLongPress={this.pushCocktailDetails}
+      />
+    );
+  }
+
+  updateDetailsScreen = (item) => {
+    Navigation.updateProps('DETAILS_COMPONENT_ID', item);
+  }
+}
+
+module.exports = CocktailsListMasterScreen;

playground/src/testIDs.js

@@ -28,6 +28,8 @@ module.exports = {
   EXTERNAL_COMP_SCREEN_HEADER: 'EXTERNAL_COMPONENT_SCREEN_HEADER',
   TOP_BAR: 'TOP_BAR',
   PUSH_BTN: 'PUSH_BUTTON',
+  PUSH_DETAILS_BTN: 'PUSH_DETAILS_BUTTON',
+  PUSH_MASTER_BTN: 'PUSH_MASTER_BUTTON',
   PUSH_SIDE_MENU_BTN: 'PUSH_SIDE_MENU_BTN',
   SHOW_STATIC_EVENTS_SCREEN: 'SHOW_STATIC_EVENTS_SCREEN',
   POP_BTN: 'POP_BUTTON',
@@ -140,6 +142,7 @@ module.exports = {
   GOTO_BUTTONS_SCREEN: 'GOTO_BUTTONS_SCREEN',
   REGISTER_MODAL_DISMISS_EVENT_BTN: 'REGISTER_MODAL_DISMISS_EVENT_BTN',
   HIDE_PREVIOUS_SCREEN_TOP_BAR: 'HIDE_PREVIOUS_SCREEN_TOP_BAR',
+  COCKTAILS_DETAILS_HEADER: 'COCKTAILS_DETAILS_HEADER',
   
   //External Component Buttons
   EXTERNAL_DISMISS_MODAL_BTN: 'EXTERNAL_DISMISS_MODAL_BTN',