SVGFlip.e2e.ts

Filename	Percent	Threshold	Total	Covered	Uncovered
storybook/stories/SVGFlip/SVGFlip.e2e.ts	100.00%	95%	85	85	0

import { expect, test } from "@playwright/test"

import { ProjectName } from "../../../src/e2e"
import {
  checkForConsoleErrors,
  getFrame,
  hoverSidebarHeader,
  storybookBaseURL,
} from "../common/e2e"

import { ROOT_ID } from "./constants"

const { setupConsoleAfterEach, setupConsoleBeforeEach } =
  checkForConsoleErrors()

const svgSelector = `#${ROOT_ID} >> svg`

test.beforeEach(async ({ page }) => {
  setupConsoleBeforeEach(page)

  await page.goto(`${storybookBaseURL}?path=/story/svg-flip--common`)

  const frame = await getFrame(page)

  await frame.waitForSelector(svgSelector)
})

test.afterEach(setupConsoleAfterEach)

test("The initial UI is as expected @snapshot", async ({ page }) => {
  const frame = await getFrame(page)

  expect(await frame.locator(svgSelector).screenshot()).toMatchSnapshot(
    "story.png"
  )
})

test("The circle changes color when the rectangle is hovered", async ({
  page,
}, workerInfo) => {
  if (workerInfo.project.name !== ProjectName.DesktopChrome) {
    return
  }

  const frame = await getFrame(page)

  const getCircleColor = () =>
    frame.evaluate((rootId) => {
      const circle = document
        .querySelector(`#${rootId}`)!
        .querySelector("circle")!

      return circle.getAttribute("fill")
    }, ROOT_ID)

  const rectangleSelector = `#${ROOT_ID} >> circle`

  const initialCircleColor = await getCircleColor()

  expect(initialCircleColor).toBeDefined()

  await frame.hover(rectangleSelector)

  expect(await getCircleColor()).not.toEqual(initialCircleColor)

  await hoverSidebarHeader(page)

  expect(await getCircleColor()).toEqual(initialCircleColor)
})

[]

TypeScript Coverage Report generated by type-coverage and typescript-coverage-report at Wed, 01 Jun 2022 21:16:57 GMT

TypeScript coverage report