Add more code examples and tests for Detox (gusgard#98)

* Update Readme and add more examples for tests * rename variables
wilav-dev · Jan 9, 2021 · 6061b28 · 6061b28
1 parent eacdb4c
commit 6061b28
Show file tree

Hide file tree

Showing 8 changed files with 250 additions and 110 deletions.
diff --git a/README.md b/README.md
@@ -26,11 +26,11 @@ Version 2.x was re-implemented using React Hooks so it only works with version 0
 
 Version 3.x was re-implemented using Typescript
 
-| react-native-swiper-flatlist | react-native | Detox tests                                                                                                                                                       |
-| ---------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| 1.x                          | <= 0.58      | [![Build Status](https://travis-ci.org/gusgard/react-native-swiper-flatlist.svg?branch=v1)](https://travis-ci.org/github/gusgard/react-native-swiper-flatlist/builds/565267550)           |
-| 2.x                          | >= 0.59      | [![Build Status](https://travis-ci.org/gusgard/react-native-swiper-flatlist.svg?branch=v1)](https://travis-ci.org/github/gusgard/react-native-swiper-flatlist/builds/749156790)           |
-| 3.x                          | >= 0.59      | [![Build Status](https://app.bitrise.io/app/dfeb47a453df37dd/status.svg?token=54NHsU_G5kGTSZpdEejqLA&branch=master)](https://app.bitrise.io/app/dfeb47a453df37dd) |
+| react-native-swiper-flatlist | react-native | Detox tests                                                                                                                                                                     |
+| ---------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 1.x                          | <= 0.58      | [![Build Status](https://travis-ci.org/gusgard/react-native-swiper-flatlist.svg?branch=v1)](https://travis-ci.org/github/gusgard/react-native-swiper-flatlist/builds/565267550) |
+| 2.x                          | >= 0.59      | [![Build Status](https://travis-ci.org/gusgard/react-native-swiper-flatlist.svg?branch=v1)](https://travis-ci.org/github/gusgard/react-native-swiper-flatlist/builds/749156790) |
+| 3.x                          | >= 0.59      | [![Build Status](https://app.bitrise.io/app/dfeb47a453df37dd/status.svg?token=54NHsU_G5kGTSZpdEejqLA&branch=master)](https://app.bitrise.io/app/dfeb47a453df37dd)               |
 
 ## Examples
 
@@ -44,54 +44,82 @@ Version 3.x was re-implemented using Typescript
 
 ### Code
 
+Using `renderItems` and `data`, [try me on Expo](https://snack.expo.io/@gusgard/react-native-swiper-flatlist-simple-with-renderitems-and-data)
+
 ```jsx
 import React from 'react';
-import { Text, Dimensions, Image, StyleSheet, View } from 'react-native';
-
+import { Text, Dimensions, StyleSheet, View } from 'react-native';
 import { SwiperFlatList } from 'react-native-swiper-flatlist';
 
-const App = () => {
-  return (
-    <View style={styles.container}>
-      <SwiperFlatList autoplay autoplayDelay={2} autoplayLoop index={2} showPagination>
-        <View style={[styles.child, { backgroundColor: 'tomato' }]}>
-          <Text style={styles.text}>1</Text>
-        </View>
-        <View style={[styles.child, { backgroundColor: 'thistle' }]}>
-          <Text style={styles.text}>2</Text>
-        </View>
-        <View style={[styles.child, { backgroundColor: 'skyblue' }]}>
-          <Text style={styles.text}>3</Text>
-        </View>
-        <View style={[styles.child, { backgroundColor: 'teal' }]}>
-          <Text style={styles.text}>4</Text>
+const colors = ['tomato', 'thistle', 'skyblue', 'teal'];
+
+const App = () => (
+  <View style={styles.container}>
+    <SwiperFlatList
+      autoplay
+      autoplayDelay={2}
+      autoplayLoop
+      index={2}
+      showPagination
+      data={colors}
+      renderItem={({ item }) => (
+        <View style={[styles.child, { backgroundColor: item }]}>
+          <Text style={styles.text}>{item}</Text>
         </View>
-      </SwiperFlatList>
-    </View>
-  );
-};
+      )}
+    />
+  </View>
+);
 
-const { width, height } = Dimensions.get('window');
+const { width } = Dimensions.get('window');
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: 'white' },
+  child: { width, justifyContent: 'center' },
+  text: { fontSize: width * 0.5, textAlign: 'center' },
+});
+
+export default App;
+```
+
+Using `children`, [try me on Expo](https://snack.expo.io/@gusgard/react-native-swiper-flatlist-simple-with-children)
+
+```jsx
+import React from 'react';
+import { Text, Dimensions, StyleSheet, View } from 'react-native';
+import { SwiperFlatList } from 'react-native-swiper-flatlist';
+
+const App = () => (
+  <View style={styles.container}>
+    <SwiperFlatList autoplay autoplayDelay={2} autoplayLoop index={2} showPagination>
+      <View style={[styles.child, { backgroundColor: 'tomato' }]}>
+        <Text style={styles.text}>1</Text>
+      </View>
+      <View style={[styles.child, { backgroundColor: 'thistle' }]}>
+        <Text style={styles.text}>2</Text>
+      </View>
+      <View style={[styles.child, { backgroundColor: 'skyblue' }]}>
+        <Text style={styles.text}>3</Text>
+      </View>
+      <View style={[styles.child, { backgroundColor: 'teal' }]}>
+        <Text style={styles.text}>4</Text>
+      </View>
+    </SwiperFlatList>
+  </View>
+);
+
+const { width } = Dimensions.get('window');
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 0.5,
-    backgroundColor: 'white',
-  },
-  child: {
-    height: height * 0.5,
-    width,
-    justifyContent: 'center',
-  },
-  text: {
-    fontSize: width * 0.5,
-    textAlign: 'center',
-  },
+  container: { flex: 1, backgroundColor: 'white' },
+  child: { width, justifyContent: 'center' },
+  text: { fontSize: width * 0.5, textAlign: 'center' },
 });
 
 export default App;
 ```
 
+### Example project with Detox tests
+
 [Code example](./example/README.md)
 
 ## Props

diff --git a/example/.eslintrc.js b/example/.eslintrc.js
@@ -6,4 +6,9 @@ module.exports = {
     rules: {
     'react-native/no-inline-styles': OFF,
   },
+  globals: {
+    describe: false,
+    it: false,
+    beforeEach: false,
+  },
 };
diff --git a/example/README.md b/example/README.md
@@ -15,4 +15,4 @@ For an Android device `yarn android`
 For an iOS device `yarn ios`
 
 
-"react-native-swiper-flatlist": "git+ssh://[email protected]:gusgard/react-native-swiper-flatlist.git#2035e86de1b68ff9ae51d19437501c558ff5421d"
+<!-- "react-native-swiper-flatlist": "git+ssh://[email protected]:gusgard/react-native-swiper-flatlist.git#2035e86de1b68ff9ae51d19437501c558ff5421d" -->
diff --git a/example/e2e/firstTest.e2e.js b/example/e2e/firstTest.e2e.js
@@ -1,28 +1,28 @@
-const { device, expect, element, by, waitFor } = require('detox');
+const { device, expect, element, by } = require('detox');
 
 const TEXT_IN_SCREENS = {
-  ZERO: '0 - Go to last index',
-  ONE: '1 - Press to get the previous index',
-  TWO: '2 - Press to get the current index',
-  THREE: '3 - Go to the second index',
-  FOURTH: '4 - Go to first index',
+  zero: '0 - Go to last index',
+  one: '1 - Press to get the previous index',
+  two: '2 - Press to get the current index',
+  three: '3 - Go to the second index',
+  fourth: '4 - Go to first index',
 };
 const SCREENS = {
-  ZERO: 'container_swiper_screen_0',
-  ONE: 'container_swiper_screen_1',
-  TWO: 'container_swiper_screen_2',
-  THREE: 'container_swiper_screen_3',
-  FOURTH: 'container_swiper_screen_4',
+  zero: 'container_swiper_screen_0',
+  one: 'container_swiper_screen_1',
+  two: 'container_swiper_screen_2',
+  three: 'container_swiper_screen_3',
+  fourth: 'container_swiper_screen_4',
 };
 const PAGINATION = {
-  ZERO: 'container_swiper_pagination_0',
-  ONE: 'container_swiper_pagination_1',
-  TWO: 'container_swiper_pagination_2',
-  THREE: 'container_swiper_pagination_3',
-  FOURTH: 'container_swiper_pagination_4',
+  zero: 'container_swiper_pagination_0',
+  one: 'container_swiper_pagination_1',
+  two: 'container_swiper_pagination_2',
+  three: 'container_swiper_pagination_3',
+  fourth: 'container_swiper_pagination_4',
 };
 
-describe('Example', () => {
+describe('example with children', () => {
   beforeEach(async () => {
     await device.reloadReactNative();
   });
@@ -46,78 +46,78 @@ describe('Example', () => {
   });
 
   it('should tap pagination', async () => {
-    await element(by.id(PAGINATION.ZERO)).tap();
-    await expect(element(by.text(TEXT_IN_SCREENS.ZERO))).toBeVisible();
+    await element(by.id(PAGINATION.zero)).tap();
+    await expect(element(by.text(TEXT_IN_SCREENS.zero))).toBeVisible();
 
-    await element(by.id(PAGINATION.ONE)).tap();
-    await expect(element(by.text(TEXT_IN_SCREENS.ONE))).toBeVisible();
+    await element(by.id(PAGINATION.one)).tap();
+    await expect(element(by.text(TEXT_IN_SCREENS.one))).toBeVisible();
 
-    await element(by.id(PAGINATION.TWO)).tap();
-    await expect(element(by.text(TEXT_IN_SCREENS.TWO))).toBeVisible();
+    await element(by.id(PAGINATION.two)).tap();
+    await expect(element(by.text(TEXT_IN_SCREENS.two))).toBeVisible();
 
-    await element(by.id(PAGINATION.THREE)).tap();
-    await expect(element(by.text(TEXT_IN_SCREENS.THREE))).toBeVisible();
+    await element(by.id(PAGINATION.three)).tap();
+    await expect(element(by.text(TEXT_IN_SCREENS.three))).toBeVisible();
 
-    await element(by.id(PAGINATION.FOURTH)).tap();
-    await expect(element(by.text(TEXT_IN_SCREENS.FOURTH))).toBeVisible();
+    await element(by.id(PAGINATION.fourth)).tap();
+    await expect(element(by.text(TEXT_IN_SCREENS.fourth))).toBeVisible();
   });
 
   it('should tap screen 0 - goToLastIndex', async () => {
-    await element(by.id(PAGINATION.ZERO)).tap();
-    await element(by.id(SCREENS.ZERO)).tap();
-    await expect(element(by.text(TEXT_IN_SCREENS.FOURTH))).toBeVisible();
+    await element(by.id(PAGINATION.zero)).tap();
+    await element(by.id(SCREENS.zero)).tap();
+    await expect(element(by.text(TEXT_IN_SCREENS.fourth))).toBeVisible();
   });
   it('should tap screen 1 - getPrevIndex', async () => {
     // getPrevIndex 0
-    await element(by.id(PAGINATION.ONE)).tap();
-    await element(by.id(SCREENS.ONE)).tap();
+    await element(by.id(PAGINATION.one)).tap();
+    await element(by.id(SCREENS.one)).tap();
     await expect(element(by.text('the previous index is 0'))).toBeVisible();
     await element(by.label('OK')).atIndex(0).tap();
-    await expect(element(by.text(TEXT_IN_SCREENS.ONE))).toBeVisible();
+    await expect(element(by.text(TEXT_IN_SCREENS.one))).toBeVisible();
 
     // getPrevIndex 2
-    await element(by.id(PAGINATION.TWO)).tap();
-    await element(by.id(PAGINATION.ONE)).tap();
-    await element(by.id(SCREENS.ONE)).tap();
+    await element(by.id(PAGINATION.two)).tap();
+    await element(by.id(PAGINATION.one)).tap();
+    await element(by.id(SCREENS.one)).tap();
     await expect(element(by.text('the previous index is 2'))).toBeVisible();
     await element(by.label('OK')).atIndex(0).tap();
-    await expect(element(by.text(TEXT_IN_SCREENS.ONE))).toBeVisible();
+    await expect(element(by.text(TEXT_IN_SCREENS.one))).toBeVisible();
 
     // getPrevIndex 3
-    await element(by.id(PAGINATION.THREE)).tap();
-    await element(by.id(PAGINATION.ONE)).tap();
-    await element(by.id(SCREENS.ONE)).tap();
+    await element(by.id(PAGINATION.three)).tap();
+    await element(by.id(PAGINATION.one)).tap();
+    await element(by.id(SCREENS.one)).tap();
     await expect(element(by.text('the previous index is 3'))).toBeVisible();
     await element(by.label('OK')).atIndex(0).tap();
-    await expect(element(by.text(TEXT_IN_SCREENS.ONE))).toBeVisible();
+    await expect(element(by.text(TEXT_IN_SCREENS.one))).toBeVisible();
 
     // getPrevIndex 4
-    await element(by.id(PAGINATION.FOURTH)).tap();
-    await element(by.id(PAGINATION.ONE)).tap();
-    await element(by.id(SCREENS.ONE)).tap();
+    await element(by.id(PAGINATION.fourth)).tap();
+    await element(by.id(PAGINATION.one)).tap();
+    await element(by.id(SCREENS.one)).tap();
     await expect(element(by.text('the previous index is 4'))).toBeVisible();
     await element(by.label('OK')).atIndex(0).tap();
-    await expect(element(by.text(TEXT_IN_SCREENS.ONE))).toBeVisible();
+    await expect(element(by.text(TEXT_IN_SCREENS.one))).toBeVisible();
   });
 
   it('should tap screen 2 - getCurrentIndex', async () => {
-    await element(by.id(PAGINATION.TWO)).tap();
-    await element(by.id(SCREENS.TWO)).tap();
+    await element(by.id(PAGINATION.two)).tap();
+    await element(by.id(SCREENS.two)).tap();
     await expect(element(by.text('the current index is 2'))).toBeVisible();
     await element(by.label('OK')).atIndex(0).tap();
-    await expect(element(by.text(TEXT_IN_SCREENS.TWO))).toBeVisible();
+    await expect(element(by.text(TEXT_IN_SCREENS.two))).toBeVisible();
   });
 
   it('should tap screen 3 - scrollToIndex', async () => {
-    await element(by.id(PAGINATION.THREE)).tap();
-    await element(by.id(SCREENS.THREE)).tap();
-    await expect(element(by.text(TEXT_IN_SCREENS.ONE))).toBeVisible();
+    await element(by.id(PAGINATION.three)).tap();
+    await element(by.id(SCREENS.three)).tap();
+    await expect(element(by.text(TEXT_IN_SCREENS.one))).toBeVisible();
   });
 
   it('should tap screen 4 - goToFirstIndex', async () => {
-    await element(by.id(PAGINATION.FOURTH)).tap();
-    await element(by.id(SCREENS.FOURTH)).tap();
-    await expect(element(by.text(TEXT_IN_SCREENS.ZERO))).toBeVisible();
+    await element(by.id(PAGINATION.fourth)).tap();
+    await element(by.id(SCREENS.fourth)).tap();
+    await expect(element(by.text(TEXT_IN_SCREENS.zero))).toBeVisible();
   });
 
   // https://github.com/wix/Detox/blob/master/docs/APIRef.ActionsOnElement.md#swipedirection-speed-percentage

diff --git a/example/e2e/renderItems.e2e.js b/example/e2e/renderItems.e2e.js
@@ -0,0 +1,84 @@
+const { device, expect, element, by } = require('detox');
+
+// const TEXT_IN_SCREENS = {
+//   zero: 'Item at index 0',
+//   one: 'Item at index 1',
+//   two: 'Item at index 2',
+//   three: 'Item at index 3',
+//   fourth: 'Item at index 4',
+// };
+const SCREENS = {
+  zero: 'container_swiper_renderItem_screen_0',
+  one: 'container_swiper_renderItem_screen_1',
+  two: 'container_swiper_renderItem_screen_2',
+  three: 'container_swiper_renderItem_screen_3',
+  fourth: 'container_swiper_renderItem_screen_4',
+};
+// const PAGINATION = {
+//   zero: 'container_swiper_renderItem_pagination_0',
+//   one: 'container_swiper_renderItem_pagination_1',
+//   two: 'container_swiper_renderItem_pagination_2',
+//   three: 'container_swiper_renderItem_pagination_3',
+//   fourth: 'container_swiper_renderItem_pagination_4',
+// };
+
+const DELAY = 2 * 1000;
+
+describe('example with renderItems and data', () => {
+  beforeEach(async () => {
+    await device.reloadReactNative();
+    // TODO: add menu with steps!
+    // await element(by.id('renderItem')).tap();
+  });
+
+  it('should see screen', async () => {
+    await expect(element(by.id('container_swiper_renderItem'))).toBeVisible();
+  });
+
+  it('should execute autoplay every 2.0s', async () => {
+    // 0s => screen with zero
+    await expect(element(by.id(SCREENS.zero))).toBeVisible();
+    await expect(element(by.id(SCREENS.one))).toBeNotVisible();
+    await expect(element(by.id(SCREENS.two))).toBeNotVisible();
+    await expect(element(by.id(SCREENS.three))).toBeNotVisible();
+    await expect(element(by.id(SCREENS.fourth))).toBeNotVisible();
+
+    // after 2s => screen with one
+    await new Promise((_) => setTimeout(_, DELAY));
+
+    await expect(element(by.id(SCREENS.zero))).toBeNotVisible();
+    await expect(element(by.id(SCREENS.one))).toBeVisible();
+    await expect(element(by.id(SCREENS.two))).toBeNotVisible();
+    await expect(element(by.id(SCREENS.three))).toBeNotVisible();
+    await expect(element(by.id(SCREENS.fourth))).toBeNotVisible();
+
+    // after 4s => screen with two
+    await new Promise((_) => setTimeout(_, DELAY));
+
+    await expect(element(by.id(SCREENS.zero))).toBeNotVisible();
+    await expect(element(by.id(SCREENS.one))).toBeNotVisible();
+    await expect(element(by.id(SCREENS.two))).toBeVisible();
+    await expect(element(by.id(SCREENS.three))).toBeNotVisible();
+    await expect(element(by.id(SCREENS.fourth))).toBeNotVisible();
+
+    // after 6s => screen with three
+    await new Promise((_) => setTimeout(_, DELAY));
+
+    await expect(element(by.id(SCREENS.zero))).toBeNotVisible();
+    await expect(element(by.id(SCREENS.one))).toBeNotVisible();
+    await expect(element(by.id(SCREENS.two))).toBeNotVisible();
+    await expect(element(by.id(SCREENS.three))).toBeVisible();
+    await expect(element(by.id(SCREENS.fourth))).toBeNotVisible();
+
+    // after 8s => screen with fourth
+    await new Promise((_) => setTimeout(_, DELAY));
+
+    await expect(element(by.id(SCREENS.zero))).toBeNotVisible();
+    await expect(element(by.id(SCREENS.one))).toBeNotVisible();
+    await expect(element(by.id(SCREENS.two))).toBeNotVisible();
+    await expect(element(by.id(SCREENS.three))).toBeNotVisible();
+    await expect(element(by.id(SCREENS.fourth))).toBeVisible();
+  });
+
+  // https://github.com/wix/Detox/blob/master/docs/APIRef.ActionsOnElement.md#swipedirection-speed-percentage
+});
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,4 +15,4 @@ For an Android device `yarn android`
		For an iOS device `yarn ios`


		"react-native-swiper-flatlist": "git+ssh://[email protected]:gusgard/react-native-swiper-flatlist.git#2035e86de1b68ff9ae51d19437501c558ff5421d"
		<!-- "react-native-swiper-flatlist": "git+ssh://[email protected]:gusgard/react-native-swiper-flatlist.git#2035e86de1b68ff9ae51d19437501c558ff5421d" -->