refactor: aggregate gen thumbnails, detect browser alias, set BASE_UR…

…L default (#81)

.github/workflows/testing.yml

@@ -15,8 +15,6 @@ jobs:
       # XXX: adjust to node 18's defaults changes
       #      https://stackoverflow.com/questions/77142563/nodejs-18-breaks-dns-resolution-of-localhost-from-127-0-0-1-to-1
       NODE_OPTIONS: --dns-result-order=ipv4first
-      BASE_URL: http://localhost:3000
-      BROWSER: ${{ matrix.env.browser }}
       WINDOW_DPI: 1
     steps:
       - uses: actions/checkout@v4

e2e/cases/cli-testcafe-blink-diff.tests.js

@@ -10,41 +10,121 @@ import {
 fixture('Testing cli testcafe-blink-diff').page(getBaseUrl());
 
 test('do compare', async t => {
-  rimrafSync(join('e2e', 'generated-with'));
+  const dstName = 'generated-with';
+  rimrafSync(join('e2e', dstName));
 
   await callTBD([
     'e2e/file/screens/Testing_cli_testcafe-blink-diff_with',
-    'e2e/generated-with',
-    '--compare',
-    'base:actual',
-    '--threshold',
-    '1.00',
+    `e2e/${dstName}`,
   ]);
 
-  await t
-    .expect(existsSync(join('e2e', 'generated-with', 'index.html')))
-    .ok();
-  await t
-    .expect(existsSync(join('e2e', 'generated-with', 'expects', fixedFile('out.png'))))
-    .ok();
+  const parent = join('e2e', dstName);
+  await t.expect(existsSync(join(parent, 'index.html'))).ok();
+  await t.expect(existsSync(join(parent, 'expects', fixedFile('out.png')))).ok();
+
+  rimrafSync(join('e2e', dstName));
 });
 
 test('create thumbnails when not exists', async t => {
-  rimrafSync(join('e2e', 'generated-without'));
+  const dstName = 'generated-without';
+  rimrafSync(join('e2e', dstName));
 
   await callTBD([
     'e2e/file/screens/Testing_cli_testcafe-blink-diff_without',
-    'e2e/generated-without',
-    '--compare',
-    'base:actual',
-    '--threshold',
-    '1.00',
+    `e2e/${dstName}`,
   ]);
 
-  await t
-    .expect(existsSync(join('e2e', 'generated-without', 'expects', 'thumbnails', fixedFile('base.png'))))
-    .ok();
-  await t
-    .expect(existsSync(join('e2e', 'generated-without', 'expects', 'thumbnails', fixedFile('actual.png'))))
-    .ok();
+  const parent = join('e2e', dstName, 'expects', 'thumbnails');
+  await t.expect(existsSync(join(parent, fixedFile('base.png')))).ok();
+  await t.expect(existsSync(join(parent, fixedFile('actual.png')))).ok();
+
+  rimrafSync(join('e2e', dstName));
 });
+
+// eslint-disable-next-line no-restricted-syntax
+for (const arg of ['-y', '--only']) {
+  test(`arg only ${arg}`, async t => {
+    const dstName = 'generated-only';
+    rimrafSync(join('e2e', dstName));
+
+    await callTBD([
+      'e2e/file/screens/Testing_cli_testcafe-blink-diff_only',
+      `e2e/${dstName}`,
+      arg,
+      'base.png',
+      arg,
+      'actual.png',
+    ]);
+
+    const parent = join('e2e', dstName, 'expects');
+    await t.expect(existsSync(join(parent, fixedFile('base.png')))).ok();
+    await t.expect(existsSync(join(parent, fixedFile('actual.png')))).ok();
+
+    rimrafSync(join('e2e', dstName));
+  });
+}
+
+// eslint-disable-next-line no-restricted-syntax
+for (const arg of ['-f', '--force']) {
+  test(`arg force ${arg}`, async t => {
+    const dstName = 'generated-force';
+    rimrafSync(join('e2e', dstName));
+
+    await callTBD([
+      'e2e/file/screens/Testing_cli_testcafe-blink-diff_force',
+      `e2e/${dstName}`,
+      '-c',
+      'src:dst',
+      arg,
+    ]);
+
+    const parent = join('e2e', dstName, 'file2');
+    await t.expect(existsSync(join(parent, fixedFile('src.png')))).ok();
+    await t.expect(existsSync(join(parent, fixedFile('dst.png')))).ok();
+    rimrafSync(join('e2e', dstName));
+  });
+}
+
+// eslint-disable-next-line no-restricted-syntax
+for (const arg of ['-x', '--filter']) {
+  test(`arg filter ${arg}`, async t => {
+    const dstName = 'generated-filter';
+    rimrafSync(join('e2e', dstName));
+
+    await callTBD([
+      'e2e/file/screens/Testing_cli_testcafe-blink-diff_filter',
+      `e2e/${dstName}`,
+      arg,
+      'file1',
+    ]);
+
+    const parent = join('e2e', dstName);
+    await t.expect(existsSync(join(parent, 'file0', fixedFile('base.png')))).notOk();
+    await t.expect(existsSync(join(parent, 'file1', fixedFile('base.png')))).ok();
+
+    rimrafSync(join('e2e', dstName));
+  });
+}
+
+// eslint-disable-next-line no-restricted-syntax
+for (const arg of ['-c', '--compare']) {
+  test(`arg compare ${arg}`, async t => {
+    const dstName = 'generated-custom-name';
+    rimrafSync(join('e2e', dstName));
+
+    await callTBD([
+      'e2e/file/screens/Testing_cli_testcafe-blink-diff_custom_name',
+      `e2e/${dstName}`,
+      arg,
+      'src:dst',
+    ]);
+
+    const parent = join('e2e', dstName, 'expects');
+    await t.expect(existsSync(join(parent, fixedFile('src.png')))).ok();
+    await t.expect(existsSync(join(parent, fixedFile('dst.png')))).ok();
+    await t.expect(existsSync(join(parent, 'thumbnails', fixedFile('src.png')))).ok();
+    await t.expect(existsSync(join(parent, 'thumbnails', fixedFile('dst.png')))).ok();
+
+    rimrafSync(join('e2e', dstName));
+  });
+}

e2e/lib.js

@@ -1,3 +1,5 @@
+import { t } from 'testcafe';
+
 import { spawn } from 'node:child_process';
 import process from 'node:process';
 
@@ -6,7 +8,8 @@ import process from 'node:process';
 process.env.WINDOW_DPI = process.env.WINDOW_DPI || '2';
 
 function getBaseUrl() {
-  return `${process.env.BASE_URL}/`;
+  const baseUrl = process.env.BASE_URL || 'http://localhost:3000';
+  return `${baseUrl}/`;
 }
 
 function fixedSize(value) {
@@ -33,7 +36,9 @@ function callNpx(args) {
 }
 
 function callTC(targetTest, additionalArgs) {
-  const browser = process.env.BROWSER != null ? process.env.BROWSER : 'chrome:headless';
+  const browser = (process.env.BROWSER != null ? process.env.BROWSER : null)
+    || ((t.browser || {}).alias != null ? t.browser.alias : null)
+    || 'chrome:headless';
   const baseArgs = ['testcafe', browser, targetTest, '-s', 'path=e2e/screens', '-q'];
   return callNpx(baseArgs.concat(additionalArgs));
 }

lib/builder.js

@@ -133,6 +133,13 @@ function mkdirp(filepath) {
 }
 
 function generateThumbnailWhenNotExists(imgDest) {
+  // XXX: not need thumbnails of out.png
+  const parts = path.basename(imgDest).split('.');
+  const ext = parts[parts.length - 1];
+  if (parts[0] === 'out' && ['png'].includes(ext)) {
+    return;
+  }
+
   const tnFileName = path.basename(imgDest);
   const tnDir = path.join(path.dirname(imgDest), 'thumbnails');
   if (!fs.existsSync(path.join(tnDir, tnFileName))) {
@@ -259,13 +266,9 @@ Promise.resolve()
 
         tasks.push(copyFile(imgSrc, imgDest));
 
-        const parts = path.basename(imgDest).split('.');
-        const ext = parts[parts.length - 1];
-        if (['png'].includes(ext) && parts[0] !== 'out') {
-          const p = generateThumbnailWhenNotExists(imgDest);
-          if (typeof p !== 'undefined') {
-            tasks.push(p);
-          }
+        const p = generateThumbnailWhenNotExists(imgDest);
+        if (typeof p !== 'undefined') {
+          tasks.push(p);
         }
       });
     }