Merge pull request #15137 from ethereum/story-listen-to

Fix listen-to story

Author: wackerow

src/components/ListenToPlayer/ListenToPlayer.stories.tsx

@@ -1,46 +1,42 @@
 import type { Meta, StoryObj } from "@storybook/react"
+import { expect } from "@storybook/test"
+import { waitFor } from "@storybook/test"
+import { fireEvent } from "@storybook/test"
+import { within } from "@storybook/test"
 
-import { langViewportModes } from "../../../.storybook/modes"
-import { BaseLayout as BaseLayoutComponent } from "../../layouts/BaseLayout"
-
-import ListenToPlayer from "."
+import Component from "."
 
 const meta = {
-  title: "Atoms / Media & Icons / ListenToPlayer / ListenToPlayer",
-  component: BaseLayoutComponent,
-  parameters: {
-    layout: "fullscreen",
-    chromatic: {
-      modes: {
-        ...langViewportModes,
-      },
-    },
-  },
-  argTypes: {
-    children: {
-      table: {
-        disable: true,
-      },
-    },
-    lastDeployLocaleTimestamp: {
-      table: {
-        disable: true,
-      },
-    },
+  title: "Atoms / Media & Icons / ListenToPlayer",
+  component: Component,
+  args: {
+    slug: "/eth/",
   },
-} satisfies Meta<typeof BaseLayoutComponent>
+} satisfies Meta<typeof Component>
 
 export default meta
 
-export const BaseLayout: StoryObj<typeof meta> = {
-  args: {
-    children: (
-      <div className="flex w-full flex-col items-center gap-4 px-8 py-9 md:flex-row">
-        <ListenToPlayer slug="/eth" />
-      </div>
-    ),
-    // contentIsOutdated: false,
-    // contentNotTranslated: false,
-    lastDeployLocaleTimestamp: "May 14, 2021",
+type Story = StoryObj<typeof meta>
+
+export const PlayerButton: Story = {}
+
+export const PlayerWidget: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const canvasParent = within(canvasElement.parentElement!)
+
+    const playerButton = canvas.getByRole("button")
+    await waitFor(() => {
+      // TODO: hacky way to wait for the sound to be loaded
+      expect(playerButton.textContent).not.toContain("0 min")
+    })
+
+    fireEvent.click(playerButton)
+
+    await waitFor(async () => {
+      await expect(
+        canvasParent.getByTestId("player-widget-modal")
+      ).toBeVisible()
+    })
   },
 }

src/components/ListenToPlayer/TopOfPagePlayer/index.tsx

@@ -1,4 +1,5 @@
 import { PauseCircleIcon, PlayCircleIcon } from "@/components/icons/listen-to"
+import { Button } from "@/components/ui/buttons/Button"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
@@ -18,20 +19,21 @@ const TopOfPagePlayer = ({
   handlePlayPause,
 }: TopOfPagePlayerProps) => {
   return (
-    <div className="inline-block w-full rounded-lg bg-background-low p-2 hover:bg-background-medium lg:w-auto">
-      <div
-        className="flex cursor-pointer flex-row items-center gap-2 text-primary hover:text-primary-hover"
-        onClick={() => {
-          if (startedPlaying) {
-            trackCustomEvent({
-              eventCategory: "Audio",
-              eventAction: "click",
-              eventName: "start",
-            })
-          }
-          handlePlayPause()
-        }}
-      >
+    <Button
+      variant="ghost"
+      className="inline-block w-full rounded-lg bg-background-low p-2 hover:bg-background-medium lg:w-auto"
+      onClick={() => {
+        if (startedPlaying) {
+          trackCustomEvent({
+            eventCategory: "Audio",
+            eventAction: "click",
+            eventName: "start",
+          })
+        }
+        handlePlayPause()
+      }}
+    >
+      <div className="flex flex-row items-center gap-2 text-primary hover:text-primary-hover">
         {startedPlaying ? (
           isPlaying ? (
             <PauseCircleIcon className="h-6 w-6 transition-transform" />
@@ -52,7 +54,7 @@ const TopOfPagePlayer = ({
           )}
         </div>
       </div>
-    </div>
+    </Button>
   )
 }
 

src/components/ListenToPlayer/index.tsx

@@ -225,6 +225,7 @@ const ListenToPlayer = ({ slug }: { slug: string }) => {
             isExpanded ? "bottom-4" : "bottom-0",
             "fixed left-1/2 right-auto z-10 -translate-x-1/2 sm:left-auto sm:right-5 sm:translate-x-0"
           )}
+          data-testid="player-widget-modal"
         >
           <div className="relative">
             <PlayerWidget