chore: Settings Cypress tests

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

@@ -6,10 +6,11 @@ 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);
+            // FIXME https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/testing-dom__wait-for-resource/README.md
+            cy.wait(2000);
             first = false;
         }
         // createBaseSnapshot();
@@ -92,7 +93,7 @@ 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.wait(1000); // more async thumbnails
 
         cy.get('.psv-gallery').compareScreenshots('set-thumbnailSize');
     });
@@ -148,17 +149,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,8 @@
 import 'cypress-mochawesome-reporter/register';
-import 'cypress-real-events';
 import { addCompareSnapshotCommand } from 'cypress-visual-regression/dist/command';
 
 addCompareSnapshotCommand({
-    errorThreshold: 0.01,
+    errorThreshold: 0.05,
     failSilently: !Cypress.config('isInteractive'),
 });
 

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>

examples/e2e/plugins/settings.html

@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>PhotoSphereViewer - settings demo</title>
+
+        <link rel="stylesheet" href="/dist/core/index.css" />
+        <link rel="stylesheet" href="/dist/settings-plugin/index.css" />
+        <link rel="stylesheet" href="../../style.css" />
+
+        <style>
+            /* inconsistent behavior in Cypress */
+            .psv-settings *:focus-visible {
+                outline: none !important;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="photosphere"></div>
+
+        <script type="importmap">
+            {
+                "imports": {
+                    "three": "/node_modules/three/build/three.module.js",
+                    "@photo-sphere-viewer/core": "/dist/core/index.module.js",
+                    "@photo-sphere-viewer/settings-plugin": "/dist/settings-plugin/index.module.js"
+                }
+            }
+        </script>
+
+        <script type="module">
+            import { Viewer } from '@photo-sphere-viewer/core';
+            import { SettingsPlugin } from '@photo-sphere-viewer/settings-plugin';
+
+            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>',
+                loadingImg: baseUrl + 'loader.gif',
+                plugins: [
+                    SettingsPlugin,
+                ],
+            });
+
+            window.viewer = viewer;
+        </script>
+    </body>
+</html>

package.json

@@ -38,7 +38,6 @@
     "alive-server": "^1.3.0",
     "cypress": "^13.15.0",
     "cypress-mochawesome-reporter": "^3.8.2",
-    "cypress-real-events": "^1.13.0",
     "cypress-visual-regression": "^5.2.2",
     "esbuild-sass-plugin": "^3.3.0",
     "eslint": "^8.57.0",

packages/settings-plugin/src/SettingsComponent.ts

@@ -64,12 +64,16 @@ export class SettingsComponent extends AbstractComponent {
             const menuWidth = this.container.offsetWidth;
 
             if (menuWidth >= buttonLeft + buttonWidth) {
+                // if the button is close to the left, stick the menu to the left side
                 this.container.style.left = '0px';
-            } else if (buttonLeft + menuWidth < viewerRect.width) {
-                this.container.style.left = `${buttonLeft}px`;
             } else if (menuWidth >= buttonRight + buttonWidth) {
+                // if the button is close to the right, stick the menu to the right side
                 this.container.style.right = '0px';
+            } else if (buttonLeft + menuWidth < viewerRect.width) {
+                // if there is enough space on the right of the button, stick the menu to the left of the button
+                this.container.style.left = `${buttonLeft}px`;
             } else {
+                // else stick to the right of the button
                 this.container.style.right = `${buttonRight}px`;
             }
         } else {