Update test API

fixture/e2e/flashList.test.e2e.js

@@ -1,137 +1,70 @@
-const fs = require("fs");
-const path = require("path");
-
+import * as path from "path";
+import * as fs from "fs";
 import { Platform } from "react-native";
 import {
-  pixelDifference,
-  setDemoMode,
-  ensureArtifactsLocation,
   wipeArtifactsLocation,
-  saveDiff,
-} from "./DetoxHelpers";
+  saveReference,
+  referenceExists,
+} from "./SnapshotLocation";
+
+import { assertSnapshots, assertSnapshot } from "./SnapshotAsserts";
 
 describe("FlashList", () => {
   const platform = device.getPlatform();
-
-  const flashTwitterReferenceName = `Twitter_Flash_List_screenshot_${platform}.png`;
   const flatTwitterReferenceName = `Twitter_Flat_List_screenshot_${platform}.png`;
 
   beforeAll(async () => {
     await device.launchApp({ newInstance: true });
-
-    wipeArtifactsLocation("diffs", platform);
+    wipeArtifactsLocation("diffs");
   });
 
   beforeEach(async () => {
     await device.reloadReactNative();
   });
 
   it("Twitter with FlashList looks the same", async () => {
-    const testArtifactsLocation = ensureArtifactsLocation(
-      `twitter_with_flash_list`,
-      platform
-    );
+    // TODOs: Get it from Jest
+    // expect.getState().currentTestName - doesn't  work
+    const testName = "Twitter with FlashList looks the same";
 
     await element(by.id("Twitter Timeline")).tap();
 
-    // Raw Path to just created screenshot
     const testRunScreenshotPath = await element(
       by.id("FlashList")
-    ).takeScreenshot(flashTwitterReferenceName);
+    ).takeScreenshot(testName);
 
-    // Path where we want to save the screenshot
-    const flatListReferencePath = path.resolve(
-      testArtifactsLocation,
-      flashTwitterReferenceName
-    );
-
-    // If reference is already there, compare the two screenshots
-    if (fs.existsSync(flatListReferencePath)) {
-      console.log(`testRunScreenshotPath ${testRunScreenshotPath}`);
-      console.log(`flatListReferencePath ${flatListReferencePath}`);
-      // compare screenshots, get difference
-      const diffPNG = pixelDifference(
-        testRunScreenshotPath,
-        flatListReferencePath
-      );
-
-      // If there is difference, fail the test
-      if (diffPNG !== null) {
-        saveDiff(diffPNG, "flash_twitter_looks_the_same_diff", platform);
-
-        throw new Error(
-          "There is difference between reference screenshot and test run screenshot"
-        );
-      }
+    if (referenceExists(testName)) {
+      assertSnapshot(testRunScreenshotPath, testName);
     } else {
-      // Save reference screenshot cause it doesn't exist yet
-      fs.renameSync(
-        testRunScreenshotPath,
-        flatListReferencePath,
-        function (err) {
-          if (err) throw err;
-        }
-      );
-      console.log("Reference screenshot created");
+      saveReference(testRunScreenshotPath, testName);
     }
   });
 
   it("Twitter with FlatList looks the same as with FlashList", async () => {
-    const testArtifactsLocation = ensureArtifactsLocation(
-      `flat_list_vs_flash_list`,
-      platform
-    );
-
-    const flashTwitterReferenceLocation = ensureArtifactsLocation(
-      `twitter_with_flash_list`,
-      platform
-    );
+    // TODOs: Get it from Jest
+    // expect.getState().currentTestName - doesn't  work
+    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(flatTwitterReferenceName);
 
-    const flatListReferencePath = path.resolve(
-      testArtifactsLocation,
-      flatTwitterReferenceName
-    );
-
-    const flashTwitterReferencePath = path.resolve(
-      flashTwitterReferenceLocation,
-      flashTwitterReferenceName
-    );
-
-    // If reference doesn't exist yet, save it
-    if (!fs.existsSync(flatListReferencePath)) {
-      fs.renameSync(
-        testRunScreenshotPath,
-        flatListReferencePath,
-        function (err) {
-          if (err) throw err;
-        }
-      );
+    if (!referenceExists(testName)) {
+      saveReference(testRunScreenshotPath, testName);
     }
 
-    // If FlashList reference exists, compare it with current FlatList screenshot
-    if (fs.existsSync(flashTwitterReferencePath)) {
-      const diffPNG = pixelDifference(
-        flatListReferencePath,
-        flashTwitterReferencePath
-      );
-
-      // If there is difference, fail the test
-      if (diffPNG !== null) {
-        saveDiff(diffPNG, "flat_list_vs_flash_list_diff.png", platform);
+    const flashListReference = referenceExists(
+      "Twitter with FlashList looks the same"
+    );
+    const flatListReference = referenceExists(testName);
 
-        throw new Error(
-          "There is difference between reference screenshot and test run screenshot."
-        );
-      }
+    if (flashListReference && flatListReference) {
+      assertSnapshots(flatListReference, flashListReference, testName);
     } else {
       throw new Error(
-        "Reference screenshot for FlashList example doesn't exist"
+        "One of the references doesn't exist. Please run the tests again."
       );
     }
   });

fixture/src/Detox/PixelDifference.ts

@@ -0,0 +1,23 @@
+import pixelmatch from "pixelmatch";
+import * as fs from "fs";
+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,35 @@
+import * as path from "path";
+import { ensureArtifactsLocation, saveDiff } from "./SnapshotLocation";
+
+import { pixelDifference } from "./PixelDifference";
+
+export const assertSnapshot = (snapshotPath: string, testName: string) => {
+  const testArtifactsLocation = ensureArtifactsLocation(testName);
+  const referenceName = path.resolve(testArtifactsLocation, `${testName}.png`);
+
+  const diffPNG = pixelDifference(snapshotPath, referenceName);
+
+  if (diffPNG !== null) {
+    saveDiff(diffPNG, `${testName}_diff`);
+
+    throw new Error(
+      "There is difference between reference screenshot and test run screenshot"
+    );
+  }
+};
+
+export const assertSnapshots = (
+  firstPath: string,
+  secondPath: string,
+  testName: string
+) => {
+  const diffPNG = pixelDifference(firstPath, secondPath);
+
+  if (diffPNG !== null) {
+    saveDiff(diffPNG, `${testName}_diff.png`);
+
+    throw new Error(
+      "There is difference between reference screenshot and test run screenshot"
+    );
+  }
+};

fixture/src/Detox/SnapshotLocation.ts

@@ -0,0 +1,56 @@
+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) => {
+  const diffsLocation = ensureArtifactsLocation(`diffs`);
+  const diffPath = path.resolve(diffsLocation, testName);
+  fs.writeFileSync(diffPath, PNG.sync.write(diff));
+};
+
+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 referenceExists = (testName: string): string | null => {
+  const testArtifactsLocation = ensureArtifactsLocation(testName);
+  const referenceName = path.resolve(testArtifactsLocation, `${testName}.png`);
+  return fs.existsSync(referenceName) ? referenceName : null;
+};

fixture/tsconfig.json

@@ -1,14 +1,14 @@
 {
-    "extends": "../shared/tsconfig.base.json",
-    "compilerOptions": {
-      "baseUrl": ".",
-      "tsBuildInfoFile": "dist/tsconfig.tsbuildinfo",
-      "outDir": "./dist",
-      "rootDir": "./src"
-    },
-    "references": [
-      {
-        "path": "../"
-      }
-    ]
-  }
+  "extends": "../shared/tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "tsBuildInfoFile": "dist/tsconfig.tsbuildinfo",
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "references": [
+    {
+      "path": "../"
+    }
+  ]
+}