test(🏞): batch upload snapshots to argos-ci.com (#35181)

3 years ago · 26707f1bc9
4 changed files with 83 additions and 60 deletions
--- a/.github/workflows/ui-upload.yml
+++ b/.github/workflows/ui-upload.yml
@ -1,6 +1,5 @@
 # Upload 📷 UI snapshots to argos server, help visual regression testing.
-
-name: UI Upload
+name: 📷 UI Upload

 on:
  workflow_run:
@ -21,25 +20,8 @@ jobs:
    if: >
      github.event.workflow_run.conclusion == 'success'
    steps:
-      - name: Download commit artifact
-        uses: dawidd6/action-download-artifact@v2
-        with:
-          workflow: ${{ github.event.workflow_run.workflow_id }}
-          name: commit
-
-      - name: Save commit id
-        id: commit
-        run: echo "::set-output name=id::$(<commit.txt)"
-
-      - name: Download branch artifact
-        uses: dawidd6/action-download-artifact@v2
-        with:
-          workflow: ${{ github.event.workflow_run.workflow_id }}
-          name: branch
-
-      - name: Save branch id
-        id: branch
-        run: echo "::set-output name=id::$(<branch.txt)"
+      - name: checkout
+        uses: actions/checkout@v3

      - name: Download snapshots artifact
        uses: dawidd6/action-download-artifact@v2
@ -47,8 +29,13 @@ jobs:
          workflow: ${{ github.event.workflow_run.workflow_id }}
          workflow_conclusion: success
          name: snapshots
+          path: imageSnapshots
+
+      - name: Install
+        run: npm i fast-glob lodash argos-cli

      - name: Upload argos-ci
        id: deploy
-        run: |
-          npx argos-cli upload ./ --token ${{ secrets.ARGOS_TOKEN }} --branch ${{ steps.branch.outputs.id }} --commit ${{ steps.commit.outputs.id }}
+        run: npm run argos
+        env:
+          ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}
--- a/.github/workflows/ui.yml
+++ b/.github/workflows/ui.yml
@ -12,9 +12,6 @@ concurrency:
  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
  cancel-in-progress: true

-permissions:
-  contents: read
-
 jobs:
  test:
    runs-on: ubuntu-latest
@ -28,6 +25,10 @@ jobs:
          path: package-temp-dir
          key: lock-${{ github.sha }}

+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+
      - name: create package-lock.json
        run: npm i --package-lock-only --ignore-scripts

@ -57,33 +58,3 @@ jobs:
          name: snapshots
          path: imageSnapshots/
          retention-days: 3
-
-      - name: Save commit
-        if: github.event_name == 'pull_request' && github.base_ref == 'master'
-        run: echo ${{ github.event.pull_request.head.sha }} > ./commit.txt
-
-      - name: Save commit
-        if: github.event_name == 'push'
-        run: echo ${{ github.sha }} > ./commit.txt
-
-      - name: Upload commit
-        if: ${{ always() }}
-        uses: actions/upload-artifact@v3
-        with:
-          name: commit
-          path: ./commit.txt
-
-      - name: Save branch
-        if: github.event_name == 'pull_request' && github.base_ref == 'master'
-        run: echo pull/${{ github.event.pull_request.number }}/merge > ./branch.txt
-
-      - name: Save branch
-        if: github.event_name == 'push'
-        run: echo ${GITHUB_REF##*/} > ./branch.txt
-
-      - name: Upload branch
-        if: ${{ always() }}
-        uses: actions/upload-artifact@v3
-        with:
-          name: branch
-          path: ./branch.txt
--- a/package.json
+++ b/package.json
@ -98,11 +98,11 @@
    "tsc": "tsc --noEmit",
    "site:test": "jest --config .jest.site.js --cache=false --force-exit",
    "test-image": "npm run dist && docker-compose run tests",
+    "argos": "node ./scripts/argos-upload.js",
    "version": "node ./scripts/generate-version",
    "install-react-16": "npm i --no-save --legacy-peer-deps react@16 react-dom@16 enzyme-adapter-react-16",
    "install-react-17": "npm i --no-save --legacy-peer-deps react@17 react-dom@17",
-    "install-react-18": "npm i --no-save --legacy-peer-deps react@18 react-dom@18 @testing-library/react@13",
-    "argos": "argos upload imageSnapshots"
+    "install-react-18": "npm i --no-save --legacy-peer-deps react@18 react-dom@18 @testing-library/react@13"
  },
  "browserslist": [
    "> 0.5%",
@ -163,7 +163,6 @@
    "@ant-design/hitu": "^0.0.0-alpha.13",
    "@ant-design/tools": "^14.0.2",
    "@docsearch/css": "^3.0.0",
-    "docsearch-react-fork": "^0.0.0-alpha.0",
    "@qixian.cs/github-contributors-list": "^1.0.3",
    "@stackblitz/sdk": "^1.3.0",
    "@testing-library/jest-dom": "^5.16.3",
@ -186,7 +185,6 @@
    "@typescript-eslint/parser": "^5.0.0",
    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",
    "antd-img-crop": "^4.0.0",
-    "argos-cli": "^0.3.0",
    "array-move": "^4.0.0",
    "babel-plugin-add-react-displayname": "^0.0.5",
    "bisheng": "^3.2.1",
@ -200,6 +198,7 @@
    "cross-env": "^7.0.0",
    "css-minimizer-webpack-plugin": "^3.2.0",
    "dekko": "^0.2.1",
+    "docsearch-react-fork": "^0.0.0-alpha.0",
    "docsearch.js": "^2.6.3",
    "duplicate-package-checker-webpack-plugin": "^3.0.0",
    "enquire-js": "^0.2.1",
@ -218,6 +217,7 @@
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.1.2",
    "eslint-plugin-unicorn": "^42.0.0",
+    "fast-glob": "^3.2.11",
    "fetch-jsonp": "^1.1.3",
    "fs-extra": "^10.0.0",
    "full-icu": "^1.3.0",
--- a/scripts/argos-upload.js
+++ b/scripts/argos-upload.js
@ -0,0 +1,65 @@
+// Thanks to material-ui ❤️
+// Create chunks for Argos: https://github.com/mui/material-ui/pull/23518
+// https://github.com/mui/material-ui/blob/af81aae3b292ed180e7652a665fad1be2b38a7b3/scripts/pushArgos.js
+const util = require('util');
+const glob = require('fast-glob');
+const lodashChunk = require('lodash/chunk');
+const childProcess = require('child_process');
+
+const execFileNode = util.promisify(childProcess.execFile);
+
+function execFile(command, args) {
+  return execFileNode(command, args, {
+    cwd: process.cwd(),
+    env: process.env,
+    encoding: 'utf-8',
+  });
+}
+
+const screenshotsBase = 'imageSnapshots';
+const screenshotsTmp = `${screenshotsBase}/temp`;
+const BATCH_SIZE = 200;
+
+async function move2Temp(screenshot, target) {
+  await execFile('mkdir', ['-p', target]);
+  await execFile('mv', [screenshot, target]);
+}
+
+async function run() {
+  const screenshots = await glob(`${screenshotsBase}/**/*`);
+  const chunks = lodashChunk(screenshots, BATCH_SIZE);
+
+  await Promise.all(
+    chunks.map((chunk, chunkIndex) =>
+      Promise.all(
+        chunk.map(screenshot => move2Temp(screenshot, `${screenshotsTmp}/${chunkIndex}`)),
+      ),
+    ),
+  );
+
+  for (let i = 0; i < chunks.length; i += 1) {
+    // eslint-disable-next-line no-await-in-loop
+    const argosResults = await execFile('argos', [
+      'upload',
+      `${screenshotsTmp}/${i}`,
+      '--token',
+      process.env.ARGOS_TOKEN,
+      '--batchCount',
+      chunks.length,
+      '--branch',
+      process.env.GITHUB_REF_NAME,
+      '--commit',
+      process.env.GITHUB_SHA,
+      '--external-build-id',
+      process.env.GITHUB_SHA,
+    ]);
+    // eslint-disable-next-line no-console -- pipe stdout
+    console.log(argosResults.stdout);
+  }
+}
+
+run().catch(error => {
+  // eslint-disable-next-line no-console
+  console.error(error);
+  process.exit(1);
+});