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`)