migrate VideoPlayer jest tests to vitest and interactive stories

packages/components/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.spec.tsx

@@ -0,0 +1,92 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { vi } from "vitest"
+import { VideoPlayer } from "./VideoPlayer"
+
+const matchMedia = {
+  media: "",
+  onchange: null,
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+  addEventListener: vi.fn(),
+  removeEventListener: vi.fn(),
+}
+const mockPrefersReducedMotion = {
+  matches: true,
+  ...matchMedia,
+}
+const mockDoesNotPreferReducedMotion = {
+  matches: false,
+  ...matchMedia,
+}
+const mockPlay = vi.fn().mockResolvedValue(undefined)
+const mockLoad = vi.fn()
+const mockPause = vi.fn()
+
+describe("<VideoPlayer />", () => {
+  beforeEach(() => {
+    window.HTMLMediaElement.prototype.load = mockLoad
+    window.HTMLMediaElement.prototype.play = mockPlay
+    window.HTMLMediaElement.prototype.pause = mockPause
+    window.matchMedia = vi
+      .fn()
+      .mockImplementation(() => mockDoesNotPreferReducedMotion)
+    // this will stop throwing the unstable_flushDiscreteUpdates console error cause by react bug
+    // https://stackoverflow.com/a/65338472/18285270
+    Object.defineProperty(HTMLMediaElement.prototype, "muted", {
+      set: vi.fn(),
+    })
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it("renders a video player in the document and autoplay", async () => {
+    render(
+      <VideoPlayer
+        autoplay
+        fallback="illustrations/heart/spot/moods-cautionary.svg"
+        source="illustrations/heart/spot/moods-cautionary.webm"
+        data-testid="kz-video-player"
+      />
+    )
+    const videoPlayer = screen.getByTestId("kz-video-player")
+    expect(videoPlayer).toBeInTheDocument()
+    expect(mockPlay).toHaveBeenCalled()
+  })
+
+  it("respects the use-reduced-motion preferences of the user", () => {
+    window.matchMedia = vi
+      .fn()
+      .mockImplementation(() => mockPrefersReducedMotion)
+    render(
+      <VideoPlayer
+        autoplay
+        fallback="illustrations/heart/spot/moods-cautionary.svg"
+        source="illustrations/heart/spot/moods-cautionary.webm"
+        data-testid="kz-video-player"
+      />
+    )
+    const videoPlayer = screen.getByTestId("kz-video-player")
+    expect(videoPlayer).not.toHaveAttribute("autoplay")
+    expect(mockPause).toHaveBeenCalled()
+  })
+
+  it("defaults to autoplay when user does not set use-reduced-motion preferences", () => {
+    window.matchMedia = vi
+      .fn()
+      .mockImplementation(() => mockDoesNotPreferReducedMotion)
+    render(
+      <VideoPlayer
+        autoplay
+        fallback="illustrations/heart/spot/moods-cautionary.svg"
+        source="illustrations/heart/spot/moods-cautionary.webm"
+        data-testid="kz-video-player"
+      />
+    )
+    const videoPlayer = screen.getByTestId("kz-video-player")
+    expect(videoPlayer).toHaveAttribute("autoplay")
+    expect(mockPlay).toHaveBeenCalled()
+  })
+})