diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 795dc971..d295ee0c 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -63,9 +63,18 @@ jobs: path: 'cypress/reports/html/.jsons/*.json' reporter: mochawesome-json + - name: report artifact + uses: actions/upload-artifact@v4 + if: ${{ !cancelled() }} + with: + name: e2e-report-${{ env.REF_NAME_SLUG }}-${{ env.SHORT_SHA }} + path: | + cypress/reports/html + !cypress/reports/html/.jsons + - name: deploy report uses: ./.github/workflows/shared/deploy-netlify - if: ${{ !cancelled() && github.repository == 'mistic100/Photo-Sphere-Viewer' && github.event_name != 'pull_request' }} + if: ${{ !cancelled() && github.repository == 'mistic100/Photo-Sphere-Viewer' && github.ref_name == 'main' }} with: env: cypress root-folder: cypress/reports/html diff --git a/.github/workflows/shared/deploy-netlify/action.yml b/.github/workflows/shared/deploy-netlify/action.yml index 40462edb..624f4e9c 100644 --- a/.github/workflows/shared/deploy-netlify/action.yml +++ b/.github/workflows/shared/deploy-netlify/action.yml @@ -28,7 +28,7 @@ runs: - name: deploy id: netlify shell: bash - run: node ./build/deploy-netlify.mjs --rootFolder=${{ inputs.root-folder }} --exclude=${{ inputs.excludes }} --functionsFolder=${{ inputs.functions-folder }} --branch=${{ github.ref_name }} + run: node ./build/deploy-netlify.mjs --rootFolder=${{ inputs.root-folder }} --exclude=${{ inputs.excludes }} --functionsFolder=${{ inputs.functions-folder }} env: NETLIFY_AUTH_TOKEN: ${{ inputs.auth-token }} NETLIFY_SITE_ID: ${{ inputs.site-id }} diff --git a/.github/workflows/shared/setup/action.yml b/.github/workflows/shared/setup/action.yml index aaa0bb4c..fb3f909f 100644 --- a/.github/workflows/shared/setup/action.yml +++ b/.github/workflows/shared/setup/action.yml @@ -17,6 +17,7 @@ runs: run: | echo "YARN_CACHE_DIR=$(yarn cache dir)" >> $GITHUB_ENV echo "SHORT_SHA=`echo ${{ github.sha }} | cut -c1-8`" >> $GITHUB_ENV + echo "REF_NAME_SLUG=${GITHUB_REF_NAME////_}" >> $GITHUB_ENV - name: yarn cache uses: actions/cache@v4 diff --git a/build/deploy-netlify.mjs b/build/deploy-netlify.mjs index a05556b3..bbb5d0ee 100644 --- a/build/deploy-netlify.mjs +++ b/build/deploy-netlify.mjs @@ -14,7 +14,6 @@ import Queue from 'queue'; const MAX_RETRIES = 5; (async () => { - // --branch (optional) // --rootFolder // --functionsFolder (unsupported) // --exclude (optional) @@ -34,25 +33,19 @@ const MAX_RETRIES = 5; throw `Folder ${config.rootFolder} does not exist`; } - if (config.branch === 'main') { - config.branch = undefined; - } - const files = await listFilesWithHashes(config.rootFolder, config.exclude, 'sha1'); // TODO zip functions const functions = {};// await listFilesWithHashes(config.functionsFolder, null, 'sha256'); - const deploy = await createDeploy(config.branch, files, functions); + const deploy = await createDeploy(files, functions); await uploadFiles(config.rootFolder, files, deploy); // await uploadFunctions(config.functionsFolder, functions, deploy); - if (!config.branch) { - await publishDeploy(deploy); - } + await publishDeploy(deploy); if (process.env.CI) { - writeFileSync(process.env.GITHUB_OUTPUT, `deploy_url=${config.branch ? deploy.deploy_ssl_url : deploy.ssl_url}`, 'utf-8'); + writeFileSync(process.env.GITHUB_OUTPUT, `deploy_url=${deploy.ssl_url}`, 'utf-8'); } })(); @@ -111,7 +104,7 @@ async function listFilesWithHashes(dir, exclude, hashfn) { /** * Creates a new deployment on Netlify */ -async function createDeploy(branch, files, functions) { +async function createDeploy(files, functions) { try { const result = await retryFetch(`https://api.netlify.com/api/v1/sites/${process.env.NETLIFY_SITE_ID}/deploys`, { method: 'POST', @@ -120,7 +113,6 @@ async function createDeploy(branch, files, functions) { 'Authorization': 'Bearer ' + process.env.NETLIFY_AUTH_TOKEN, }, body: JSON.stringify({ - branch, files, functions: Object.entries(functions).reduce((res, [name, hash]) => ({ ...res, diff --git a/build/liveserver.mjs b/build/liveserver.mjs index 58a6de3c..9087738f 100644 --- a/build/liveserver.mjs +++ b/build/liveserver.mjs @@ -10,6 +10,7 @@ const __dirname = path.dirname(__filename); const rootDir = path.resolve(__dirname, '..'); const EXAMPLES_DIR = 'examples'; +const CYPRESS_DIR = 'cypress/pages'; const PACKAGES_DIR = 'packages'; const DIST_DIR = 'dist'; @@ -31,12 +32,13 @@ liveServer.start({ open: !e2e ? `/index.html#ip=${currentIp}` : null, watch: [ path.join(rootDir, EXAMPLES_DIR), + path.join(rootDir, CYPRESS_DIR), ...packages.map((name) => path.join(rootDir, PACKAGES_DIR, name, DIST_DIR)), ], mount: [ ['/node_modules', path.join(rootDir, 'node_modules')], - ['/data', path.join(rootDir, '..', 'photo-sphere-viewer-data/assets')], - ...packages.map((name) => [`/${DIST_DIR}/${name}`, path.join(rootDir, PACKAGES_DIR, name, DIST_DIR)]), + ['/e2e', path.join(CYPRESS_DIR)], + ...packages.map((name) => [`/dist/${name}`, path.join(rootDir, PACKAGES_DIR, name, DIST_DIR)]), ], https: { cert: fakeCert, diff --git a/cypress/e2e/core/navbar.cy.ts b/cypress/e2e/core/navbar.cy.ts index 7d9ad66f..f73f1a89 100644 --- a/cypress/e2e/core/navbar.cy.ts +++ b/cypress/e2e/core/navbar.cy.ts @@ -1,4 +1,4 @@ -import { getViewer, waitViewerReady } from '../../utils'; +import { callViewer, waitViewerReady } from '../../utils'; describe('core: navbar', () => { beforeEach(() => { @@ -28,13 +28,13 @@ describe('core: navbar', () => { it('should update the caption', () => { cy.get('.psv-caption-content').should('have.text', 'Parc national du Mercantour © Damien Sorel'); - getViewer('change caption via options').then(viewer => viewer.setOption('caption', 'Name: Lorem Ipsum')); + callViewer('change caption via options').then(viewer => viewer.setOption('caption', 'Name: Lorem Ipsum')); cy.get('.psv-caption-content').should('have.text', 'Name: Lorem Ipsum'); cy.get('.psv-navbar').compareScreenshots('update-caption'); - getViewer('change caption via API').then(viewer => viewer.navbar.setCaption('Loading...')); + callViewer('change caption via API').then(viewer => viewer.navbar.setCaption('Loading...')); cy.get('.psv-caption-content').should('have.text', 'Loading...'); }); @@ -67,7 +67,7 @@ describe('core: navbar', () => { viewportWidth: 800, viewportHeight: 900, }, () => { - getViewer('remove description').then(viewer => viewer.setOption('description', null)); + callViewer('remove description').then(viewer => viewer.setOption('description', null)); cy.get('.psv-caption-content').should('not.be.visible'); @@ -168,17 +168,17 @@ describe('core: navbar', () => { fullscreen: 'Plein écran', myButton: 'Cliquez ici', }; - getViewer('translate to french').then(viewer => viewer.setOption('lang', fr)); + callViewer('translate to french').then(viewer => viewer.setOption('lang', fr)); assertTitles(fr); }); it('should hide the navbar', () => { - getViewer('hide navbar').then(viewer => viewer.navbar.hide()); + callViewer('hide navbar').then(viewer => viewer.navbar.hide()); cy.get('.psv-navbar').should('not.be.visible'); - getViewer('show navbar').then(viewer => viewer.navbar.show()); + callViewer('show navbar').then(viewer => viewer.navbar.show()); cy.get('.psv-navbar').should('be.visible'); }); @@ -194,44 +194,44 @@ describe('core: navbar', () => { }); } - getViewer('change buttons via options').then(viewer => viewer.setOption('navbar', 'zoom move')); + callViewer('change buttons via options').then(viewer => viewer.setOption('navbar', 'zoom move')); assertButtons(['Zoom out', 'Zoom in', 'Move left', 'Move right', 'Move up', 'Move down']); cy.get('.psv-navbar').compareScreenshots('update-buttons'); - getViewer('change buttons via API').then(viewer => viewer.navbar.setButtons(['download', 'fullscreen'])); + callViewer('change buttons via API').then(viewer => viewer.navbar.setButtons(['download', 'fullscreen'])); assertButtons(['Download', 'Fullscreen']); }); it('should hide a button', () => { - getViewer('hide fullscreen button').then(viewer => viewer.navbar.getButton('fullscreen').hide()); + callViewer('hide fullscreen button').then(viewer => viewer.navbar.getButton('fullscreen').hide()); cy.get('.psv-fullscreen-button').should('not.be.visible'); cy.get('.psv-navbar').compareScreenshots('hide-button'); - getViewer('show fullscreen button').then(viewer => viewer.navbar.getButton('fullscreen').show()); + callViewer('show fullscreen button').then(viewer => viewer.navbar.getButton('fullscreen').show()); cy.get('.psv-fullscreen-button').should('be.visible'); }); it('should disable a button', () => { - getViewer('disable download button').then(viewer => viewer.navbar.getButton('download').disable()); + callViewer('disable download button').then(viewer => viewer.navbar.getButton('download').disable()); cy.get('.psv-download-button').should('have.class', 'psv-button--disabled'); cy.get('.psv-navbar').compareScreenshots('disable-button'); - getViewer('enable download button').then(viewer => viewer.navbar.getButton('download').enable()); + callViewer('enable download button').then(viewer => viewer.navbar.getButton('download').enable()); cy.get('.psv-download-button').should('not.have.class', 'psv-button--disabled'); }); it('should display a custom element', () => { cy.document().then(document => { - getViewer('set custom element').then(viewer => viewer.navbar.setButtons([ + callViewer('set custom element').then(viewer => viewer.navbar.setButtons([ { content: document.createElement('custom-navbar-button'), } diff --git a/cypress/e2e/plugins/compass.cy.ts b/cypress/e2e/plugins/compass.cy.ts index 577aa65e..368c71ef 100644 --- a/cypress/e2e/plugins/compass.cy.ts +++ b/cypress/e2e/plugins/compass.cy.ts @@ -1,7 +1,7 @@ -import type { CompassPlugin, CompassPluginConfig } from '@photo-sphere-viewer/compass-plugin'; -import type { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin'; +import type { CompassPlugin } from '@photo-sphere-viewer/compass-plugin'; import type { Point } from '@photo-sphere-viewer/core'; -import { checkPosition, getPlugin, getViewer, waitViewerReady } from '../../utils'; +import type { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin'; +import { callPlugin, callViewer, checkPosition, waitViewerReady } from '../../utils'; import { BASE_URL, NO_LOG } from '../../utils/constants'; describe('plugin: compass', () => { @@ -18,23 +18,23 @@ describe('plugin: compass', () => { }); it('should hide the compass', () => { - getCompass('hide compass').then(compass => compass.hide()); + callCompass('hide compass').then(compass => compass.hide()); cy.get('.psv-compass').should('not.be.visible'); - getCompass('show compass').then(compass => compass.show()); + callCompass('show compass').then(compass => compass.show()); cy.get('.psv-compass').should('be.visible'); }); it('should pan & zoom', () => { - getViewer('rotate 90deg') + callViewer('rotate 90deg') .then(viewer => viewer.rotate({ pitch: 0, yaw: '90deg' })) .wait(200); cy.get('.psv-compass').compareScreenshots('rotate'); - getViewer('zoom 100%') + callViewer('zoom 100%') .then(viewer => viewer.zoom(100)) .wait(200); @@ -65,7 +65,7 @@ describe('plugin: compass', () => { }); it('should disable navigation', () => { - getCompass('disable navigation').then(compass => compass.setOption('navigation', false)); + callCompass('disable navigation').then(compass => compass.setOption('navigation', false)); withCompassPosition(({ element, x, y, width, height }) => { const point = { clientX: x + width * .5, clientY: y + height * .75 }; @@ -82,7 +82,7 @@ describe('plugin: compass', () => { }); it('should reset pitch on click', () => { - getViewer('move down') + callViewer('move down') .then(viewer => viewer.rotate({ yaw: 0, pitch: -1 })) .wait(200); @@ -96,7 +96,7 @@ describe('plugin: compass', () => { checkPosition({ yaw: Math.PI / 2, pitch: -1 }); - getCompass('set resetPitch').then(compass => compass.setOption('resetPitch', true)); + callCompass('set resetPitch').then(compass => compass.setOption('resetPitch', true)); withCompassPosition(({ element, x, y, width, height }) => { const point = { clientX: x + width * .5, clientY: y + height * .75 }; @@ -109,30 +109,37 @@ describe('plugin: compass', () => { checkPosition({ yaw: Math.PI, pitch: 0 }); }); - Object.entries({ - coneColor: '#00000055', - navigationColor: 'rgba(0, 255, 0, 0.5)', - size: '300px', - backgroundSvg: '', - } satisfies CompassPluginConfig).forEach(([key, value]) => { - it(`should set the ${key}`, () => { - getCompass(`set ${key}`).then(compass => compass.setOption(key as any, value)); - - if (key === 'navigationColor') { - withCompassPosition(({ element, x, y, width, height }) => { - const point = { clientX: x + width * .5, clientY: y + height * .75 }; - - element - .trigger('mousemove', point) - .compareScreenshots(`set-${key}`) - .trigger('mouseleave'); - }); - } else { - cy.get('.psv-compass').compareScreenshots(`set-${key}`); - } + it('should change the navigationColor', () => { + callCompass('set navigationColor').then(compass => compass.setOption('navigationColor', 'rgba(0, 255, 0, 0.5)')); + + withCompassPosition(({ element, x, y, width, height }) => { + const point = { clientX: x + width * .5, clientY: y + height * .75 }; + + element + .trigger('mousemove', point) + .compareScreenshots('set-navigationColor') + .trigger('mouseleave'); }); }); + it('should change the coneColor', () => { + callCompass('set coneColor').then(compass => compass.setOption('coneColor', '#00000055')); + + cy.get('.psv-compass').compareScreenshots('set-coneColor'); + }); + + it('should change the size', () => { + callCompass('set size').then(compass => compass.setOption('size', '300px')); + + cy.get('.psv-compass').compareScreenshots('set-size'); + }); + + it('should change the backgroundSvg', () => { + callCompass('set backgroundSvg').then(compass => compass.setOption('backgroundSvg', '')); + + cy.get('.psv-compass').compareScreenshots('set-backgroundSvg'); + }); + it('should change the position', () => { const size = 120; const margin = 10; @@ -151,7 +158,7 @@ describe('plugin: 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]) => { - getCompass(`set position ${position}`).then(compass => compass.setOption('position', position)); + callCompass(`set position ${position}`).then(compass => compass.setOption('position', position)); cy.get('.psv-compass') .should(compass => { @@ -160,7 +167,7 @@ describe('plugin: compass', () => { }); }); - getViewer('hide navbar') + callViewer('hide navbar') .then(viewer => viewer.navbar.hide()) .wait(200); @@ -169,7 +176,7 @@ describe('plugin: 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]) => { - getCompass(`set position ${position}`).then(compass => compass.setOption('position', position)); + callCompass(`set position ${position}`).then(compass => compass.setOption('position', position)); cy.get('.psv-compass') .then(element => { @@ -181,7 +188,7 @@ describe('plugin: compass', () => { }); it('should show hotspots', () => { - getCompass('set hotspots').then(compass => { + callCompass('set hotspots').then(compass => { compass.setHotspots([ // @ts-ignore missing pitch { yaw: 0 }, @@ -195,7 +202,7 @@ describe('plugin: compass', () => { }); it('should set hotspots color', () => { - getCompass('set hotspots').then(compass => { + callCompass('set hotspots').then(compass => { compass.setOption('hotspotColor', 'green') compass.setHotspots([ @@ -210,41 +217,40 @@ describe('plugin: compass', () => { }); it('should display markers', () => { - getPlugin('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)' }, - } - ]); - }); + callMarkers('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)' }, + } + ]); + }); cy.get('.psv-compass').compareScreenshots('markers'); }); @@ -266,8 +272,12 @@ describe('plugin: compass', () => { }); } - function getCompass(log: string) { - return getPlugin('compass', log); + function callCompass(log: string) { + return callPlugin('compass', log); + } + + function callMarkers(log: string) { + return callPlugin('markers', log); } }); diff --git a/cypress/e2e/plugins/gallery.cy.ts b/cypress/e2e/plugins/gallery.cy.ts index cbf3835c..3972275f 100644 --- a/cypress/e2e/plugins/gallery.cy.ts +++ b/cypress/e2e/plugins/gallery.cy.ts @@ -1,5 +1,5 @@ import type { GalleryPlugin } from '@photo-sphere-viewer/gallery-plugin'; -import { getPlugin, getViewer, waitViewerReady } from '../../utils'; +import { callPlugin, callViewer, checkPanorama, setPanorama, waitViewerReady } from '../../utils'; import { BASE_URL } from '../../utils/constants'; describe('plugin: gallery', () => { @@ -22,7 +22,7 @@ describe('plugin: gallery', () => { }); it('should hide gallery on panel open', () => { - getViewer('open panel').then(viewer => viewer.panel.show('Lorem ipsum')); + callViewer('open panel').then(viewer => viewer.panel.show('Lorem ipsum')); cy.get('.psv-gallery').should('not.be.visible'); }); @@ -63,14 +63,12 @@ describe('plugin: gallery', () => { 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', { transition: false })); - waitViewerReady(); + setPanorama('sphere-test.jpg'); 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', { transition: false })); - waitViewerReady(); + setPanorama('sphere-cropped.jpg'); cy.get('.psv-gallery-item--active').should('not.exist'); }); @@ -79,7 +77,7 @@ describe('plugin: gallery', () => { 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')); + checkPanorama('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(); @@ -89,7 +87,7 @@ describe('plugin: gallery', () => { }); it('should hide on click', () => { - getGallery('set hideOnClick').then(gallery => gallery.setOption('hideOnClick', true)); + callGallery('set hideOnClick').then(gallery => gallery.setOption('hideOnClick', true)); cy.get('[data-psv-gallery-item=test-sphere]').click(); @@ -97,7 +95,7 @@ describe('plugin: gallery', () => { }); it('should change thumbnails size', () => { - getGallery('set thumbnailSize').then(gallery => gallery.setOption('thumbnailSize', { width: 100, height: 100 })); + callGallery('set thumbnailSize').then(gallery => gallery.setOption('thumbnailSize', { width: 100, height: 100 })); cy.waitForResources( 'key-biscayne-5-thumb.jpg', @@ -109,7 +107,7 @@ describe('plugin: gallery', () => { }); it('should change the items', () => { - getGallery('set items').then(gallery => { + callGallery('set items').then(gallery => { gallery.setItems([ { id: 1, @@ -130,7 +128,7 @@ describe('plugin: gallery', () => { it('should change the items w. custom callback', () => { const callback = cy.stub(); - getGallery('set items').then(gallery => { + callGallery('set items').then(gallery => { gallery.setItems([ { id: 1, @@ -148,11 +146,11 @@ describe('plugin: gallery', () => { }); // not changed - getViewer('check panorama').then(viewer => expect(viewer.config.panorama as string).to.eq(BASE_URL + 'sphere-small.jpg')); + checkPanorama('sphere-small.jpg'); }); it('should hide the button when no items', () => { - getGallery('set items').then(gallery => gallery.setItems([])); + callGallery('set items').then(gallery => gallery.setItems([])); cy.get('.psv-gallery-button').should('not.be.visible'); @@ -166,7 +164,7 @@ describe('plugin: gallery', () => { cy.get('.psv-gallery').should('not.be.visible'); }); - function getGallery(log: string) { - return getPlugin('gallery', log); + function callGallery(log: string) { + return callPlugin('gallery', log); } }); diff --git a/cypress/e2e/plugins/settings.cy.ts b/cypress/e2e/plugins/settings.cy.ts index 8bcd14a4..c38f59fd 100644 --- a/cypress/e2e/plugins/settings.cy.ts +++ b/cypress/e2e/plugins/settings.cy.ts @@ -1,5 +1,5 @@ import type { OptionsSetting, SettingsPlugin, ToggleSetting } from '@photo-sphere-viewer/settings-plugin'; -import { getPlugin, getViewer, waitViewerReady } from '../../utils'; +import { callPlugin, callViewer, waitViewerReady } from '../../utils'; describe('plugin: settings', () => { beforeEach(() => { @@ -50,7 +50,7 @@ describe('plugin: settings', () => { ['download settings caption', 'left', '0px'], ['caption settings fullscreen', 'right', '0px'], ].forEach(([navbar, prop, value]) => { - getViewer(`navbar "${navbar}"`).then(viewer => viewer.setOption('navbar', navbar)); + callViewer(`navbar "${navbar}"`).then(viewer => viewer.setOption('navbar', navbar)); cy.get('.psv-settings-button').click(); @@ -140,17 +140,21 @@ describe('plugin: settings', () => { }); }); - cy.get('.psv-settings-button').compareScreenshots('badge-a'); + cy.get('.psv-settings-button') + .should('include.text', 'A') + .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'); + cy.get('.psv-settings-button') + .should('include.text', 'B') + .compareScreenshots('badge-b'); }); function getSettings(log: string) { - return getPlugin('settings', log); + return callPlugin('settings', log); } }); diff --git a/examples/e2e/core/navbar.html b/cypress/pages/core/navbar.html similarity index 96% rename from examples/e2e/core/navbar.html rename to cypress/pages/core/navbar.html index 567a677b..5e5b7c45 100644 --- a/examples/e2e/core/navbar.html +++ b/cypress/pages/core/navbar.html @@ -6,7 +6,7 @@ PhotoSphereViewer - +
@@ -44,7 +44,7 @@