chore: Settings Cypress tests

build/start-and-test.mjs

@@ -22,3 +22,9 @@ const testProcess = spawn('yarn', TEST_SCRIPT.split(' '), {
 testProcess.on('exit', () => {
     serveProcess.kill();
 });
+
+process.on('SIGINT', () => {
+    testProcess.kill();
+    serveProcess.kill();
+    process.exit();
+});

cypress/e2e/core/navbar.cy.ts

@@ -3,7 +3,7 @@ import { getViewer, waitViewerReady } from '../../utils';
 describe('core: navbar', () => {
     beforeEach(() => {
         localStorage.photoSphereViewer_touchSupport = 'false';
-        cy.visit('e2e/navbar.html');
+        cy.visit('e2e/core/navbar.html');
         waitViewerReady();
         // createBaseSnapshot();
     });
@@ -53,12 +53,12 @@ describe('core: navbar', () => {
 
     // does not work in headless mode
     it.skip('should enter and exit fullscreen', () => {
-        cy.get('.psv-fullscreen-button').realClick();
+        cy.get('.psv-fullscreen-button').click();
         cy.wait(500);
 
         cy.document().its('fullscreenElement').should('not.be.null');
 
-        cy.get('.psv-fullscreen-button').realClick();
+        cy.get('.psv-fullscreen-button').click();
 
         cy.document().its('fullscreenElement').should('be.null');
     });
@@ -78,7 +78,7 @@ describe('core: navbar', () => {
         cy.get('.psv-notification-content')
             .should('be.visible')
             .should('have.text', 'Parc national du Mercantour © Damien Sorel')
-            .compareScreenshots('caption-notification');
+            .compareScreenshots('caption-notification', { errorThreshold: 0.1 });
 
         cy.get('.psv-description-button').click();
 

cypress/e2e/plugins/compass.cy.ts

@@ -6,7 +6,7 @@ import { BASE_URL, NO_LOG } from '../../utils/constants';
 
 describe('plugin: compass', () => {
     beforeEach(() => {
-        cy.visit('e2e/compass.html');
+        cy.visit('e2e/plugins/compass.html');
         waitViewerReady();
         // createBaseSnapshot();
     });

cypress/e2e/plugins/gallery.cy.ts

@@ -3,15 +3,15 @@ import { getPlugin, getViewer, waitViewerReady } from '../../utils';
 import { BASE_URL } from '../../utils/constants';
 
 describe('plugin: gallery', () => {
-    let first = true;
-
     beforeEach(() => {
-        cy.visit('e2e/gallery.html');
+        cy.visit('e2e/plugins/gallery.html');
         waitViewerReady();
-        if (first) { // wait for async thumbnails
-            cy.wait(1000);
-            first = false;
-        }
+        cy.waitForResources(
+            'key-biscayne-1-thumb.jpg',
+            'key-biscayne-2-thumb.jpg',
+            'key-biscayne-3-thumb.jpg',
+            'key-biscayne-4-thumb.jpg',
+        );
         // createBaseSnapshot();
     });
 
@@ -31,6 +31,12 @@ describe('plugin: gallery', () => {
         viewportWidth: 400,
         viewportHeight: 800,
     }, () => {
+        cy.waitForResources(
+            'key-biscayne-5-thumb.jpg',
+            'key-biscayne-6-thumb.jpg',
+            'key-biscayne-7-thumb.jpg',
+        );
+
         cy.get('.psv-gallery')
             .should(gallery => {
                 const { x, y, width, height } = gallery[0].getBoundingClientRect();
@@ -92,7 +98,12 @@ describe('plugin: gallery', () => {
 
     it('should change thumbnails size', () => {
         getGallery('set thumbnailSize').then(gallery => gallery.setOption('thumbnailSize', { width: 100, height: 100 }));
-        cy.wait(500); // more async thumbnails
+
+        cy.waitForResources(
+            'key-biscayne-5-thumb.jpg',
+            'key-biscayne-6-thumb.jpg',
+            'key-biscayne-7-thumb.jpg',
+        );
 
         cy.get('.psv-gallery').compareScreenshots('set-thumbnailSize');
     });
@@ -148,17 +159,14 @@ describe('plugin: gallery', () => {
         cy.get('.psv-gallery').should('not.be.visible');
     });
 
-    function getGallery(log: string) {
-        return getPlugin<GalleryPlugin>('gallery', log);
-    }
-
-});
-
-describe('plugin: gallery', () => {
     it('should not be visible on load', () => {
-        cy.visit('e2e/gallery.html?visibleOnLoad=false');
+        cy.visit('e2e/plugins/gallery.html?visibleOnLoad=false');
         waitViewerReady();
 
         cy.get('.psv-gallery').should('not.be.visible');
     });
+
+    function getGallery(log: string) {
+        return getPlugin<GalleryPlugin>('gallery', log);
+    }
 });

cypress/e2e/plugins/settings.cy.ts

@@ -0,0 +1,156 @@
+import type { OptionsSetting, SettingsPlugin, ToggleSetting } from '@photo-sphere-viewer/settings-plugin';
+import { getPlugin, getViewer, waitViewerReady } from '../../utils';
+
+describe('plugin: settings', () => {
+    beforeEach(() => {
+        localStorage.photoSphereViewer_touchSupport = 'false';
+        cy.visit('e2e/plugins/settings.html');
+        waitViewerReady();
+        // createBaseSnapshot();
+    });
+
+    const TOGGLE_SETTING = {
+        id: 'toggle-setting',
+        label: 'Toggle setting',
+        type: 'toggle',
+        active: () => false,
+        toggle: () => void 0,
+    } satisfies ToggleSetting;
+
+    const OPTIONS_SETTING = {
+        id: 'options-setting',
+        label: 'Options setting',
+        type: 'options',
+        current: () => 'A',
+        options: () => [
+            { id: 'A', label: 'Option A' },
+            { id: 'B', label: 'Option B' },
+        ],
+        apply: () => void 0,
+    } satisfies OptionsSetting;
+
+    it('should add a navbar button', () => {
+        cy.get('.psv-settings-button').should('not.be.visible');
+
+        getSettings('add setting').then(settings => settings.addSetting(TOGGLE_SETTING));
+
+        cy.get('.psv-settings-button')
+            .should('be.visible')
+            .click()
+            .should('have.class', 'psv-button--active');
+    });
+
+    it('should place the menu close to the button', () => {
+        getSettings('add setting').then(settings => settings.addSetting(TOGGLE_SETTING));
+
+        [
+            ['caption settings', 'right', '0px'],
+            ['settings caption', 'left', '0px'],
+            ['zoom move settings caption', 'left', '290px'],
+            ['download settings caption', 'left', '0px'],
+            ['caption settings fullscreen', 'right', '0px'],
+        ].forEach(([navbar, prop, value]) => {
+            getViewer(`navbar "${navbar}"`).then(viewer => viewer.setOption('navbar', navbar));
+
+            cy.get('.psv-settings-button').click();
+
+            cy.get('.psv-settings').should('have.css', prop, value);
+
+            cy.get('.psv-settings-button').click();
+        });
+    });
+
+    it('should show toggle and options settings', () => {
+        getSettings('add setting').then(settings => {
+            settings.addSetting(TOGGLE_SETTING);
+            settings.addSetting(OPTIONS_SETTING);
+        });
+
+        cy.get('.psv-settings-button').click();
+
+        cy.get('.psv-settings').compareScreenshots('base');
+    });
+
+    it('should toggle the toggle', () => {
+        const value = { v: false };
+
+        getSettings('add setting').then(settings => {
+            settings.addSetting({
+                ...TOGGLE_SETTING,
+                active: () => value.v,
+                toggle: () => value.v = !value.v,
+            });
+            settings.addSetting(OPTIONS_SETTING);
+        });
+
+        cy.get('.psv-settings-button').click();
+        cy.get('[data-setting-id=toggle-setting]').click();
+
+        cy.wrap(value).its('v').should('eq', true);
+        cy.get('.psv-settings').compareScreenshots('toggle-true');
+
+        cy.get('[data-setting-id=toggle-setting]').click();
+
+        cy.wrap(value).its('v').should('eq', false);
+        cy.get('.psv-settings').compareScreenshots('base');
+    });
+
+    it('should select an option', () => {
+        const value = { v: 'A' };
+
+        getSettings('add setting').then(settings => {
+            settings.addSetting(TOGGLE_SETTING);
+            settings.addSetting({
+                ...OPTIONS_SETTING,
+                current: () => value.v,
+                apply: (option) => value.v = option,
+            });
+        });
+
+        cy.get('.psv-settings-button').click();
+        cy.get('[data-setting-id=options-setting]').click();
+
+        cy.get('.psv-settings').compareScreenshots('option-list');
+
+        cy.get('[data-option-id=__back]').click();
+
+        cy.wrap(value).its('v').should('eq', 'A');
+        cy.get('.psv-settings').compareScreenshots('base');
+
+        cy.get('[data-setting-id=options-setting]').click();
+        cy.get('[data-option-id=B]').click();
+
+        cy.wrap(value).its('v').should('eq', 'B');
+        cy.get('.psv-settings').should('not.be.visible');
+
+        cy.get('.psv-settings-button').click();
+
+        cy.get('.psv-settings').compareScreenshots('option-b');
+    });
+
+    it('should display a badge', () => {
+        const value = { v: 'A' };
+
+        getSettings('add setting').then(settings => {
+            settings.addSetting({
+                ...OPTIONS_SETTING,
+                current: () => value.v,
+                apply: (option) => value.v = option,
+                badge: () => value.v,
+            });
+        });
+
+        cy.get('.psv-settings-button').compareScreenshots('badge-a');
+
+        cy.get('.psv-settings-button').click();
+        cy.get('[data-setting-id=options-setting]').click();
+        cy.get('[data-option-id=B]').click();
+
+        cy.get('.psv-settings-button').compareScreenshots('badge-b');
+    });
+
+
+    function getSettings(log: string) {
+        return getPlugin<SettingsPlugin>('settings', log);
+    }
+});

cypress/support/e2e.ts

@@ -1,9 +1,9 @@
 import 'cypress-mochawesome-reporter/register';
-import 'cypress-real-events';
 import { addCompareSnapshotCommand } from 'cypress-visual-regression/dist/command';
+import { NO_LOG } from '../utils/constants';
 
 addCompareSnapshotCommand({
-    errorThreshold: 0.01,
+    errorThreshold: 0.05,
     failSilently: !Cypress.config('isInteractive'),
 });
 
@@ -13,6 +13,8 @@ declare global {
         // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
         interface Chainable {
             compareScreenshots(name: string, options?: { errorThreshold?: number, hideViewer?: boolean }): Chainable<JQuery<HTMLElement>>;
+
+            waitForResources(...names: string[]);
         }
     }
 }
@@ -40,3 +42,42 @@ Cypress.Commands.add('compareScreenshots', { prevSubject: ['element'] }, (subjec
 
     return cy.wrap(subject, { log: false });
 });
+
+Cypress.Commands.add('waitForResources', (...names) => {
+    cy.log(`Waiting for resources ${names.join(', ')}`);
+
+    cy.window(NO_LOG).then((win) => {
+        return new Cypress.Promise((resolve, reject) => {
+            let foundResources = false;
+
+            const timeout = setTimeout(() => {
+                if (foundResources) {
+                    return
+                }
+
+                clearInterval(interval);
+                clearTimeout(timeout);
+
+                reject(new Error(`Timed out waiting for resources ${names.join(', ')}`));
+            }, 10000);
+
+            const interval = setInterval(() => {
+                foundResources = names.every((name) => {
+                    return win.performance
+                        .getEntriesByType('resource')
+                        .find((item) => item.name.endsWith(name));
+                });
+
+                if (!foundResources) {
+                    return;
+                }
+
+                clearInterval(interval);
+                clearTimeout(timeout);
+
+                cy.log('Found all resources');
+                resolve();
+            }, 100);
+        });
+    });
+});

cypress/tsconfig.json

@@ -3,7 +3,6 @@
         "types": [
             "cypress",
             "node",
-            "cypress-real-events",
             "cypress-mochawesome-reporter"
         ]
     }

examples/e2e/navbar.html → examples/e2e/core/navbar.html

@@ -6,7 +6,7 @@
         <title>PhotoSphereViewer</title>
 
         <link rel="stylesheet" href="/dist/core/index.css" />
-        <link rel="stylesheet" href="../style.css" />
+        <link rel="stylesheet" href="../../style.css" />
     </head>
     <body>
         <div id="photosphere"></div>
@@ -44,7 +44,7 @@
 
         <script type="module">
             import { Viewer, DEFAULTS } from '@photo-sphere-viewer/core';
-            import { CustomNavbarButton } from '../scripts/CustomNavbarButton.js';
+            import { CustomNavbarButton } from '../../scripts/CustomNavbarButton.js';
 
             customElements.define('custom-navbar-button', CustomNavbarButton);
 

examples/e2e/compass.html → examples/e2e/plugins/compass.html

@@ -8,7 +8,7 @@
         <link rel="stylesheet" href="/dist/core/index.css" />
         <link rel="stylesheet" href="/dist/markers-plugin/index.css" />
         <link rel="stylesheet" href="/dist/compass-plugin/index.css" />
-        <link rel="stylesheet" href="../style.css" />
+        <link rel="stylesheet" href="../../style.css" />
     </head>
     <body>
         <div id="photosphere"></div>

examples/e2e/gallery.html → examples/e2e/plugins/gallery.html

@@ -7,7 +7,7 @@
 
         <link rel="stylesheet" href="/dist/core/index.css" />
         <link rel="stylesheet" href="/dist/gallery-plugin/index.css" />
-        <link rel="stylesheet" href="../style.css" />
+        <link rel="stylesheet" href="../../style.css" />
     </head>
     <body>
         <div id="photosphere"></div>