diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index da242f20..00000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "workbench.colorCustomizations": { - "titleBar.activeBackground": "#476cd1", - "titleBar.activeForeground": "#1E2127", - "tab.inactiveModifiedBorder": "#ff0" - } -} diff --git a/packages/react-components/cypress/stories/carousel.spec.tsx b/packages/react-components/cypress/stories/carousel.spec.tsx index f955e5f8..0ab2e63b 100644 --- a/packages/react-components/cypress/stories/carousel.spec.tsx +++ b/packages/react-components/cypress/stories/carousel.spec.tsx @@ -4,6 +4,7 @@ import * as React from 'react' import * as stories from '../../stories/carousel.stories' import { GifTestUtilsContext, + checkGifIsVisible, checkGifKeyboardEvents, checkGifMouseEvents, checkGifSeen, @@ -49,7 +50,7 @@ describe('Carousel', () => { forEachGif((gifId, idx) => { gifUtilsCtx.gifId = gifId as string - // checkGifIsVisible(gifUtilsCtx) + checkGifIsVisible(gifUtilsCtx) // Check only the first and last element to avoid test drift at different viewport sizes if (idx === 0) { checkGifSeen(gifUtilsCtx) diff --git a/packages/react-components/cypress/stories/video-player.spec.tsx b/packages/react-components/cypress/stories/video-player.spec.tsx index 2d6fecd1..19d0af7b 100644 --- a/packages/react-components/cypress/stories/video-player.spec.tsx +++ b/packages/react-components/cypress/stories/video-player.spec.tsx @@ -1,25 +1,24 @@ -// import { composeStories } from '@storybook/react' +import { composeStories } from '@storybook/react' +import React from 'react' +import * as stories from '../../stories/video-player.stories' +import { checkVideoEvents, checkVideoIsVisible, setupVideoTestUtils } from '../utils/video-test-utils' -// import * as stories from '../../stories/video-player.stories' +const testCases = Object.values(composeStories(stories)) + .map((Story) => [Story.storyName!, Story]) + .filter(([name]) => name !== 'VideoNoContent') -// const GIF_ID = 'WtUBmrAK1Yda649Ayr' - -// const composedStories = composeStories(stories) - -describe.skip('Video Player', () => { - // composedStories.forEach((story) => { - // let videoTestUtilsCtx: VideoTestUtilsContext - // before(() => { - // videoTestUtilsCtx = setupVideoTestUtils(GIF_ID, { loop: true }) - // }) - // it(story.key, () => { - // const snapshotNamePrefix = `Stories / Video Player / ${story.key}` - // cy.mount() - // checkVideoIsVisible(videoTestUtilsCtx, { takeSnapshots: true, snapshotNamePrefix }) - // // Check events only for one story to save resources on duplicate tests - // if (story.key === 'VideoWithControls') { - // checkVideoEvents(videoTestUtilsCtx) - // } - // }) - // }) +describe('Video Player', () => { + testCases.forEach(([name = '', Story]) => { + it(`Story: ${name}`, () => { + // @ts-ignore + const videoTestUtilsCtx = setupVideoTestUtils(Story.args.id, { loop: true }) + // const snapshotNamePrefix = `Stories / Video Player / ${story.key}` + cy.mount() + checkVideoIsVisible(videoTestUtilsCtx) + // Check events only for one story to save resources on duplicate tests + if (name === 'VideoWithControls') { + checkVideoEvents(videoTestUtilsCtx) + } + }) + }) }) diff --git a/packages/react-components/cypress/stories/video.spec.tsx b/packages/react-components/cypress/stories/video.spec.tsx index dd33ce6f..e421a298 100644 --- a/packages/react-components/cypress/stories/video.spec.tsx +++ b/packages/react-components/cypress/stories/video.spec.tsx @@ -1,43 +1,25 @@ -import * as React from 'react' - import { composeStories } from '@storybook/react' +import * as React from 'react' import * as stories from '../../stories/video.stories' -import { getVideoElement } from '../utils/video-test-utils' - -const storiesGifIds = { - Video: 'D068R9Ziv1iCjezKzG', - VideoCaptionsBeta: 'D068R9Ziv1iCjezKzG', - VideoUserMuted: 'obhOJFSwuTRN7VDY55', - VideoNoContent: 'ZEU9ryYGZzttn0Cva7', -} as const - -const { VideoNoContent } = composeStories(stories) - -describe.skip('Video', () => { - // composedStories.forEach((story) => { - // let videoTestUtilsCtx: VideoTestUtilsContext - - // before(() => { - // videoTestUtilsCtx = setupVideoTestUtils(storiesGifIds[story.key], { loop: true }) - // }) - - // it(story.key, () => { - // const snapshotNamePrefix = `Video - ${story.key}` - // cy.mount() - - // checkVideoIsVisible(videoTestUtilsCtx, { takeSnapshots: true, snapshotNamePrefix }) - // // Check events only for one story to save resources on duplicate tests - // if (story.key === 'Video') { - // checkVideoEvents(videoTestUtilsCtx) - // } - // }) - // }) - - it('VideoNoContent', () => { - const gifId = storiesGifIds.VideoNoContent - cy.mount() - cy.wait(1000) - getVideoElement(gifId).should('not.exist') - cy.percySnapshot('Video - VideoNoContent') +import { checkVideoEvents, checkVideoIsVisible, setupVideoTestUtils } from '../utils/video-test-utils' + +const testCases = Object.values(composeStories(stories)) + .map((Story) => [Story.storyName!, Story]) + .filter(([name]) => name !== 'VideoNoContent') + +describe('Video', () => { + testCases.forEach(([name = '', Story]) => { + it(`Story: ${name}`, () => { + // @ts-ignore + const videoTestUtilsCtx = setupVideoTestUtils(Story.args.id, { loop: true }) + const snapshotNamePrefix = `Video - ${name}` + cy.mount() + + checkVideoIsVisible(videoTestUtilsCtx, { takeSnapshots: true, snapshotNamePrefix }) + // Check events only for one story to save resources on duplicate tests + if (name === 'Video') { + checkVideoEvents(videoTestUtilsCtx) + } + }) }) }) diff --git a/packages/react-components/cypress/utils/gif-test-utils.ts b/packages/react-components/cypress/utils/gif-test-utils.ts index bc4d289b..998f3aed 100644 --- a/packages/react-components/cypress/utils/gif-test-utils.ts +++ b/packages/react-components/cypress/utils/gif-test-utils.ts @@ -1,5 +1,5 @@ -import * as React from 'react' import type { IGif } from '@giphy/js-types' +import * as React from 'react' import { Gif } from '../../src' import { ComponentEventStubs } from './types' @@ -61,7 +61,7 @@ export function checkGifIsVisible(ctx: GifTestUtilsContext, options: BaseAssertO const { onGifVisible } = ctx.events getGifRoot(gifId).get(`.${Gif.imgLoadedClassName}`).should('be.visible') - cy.wrap(onGifVisible).should('be.calledBefore', '@onGifSeen').and('be.calledWithMatch', { id: gifId }) + cy.wrap(onGifVisible).and('be.calledWithMatch', { id: gifId }) if (options.takeSnapshots) { cy.percySnapshot(`${options.snapshotNamePrefix}: onVisible`)