iOS(Test App): write failed detox tests (to reproduce #2834).

Failed test: `scroll interactions -> should not be intractable when overlay is shown`.
wix · Nov 29, 2021 · f33927a · f33927a
1 parent d7961a9
commit f33927a
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 3 deletions.
diff --git a/detox/test/e2e/35.overlay.test.js b/detox/test/e2e/35.overlay.test.js
@@ -0,0 +1,46 @@
+const { expectToThrow } = require('./utils/custom-expects');
+
+describe(':ios: Overlay', () => {
+  let showOverlayButton;
+  let verticalScrollView;
+
+  beforeEach(async () => {
+    await device.reloadReactNative();
+    await device.launchApp({newInstance: true});
+
+    await element(by.text('Overlay')).tap();
+
+    showOverlayButton = await element(by.id('ShowOverlayButton'));
+    await expect(showOverlayButton).toBeVisible();
+
+    verticalScrollView = await element(by.id('VerticalScrollView'));
+  });
+
+  describe('button', () => {
+    it('should be visible when overlay is not shown', async () => {
+      await expect(verticalScrollView).toBeVisible();
+    });
+
+    it('should not be visible when overlay is not shown', async () => {
+      await showOverlayButton.tap();
+      await expect(verticalScrollView).not.toBeVisible();
+    });
+
+    it('should not be intractable when overlay is shown', async () => {
+      await showOverlayButton.tap();
+      await expectToThrow(() => showOverlayButton.tap());
+    });
+  });
+
+  describe('scroll interactions', () => {
+    it('should be intractable when overlay is not shown', async () => {
+      await verticalScrollView.scrollTo('bottom');
+      await expect(showOverlayButton).not.toBeVisible();
+    });
+
+    it('should not be intractable when overlay is shown', async () => {
+      await showOverlayButton.tap();
+      await expectToThrow(() => verticalScrollView.scrollTo('bottom'));
+    });
+  });
+});
diff --git a/detox/test/src/Screens/OverlayScreen.js b/detox/test/src/Screens/OverlayScreen.js
@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+import { View, ScrollView, TouchableOpacity, StyleSheet, Text, NativeModules, Dimensions } from 'react-native';
+
+const { NativeModule } = NativeModules;
+
+export default class OverlayScreen extends Component {
+  render() {
+    return (
+      <ScrollView style={styles.container} testID='VerticalScrollView'>
+        <TouchableOpacity onPress={() => NativeModule.presentOverlayWindow()} style={styles.button} testID='ShowOverlayButton'>
+          <Text style={styles.text}>Show Overlay</Text>
+        </TouchableOpacity>
+
+        <View style={styles.item}><Text style={styles.itemText}>Text1</Text></View>
+        <View style={styles.item}><Text style={styles.itemText}>Text2</Text></View>
+        <View style={styles.item}><Text style={styles.itemText}>Text3</Text></View>
+        <View style={styles.item}><Text style={styles.itemText}>Text4</Text></View>
+        <View style={styles.item}><Text style={styles.itemText}>Text5</Text></View>
+        <View style={styles.item}><Text style={styles.itemText}>Text6</Text></View>
+        <View style={styles.item}><Text style={styles.itemText}>Text7</Text></View>
+        <View style={styles.item}><Text style={styles.itemText}>Text8</Text></View>
+        <View style={styles.item}><Text style={styles.itemText}>Text9</Text></View>
+        <View style={styles.item}><Text style={styles.itemText}>Text10</Text></View>
+      </ScrollView>
+    );
+  }
+}
+
+const { height } = Dimensions.get('window');
+const itemHeight = height / 10 + 50;
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  button: {
+    backgroundColor: '#ffd9d9',
+    height: itemHeight,
+    justifyContent: "center",
+    alignItems: "center",
+    margin: 10
+  },
+  text: {
+    fontSize: 18,
+    color: '#000000',
+    textAlign: 'center'
+  },
+  item: {
+    height: itemHeight,
+    backgroundColor: '#d9d9ff',
+    justifyContent: "center",
+    alignItems: "center",
+    margin: 10
+  },
+  itemText: {
+    fontSize: 18,
+    color: '#525252',
+    textAlign: 'center'
+  }
+});
diff --git a/detox/test/src/Screens/index.js b/detox/test/src/Screens/index.js
@@ -21,6 +21,7 @@ import LaunchArgsScreen from './LaunchArgsScreen';
 import LaunchNotificationScreen from './LaunchNotificationScreen';
 import PickerViewScreen from './PickerViewScreen';
 import DeviceScreen from './DeviceScreen';
+import OverlayScreen from './OverlayScreen';
 import ElementScreenshotScreen from './ElementScreenshotScreen';
 import VirtualizedListStressScreen from './VirtualizedListStressScreen';
 import WebViewScreen from './WebViewScreen';
@@ -52,6 +53,7 @@ export {
   LaunchArgsScreen,
   LaunchNotificationScreen,
   DeviceScreen,
+  OverlayScreen,
   ElementScreenshotScreen,
   WebViewScreen,
   VirtualizedListStressScreen,

diff --git a/detox/test/src/app.js b/detox/test/src/app.js
@@ -105,7 +105,7 @@ class example extends Component {
         {this.renderScreenButton('Matchers', Screens.MatchersScreen)}
         {this.renderScreenButton('Actions', Screens.ActionsScreen)}
         {this.renderScreenButton('Visibility Expectation', Screens.VisibilityExpectationScreen)}
-        {!isAndroid && this.renderScreenButton('Visibility Debug Artifacts', Screens.VisibilityScreen)}
+        {isIos && this.renderScreenButton('Visibility Debug Artifacts', Screens.VisibilityScreen)}
         {this.renderScreenButton('Integrative Actions', Screens.IntegActionsScreen)}
         {this.renderScreenButton('FS Scroll Actions', Screens.ScrollActionsScreen)}
         {this.renderScreenButton('Assertions', Screens.AssertionsScreen)}
@@ -118,9 +118,10 @@ class example extends Component {
         {this.renderScreenButton('Network', Screens.NetworkScreen)}
         {this.renderAnimationScreenButtons()}
         {this.renderScreenButton('Device', Screens.DeviceScreen)}
+        {isIos && this.renderScreenButton('Overlay', Screens.OverlayScreen)}
         {this.renderScreenButton('Location', Screens.LocationScreen)}
-        {!isAndroid && this.renderScreenButton('DatePicker', Screens.DatePickerScreen)}
-        {!isAndroid && this.renderScreenButton('Picker', Screens.PickerViewScreen)}
+        {isIos && this.renderScreenButton('DatePicker', Screens.DatePickerScreen)}
+        {isIos && this.renderScreenButton('Picker', Screens.PickerViewScreen)}
         {isAndroid && this.renderScreenButton('WebView', Screens.WebViewScreen)}
         {this.renderScreenButton('Attributes', Screens.AttributesScreen)}