chore: optimize e2e

mistic100 · Nov 8, 2024 · 80207ed · 80207ed
1 parent cd32d6e
commit 80207ed
Show file tree

Hide file tree

Showing 14 changed files with 160 additions and 133 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -63,9 +63,18 @@ jobs:
           path: 'cypress/reports/html/.jsons/*.json'
           reporter: mochawesome-json
 
+      - name: report artifact
+        uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: e2e-report-${{ env.REF_NAME_SLUG }}-${{ env.SHORT_SHA }}
+          path: |
+            cypress/reports/html
+            !cypress/reports/html/.jsons
+
       - name: deploy report
         uses: ./.github/workflows/shared/deploy-netlify
-        if: ${{ !cancelled() && github.repository == 'mistic100/Photo-Sphere-Viewer' && github.event_name != 'pull_request' }}
+        if: ${{ !cancelled() && github.repository == 'mistic100/Photo-Sphere-Viewer' && github.ref_name == 'main' }}
         with:
           env: cypress
           root-folder: cypress/reports/html

diff --git a/.github/workflows/shared/deploy-netlify/action.yml b/.github/workflows/shared/deploy-netlify/action.yml
@@ -28,7 +28,7 @@ runs:
     - name: deploy
       id: netlify
       shell: bash
-      run: node ./build/deploy-netlify.mjs --rootFolder=${{ inputs.root-folder }} --exclude=${{ inputs.excludes }} --functionsFolder=${{ inputs.functions-folder }} --branch=${{ github.ref_name }}
+      run: node ./build/deploy-netlify.mjs --rootFolder=${{ inputs.root-folder }} --exclude=${{ inputs.excludes }} --functionsFolder=${{ inputs.functions-folder }}
       env:
         NETLIFY_AUTH_TOKEN: ${{ inputs.auth-token }}
         NETLIFY_SITE_ID: ${{ inputs.site-id }}

diff --git a/.github/workflows/shared/setup/action.yml b/.github/workflows/shared/setup/action.yml
@@ -17,6 +17,7 @@ runs:
       run: |
         echo "YARN_CACHE_DIR=$(yarn cache dir)" >> $GITHUB_ENV
         echo "SHORT_SHA=`echo ${{ github.sha }} | cut -c1-8`" >> $GITHUB_ENV
+        echo "REF_NAME_SLUG=${GITHUB_REF_NAME////_}" >> $GITHUB_ENV
 
     - name: yarn cache
       uses: actions/cache@v4

diff --git a/build/deploy-netlify.mjs b/build/deploy-netlify.mjs
@@ -14,7 +14,6 @@ import Queue from 'queue';
 const MAX_RETRIES = 5;
 
 (async () => {
-    // --branch (optional)
     // --rootFolder
     // --functionsFolder (unsupported)
     // --exclude (optional)
@@ -34,25 +33,19 @@ const MAX_RETRIES = 5;
         throw `Folder ${config.rootFolder} does not exist`;
     }
 
-    if (config.branch === 'main') {
-        config.branch = undefined;
-    }
-
     const files = await listFilesWithHashes(config.rootFolder, config.exclude, 'sha1');
     // TODO zip functions
     const functions = {};// await listFilesWithHashes(config.functionsFolder, null, 'sha256');
 
-    const deploy = await createDeploy(config.branch, files, functions);
+    const deploy = await createDeploy(files, functions);
 
     await uploadFiles(config.rootFolder, files, deploy);
     // await uploadFunctions(config.functionsFolder, functions, deploy);
 
-    if (!config.branch) {
-        await publishDeploy(deploy);
-    }
+    await publishDeploy(deploy);
 
     if (process.env.CI) {
-        writeFileSync(process.env.GITHUB_OUTPUT, `deploy_url=${config.branch ? deploy.deploy_ssl_url : deploy.ssl_url}`, 'utf-8');
+        writeFileSync(process.env.GITHUB_OUTPUT, `deploy_url=${deploy.ssl_url}`, 'utf-8');
     }
 })();
 
@@ -111,7 +104,7 @@ async function listFilesWithHashes(dir, exclude, hashfn) {
 /**
  * Creates a new deployment on Netlify
  */
-async function createDeploy(branch, files, functions) {
+async function createDeploy(files, functions) {
     try {
         const result = await retryFetch(`https://api.netlify.com/api/v1/sites/${process.env.NETLIFY_SITE_ID}/deploys`, {
             method: 'POST',
@@ -120,7 +113,6 @@ async function createDeploy(branch, files, functions) {
                 'Authorization': 'Bearer ' + process.env.NETLIFY_AUTH_TOKEN,
             },
             body: JSON.stringify({
-                branch,
                 files,
                 functions: Object.entries(functions).reduce((res, [name, hash]) => ({
                     ...res,

diff --git a/build/liveserver.mjs b/build/liveserver.mjs
@@ -10,6 +10,7 @@ const __dirname = path.dirname(__filename);
 const rootDir = path.resolve(__dirname, '..');
 
 const EXAMPLES_DIR = 'examples';
+const CYPRESS_DIR = 'cypress/pages';
 const PACKAGES_DIR = 'packages';
 const DIST_DIR = 'dist';
 
@@ -31,12 +32,13 @@ liveServer.start({
     open: !e2e ? `/index.html#ip=${currentIp}` : null,
     watch: [
         path.join(rootDir, EXAMPLES_DIR),
+        path.join(rootDir, CYPRESS_DIR),
         ...packages.map((name) => path.join(rootDir, PACKAGES_DIR, name, DIST_DIR)),
     ],
     mount: [
         ['/node_modules', path.join(rootDir, 'node_modules')],
-        ['/data', path.join(rootDir, '..', 'photo-sphere-viewer-data/assets')],
-        ...packages.map((name) => [`/${DIST_DIR}/${name}`, path.join(rootDir, PACKAGES_DIR, name, DIST_DIR)]),
+        ['/e2e', path.join(CYPRESS_DIR)],
+        ...packages.map((name) => [`/dist/${name}`, path.join(rootDir, PACKAGES_DIR, name, DIST_DIR)]),
     ],
     https: {
         cert: fakeCert,

diff --git a/cypress/e2e/core/navbar.cy.ts b/cypress/e2e/core/navbar.cy.ts
@@ -1,4 +1,4 @@
-import { getViewer, waitViewerReady } from '../../utils';
+import { callViewer, waitViewerReady } from '../../utils';
 
 describe('core: navbar', () => {
     beforeEach(() => {
@@ -28,13 +28,13 @@ describe('core: navbar', () => {
     it('should update the caption', () => {
         cy.get('.psv-caption-content').should('have.text', 'Parc national du Mercantour © Damien Sorel');
 
-        getViewer('change caption via options').then(viewer => viewer.setOption('caption', '<strong>Name:</strong> Lorem Ipsum'));
+        callViewer('change caption via options').then(viewer => viewer.setOption('caption', '<strong>Name:</strong> Lorem Ipsum'));
 
         cy.get('.psv-caption-content').should('have.text', 'Name: Lorem Ipsum');
 
         cy.get('.psv-navbar').compareScreenshots('update-caption');
 
-        getViewer('change caption via API').then(viewer => viewer.navbar.setCaption('Loading...'));
+        callViewer('change caption via API').then(viewer => viewer.navbar.setCaption('Loading...'));
 
         cy.get('.psv-caption-content').should('have.text', 'Loading...');
     });
@@ -67,7 +67,7 @@ describe('core: navbar', () => {
         viewportWidth: 800,
         viewportHeight: 900,
     }, () => {
-        getViewer('remove description').then(viewer => viewer.setOption('description', null));
+        callViewer('remove description').then(viewer => viewer.setOption('description', null));
 
         cy.get('.psv-caption-content').should('not.be.visible');
 
@@ -168,17 +168,17 @@ describe('core: navbar', () => {
             fullscreen: 'Plein écran',
             myButton: 'Cliquez ici',
         };
-        getViewer('translate to french').then(viewer => viewer.setOption('lang', fr));
+        callViewer('translate to french').then(viewer => viewer.setOption('lang', fr));
 
         assertTitles(fr);
     });
 
     it('should hide the navbar', () => {
-        getViewer('hide navbar').then(viewer => viewer.navbar.hide());
+        callViewer('hide navbar').then(viewer => viewer.navbar.hide());
 
         cy.get('.psv-navbar').should('not.be.visible');
 
-        getViewer('show navbar').then(viewer => viewer.navbar.show());
+        callViewer('show navbar').then(viewer => viewer.navbar.show());
 
         cy.get('.psv-navbar').should('be.visible');
     });
@@ -194,44 +194,44 @@ describe('core: navbar', () => {
             });
         }
 
-        getViewer('change buttons via options').then(viewer => viewer.setOption('navbar', 'zoom move'));
+        callViewer('change buttons via options').then(viewer => viewer.setOption('navbar', 'zoom move'));
 
         assertButtons(['Zoom out', 'Zoom in', 'Move left', 'Move right', 'Move up', 'Move down']);
 
         cy.get('.psv-navbar').compareScreenshots('update-buttons');
 
-        getViewer('change buttons via API').then(viewer => viewer.navbar.setButtons(['download', 'fullscreen']));
+        callViewer('change buttons via API').then(viewer => viewer.navbar.setButtons(['download', 'fullscreen']));
 
         assertButtons(['Download', 'Fullscreen']);
     });
 
     it('should hide a button', () => {
-        getViewer('hide fullscreen button').then(viewer => viewer.navbar.getButton('fullscreen').hide());
+        callViewer('hide fullscreen button').then(viewer => viewer.navbar.getButton('fullscreen').hide());
 
         cy.get('.psv-fullscreen-button').should('not.be.visible');
 
         cy.get('.psv-navbar').compareScreenshots('hide-button');
 
-        getViewer('show fullscreen button').then(viewer => viewer.navbar.getButton('fullscreen').show());
+        callViewer('show fullscreen button').then(viewer => viewer.navbar.getButton('fullscreen').show());
 
         cy.get('.psv-fullscreen-button').should('be.visible');
     });
 
     it('should disable a button', () => {
-        getViewer('disable download button').then(viewer => viewer.navbar.getButton('download').disable());
+        callViewer('disable download button').then(viewer => viewer.navbar.getButton('download').disable());
 
         cy.get('.psv-download-button').should('have.class', 'psv-button--disabled');
 
         cy.get('.psv-navbar').compareScreenshots('disable-button');
 
-        getViewer('enable download button').then(viewer => viewer.navbar.getButton('download').enable());
+        callViewer('enable download button').then(viewer => viewer.navbar.getButton('download').enable());
 
         cy.get('.psv-download-button').should('not.have.class', 'psv-button--disabled');
     });
 
     it('should display a custom element', () => {
         cy.document().then(document => {
-            getViewer('set custom element').then(viewer => viewer.navbar.setButtons([
+            callViewer('set custom element').then(viewer => viewer.navbar.setButtons([
                 {
                     content: document.createElement('custom-navbar-button'),
                 }