test(Fabric): add e2e test for issue 577

FabricExample/e2e/e2e-utils.ts

@@ -0,0 +1 @@
+export const describeIfiOS = device.getPlatform() === 'ios' ? describe : describe.skip;

FabricExample/e2e/examplesTests/tests.e2e.ts → FabricExample/e2e/issuesTests/Test432.e2e.ts

@@ -72,39 +72,3 @@ describe('Test432', () => {
     await expect(element(by.id('home-headerRight'))).toBeVisible(100);
   });
 });
-
-// Detox currently supports orientation only on iOS
-if (device.getPlatform() === 'ios') {
-  describe('Test528', () => {
-    beforeAll(async () => {
-      await device.reloadReactNative();
-    });
-
-    it('Test528 should exist', async () => {
-      await waitFor(element(by.id('root-screen-tests-Test528')))
-        .toBeVisible()
-        .whileElement(by.id('root-screen-examples-scrollview'))
-        .scroll(600, 'down', NaN, 0.85);
-
-      await expect(element(by.id('root-screen-tests-Test528'))).toBeVisible();
-      await element(by.id('root-screen-tests-Test528')).tap();
-    });
-
-    it('headerRight button should be visible after orientation change', async () => {
-      await expect(element(by.text('Custom Button'))).toBeVisible(100);
-      await device.setOrientation('landscape');
-      await expect(element(by.text('Custom Button'))).toBeVisible(100);
-      await device.setOrientation('portrait');
-      await expect(element(by.text('Custom Button'))).toBeVisible(100);
-    });
-
-    it('headerRight button should be visible after coming back from horizontal screen', async () => {
-      await element(by.text('Go to Screen 2')).tap();
-      await device.setOrientation('landscape');
-      await element(by.id('BackButton')).tap();
-      await expect(element(by.text('Custom Button'))).toBeVisible(100);
-      await device.setOrientation('portrait');
-      await expect(element(by.text('Custom Button'))).toBeVisible(100);
-    });
-  });
-}

FabricExample/e2e/issuesTests/Test528.e2e.ts

@@ -0,0 +1,36 @@
+import { device, expect, element, by } from 'detox';
+import { describeIfiOS } from '../e2e-utils';
+
+// Detox currently supports orientation only on iOS
+describeIfiOS('Test528', () => {
+  beforeAll(async () => {
+    await device.reloadReactNative();
+  });
+
+  it('Test528 should exist', async () => {
+    await waitFor(element(by.id('root-screen-tests-Test528')))
+      .toBeVisible()
+      .whileElement(by.id('root-screen-examples-scrollview'))
+      .scroll(600, 'down', NaN, 0.85);
+
+    await expect(element(by.id('root-screen-tests-Test528'))).toBeVisible();
+    await element(by.id('root-screen-tests-Test528')).tap();
+  });
+
+  it('headerRight button should be visible after orientation change', async () => {
+    await expect(element(by.text('Custom Button'))).toBeVisible(100);
+    await device.setOrientation('landscape');
+    await expect(element(by.text('Custom Button'))).toBeVisible(100);
+    await device.setOrientation('portrait');
+    await expect(element(by.text('Custom Button'))).toBeVisible(100);
+  });
+
+  it('headerRight button should be visible after coming back from horizontal screen', async () => {
+    await element(by.text('Go to Screen 2')).tap();
+    await device.setOrientation('landscape');
+    await element(by.id('BackButton')).tap();
+    await expect(element(by.text('Custom Button'))).toBeVisible(100);
+    await device.setOrientation('portrait');
+    await expect(element(by.text('Custom Button'))).toBeVisible(100);
+  });
+});

FabricExample/e2e/issuesTests/Test577.e2e.ts

@@ -0,0 +1,31 @@
+import { device, expect, element, by } from 'detox';
+import { describeIfiOS } from '../e2e-utils';
+
+// Detox currently supports orientation only on iOS
+describeIfiOS('Test577', () => {
+  beforeAll(async () => {
+    await device.reloadReactNative();
+  });
+
+  it('Test577 should exist', async () => {
+    await waitFor(element(by.id('root-screen-tests-Test577')))
+      .toBeVisible()
+      .whileElement(by.id('root-screen-examples-scrollview'))
+      .scroll(600, 'down', NaN, 0.85);
+
+    await expect(element(by.id('root-screen-tests-Test577'))).toBeVisible();
+    await element(by.id('root-screen-tests-Test577')).tap();
+  });
+
+  it('does not display content underneath modal with gesture disabled when attempting to close it', async () => {
+    await element(by.text('Open modal')).tap();
+
+    // Original bug was happening after a few consecutive attempts to close the modal.
+    // See this GIF: https://github.com/software-mansion/react-native-screens/issues/577#issue-666185758
+    // Decided to try it a few times.
+    for (let i = 0; i < 5; ++i) {
+      await element(by.text('Modal')).swipe('down', 'fast');
+      await expect(element(by.text('Open modal'))).not.toBeVisible();
+    }
+  });
+});

apps/src/tests/index.ts

@@ -7,10 +7,10 @@ export { default as Test349 } from './Test349';     // [E2E skipped]: can't chec
 export { default as Test364 } from './Test364';     // [E2E skipped]: tabBarVisible prop doesn't exist anymore, suggested solution is to change navigator hierarchy (proposed in PR and in react-navigation docs)
 export { default as Test432 } from './Test432';     // [E2E created]
 export { default as Test528 } from './Test528';     // [E2E created](iOS): Detox supports changing orientation only on iOS
-export { default as Test550 } from './Test550';
-export { default as Test556 } from './Test556';
-export { default as Test564 } from './Test564';
-export { default as Test577 } from './Test577';
+export { default as Test550 } from './Test550';     // [E2E skipped]: the prop does not work, when fixed we can add the test
+export { default as Test556 } from './Test556';     // [E2E skipped]: can't check flickering nor non-deterministic white screen bug
+export { default as Test564 } from './Test564';     // [E2E skipped]: issue still present
+export { default as Test577 } from './Test577';     // [E2E created](iOS): issue is related to iOS modal
 export { default as Test593 } from './Test593';
 export { default as Test619 } from './Test619';
 export { default as Test624 } from './Test624';