chore: init Cypress tests

.github/workflows/build.yml

@@ -18,93 +18,54 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-
-      - name: data
-        id: data
-        run: |
-          echo "YARN_CACHE_DIR=$(yarn cache dir)" >> $GITHUB_OUTPUT
+      - name: setup
+        uses: ./.github/workflows/shared/setup
 
-      - name: yarn cache
-        uses: actions/cache@v4
-        if: github.ref_name == 'main'
-        with:
-          key: yarn-${{ hashFiles('yarn.lock') }}
-          path: ${{ steps.data.outputs.YARN_CACHE_DIR }}
-
-      - name: yarn cache ro
-        uses: actions/cache/restore@v4
-        if: github.ref_name != 'main'
-        with:
-          key: yarn-${{ hashFiles('yarn.lock') }}
-          path: ${{ steps.data.outputs.YARN_CACHE_DIR }}
+      - name: build
+        run: yarn ci:build
 
-      - name: turbo cache
-        uses: actions/cache@v4
-        if: github.ref_name == 'main'
-        with:
-          path: .turbo
-          key: turbo-${{ github.sha }}
-          restore-keys: |
-            turbo-
-
-      - name: turbo cache ro
-        uses: actions/cache/restore@v4
-        if: github.ref_name != 'main'
+      - uses: dorny/test-reporter@1a288b62f8b75c0f433cbfdbc2e4800fbae50bd7
+        if: ${{ (success() || failure()) && github.repository == 'mistic100/Photo-Sphere-Viewer' }}
         with:
-          path: .turbo
-          key: turbo-${{ github.sha }}
-          restore-keys: |
-            turbo-
+          name: mocha
+          use-actions-summary: true
+          path: 'packages/*/reports/mocha.json'
+          reporter: mocha-json
 
-      - name: build
-        run: |
-          yarn install
-          yarn ci:build
+  e2e:
+    if: ${{ !startsWith(github.ref_name, 'dependabot') }}
 
-  build-doc:
     runs-on: ubuntu-latest
     needs: build
 
     steps:
       - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '20'
+      - name: setup
+        uses: ./.github/workflows/shared/setup
 
-      - name: data
-        id: data
+      - name: e2e
         run: |
-          echo "YARN_CACHE_DIR=$(yarn cache dir)" >> $GITHUB_OUTPUT
+          yarn ci:build
+          yarn ci:e2e
 
-      - name: yarn cache ro
-        uses: actions/cache/restore@v4
+      - uses: dorny/test-reporter@1a288b62f8b75c0f433cbfdbc2e4800fbae50bd7
+        if: ${{ (success() || failure()) && github.repository == 'mistic100/Photo-Sphere-Viewer' }}
         with:
-          key: yarn-${{ hashFiles('yarn.lock') }}
-          path: ${{ steps.data.outputs.YARN_CACHE_DIR }}
+          name: cypress
+          use-actions-summary: true
+          path: cypress/reports/e2e.json
+          reporter: mocha-json
 
-      - name: turbo cache
-        uses: actions/cache@v4
-        if: github.ref_name == 'main'
-        with:
-          path: .turbo
-          key: turbo_doc-${{ github.sha }}
-          restore-keys: |
-            turbo_doc-
-
-      - name: turbo cache ro
-        uses: actions/cache/restore@v4
-        if: github.ref_name != 'main'
-        with:
-          path: .turbo
-          key: turbo_doc-${{ github.sha }}
-          restore-keys: |
-            turbo_doc-
+  build-doc:
+    runs-on: ubuntu-latest
+    needs: build
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: setup
+        uses: ./.github/workflows/shared/setup
 
       - name: build
-        run: |
-          yarn install
-          yarn ci:build-doc
+        run: yarn ci:build-doc

.github/workflows/release.yml

@@ -17,24 +17,13 @@ jobs:
         with:
           fetch-depth: 0
 
-      - uses: actions/setup-node@v4
+      - name: setup
+        uses: ./.github/workflows/shared/setup
         with:
-          node-version: '20'
-
-      - name: data
-        id: data
-        run: |
-          echo "YARN_CACHE_DIR=$(yarn cache dir)" >> $GITHUB_OUTPUT
-
-      - name: yarn cache ro
-        uses: actions/cache/restore@v4
-        with:
-          key: yarn-${{ hashFiles('yarn.lock') }}
-          path: ${{ steps.data.outputs.YARN_CACHE_DIR }}
+          turbo-cache: false
 
       - name: build
         run: |
-          yarn install --frozen-lockfile
           yarn ci:version ${{ github.ref_name }}
           yarn ci:build
 

.github/workflows/shared/setup/action.yml

@@ -0,0 +1,55 @@
+name: setup
+
+inputs:
+  turbo-cache:
+    default: True
+
+runs:
+  using: composite
+
+  steps:
+    - uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+
+    - name: data
+      id: data
+      shell: bash
+      run: |
+        echo "YARN_CACHE_DIR=$(yarn cache dir)" >> $GITHUB_OUTPUT
+
+    - name: yarn cache
+      uses: actions/cache@v4
+      if: ${{ !startsWith(github.ref_name, 'dependabot') }}
+      with:
+        key: yarn-${{ hashFiles('yarn.lock') }}
+        path: ${{ steps.data.outputs.YARN_CACHE_DIR }}
+
+    - name: yarn cache ro
+      uses: actions/cache/restore@v4
+      if: ${{ startsWith(github.ref_name, 'dependabot') }}
+      with:
+        key: yarn-${{ hashFiles('yarn.lock') }}
+        path: ${{ steps.data.outputs.YARN_CACHE_DIR }}
+
+    - name: turbo cache
+      uses: actions/cache@v4
+      if: ${{ inputs.turbo-cache && !startsWith(github.ref_name, 'dependabot') }}
+      with:
+        path: .turbo
+        key: turbo-${{ github.sha }}
+        restore-keys: |
+          turbo-
+
+    - name: turbo cache ro
+      uses: actions/cache/restore@v4
+      if: ${{ inputs.turbo-cache && startsWith(github.ref_name, 'dependabot') }}
+      with:
+        path: .turbo
+        key: turbo-${{ github.sha }}
+        restore-keys: |
+          turbo-
+
+    - name: install
+      shell: bash
+      run: yarn install

.gitignore

@@ -7,3 +7,5 @@ docs/.vitepress/.temp
 !docs/.typedoc
 dist
 /public
+reports
+cypress/screenshots

.mocharc.js

@@ -0,0 +1,5 @@
+const path = require('path');
+
+module.exports = {
+    reporter: path.join(__dirname, 'build/mocha-reporter.js'),
+};

build/liveserver.mjs

@@ -13,8 +13,10 @@ const DIST_DIR = 'dist';
 
 const packages = fs.readdirSync(path.join(rootDir, PACKAGES_DIR)).filter((name) => name !== 'shared');
 
+const open = process.argv[2] !== '--no-open';
+
 liveServer.start({
-    open: true,
+    open: open,
     root: path.join(rootDir, EXAMPLES_DIR),
     watch: [
         path.join(rootDir, EXAMPLES_DIR),

build/mocha-reporter.js

@@ -0,0 +1,111 @@
+const BaseReporter = require('mocha/lib/reporters/base');
+const SpecReporter = require('mocha/lib/reporters/spec');
+const JsonReporter = require('mocha/lib/reporters/json');
+const path = require('path');
+const fs = require('fs');
+
+module.exports = class MultiReporter extends BaseReporter {
+    constructor(runner, options) {
+        super(runner, options);
+
+        new SpecReporter(runner, {});
+
+        if (options.reporterOptions?.cypress) {
+            new CypressJsonReporter(runner, {
+                reporterOption: {
+                    output: 'cypress/reports/e2e.json',
+                },
+            });
+        } else {
+            new JsonReporter(runner, {
+                reporterOption: {
+                    output: `reports/mocha.json`,
+                },
+            });
+        }
+    }
+};
+
+// custom json reporter for cypress (for some reason, calling JsonReporter does not work)
+// - write the results to a json file
+// - fill the "file" property of each test
+function CypressJsonReporter(runner, options) {
+    BaseReporter.call(this, runner, options);
+
+    const tests = [];
+    const pending = [];
+    const failures = [];
+    const passes = [];
+
+    runner.on('test end', function (test) {
+        tests.push(test);
+    });
+
+    runner.on('pass', function (test) {
+        passes.push(test);
+    });
+
+    runner.on('fail', function (test) {
+        failures.push(test);
+    });
+
+    runner.on('pending', function (test) {
+        pending.push(test);
+    });
+
+    runner.once('end', () => {
+        const obj = {
+            stats: this.stats,
+            tests: tests.map(clean),
+            pending: pending.map(clean),
+            failures: failures.map(clean),
+            passes: passes.map(clean)
+        };
+        const json = JSON.stringify(obj, null, 2);
+        const output = options.reporterOption.output;
+        fs.mkdirSync(path.dirname(output), { recursive: true });
+        fs.writeFileSync(output, json);
+    });
+
+    function clean(test) {
+        let err = test.err || {};
+        if (err instanceof Error) {
+            err = errorJSON(err);
+        }
+
+        return {
+            title: test.title,
+            fullTitle: test.fullTitle(),
+            file: test.invocationDetails.absoluteFile,
+            duration: test.duration,
+            currentRetry: test.currentRetry(),
+            speed: test.speed,
+            err: cleanCycles(err)
+        };
+    }
+
+    function cleanCycles(obj) {
+        let cache = [];
+        return JSON.parse(
+            JSON.stringify(obj, (key, value) => {
+                if (typeof value === 'object' && value !== null) {
+                    if (cache.indexOf(value) !== -1) {
+                        // Instead of going in a circle, we'll print [object Object]
+                        return '' + value;
+                    }
+                    cache.push(value);
+                }
+
+                return value;
+            })
+        );
+    }
+
+    function errorJSON(err) {
+        let res = {};
+        Object.getOwnPropertyNames(err).forEach((key) => {
+            res[key] = err[key];
+        }, err);
+        return res;
+    }
+}

build/start-and-test.mjs

@@ -0,0 +1,20 @@
+import { spawn } from 'child_process';
+
+const SERVE_SCRIPT = process.argv[2];
+const TEST_SCRIPT = process.argv[3];
+
+const serveProcess = spawn('yarn', SERVE_SCRIPT.split(' '), {
+    stdio: 'inherit',
+    cwd: process.cwd(),
+    shell: true,
+});
+
+const testProcess = spawn('yarn', TEST_SCRIPT.split(' '), {
+    stdio: 'inherit',
+    cwd: process.cwd(),
+    shell: true,
+});
+
+testProcess.on('exit', () => {
+    serveProcess.kill();
+});