WIP: init e2e

.github/workflows/build.yml

@@ -18,93 +18,33 @@ 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: 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: 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'
-        with:
-          path: .turbo
-          key: turbo-${{ github.sha }}
-          restore-keys: |
-            turbo-
+      - uses: ./.github/workflows/shared/setup
 
       - name: build
-        run: |
-          yarn install
-          yarn ci:build
+        run: yarn ci:build
 
-  build-doc:
+  e2e:
     runs-on: ubuntu-latest
     needs: build
 
     steps:
       - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '20'
+      - 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
-        with:
-          key: yarn-${{ hashFiles('yarn.lock') }}
-          path: ${{ steps.data.outputs.YARN_CACHE_DIR }}
+  # build-doc:
+  #   runs-on: ubuntu-latest
+  #   needs: build
 
-      - name: turbo cache
-        uses: actions/cache@v4
-        if: github.ref_name == 'main'
-        with:
-          path: .turbo
-          key: turbo_doc-${{ github.sha }}
-          restore-keys: |
-            turbo_doc-
+  #   steps:
+  #     - uses: actions/checkout@v4
 
-      - 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-
+  #     - uses: ./.github/workflows/shared/setup
 
-      - name: build
-        run: |
-          yarn install
-          yarn ci:build-doc
+  #     - name: build-doc
+  #       run: yarn ci:build-doc

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

@@ -0,0 +1,50 @@
+name: setup
+
+runs:
+  using: composite
+
+  steps:
+    - uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+
+    - name: data
+      id: data
+      run: |
+        echo "YARN_CACHE_DIR=$(yarn cache dir)" >> $GITHUB_OUTPUT
+
+    - 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: 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'
+    #   with:
+    #     path: .turbo
+    #     key: turbo-${{ github.sha }}
+    #     restore-keys: |
+    #       turbo-
+
+    - name: install
+      shell: bash
+      run: yarn install

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/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();
+});

cypress.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+    e2e: {
+        viewportWidth: 1280,
+        viewportHeight: 900,
+        baseUrl: 'http://127.0.0.1:8080',
+        supportFile: false,
+    },
+});

cypress/e2e/basic.cy.ts

@@ -0,0 +1,72 @@
+import { callViewer, waitNoLoader } from '../utils';
+
+describe('basic', () => {
+    beforeEach(() => {
+        localStorage.photoSphereViewer_touchSupport = 'false';
+        cy.visit('e2e/basic.html');
+        waitNoLoader();
+    });
+
+    it('should add custom navbar button', () => {
+        const alertStub = cy.stub();
+        cy.on('window:alert', alertStub);
+
+        cy.get('.custom-button:eq(0)').click()
+            .then(() => {
+                expect(alertStub.getCall(0)).to.be.calledWith('Custom button clicked');
+            });
+    });
+
+    it('should update caption', () => {
+        cy.get('.psv-caption-content').should('have.text', 'Parc national du Mercantour © Damien Sorel');
+
+        callViewer(viewer => viewer.setOption('caption', '<strong>Name:</strong> Lorem Ipsum'));
+
+        cy.get('.psv-caption-content').should('have.text', 'Name: Lorem Ipsum');
+    });
+
+    it('should translate navbar buttons', () => {
+        function assertTitles(titles: any) {
+            cy.get('.psv-zoom-button:eq(0)').invoke('attr', 'title').should('eq', titles.zoomOut);
+            cy.get('.psv-zoom-button:eq(1)').invoke('attr', 'title').should('eq', titles.zoomIn);
+            cy.get('.psv-move-button:eq(0)').invoke('attr', 'title').should('eq', titles.moveLeft);
+            cy.get('.psv-move-button:eq(1)').invoke('attr', 'title').should('eq', titles.moveRight);
+            cy.get('.psv-move-button:eq(2)').invoke('attr', 'title').should('eq', titles.moveUp);
+            cy.get('.psv-move-button:eq(3)').invoke('attr', 'title').should('eq', titles.moveDown);
+            cy.get('.psv-download-button').invoke('attr', 'title').should('eq', titles.download);
+            cy.get('.psv-description-button').invoke('attr', 'title').should('eq', titles.description);
+            cy.get('.psv-fullscreen-button').invoke('attr', 'title').should('eq', titles.fullscreen);
+            cy.get('.custom-button:eq(0)').invoke('attr', 'title').should('eq', titles.myButton);
+        }
+
+        const en = {
+            zoomOut: 'Zoom out',
+            zoomIn: 'Zoom in',
+            moveUp: 'Move up',
+            moveDown: 'Move down',
+            moveLeft: 'Move left',
+            moveRight: 'Move right',
+            description: 'Description',
+            download: 'Download',
+            fullscreen: 'Fullscreen',
+            myButton: 'Click me',
+        };
+        assertTitles(en);
+
+        const fr = {
+            zoomOut: 'Dézoomer',
+            zoomIn: 'Zoomer',
+            moveUp: 'Haut',
+            moveDown: 'Bas',
+            moveLeft: 'Gauche',
+            moveRight: 'Droite',
+            description: 'Description',
+            download: 'Télécharger',
+            fullscreen: 'Plein écran',
+            myButton: 'Cliquez ici',
+        };
+        callViewer(viewer => viewer.setOption('lang', fr));
+
+        assertTitles(fr);
+    });
+});

cypress/utils/index.ts

@@ -0,0 +1,9 @@
+import { Viewer } from '@photo-sphere-viewer/core';
+
+export function waitNoLoader() {
+    cy.get('.psv-loader-container').should('not.be.visible');
+}
+
+export function callViewer(cb: (viewer: Viewer) => void) {
+    cy.window().its('viewer').then(cb);
+}

examples/e2e/basic.html

@@ -0,0 +1,80 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>PhotoSphereViewer</title>
+
+        <link rel="stylesheet" href="/dist/core/index.css" />
+        <link rel="stylesheet" href="../style.css" />
+    </head>
+    <body>
+        <div id="photosphere"></div>
+
+        <script type="text/template" id="description">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec para/doca illi, nos admirabilia dicamus. Tibi hoc
+              incredibile, quod beatissimum. Sed et illum, quem nominavi, et ceteros sophistas, ut e Platone intellegi potest,
+              lusos videmus a Socrate. <a href="http://loripsum.net/" target="_blank">Qui ita affectus, beatum esse numquam
+                probabis;</a> Duo Reges: constructio interrete.
+              <mark>Contineo me ab exemplis.</mark>
+              Virtutis, magnitudinis animi, patientiae, fortitudinis fomentis dolor mitigari solet. Claudii libidini, qui tum erat
+              summo ne imperio, dederetur. Quare hoc videndum est, possitne nobis hoc ratio philosophorum dare. Nos autem non
+              solum beatae vitae istam esse oblectationem videmus, sed etiam levamentum miseriarum.
+            </p>
+
+            <p>Hic quoque suus est de summoque bono dissentiens dici vere Peripateticus non potest. Cum ageremus, inquit, vitae
+              beatum et eundem supremum diem, scribebamus haec. Atqui reperies, inquit, in hoc quidem pertinacem; Minime vero
+              istorum quidem, inquit. Hosne igitur laudas et hanc eorum, inquam, sententiam sequi nos censes oportere? </p>
+
+            <p>Eaedem res maneant alio modo. Sed haec quidem liberius ab eo dicuntur et saepius. <a href="http://loripsum.net/"
+                                                                                                    target="_blank">Primum divisit
+              ineleganter;</a> <a href="http://loripsum.net/" target="_blank">Quae contraria sunt his, malane?</a> Hoc loco tenere
+              se Triarius non potuit. Illa tamen simplicia, vestra versuta. Progredientibus autem aetatibus sensim tardeve potius
+              quasi nosmet ipsos cognoscimus. </p>
+        </script>
+
+        <script type="importmap">
+            {
+                "imports": {
+                    "three": "/node_modules/three/build/three.module.js",
+                    "@photo-sphere-viewer/core": "/dist/core/index.module.js"
+                }
+            }
+        </script>
+
+        <script type="module">
+            import { Viewer, DEFAULTS } from '@photo-sphere-viewer/core';
+
+            const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';
+
+            const viewer = new Viewer({
+                container: 'photosphere',
+                panorama: baseUrl + 'sphere.jpg',
+                caption: 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
+                description: document.querySelector('#description').innerHTML,
+                loadingImg: baseUrl + 'loader.gif',
+                keyboard: 'always',
+                lang: {
+                    myButton: 'Click me',
+                },
+                navbar: [
+                    'zoom',
+                    'move',
+                    'download',
+                    {
+                        title: 'myButton',
+                        className: 'custom-button',
+                        content: '🔄',
+                        onClick(viewer) {
+                            alert('Custom button clicked');
+                        }
+                    },
+                    'caption',
+                    'fullscreen',
+                ],
+            });
+
+            window.viewer = viewer;
+        </script>
+    </body>
+</html>

package.json

@@ -20,8 +20,11 @@
     "doc:serve": "turbo run serve-doc",
     "ci:build": "turbo run lint build test --cache-dir=.turbo",
     "ci:build-doc": "turbo run build-doc --cache-dir=.turbo",
+    "ci:e2e": "node build/start-and-test.mjs \"watch --no-open\" e2e:run",
     "ci:version": "set-versions --workspaces",
     "ci:publish": "turbo run publish-dist --concurrency=1",
+    "e2e:open": "cypress open --e2e",
+    "e2e:run": "cypress run --e2e",
     "build-doc": "node ./build/generate-typedoc-readme.mjs && typedoc --plugin typedoc-plugin-extras --out public/api",
     "watch": "node build/liveserver.mjs"
   },
@@ -32,6 +35,7 @@
     "@typescript-eslint/eslint-plugin": "^7.16.0",
     "@typescript-eslint/parser": "^7.16.0",
     "alive-server": "^1.3.0",
+    "cypress": "^13.15.0",
     "esbuild-sass-plugin": "^3.3.0",
     "eslint": "^8.57.0",
     "inquirer": "^12.0.0",