finish Test432

Author: kligarski

FabricExample/e2e/examplesTests/tests.e2e.ts

@@ -9,19 +9,66 @@ describe('Test432', () => {
     await waitFor(element(by.id('root-screen-tests-Test432')))
     .toBeVisible()
     .whileElement(by.id('root-screen-examples-scrollview'))
-    .scroll(100, 'down', NaN, 0.85);
+    .scroll(600, 'down', NaN, 0.85);
 
     await expect(element(by.id('root-screen-tests-Test432'))).toBeVisible();
     await element(by.id('root-screen-tests-Test432')).tap();
   });
 
+  it('home-square should be fully visible', async () => {
+    await expect(element(by.id('home-square'))).toBeVisible(100);
+  });
+
+  it('squares from details screen should be fully visible', async () => {
+    await element(by.id('go-to-details')).tap();
+    await expect(element(by.id('details-red-square'))).toBeVisible(100);
+
+    await element(by.id('details-toggle-subviews')).tap();
+    // On Android, we need to wait for some elements (e.g. at first, this square is only 25% visible)
+    waitFor(element(by.id('details-green-square'))).toBeVisible(100);
+
+    await element(by.id('details-toggle-subviews')).tap();
+    await expect(element(by.id('details-red-square'))).toBeVisible(100);
+
+    if (device.getPlatform() === 'ios') {
+      await element(by.id('BackButton')).tap();
+    } else {
+      await device.pressBack();
+    }
+
+    await expect(element(by.id('home-square'))).toBeVisible(100);
+  });
+
+  it('squares from info screen should be fully visible', async () => {
+    await element(by.id('go-to-info')).tap();
+    await expect(element(by.id('info-green-square-1'))).toBeVisible(100);
+
+    await element(by.id('info-toggle-subviews')).tap();
+    waitFor(element(by.id('info-green-square-1'))).toBeVisible(100);
+    waitFor(element(by.id('info-green-square-2'))).toBeVisible(100);
+    waitFor(element(by.id('info-red-square'))).toBeVisible(100);
 
-  // home home-square
-  // details details-red-square | click | details-green-square | click | details-red-square | back
-  // info info-green-square-1 | click | info-red-square info-green-square-1 info-green-square-2 | click | info-green-square-1 | back
-  // settings settings-square
-  // za kazdym powrotem do home sprawdzic czarny square
+    await element(by.id('info-toggle-subviews')).tap();
+    waitFor(element(by.id('info-green-square-1'))).toBeVisible(100);
 
+    if (device.getPlatform() === 'ios') {
+      await element(by.id('BackButton')).tap();
+    } else {
+      await device.pressBack();
+    }
 
+    await expect(element(by.id('home-square'))).toBeVisible(100);
+  });
+
+  it('squares from settings screen should be fully visible', async () => {
+    await element(by.id('show-settings')).tap();
+    await expect(element(by.id('settings-square'))).toBeVisible(100);
 
+    if (device.getPlatform() === 'ios') {
+      await element(by.id('settings-text')).swipe('down', 'fast');
+    } else {
+      await device.pressBack();
+    }
+    await expect(element(by.id('home-square'))).toBeVisible(100);
+  });
 });

apps/src/tests/Test432.tsx

@@ -26,14 +26,17 @@ const HomeScreen = ({ navigation }: StackScreenProps<'Home'>) => {
       <Button
         title={'Go to details'}
         onPress={() => navigation.navigate('Details')}
+        testID="go-to-details"
       />
       <Button
         title={'Go to info'}
         onPress={() => navigation.navigate('Info')}
+        testID="go-to-info"
       />
       <Button
         title={'Show settings'}
         onPress={() => navigation.navigate('Settings')}
+        testID="show-settings"
       />
     </View>
   );
@@ -45,23 +48,34 @@ const DetailsScreen = ({ navigation }: StackScreenProps<'Details'>) => {
     navigation.setOptions({
       headerBackVisible: !x,
       headerRight: () =>
-        x ? <Square size={20} color="green" testID="details-green-square" /> : <Square size={10} testID="details-red-square" />,
+        x ? (
+          <Square size={20} color="green" testID="details-green-square" />
+        ) : (
+          <Square size={10} testID="details-red-square" />
+        ),
     });
   }, [navigation, x]);
 
-  return <Button title="Toggle subviews" onPress={() => setX(prev => !prev)} />;
+  return <Button title="Toggle subviews" onPress={() => setX(prev => !prev)} testID='details-toggle-subviews' />;
 };
 
 const SettingsScreen = () => {
-  return <Text>Settings</Text>;
+  return <Text testID='settings-text'>Settings</Text>;
 };
 
 const InfoScreen = ({ navigation }: StackScreenProps<'Info'>) => {
   const [hasLeftItem, setHasLeftItem] = useState(false);
 
   const square1 = (props: { tintColor?: string }) => (
     <View style={{ gap: 8, flexDirection: 'row' }}>
-      {hasLeftItem && <Square {...props} color="green" size={20} testID="info-green-square-2" />}
+      {hasLeftItem && (
+        <Square
+          {...props}
+          color="green"
+          size={20}
+          testID="info-green-square-2"
+        />
+      )}
       <Square {...props} color="green" size={20} testID="info-green-square-1" />
     </View>
   );
@@ -82,6 +96,7 @@ const InfoScreen = ({ navigation }: StackScreenProps<'Info'>) => {
     <Button
       title="Toggle subviews"
       onPress={() => setHasLeftItem(prev => !prev)}
+      testID='info-toggle-subviews'
     />
   );
 };
@@ -95,7 +110,9 @@ const StackNavigator = () => {
         name="Home"
         component={HomeScreen}
         options={{
-          headerRight: () => <Square size={20} color="black" testID="home-square" />,
+          headerRight: () => (
+            <Square size={20} color="black" testID="home-square" />
+          ),
         }}
       />
       <Stack.Screen name="Details" component={DetailsScreen} />

apps/src/tests/index.ts

@@ -5,7 +5,7 @@ export { default as Test111 } from './Test111';     // [E2E skipped]: can't chec
 export { default as Test263 } from './Test263';     // [E2E skipped]: example differs from PR, even if changed the problem still occurs
 export { default as Test349 } from './Test349';     // [E2E skipped]: can't check autofill easily, wrong prop name
 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';
+export { default as Test432 } from './Test432';     // [E2E created]
 export { default as Test528 } from './Test528';
 export { default as Test550 } from './Test550';
 export { default as Test556 } from './Test556';