cypress: fix tests

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)

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(<story.Component {...videoTestUtilsCtx.events} />)
- // 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(<Story {...videoTestUtilsCtx.events} />)
+ checkVideoIsVisible(videoTestUtilsCtx)
+ // Check events only for one story to save resources on duplicate tests
+ if (name === 'VideoWithControls') {
+ checkVideoEvents(videoTestUtilsCtx)
+ }
+ })
+ })
 })

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(<story.Component {...videoTestUtilsCtx.events} />)
-
- // 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(<VideoNoContent />)
- 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(<Story {...videoTestUtilsCtx.events} />)
+
+ checkVideoIsVisible(videoTestUtilsCtx, { takeSnapshots: true, snapshotNamePrefix })
+ // Check events only for one story to save resources on duplicate tests
+ if (name === 'Video') {
+ checkVideoEvents(videoTestUtilsCtx)
+ }
+ })
  })
 })

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