chore: gallery Cypress tests

cypress/e2e/navbar.cy.ts → cypress/e2e/core/navbar.cy.ts

@@ -1,6 +1,6 @@
-import { getViewer, waitViewerReady } from '../utils';
+import { getViewer, waitViewerReady } from '../../utils';
 
-describe('navbar', () => {
+describe('core: navbar', () => {
     beforeEach(() => {
         localStorage.photoSphereViewer_touchSupport = 'false';
         cy.visit('e2e/navbar.html');

cypress/e2e/compass.cy.ts → cypress/e2e/plugins/compass.cy.ts

@@ -1,8 +1,10 @@
 import type { CompassPlugin, CompassPluginConfig } from '@photo-sphere-viewer/compass-plugin';
+import type { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';
 import type { Point } from '@photo-sphere-viewer/core';
-import { checkPosition, getPlugin, getViewer, waitViewerReady } from '../utils';
+import { checkPosition, createBaseSnapshot, getPlugin, getViewer, waitViewerReady } from '../../utils';
+import { BASE_URL, NO_LOG } from '../../utils/constants';
 
-describe('compass', () => {
+describe('plugin: compass', () => {
     beforeEach(() => {
         cy.visit('e2e/compass.html');
         waitViewerReady();
@@ -16,13 +18,11 @@ describe('compass', () => {
     });
 
     it('should hide the compass', () => {
-        getPlugin<CompassPlugin>('compass', 'hide compass')
-            .then(compass => compass.hide());
+        getCompass('hide compass').then(compass => compass.hide());
 
         cy.get('.psv-compass').should('not.be.visible');
 
-        getPlugin<CompassPlugin>('compass', 'show compass')
-            .then(compass => compass.show());
+        getCompass('show compass').then(compass => compass.show());
 
         cy.get('.psv-compass').should('be.visible');
     });
@@ -65,8 +65,7 @@ describe('compass', () => {
     });
 
     it('should disable navigation', () => {
-        getPlugin<CompassPlugin>('compass', 'disable navigation')
-            .then(compass => compass.setOption('navigation', false));
+        getCompass('disable navigation').then(compass => compass.setOption('navigation', false));
 
         withCompassPosition(({ element, x, y, width, height }) => {
             const point = { clientX: x + width * .5, clientY: y + height * .75 };
@@ -97,8 +96,7 @@ describe('compass', () => {
 
         checkPosition({ yaw: Math.PI / 2, pitch: -1 });
 
-        getPlugin<CompassPlugin>('compass', 'set resetPitch')
-            .then(compass => compass.setOption('resetPitch', true));
+        getCompass('set resetPitch').then(compass => compass.setOption('resetPitch', true));
 
         withCompassPosition(({ element, x, y, width, height }) => {
             const point = { clientX: x + width * .5, clientY: y + height * .75 };
@@ -118,8 +116,7 @@ describe('compass', () => {
         backgroundSvg: '<svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" fill="rgba(0, 0, 0, .5)"/></svg>',
     } satisfies CompassPluginConfig).forEach(([key, value]) => {
         it(`should set the ${key}`, () => {
-            getPlugin<CompassPlugin>('compass', `set ${key}`)
-                .then(compass => compass.setOption(key as any, value));
+            getCompass(`set ${key}`).then(compass => compass.setOption(key as any, value));
 
             if (key === 'navigationColor') {
                 withCompassPosition(({ element, x, y, width, height }) => {
@@ -152,8 +149,7 @@ describe('compass', () => {
             ['bottom center', { x: vw / 2 - size / 2, y: vh - nav - margin - size }],
             ['bottom right', { x: vw - size - margin, y: vh - nav - margin - size }],
         ].forEach(([position, coords]: [string, Point]) => {
-            getPlugin<CompassPlugin>('compass', `set position ${position}`)
-                .then(compass => compass.setOption('position', position));
+            getCompass(`set position ${position}`).then(compass => compass.setOption('position', position));
 
             cy.get('.psv-compass')
                 .then(element => {
@@ -172,8 +168,7 @@ describe('compass', () => {
             ['bottom center', { x: vw / 2 - size / 2, y: vh - margin - size }],
             ['bottom right', { x: vw - size - margin, y: vh - margin - size }],
         ].forEach(([position, coords]: [string, Point]) => {
-            getPlugin<CompassPlugin>('compass', `set position ${position}`)
-                .then(compass => compass.setOption('position', position));
+            getCompass(`set position ${position}`).then(compass => compass.setOption('position', position));
 
             cy.get('.psv-compass')
                 .then(element => {
@@ -185,46 +180,93 @@ describe('compass', () => {
     });
 
     it('should show hotspots', () => {
-        getPlugin<CompassPlugin>('compass', 'set hotspots')
-            .then(compass => {
-                compass.setHotspots([
-                    // @ts-ignore missing pitch
-                    { yaw: 0 },
-                    { yaw: Math.PI / 2, pitch: 0 },
-                    { yaw: Math.PI, pitch: -1 },
-                    { yaw: Math.PI * 3 / 2, pitch: 1 },
-                ]);
-            });
+        getCompass('set hotspots').then(compass => {
+            compass.setHotspots([
+                // @ts-ignore missing pitch
+                { yaw: 0 },
+                { yaw: Math.PI / 2, pitch: 0 },
+                { yaw: Math.PI, pitch: -1 },
+                { yaw: Math.PI * 3 / 2, pitch: 1 },
+            ]);
+        });
 
         cy.get('.psv-compass').compareScreenshots('hotspots');
     });
 
     it('should set hotspots color', () => {
-        getPlugin<CompassPlugin>('compass', 'set hotspots')
-            .then(compass => {
-                compass.setOption('hotspotColor', 'green')
-
-                compass.setHotspots([
-                    { yaw: 0, pitch: 0 },
-                    { yaw: Math.PI / 2, pitch: 0, color: 'red' },
-                    { yaw: Math.PI, pitch: 0, color: 'rgba(255, 0, 0, 0.5)' },
-                    { yaw: Math.PI * 3 / 2, pitch: 0, color: '#ff000050' },
-                ]);
-            });
+        getCompass('set hotspots').then(compass => {
+            compass.setOption('hotspotColor', 'green')
+
+            compass.setHotspots([
+                { yaw: 0, pitch: 0 },
+                { yaw: Math.PI / 2, pitch: 0, color: 'red' },
+                { yaw: Math.PI, pitch: 0, color: 'rgba(255, 0, 0, 0.5)' },
+                { yaw: Math.PI * 3 / 2, pitch: 0, color: '#ff000050' },
+            ]);
+        });
 
         cy.get('.psv-compass').compareScreenshots('hotspots-color');
     });
 
-    function withCompassPosition(cb: (res: { element: Cypress.Chainable<JQuery<HTMLElement>>, x: number, y: number, width: number, height: number }) => void) {
-        cy.get('.psv-compass')
-            .then(element => {
-                const { x, y, width, height } = element[0].getBoundingClientRect();
+    it('should display markers', () => {
+        getPlugin<MarkersPlugin>('markers', 'set markers')
+            .then(markers => {
+                markers.setMarkers([
+                    {
+                        id: 'image',
+                        position: { yaw: Math.PI / 2, pitch: 0 },
+                        image: BASE_URL + 'pictos/pin-red.png',
+                        size: { width: 32, height: 32 },
+                        data: { compass: '#cc3333' },
+                    },
+                    {
+                        id: 'image-hidden',
+                        position: { yaw: Math.PI / 2, pitch: 1 },
+                        image: BASE_URL + 'pictos/pin-red.png',
+                        size: { width: 32, height: 32 },
+                    },
+                    {
+                        id: 'polygon',
+                        polygonPixels: [
+                            [2941 / 3, 1413 / 3], [3042 / 3, 1402 / 3], [3222 / 3, 1419 / 3], [3433 / 3, 1463 / 3],
+                            [3480 / 3, 1505 / 3], [3438 / 3, 1538 / 3], [3241 / 3, 1543 / 3], [3041 / 3, 1555 / 3],
+                            [2854 / 3, 1559 / 3], [2739 / 3, 1516 / 3], [2775 / 3, 1469 / 3], [2941 / 3, 1413 / 3],
+                        ],
+                        data: { compass: 'rgba(255, 0, 50, 0.8)' },
+                    },
+                    {
+                        id: 'polyline',
+                        polylinePixels: [
+                            [2478 / 3, 1635 / 3], [2184 / 3, 1747 / 3], [1674 / 3, 1953 / 3], [1166 / 3, 1852 / 3],
+                            [709 / 3, 1669 / 3], [301 / 3, 1519 / 3], [94 / 3, 1399 / 3], [34 / 3, 1356 / 3],
+                        ],
+                        data: { compass: 'rgba(80, 150, 50, 0.8)' },
+                    }
+                ]);
+            });
 
-                cb({
-                    element: cy.wrap(element, { log: false }),
-                    x, y, width, height,
-                });
+        cy.get('.psv-compass').compareScreenshots('markers');
+    });
+
+    function withCompassPosition(cb: (res: {
+        element: Cypress.Chainable<JQuery<HTMLElement>>,
+        x: number,
+        y: number,
+        width: number,
+        height: number,
+    }) => void) {
+        cy.get('.psv-compass').then(element => {
+            const { x, y, width, height } = element[0].getBoundingClientRect();
+
+            cb({
+                element: cy.wrap(element, NO_LOG),
+                x, y, width, height,
             });
+        });
+    }
+
+    function getCompass(log: string) {
+        return getPlugin<CompassPlugin>('compass', log);
     }
 
 });

cypress/e2e/plugins/gallery.cy.ts

@@ -0,0 +1,84 @@
+import type { GalleryPlugin } from '@photo-sphere-viewer/gallery-plugin';
+import { getPlugin, getViewer, waitViewerReady } from '../../utils';
+import { BASE_URL } from '../../utils/constants';
+
+describe('plugin: gallery', () => {
+    let first = true;
+
+    beforeEach(() => {
+        cy.visit('e2e/gallery.html');
+        waitViewerReady();
+        if (first) { // wait for async thumbnails
+            cy.wait(1000);
+            first = false;
+        }
+        // createBaseSnapshot();
+    });
+
+    it('should have a gallery', () => {
+        cy.get('.psv-gallery')
+            .should('be.visible')
+            .compareScreenshots('base');
+    });
+
+    it('should display in fullscreen', {
+        viewportWidth: 400,
+        viewportHeight: 800,
+    }, () => {
+        cy.get('.psv-gallery')
+            .then(gallery => {
+                const { x, y, width, height } = gallery[0].getBoundingClientRect();
+                return { x, y, width, height };
+            })
+            .should('deep.equal', { x: 0, y: 0, width: 400, height: 760 });
+
+        cy.get('.psv-gallery').compareScreenshots('mobile');
+
+        cy.get('.psv-gallery .psv-panel-close-button').click();
+
+        cy.get('.psv-gallery').should('not.be.visible');
+    });
+
+    it('should add a navbar button', () => {
+        cy.get('.psv-gallery-button')
+            .should('be.visible')
+            .should('have.class', 'psv-button--active')
+            .click()
+            .should('not.have.class', 'psv-button--active');
+
+        cy.get('.psv-gallery').should('not.be.visible');
+    });
+
+    it('should highlight the current item', () => {
+        cy.get('[data-psv-gallery-item=sphere]').should('have.class', 'psv-gallery-item--active');
+
+        getViewer('change panorama').then(viewer => viewer.setPanorama(BASE_URL + 'sphere-test.jpg'));
+        waitViewerReady();
+
+        cy.get('[data-psv-gallery-item=sphere]').should('not.have.class', 'psv-gallery-item--active');
+        cy.get('[data-psv-gallery-item=test-sphere]').should('have.class', 'psv-gallery-item--active');
+
+        getViewer('change panorama').then(viewer => viewer.setPanorama(BASE_URL + 'sphere-cropped.jpg'));
+        waitViewerReady();
+
+        cy.get('.psv-gallery-item--active').should('not.exist');
+    });
+
+    it('should change the panorama when clicked', () => {
+        cy.get('[data-psv-gallery-item=test-sphere]').click();
+        waitViewerReady();
+
+        getViewer('check panorama').then(viewer =>expect(viewer.config.panorama as string).to.eq(BASE_URL + 'sphere-test.jpg'));
+        cy.get('.psv-caption-content').should('have.text', 'Test sphere'); // use name as caption
+
+        cy.get('[data-psv-gallery-item=1]').click();
+        waitViewerReady();
+
+        cy.get('.psv-caption-content').should('have.text', 'Cape Florida Light, Key Biscayne © Pixexid');
+    });
+
+    function getGallery(log: string) {
+        return getPlugin<GalleryPlugin>('gallery', log);
+    }
+
+});

cypress/support/e2e.ts

@@ -3,7 +3,7 @@ import 'cypress-real-events';
 import { addCompareSnapshotCommand } from 'cypress-visual-regression/dist/command';
 
 addCompareSnapshotCommand({
-    errorThreshold: 0.1,
+    errorThreshold: 0.01,
     failSilently: !Cypress.config('isInteractive'),
 });
 

cypress/utils/constants.ts

@@ -0,0 +1,2 @@
+export const BASE_URL = 'https://photo-sphere-viewer-data.netlify.app/assets/';
+export const NO_LOG = { log: false };

cypress/utils/index.ts

@@ -1,27 +1,34 @@
 import type { AbstractPlugin, SphericalPosition, Viewer } from '@photo-sphere-viewer/core';
+import { NO_LOG } from './constants';
 
 export function waitViewerReady() {
     getViewer('wait ready').then(viewer => {
-        return new Promise(resolve => {
-            viewer.addEventListener('ready', () => {
-                setTimeout(resolve, 200);
-            }, { once: true });
-        });
+        if (!viewer.state.ready) {
+            return new Promise(resolve => {
+                viewer.addEventListener('ready', () => {
+                    setTimeout(resolve, 200);
+                }, { once: true });
+            });
+        } else if (viewer.state.loadingPromise) {
+            return viewer.state.loadingPromise;
+        } else {
+            return Promise.resolve();
+        }
     });
 }
 
 export function getViewer(log: string): Cypress.Chainable<Viewer> {
     cy.log(`Viewer: ${log}`);
-    return cy.window({ log: false })
-        .its('viewer', { log: false });
+    return cy.window(NO_LOG)
+        .its('viewer', NO_LOG);
 }
 
 export function getPlugin<T extends AbstractPlugin<any>>(id: string, log: string | false): Cypress.Chainable<T> {
     if (log !== false) {
         cy.log(`${id}: ${log}`);
     }
-    return cy.window({ log: false })
-        .its('viewer', { log: false })
+    return cy.window(NO_LOG)
+        .its('viewer', NO_LOG)
         .then(viewer => viewer.getPlugin(id));
 }