build: make Tooltip snapshots not flaky

chanzuckerberg · May 12, 2022 · fa3dee4 · fa3dee4
1 parent 4042cb0
commit fa3dee4
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 33 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -7,7 +7,6 @@ module.exports = {
   moduleNameMapper: {
     '\\.css$': 'identity-obj-proxy',
     'react-portal': 'identity-obj-proxy',
-    shortid: 'identity-obj-proxy',
     '.*\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       '<rootDir>/jest/mocks/fileMock.js',
   },

diff --git a/package.json b/package.json
@@ -66,7 +66,7 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.5.0",
-    "@tippyjs/react": "4.2.5",
+    "@tippyjs/react": "^4.2.6",
     "clsx": "^1.1.1",
     "downshift": "^6.1.7",
     "react-children-by-type": "^1.1.0",

diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
@@ -4,8 +4,6 @@ import { within, userEvent } from '@storybook/testing-library';
 import clsx from 'clsx';
 import React from 'react';
 import { Tooltip } from './Tooltip';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore story files not type-checked
 import styles from './Tooltip.stories.module.css';
 import { Button } from '../Button/Button';
 
@@ -23,6 +21,9 @@ const defaultArgs = {
     </Button>
   ),
   align: 'right',
+  // most stories show a visible, non-interactive tooltip.
+  // this turns animation off to ensure stable visual snapshots
+  duration: 0,
   visible: true,
 };
 
@@ -124,14 +125,12 @@ export const LongButtonText: StoryObj<Args> = {
       </Button>
     ),
   },
-  parameters: {
-    // Is flaky on chromatic, disabling for now
-    chromatic: { disableSnapshot: true },
-  },
 };
 
 export const Interactive: StoryObj<Args> = {
   args: {
+    // reset prop values defined in defaultArgs
+    duration: undefined,
     visible: undefined,
     children: (
       <Button className={clsx(styles['trigger--spacing'])} variant="primary">

diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx
@@ -19,8 +19,8 @@ describe('<Tooltip />', () => {
   });
 
   it('should close tooltip via escape key', async () => {
-    // Test fails if animation is enabled https://github.com/atomiks/tippyjs-react/blob/master/test/Tippy.test.js#L65
-    render(<Interactive animation={false} />);
+    // disable animation for test
+    render(<Interactive duration={0} />);
     const trigger = await screen.findByRole('button');
     expect(screen.queryByTestId('tooltip-content')).not.toBeInTheDocument();
     await userEvent.hover(trigger);

diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -15,9 +15,9 @@ type TooltipProps = {
   /**
    * Behavior of the tooltip transition, defaults to an opacity "fade".
    * Animation guidelines are provided in https://atomiks.github.io/tippyjs/v5/animations/.
-   * A false value will disable animations.
+   * To disable animations, pass `duration={0}`.
    */
-  animation?: string | boolean;
+  animation?: string;
   /**
    * The trigger element the tooltip appears next to.
    */
@@ -37,6 +37,10 @@ type TooltipProps = {
    * https://atomiks.github.io/tippyjs/v6/all-props/#delay
    */
   delay?: number | [number | null, number | null];
+  /**
+   * Duration of Tooltip animation, in milliseconds. Default is 200.
+   */
+  duration?: number;
   /**
    * The trigger element the tooltip appears next to.
    *
@@ -83,6 +87,7 @@ export const Tooltip = ({
   variant = 'light',
   align = 'top',
   className,
+  duration = 200,
   text,
   ...rest
 }: TooltipProps) => {
@@ -122,7 +127,7 @@ export const Tooltip = ({
         variant === 'dark' && styles['tooltip--dark'],
       )}
       content={text}
-      duration={200}
+      duration={duration}
       placement={align}
       plugins={[hideOnEsc]}
     />

diff --git a/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
@@ -24,13 +24,13 @@ exports[`<Tooltip /> BottomPlacement story renders snapshot 1`] = `
       data-reference-hidden=""
       data-state="visible"
       role="tooltip"
-      style="max-width: 350px; transition-duration: 200ms;"
+      style="max-width: 350px; transition-duration: 0ms;"
       tabindex="-1"
     >
       <div
         class="tippy-content"
         data-state="visible"
-        style="transition-duration: 200ms;"
+        style="transition-duration: 0ms;"
       >
         <div>
           <span
@@ -78,13 +78,13 @@ exports[`<Tooltip /> DarkVariant story renders snapshot 1`] = `
       data-reference-hidden=""
       data-state="visible"
       role="tooltip"
-      style="max-width: 350px; transition-duration: 200ms;"
+      style="max-width: 350px; transition-duration: 0ms;"
       tabindex="-1"
     >
       <div
         class="tippy-content"
         data-state="visible"
-        style="transition-duration: 200ms;"
+        style="transition-duration: 0ms;"
       >
         <div>
           <span
@@ -191,13 +191,13 @@ exports[`<Tooltip /> LeftPlacement story renders snapshot 1`] = `
       data-reference-hidden=""
       data-state="visible"
       role="tooltip"
-      style="max-width: 350px; transition-duration: 200ms;"
+      style="max-width: 350px; transition-duration: 0ms;"
       tabindex="-1"
     >
       <div
         class="tippy-content"
         data-state="visible"
-        style="transition-duration: 200ms;"
+        style="transition-duration: 0ms;"
       >
         <div>
           <span
@@ -245,13 +245,13 @@ exports[`<Tooltip /> LightVariant story renders snapshot 1`] = `
       data-reference-hidden=""
       data-state="visible"
       role="tooltip"
-      style="max-width: 350px; transition-duration: 200ms;"
+      style="max-width: 350px; transition-duration: 0ms;"
       tabindex="-1"
     >
       <div
         class="tippy-content"
         data-state="visible"
-        style="transition-duration: 200ms;"
+        style="transition-duration: 0ms;"
       >
         <div>
           <span
@@ -299,13 +299,13 @@ exports[`<Tooltip /> LongButtonText story renders snapshot 1`] = `
       data-reference-hidden=""
       data-state="visible"
       role="tooltip"
-      style="max-width: 350px; transition-duration: 200ms;"
+      style="max-width: 350px; transition-duration: 0ms;"
       tabindex="-1"
     >
       <div
         class="tippy-content"
         data-state="visible"
-        style="transition-duration: 200ms;"
+        style="transition-duration: 0ms;"
       >
         <div>
           <span
@@ -353,13 +353,13 @@ exports[`<Tooltip /> LongText story renders snapshot 1`] = `
       data-reference-hidden=""
       data-state="visible"
       role="tooltip"
-      style="max-width: 350px; transition-duration: 200ms;"
+      style="max-width: 350px; transition-duration: 0ms;"
       tabindex="-1"
     >
       <div
         class="tippy-content"
         data-state="visible"
-        style="transition-duration: 200ms;"
+        style="transition-duration: 0ms;"
       >
         <div>
           <span>
@@ -405,13 +405,13 @@ exports[`<Tooltip /> TopPlacement story renders snapshot 1`] = `
       data-reference-hidden=""
       data-state="visible"
       role="tooltip"
-      style="max-width: 350px; transition-duration: 200ms;"
+      style="max-width: 350px; transition-duration: 0ms;"
       tabindex="-1"
     >
       <div
         class="tippy-content"
         data-state="visible"
-        style="transition-duration: 200ms;"
+        style="transition-duration: 0ms;"
       >
         <div>
           <span

diff --git a/yarn.lock b/yarn.lock
@@ -1612,7 +1612,7 @@ __metadata:
     "@testing-library/jest-dom": ^5.16.2
     "@testing-library/react": ^12.1.4
     "@testing-library/user-event": ^13.5.0
-    "@tippyjs/react": 4.2.5
+    "@tippyjs/react": ^4.2.6
     "@types/jest": ^27.4.1
     "@types/node": ^17.0.21
     "@types/react": ^17.0.40
@@ -4299,15 +4299,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tippyjs/react@npm:4.2.5":
-  version: 4.2.5
-  resolution: "@tippyjs/react@npm:4.2.5"
+"@tippyjs/react@npm:^4.2.6":
+  version: 4.2.6
+  resolution: "@tippyjs/react@npm:4.2.6"
   dependencies:
     tippy.js: ^6.3.1
   peerDependencies:
     react: ">=16.8"
     react-dom: ">=16.8"
-  checksum: 68a6bb8922597df105f601953f14c593a8179328026dc425db0cd5d8521cdd8ad8c6ec7b6d0707708c8ed25e5ad01c488e95a6b3de0b2f404bd71137e2b8fce9
+  checksum: 8f0fba591c9dae2e1af1ae632bbc775ba5c9dd4498e50e242be70302b4c27115c6740eec44e885e294b27cb28515777b52af5b34aac9d4bab627d948add938ae
   languageName: node
   linkType: hard
 
@@ -14811,7 +14811,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nanoid@npm:^3.1.23, nanoid@npm:^3.2.0, nanoid@npm:^3.3.1, nanoid@npm:^3.3.3":
+"nanoid@npm:^3.1.23, nanoid@npm:^3.2.0, nanoid@npm:^3.3.3":
   version: 3.3.4
   resolution: "nanoid@npm:3.3.4"
   bin: