e2e: add FlashList tests

.gitignore

@@ -208,3 +208,7 @@ fixture/ios/**/xcshareddata/WorkspaceSettings.xcsettings
 # Android
 
 fixture/android/*.hprof
+
+# e2e
+
+fixture/e2e/diff

fixture/android/app/src/androidTest/java/com/flatlistpro/DetoxTest.java

@@ -22,8 +22,8 @@ public class DetoxTest {
     @Test
     public void runDetoxTests() {
         DetoxConfig detoxConfig = new DetoxConfig();
-        detoxConfig.idlePolicyConfig.masterTimeoutSec = 90;
-        detoxConfig.idlePolicyConfig.idleResourceTimeoutSec = 60;
+        detoxConfig.idlePolicyConfig.masterTimeoutSec = 120;
+        detoxConfig.idlePolicyConfig.idleResourceTimeoutSec = 90;
         detoxConfig.rnContextLoadTimeoutSec = 180;
 
         Detox.runTests(mActivityRule, detoxConfig);

fixture/android/app/src/main/AndroidManifest.xml

@@ -10,6 +10,7 @@
       android:roundIcon="@mipmap/ic_launcher_round"
       android:allowBackup="false"
       android:theme="@style/AppTheme"
+      android:installLocation="preferExternal"
       android:networkSecurityConfig="@xml/network_security_config">
       <activity
         android:name=".MainActivity"

fixture/e2e/config.json

@@ -1,9 +1,10 @@
 {
-    "maxWorkers": 1,
-    "testEnvironment": "./environment",
-    "testRunner": "jest-circus/runner",
-    "testTimeout": 120000,
-    "testRegex": "\\.e2e\\.js$",
-    "reporters": ["detox/runners/jest/streamlineReporter"],
-    "verbose": true
+  "maxWorkers": 1,
+  "testEnvironment": "./environment",
+  "testRunner": "jest-circus/runner",
+  "testTimeout": 120000,
+  "testRegex": "\\.e2e\\.js$",
+  "reporters": ["detox/runners/jest/streamlineReporter"],
+  "verbose": true,
+  "preset": "react-native"
 }

fixture/e2e/flashList.test.e2e.js

@@ -0,0 +1,56 @@
+import * as path from "path";
+import * as fs from "fs";
+import { Platform } from "react-native";
+import {
+  wipeArtifactsLocation,
+  saveReference,
+  reference,
+} from "../src/Detox/SnapshotLocation";
+
+import {
+  assertSnapshotsEqual,
+  assertSnapshot,
+} from "../src/Detox/SnapshotAsserts";
+
+describe("FlashList", () => {
+  const flashListReferenceTestName = "Twitter with FlashList looks the same";
+
+  beforeAll(async () => {
+    await device.launchApp({ newInstance: true });
+    wipeArtifactsLocation("diffs");
+  });
+
+  beforeEach(async () => {
+    await device.reloadReactNative();
+  });
+
+  it("Twitter with FlashList looks the same", async () => {
+    await element(by.id("Twitter Timeline")).tap();
+
+    const testRunScreenshotPath = await element(
+      by.id("FlashList")
+    ).takeScreenshot(flashListReferenceTestName);
+
+    assertSnapshot(testRunScreenshotPath, flashListReferenceTestName);
+  });
+
+  it("Twitter with FlatList looks the same as with FlashList", async () => {
+    const testName = "Twitter with FlatList looks the same as with FlashList";
+
+    await element(by.id("Twitter FlatList Timeline")).tap();
+
+    const testRunScreenshotPath = await element(
+      by.id("FlatList")
+    ).takeScreenshot(testName);
+
+    // Assert that FlatList reference is the same
+    assertSnapshot(testRunScreenshotPath, testName);
+
+    // Assert that FlatList reference is the same as with FlashList
+    assertSnapshotsEqual(
+      reference(flashListReferenceTestName),
+      reference(testName),
+      testName
+    );
+  });
+});

fixture/ios/Podfile.lock

@@ -356,9 +356,9 @@ PODS:
     - React-Core
     - SDWebImage (~> 5.11.1)
     - SDWebImageWebPCoder (~> 0.8.4)
-  - RNFlashList (0.3.3):
+  - RNFlashList (0.4.0):
     - React-Core
-  - RNFlashList/Tests (0.3.3):
+  - RNFlashList/Tests (0.4.0):
     - React-Core
   - RNGestureHandler (2.3.2):
     - React-Core
@@ -582,11 +582,11 @@ SPEC CHECKSUMS:
   Flipper-RSocket: d9d9ade67cbecf6ac10730304bf5607266dd2541
   FlipperKit: d8d346844eca5d9120c17d441a2f38596e8ed2b9
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 85ecdd10ee8d8ec362ef519a6a45ff9aa27b2e85
+  glog: 5337263514dd6f09803962437687240c5dc39aa4
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   libwebp: 98a37e597e40bfdb4c911fc98f2c53d0b12d05fc
   OpenSSL-Universal: 1aa4f6a6ee7256b83db99ec1ccdaa80d10f9af9b
-  RCT-Folly: 803a9cfd78114b2ec0f140cfa6fa2a6bafb2d685
+  RCT-Folly: a21c126816d8025b547704b777a2ba552f3d9fa9
   RCTRequired: 0aa6c1c27e1d65920df35ceea5341a5fe76bdb79
   RCTTypeSafety: d76a59d00632891e11ed7522dba3fd1a995e573a
   React: ab8c09da2e7704f4b3ebad4baa6cfdfcc852dcb5
@@ -614,7 +614,7 @@ SPEC CHECKSUMS:
   ReactCommon: 07d0c460b9ba9af3eaf1b8f5abe7daaad28c9c4e
   ReactNativePerformanceListsProfiler: 3f9453c24a90c4f77db568d984c48f380968fa0d
   RNFastImage: 1f2cab428712a4baaf78d6169eaec7f622556dd7
-  RNFlashList: 37f03f7d76f8f2058a311a2c1f5d5abe565f0e85
+  RNFlashList: eff470502cb0819757fa91cf771fb17aaf636787
   RNGestureHandler: 6e757e487a4834e7280e98e9bac66d2d9c575e9c
   RNReanimated: 32c91e28f5780937b8efc07ddde1bab8d373fe0b
   RNScreens: 40a2cb40a02a609938137a1e0acfbf8fc9eebf19

fixture/package.json

@@ -26,19 +26,24 @@
     "react-native-reanimated": "^2.4.1",
     "react-native-safe-area-context": "^3.3.2",
     "react-native-screens": "^3.13.1",
-    "recyclerlistview": "3.1.0-alpha.9",
-    "detox": "^19.5.7"
+    "recyclerlistview": "3.1.0-alpha.9"
   },
   "devDependencies": {
+    "babel-jest": "^27.5.1",
     "babel-plugin-module-resolver": "^4.1.0",
     "glob": "^7.1.6",
+    "jest": "^27.5.1",
     "metro-config": "^0.69.1",
     "metro-react-native-babel-preset": "^0.69.1",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
     "typescript": "^4.6.2",
-    "jest": "^27.5.1",
-    "babel-jest": "^27.5.1"
+    "@types/pixelmatch": "^5.2.4",
+    "@types/pngjs": "^6.0.1",
+    "detox": "^19.5.7",
+    "pixelmatch": "^5.2.1",
+    "pngjs": "^6.0.0",
+    "@types/jest": "^27.4.1"
   },
   "jest": {
     "preset": "react-native"

fixture/src/App.tsx

@@ -55,6 +55,7 @@ const App = () => {
           <Stack.Screen
             name={NavigationKeys.TWITTER_FLAT_LIST}
             component={TwitterFlatList}
+            options={{ title: "Twitter" }}
           />
         </Stack.Navigator>
       </NavigationContainer>

fixture/src/Detox/PixelDifference.ts

@@ -0,0 +1,24 @@
+import * as fs from "fs";
+
+import pixelmatch from "pixelmatch";
+import { PNG } from "pngjs";
+
+export const pixelDifference = (
+  referencePath: string,
+  toMatchPath: string
+): PNG | null => {
+  const reference = PNG.sync.read(fs.readFileSync(referencePath));
+  const toMatch = PNG.sync.read(fs.readFileSync(toMatchPath));
+  const { width, height } = reference;
+  const diff = new PNG({ width, height });
+
+  const numDiffPixels = pixelmatch(
+    reference.data,
+    toMatch.data,
+    diff.data,
+    width,
+    height
+  );
+
+  return numDiffPixels > 0 ? diff : null;
+};

fixture/src/Detox/SnapshotAsserts.ts

@@ -0,0 +1,56 @@
+import { saveDiff, reference, saveReference } from "./SnapshotLocation";
+import { pixelDifference } from "./PixelDifference";
+
+export const assertSnapshot = (snapshotPath: string, testName: string) => {
+  const referencePath = reference(testName);
+
+  if (referencePath) {
+    const diffPNG = pixelDifference(snapshotPath, referencePath);
+
+    if (diffPNG !== null) {
+      const diffPath = saveDiff(diffPNG, `${testName}_diff`);
+
+      throw Error(
+        `There is difference between reference screenshot and test run screenshot.
+         See diff: ${diffPath}`
+      );
+    }
+  } else {
+    saveReference(snapshotPath, testName);
+
+    throw Error(
+      `There is no reference screenshot present.
+       New reference screenshot was just created for test name "${testName}".
+       Please run the test again.`
+    );
+  }
+};
+
+export const assertSnapshotsEqual = (
+  firstPath: string | null,
+  secondPath: string | null,
+  testName: string
+) => {
+  if (!firstPath) {
+    throw new Error(
+      `Invalid path: ${firstPath}. Please make sure that you have a screenshot before running this assertion.`
+    );
+  }
+
+  if (!secondPath) {
+    throw new Error(
+      `Invalid path: ${secondPath}. Please make sure that you have a screenshot before running this assertion.`
+    );
+  }
+
+  const diffPNG = pixelDifference(firstPath, secondPath);
+
+  if (diffPNG !== null) {
+    const diffPath = saveDiff(diffPNG, `${testName}_diff.png`);
+
+    throw Error(
+      `There is difference between reference screenshot and test run screenshot.
+       See diff: ${diffPath}`
+    );
+  }
+};

fixture/src/Detox/SnapshotLocation.ts

@@ -0,0 +1,59 @@
+import * as path from "path";
+import * as fs from "fs";
+
+import detox from "detox";
+import { PNG } from "pngjs";
+
+const ROOT_PATH = path.resolve(__dirname, "..");
+
+const artifactsLocation = (testCaseName: string): string => {
+  const platform = detox.device.getPlatform();
+  const location = path.resolve(
+    ROOT_PATH,
+    `../e2e/artifacts/${platform}`,
+    testCaseName
+  );
+
+  return location;
+};
+
+export const ensureArtifactsLocation = (name: string): string => {
+  const location = artifactsLocation(name);
+
+  if (!fs.existsSync(location)) {
+    fs.mkdirSync(location, { recursive: true });
+  }
+
+  return location;
+};
+
+export const wipeArtifactsLocation = (name: string) => {
+  const location = artifactsLocation(name);
+
+  if (fs.existsSync(location)) {
+    fs.rmdirSync(location, { recursive: true });
+  }
+};
+
+export const saveDiff = (diff: PNG, testName: string): string => {
+  const diffsLocation = ensureArtifactsLocation("diff");
+  const diffPath = path.resolve(diffsLocation, testName);
+  fs.writeFileSync(diffPath, PNG.sync.write(diff));
+
+  return diffPath;
+};
+
+export const saveReference = (referencePath: string, testName: string) => {
+  const testArtifactsLocation = ensureArtifactsLocation(testName);
+  const referenceName = path.resolve(testArtifactsLocation, `${testName}.png`);
+
+  fs.renameSync(referencePath, referenceName);
+
+  console.log(`Reference screenshot for test name "${testName}" was created`);
+};
+
+export const reference = (testName: string): string | null => {
+  const testArtifactsLocation = ensureArtifactsLocation(testName);
+  const referenceName = path.resolve(testArtifactsLocation, `${testName}.png`);
+  return fs.existsSync(referenceName) ? referenceName : null;
+};

fixture/src/ExamplesScreen.tsx

@@ -38,6 +38,7 @@ export const ExamplesScreen = () => {
             onPress={() => {
               navigate(item.destination);
             }}
+            testID={item.title}
           >
             <Text style={styles.rowTitle}>{item.title}</Text>
           </TouchableOpacity>

fixture/src/Twitter.tsx

@@ -10,6 +10,7 @@ const Twitter = () => {
   return (
     <FlashListPerformanceView listName="Twitter">
       <FlashList
+        testID="FlashList"
         keyExtractor={(item) => {
           return item.id;
         }}

fixture/src/TwitterFlatList.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { FlatList } from "react-native";
+import { FlatList, View } from "react-native";
 import { FlatListPerformanceView } from "@shopify/react-native-performance-lists-profiler";
 
 import { tweets } from "./data/tweets";
@@ -9,19 +9,21 @@ import { Header, Footer, Divider } from "./Twitter";
 const TwitterFlatList = () => {
   return (
     <FlatListPerformanceView listName="TwitterFlatList">
-      <FlatList
-        keyExtractor={(item) => {
-          return item.id;
-        }}
-        renderItem={({ item }) => {
-          return <TweetCell tweet={item} />;
-        }}
-        ListHeaderComponent={Header}
-        ListHeaderComponentStyle={{ backgroundColor: "#ccc" }}
-        ListFooterComponent={Footer}
-        ItemSeparatorComponent={Divider}
-        data={tweets}
-      />
+      <View testID="FlatList">
+        <FlatList
+          keyExtractor={(item) => {
+            return item.id;
+          }}
+          renderItem={({ item }) => {
+            return <TweetCell tweet={item} />;
+          }}
+          ListHeaderComponent={Header}
+          ListHeaderComponentStyle={{ backgroundColor: "#ccc" }}
+          ListFooterComponent={Footer}
+          ItemSeparatorComponent={Divider}
+          data={tweets}
+        />
+      </View>
     </FlatListPerformanceView>
   );
 };