chore: Resolution Cypress tests

cypress/e2e/plugins/resolution.cy.ts

@@ -0,0 +1,150 @@
+import type { ResolutionPlugin } from '@photo-sphere-viewer/resolution-plugin';
+import { callPlugin, callViewer, checkEventHandler, checkPanorama, setPanorama, waitViewerReady } from '../../utils';
+import { BASE_URL } from '../../utils/constants';
+
+
+describe('plugin: resolution', () => {
+    beforeEach(() => {
+        localStorage.photoSphereViewer_touchSupport = 'false';
+        cy.visit('e2e/plugins/resolution.html');
+        waitViewerReady();
+        // createBaseSnapshot();
+    });
+
+    it('should destroy', () => {
+        callViewer('destroy').then(viewer => viewer.destroy());
+    });
+
+    it('should display the settings', () => {
+        cy.get('.psv-settings-button')
+            .compareScreenshots('button-sd')
+            .click();
+
+        cy.get('.psv-settings').compareScreenshots('settings');
+
+        cy.get('[data-setting-id="resolution"]').click();
+
+        cy.get('.psv-settings').compareScreenshots('settings-options');
+    });
+
+    it('should not show the settings badge', () => {
+        cy.visit('e2e/plugins/resolution.html?showBadge=false');
+
+        cy.get('.psv-settings-button').should('not.include.text', 'SD');
+    });
+
+    it('should translate the setting', () => {
+        callViewer('set lang').then(viewer => viewer.setOption('lang', { resolution: 'Qualité' }));
+
+        cy.get('.psv-settings-button').click();
+
+        cy.get('.psv-settings').should('include.text', 'Qualité');
+    });
+
+    it('should use the first resolution', () => {
+        checkPanorama('sphere-small.jpg');
+    });
+
+    it('should use the default resolution', () => {
+        cy.visit('e2e/plugins/resolution.html?resolution=HD');
+
+        checkPanorama('sphere.jpg');
+    });
+
+    it('should ignore default resolution with initial panorama', () => {
+        cy.visit('e2e/plugins/resolution.html?resolution=HD&withPanorama=true');
+
+        checkPanorama('sphere-small.jpg');
+    });
+
+    it('should change the resolution', () => {
+        const resolutionChangeHandler = listenResolutionEvent('resolution-changed');
+
+        cy.get('.psv-settings-button').click();
+        cy.get('[data-setting-id="resolution"]').click();
+        cy.get('[data-option-id="HD"]').click();
+
+        checkPanorama('sphere.jpg');
+        checkEventHandler(resolutionChangeHandler, { resolutionId: 'HD' });
+        cy.get('.psv-settings-button').compareScreenshots('button-hd');
+    });
+
+    it('should change the resolution by API', () => {
+        const resolutionChangeHandler = listenResolutionEvent('resolution-changed');
+
+        callResolution('set resolution').then(resolution => resolution.setResolution('HD'));
+
+        checkPanorama('sphere.jpg');
+        checkEventHandler(resolutionChangeHandler, { resolutionId: 'HD' });
+
+        callResolution('set bad resolution').then(resolution => {
+            expect(() => resolution.setResolution('MD')).to.throw('Resolution "MD" unknown');
+        });
+    });
+
+    it('should update resolution on panorama change', () => {
+        const resolutionChangeHandler = listenResolutionEvent('resolution-changed');
+
+        setPanorama('sphere.jpg');
+
+        checkEventHandler(resolutionChangeHandler, { resolutionId: 'HD' });
+    });
+
+    it('should change resolutions', () => {
+        const resolutionChangeHandler = listenResolutionEvent('resolution-changed');
+
+        // the current panorama is found in the new list
+        callResolution('set resolutions w.o. default').then(resolution => resolution.setResolutions([
+            { id: 'large', label: 'large', panorama: BASE_URL + 'sphere.jpg' },
+            { id: 'small', label: 'small', panorama: BASE_URL + 'sphere-small.jpg' },
+        ]));
+
+        checkEventHandler(resolutionChangeHandler, { resolutionId: 'small' });
+
+        resolutionChangeHandler.reset();
+
+        // a default value is provided
+        callResolution('set resolutions w. default').then(resolution => resolution.setResolutions([
+            { id: 'large', label: 'large', panorama: BASE_URL + 'sphere.jpg' },
+            { id: 'small', label: 'small', panorama: BASE_URL + 'sphere-small.jpg' },
+        ], 'large'));
+        cy.wait(200);
+
+        checkPanorama('sphere.jpg');
+        checkEventHandler(resolutionChangeHandler, { resolutionId: 'large' });
+
+        resolutionChangeHandler.reset();
+
+        // the current panorama is NOT found in the new list
+        setPanorama('sphere-test.jpg');
+        callResolution('set resolutions w.o. default no match').then(resolution => resolution.setResolutions([
+            { id: 'small', label: 'small', panorama: BASE_URL + 'sphere-small.jpg' },
+            { id: 'large', label: 'large', panorama: BASE_URL + 'sphere.jpg' },
+        ]));
+        cy.wait(200);
+
+        checkPanorama('sphere-small.jpg');
+        checkEventHandler(resolutionChangeHandler, { resolutionId: 'small' });
+    });
+
+    it('should throw if missing properties', () => {
+        callResolution('set resolutions').then(resolution => {
+            expect(() => resolution.setResolutions([{ id: null, label: 'label', panorama: 'sphere.jpg' }])).to.throw('Missing resolution id');
+
+            expect(() => resolution.setResolutions([{ id: 'sd', label: null, panorama: 'sphere.jpg' }])).to.throw('Missing resolution label');
+
+            expect(() => resolution.setResolutions([{ id: 'sd', label: 'label', panorama: null }])).to.throw('Missing resolution panorama');
+        });
+    });
+
+    function callResolution(log: string) {
+        return callPlugin<ResolutionPlugin>('resolution', log);
+    }
+
+    function listenResolutionEvent(name: Parameters<ResolutionPlugin['addEventListener']>[0]): Cypress.Agent<sinon.SinonStub> {
+        const handler = cy.stub();
+        callResolution(`listen "${name}"`).then(resolution => resolution.addEventListener(name, handler));
+        return handler;
+    }
+
+});

cypress/pages/plugins/compass.html

@@ -3,7 +3,7 @@
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>PhotoSphereViewer - compass demo</title>
+        <title>PhotoSphereViewer</title>
 
         <link rel="stylesheet" href="/dist/core/index.css" />
         <link rel="stylesheet" href="/dist/markers-plugin/index.css" />

cypress/pages/plugins/gallery.html

@@ -3,7 +3,7 @@
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>PhotoSphereViewer - gallery demo</title>
+        <title>PhotoSphereViewer</title>
 
         <link rel="stylesheet" href="/dist/core/index.css" />
         <link rel="stylesheet" href="/dist/gallery-plugin/index.css" />

cypress/pages/plugins/resolution.html

@@ -0,0 +1,69 @@
+<!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="/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/resolution-plugin": "/dist/resolution-plugin/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 { ResolutionPlugin } from '@photo-sphere-viewer/resolution-plugin';
+            import { SettingsPlugin } from '@photo-sphere-viewer/settings-plugin';
+
+            const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';
+
+            const urlParams = new URLSearchParams(window.location.search);
+
+            const viewer = new Viewer({
+                container: 'photosphere',
+                panorama: urlParams.get('withPanorama') ? baseUrl + 'sphere-small.jpg' : null,
+                plugins: [
+                    SettingsPlugin,
+                    [ResolutionPlugin, {
+                        showBadge: urlParams.get('showBadge') !== 'false',
+                        defaultResolution: urlParams.get('resolution'),
+                        resolutions: [
+                            {
+                                id: 'SD',
+                                label: 'Small',
+                                panorama: baseUrl + 'sphere-small.jpg',
+                            },
+                            {
+                                id: 'HD',
+                                label: 'Normal',
+                                panorama: baseUrl + 'sphere.jpg',
+                            },
+                        ],
+                    }],
+                ],
+            });
+
+            window.viewer = viewer;
+        </script>
+    </body>
+</html>

cypress/pages/plugins/settings.html

@@ -3,7 +3,7 @@
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>PhotoSphereViewer - settings demo</title>
+        <title>PhotoSphereViewer</title>
 
         <link rel="stylesheet" href="/dist/core/index.css" />
         <link rel="stylesheet" href="/dist/settings-plugin/index.css" />

cypress/utils/index.ts

@@ -43,7 +43,7 @@ export function checkPanorama(name: string) {
 }
 
 export function setPanorama(name: string) {
-    callViewer('change panorama')
+    callViewer(`set panorama "${name}"`)
         .then(viewer => viewer.setPanorama(BASE_URL + name, { transition: false }));
     waitViewerReady();
 }

packages/resolution-plugin/src/ResolutionPlugin.ts

@@ -110,27 +110,31 @@ export class ResolutionPlugin extends AbstractPlugin<ResolutionPluginEvents> {
             if (!resolution.id) {
                 throw new PSVError('Missing resolution id');
             }
+            if (!resolution.label) {
+                throw new PSVError('Missing resolution label');
+            }
             if (!resolution.panorama) {
                 throw new PSVError('Missing resolution panorama');
             }
             this.resolutionsById[resolution.id] = resolution;
         });
 
-        // pick first resolution if no default provided and no current panorama
-        if (!this.viewer.config.panorama && !defaultResolution) {
-            defaultResolution = resolutions[0].id;
-        }
-
-        // ensure the default resolution exists
-        if (defaultResolution && !this.resolutionsById[defaultResolution]) {
-            utils.logWarn(`Resolution ${defaultResolution} unknown`);
-            defaultResolution = resolutions[0].id;
+        // pick first resolution if no default provided and cannot find match with current panorama
+        if (!defaultResolution) {
+            if (this.viewer.config.panorama) {
+                const resolution = this.resolutions.find((r) => utils.deepEqual(this.viewer.config.panorama, r.panorama));
+                if (!resolution) {
+                    defaultResolution = resolutions[0].id;
+                }
+            } else {
+                defaultResolution = resolutions[0].id;
+            }
         }
 
         if (defaultResolution) {
             this.setResolution(defaultResolution);
         }
-
+        
         this.__refreshResolution();
     }
 
@@ -140,7 +144,7 @@ export class ResolutionPlugin extends AbstractPlugin<ResolutionPluginEvents> {
      */
     setResolution(id: string): Promise<unknown> {
         if (!this.resolutionsById[id]) {
-            throw new PSVError(`Resolution ${id} unknown`);
+            throw new PSVError(`Resolution "${id}" unknown`);
         }
 
         return this.__setResolutionIfExists(id);