[code-infra] Make Argos upload script reusable (#45883)

Author: Janpot

apps/pigment-css-vite-app/src/pages/fixtures/index.test.js

@@ -4,7 +4,7 @@ import * as playwright from 'playwright';
 
 async function main() {
   const baseUrl = 'http://localhost:5001/fixtures';
-  const screenshotDir = path.resolve('screenshots/chrome');
+  const screenshotDir = path.resolve('test/regressions/screenshots/chrome');
   const browser = await playwright.chromium.launch({
     args: ['--font-render-hinting=none'],
     // otherwise the loaded google Roboto font isn't applied
@@ -86,9 +86,6 @@ async function main() {
     });
   }
 
-  // prepare screenshots
-  await fse.emptyDir(screenshotDir);
-
   describe('visual regressions', () => {
     beforeEach(async () => {
       await page.evaluate(() => {

package.json

@@ -79,7 +79,7 @@
     "test:regressions-pigment-css:run": "nx run nx_test_regressions_pigment_css_run",
     "test:regressions-pigment-css:server": "pnpm --filter @app/pigment-css-vite-app run preview --port 5001",
     "test:unit": "nx run nx_test_unit",
-    "test:argos": "node ./scripts/pushArgos.mjs",
+    "test:argos": "node ./scripts/pushArgos.mjs test/regressions/screenshots/chrome",
     "typescript": "lerna run --no-bail typescript",
     "typescript:ci": "lerna run --concurrency 3 --no-bail typescript",
     "use-react-version": "node ./scripts/useReactVersion.mjs",

scripts/pushArgos.mjs

@@ -4,62 +4,65 @@ import fse from 'fs-extra';
 import lodashChunk from 'lodash/chunk.js';
 import { upload } from '@argos-ci/core';
 import yargs from 'yargs';
+import path from 'path';
 
-const screenshotsBase = 'test/regressions/screenshots/chrome';
-const screenshotsPigmentCSSBase = 'screenshots/chrome';
-const screenshotsTmp = 'test/regressions/screenshots/argos';
 const BATCH_SIZE = 200;
 
-const argv = yargs(process.argv.slice(2)).option('verbose', {
-  alias: 'v',
-  type: 'boolean',
-  description: 'Run with verbose logging',
-}).argv;
+const argv = yargs(process.argv.slice(2))
+  .option('verbose', {
+    alias: 'v',
+    type: 'boolean',
+    description: 'Run with verbose logging',
+  })
+  .demandCommand(1, 'You need to specify the screenshots folder as a positional argument').argv;
 
 async function run() {
-  const emotionScreenshots = await glob(`${screenshotsBase}/**/*`);
-  const pigmentCSSScnreeshots = await glob(`${screenshotsPigmentCSSBase}/**/*`);
-  const screenshots = [...emotionScreenshots, ...pigmentCSSScnreeshots];
+  const tempDir = await fse.mkdtemp(path.resolve('argos-screenshots-'));
 
-  console.log(`Found ${screenshots.length} screenshots.`);
-  if (argv.verbose) {
-    console.log('Screenshots found:');
-    screenshots.forEach((screenshot) => {
-      console.log(`  - ${screenshot}`);
-    });
-  }
+  try {
+    const screenshotsFolder = argv._[0];
+    const screenshots = await glob(`${screenshotsFolder}/**/*`);
+
+    console.log(`Found ${screenshots.length} screenshots.`);
+    if (argv.verbose) {
+      console.log('Screenshots found:');
+      screenshots.forEach((screenshot) => {
+        console.log(`  - ${screenshot}`);
+      });
+    }
 
-  const chunks = lodashChunk(screenshots, BATCH_SIZE);
+    const chunks = lodashChunk(screenshots, BATCH_SIZE);
 
-  await Promise.all(
-    chunks.map((chunk, chunkIndex) =>
-      Promise.all(
-        chunk.map((screenshot) => {
-          return fse.move(
-            screenshot,
-            `${screenshotsTmp}/${chunkIndex}/${screenshot.replace(screenshotsBase, '').replace(screenshotsPigmentCSSBase, '')}`,
-          );
-        }),
+    await Promise.all(
+      chunks.map((chunk, chunkIndex) =>
+        Promise.all(
+          chunk.map((screenshot) => {
+            const relativePath = path.relative(screenshotsFolder, screenshot);
+            return fse.move(screenshot, path.join(tempDir, `${chunkIndex}`, relativePath));
+          }),
+        ),
       ),
-    ),
-  );
+    );
 
-  for (let i = 0; i < chunks.length; i += 1) {
-    // eslint-disable-next-line no-await-in-loop
-    const result = await upload({
-      root: `${screenshotsTmp}/${i}`,
-      commit: process.env.CIRCLE_SHA1,
-      branch: process.env.CIRCLE_BRANCH,
-      token: process.env.ARGOS_TOKEN,
-      parallel: {
-        total: chunks.length,
-        nonce: process.env.CIRCLE_BUILD_NUM,
-      },
-    });
+    for (let i = 0; i < chunks.length; i += 1) {
+      // eslint-disable-next-line no-await-in-loop
+      const result = await upload({
+        root: `${tempDir}/${i}`,
+        commit: process.env.CIRCLE_SHA1,
+        branch: process.env.CIRCLE_BRANCH,
+        token: process.env.ARGOS_TOKEN,
+        parallel: {
+          total: chunks.length,
+          nonce: process.env.CIRCLE_BUILD_NUM,
+        },
+      });
 
-    console.log(
-      `Batch of ${chunks[i].length} screenshots uploaded. Build URL: ${result.build.url}`,
-    );
+      console.log(
+        `Batch of ${chunks[i].length} screenshots uploaded. Build URL: ${result.build.url}`,
+      );
+    }
+  } finally {
+    await fse.remove(tempDir);
   }
 }