feat(tooltip): add play function to open popover story

Author: TylerAPfledderer

src/components/Tooltip/Tooltip.stories.tsx

@@ -1,7 +1,8 @@
 import * as React from "react"
 import { RiInformationLine } from "react-icons/ri"
-import { Box, HStack } from "@chakra-ui/react"
+import { Box } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
+import { expect, fireEvent, waitFor, within } from "@storybook/test"
 
 import InlineLink from "../Link"
 import Translation from "../Translation"
@@ -24,28 +25,49 @@ const meta = {
   args: {
     content: <TooltipContent />,
     children: (
-      <Box as="span">
+      <Box as="span" data-testid="tooltip-icon">
         <RiInformationLine />
       </Box>
     ),
   },
+  argTypes: {
+    children: {
+      table: {
+        disable: true,
+      },
+    },
+    content: {
+      table: {
+        disable: true,
+      },
+    },
+    onBeforeOpen: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 } satisfies Meta<TooltipType>
 
 export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Tooltip: Story = {
-  render: (args) => (
-    <HStack>
-      <TooltipComponent {...args} />
-    </HStack>
-  ),
-}
+export const Basic: Story = {}
 
-// for chromatic visual testing
-export const AlwaysOpen: Story = {
-  args: {
-    isOpen: true,
+// for chromatic story snapshot showing the rendered popover
+export const OnOpen: Story = {
+  play: async ({ canvasElement }) => {
+    // Add delay for snapshot capture of the popover
+    const canvas = within(canvasElement)
+    const canvasParent = within(canvasElement.parentElement!)
+
+    const tooltipIcon = canvas.getByTestId("tooltip-icon")
+
+    fireEvent.mouseOver(tooltipIcon)
+
+    await waitFor(async () => {
+      await expect(canvasParent.getByTestId("tooltip-popover")).toBeVisible()
+    })
   },
 }

src/components/Tooltip/index.tsx

@@ -69,7 +69,7 @@ const Tooltip: React.FC<IProps> = ({
     >
       <PopoverTrigger>{children}</PopoverTrigger>
       <Portal>
-        <PopoverContent>
+        <PopoverContent data-testid="tooltip-popover">
           <PopoverArrow />
           <PopoverBody>{content}</PopoverBody>
         </PopoverContent>