test: audit disabled test snapshots (#1590)

- re-enable any snapshots that do not seem flaky - add a reason to any tests that explain why its skipped
chanzuckerberg · Apr 11, 2023 · 9a67e16 · 9a67e16
1 parent de5dd03
commit 9a67e16
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 43 deletions.
diff --git a/src/components/DataBar/DataBar.stories.tsx b/src/components/DataBar/DataBar.stories.tsx
@@ -132,11 +132,7 @@ export const InteractiveExample: StoryObj<Args> = {
     /**
      * For interactive purposes only, low value in snapping or checking for visual regression since they should be covered in the other stories.
      */
-    chromatic: {
-      disableSnapshot: true,
-    },
-    snapshot: {
-      skip: true,
-    },
+    chromatic: { disableSnapshot: true },
+    snapshot: { skip: true },
   },
 };
diff --git a/src/components/Dropdown/Dropdown.stories.tsx b/src/components/Dropdown/Dropdown.stories.tsx
@@ -256,6 +256,7 @@ export const DropdownButtonOnly = {
     </>
   ),
   parameters: {
-    snapshot: { skip: true }, // For visual regression purposes since button should be used in conjunction with the actual Dropdown.
+    // For visual regression purposes since button should be used in conjunction with the actual Dropdown.
+    snapshot: { skip: true },
   },
 };
diff --git a/src/components/Heading/Heading.stories.tsx b/src/components/Heading/Heading.stories.tsx
@@ -104,9 +104,7 @@ export const Variants: StoryObj<Args> = {
     axe: {
       skip: true,
     },
-    snapshot: {
-      skip: true,
-    },
+    snapshot: { skip: true },
   },
 };
 

diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
@@ -274,11 +274,11 @@ export const ControlHeadingInteractive: StoryObj<HeadingArgs> = {
       <Modal.Body>Modal Content</Modal.Body>
     </InteractiveExample>
   ),
-  /**
-   * Purpose of this story is to have different controls for the Modal.Title but defaults to what all the other stories are.
-   * Hence will snap similarly to the other stories has no value in snapping both unit and Chromatic.
-   */
   parameters: {
+    /**
+     * Purpose of this story is to have different controls for the Modal.Title but defaults to what all the other stories are.
+     * Hence will snap similarly to the other stories has no value in snapping both unit and Chromatic.
+     */
     snapshot: { skip: true },
   },
 };
@@ -289,9 +289,6 @@ export const WithoutCloseButton: StoryObj<InteractiveArgs> = {
       {getChildren()}
     </InteractiveExample>
   ),
-  parameters: {
-    snapshot: { skip: true },
-  },
 };
 
 const reallyLongText = (
@@ -445,12 +442,10 @@ const InteractiveModalStepperComponent = () => {
 export const InteractiveModalStepper: StoryObj<ModalStepperArgs> = {
   ...ModalStepper,
   render: () => <InteractiveModalStepperComponent />,
+  /**
+   * For interactive purposes only, low value in snapping or checking for visual regression since they should be covered in the other stories.
+   */
   parameters: {
-    /**
-     * For interactive purposes only, low value in snapping or checking for visual regression since they should be covered in the other stories.
-     */
-    snapshot: {
-      skip: true,
-    },
+    snapshot: { skip: true },
   },
 };
diff --git a/src/components/Modal/__snapshots__/Modal.test.tsx.snap b/src/components/Modal/__snapshots__/Modal.test.tsx.snap
@@ -837,18 +837,18 @@ exports[`Modal TabletBrand story renders snapshot 1`] = `
 
 exports[`Modal WithLongText story renders snapshot 1`] = `
 <div
-  aria-labelledby="headlessui-dialog-title-:r5:"
+  aria-labelledby="headlessui-dialog-title-:r8:"
   aria-modal="true"
   class="modal"
   data-headlessui-state="open"
-  id="headlessui-dialog-:r3:"
+  id="headlessui-dialog-:r6:"
   role="dialog"
 >
   <div
     aria-hidden="true"
     class="modal__overlay"
     data-headlessui-state="open"
-    id="headlessui-dialog-overlay-:r4:"
+    id="headlessui-dialog-overlay-:r7:"
   />
   <div
     class="modal__content modal__content--md modal__content--lg"
@@ -881,7 +881,7 @@ exports[`Modal WithLongText story renders snapshot 1`] = `
       <h2
         class="heading heading--size-headline-md"
         data-headlessui-state="open"
-        id="headlessui-dialog-title-:r5:"
+        id="headlessui-dialog-title-:r8:"
       >
         Modal Title
       </h2>
@@ -935,18 +935,18 @@ exports[`Modal WithLongText story renders snapshot 1`] = `
 
 exports[`Modal WithLongTextScrollable story renders snapshot 1`] = `
 <div
-  aria-labelledby="headlessui-dialog-title-:r8:"
+  aria-labelledby="headlessui-dialog-title-:rb:"
   aria-modal="true"
   class="modal"
   data-headlessui-state="open"
-  id="headlessui-dialog-:r6:"
+  id="headlessui-dialog-:r9:"
   role="dialog"
 >
   <div
     aria-hidden="true"
     class="modal__overlay"
     data-headlessui-state="open"
-    id="headlessui-dialog-overlay-:r7:"
+    id="headlessui-dialog-overlay-:ra:"
   />
   <div
     class="modal__content modal__content--scrollable modal__content--md modal__content--lg"
@@ -979,7 +979,7 @@ exports[`Modal WithLongTextScrollable story renders snapshot 1`] = `
       <h2
         class="heading heading--size-headline-md"
         data-headlessui-state="open"
-        id="headlessui-dialog-title-:r8:"
+        id="headlessui-dialog-title-:rb:"
       >
         Modal Title
       </h2>
@@ -1217,20 +1217,80 @@ exports[`Modal WithStepper story renders snapshot 1`] = `
 </div>
 `;
 
+exports[`Modal WithoutCloseButton story renders snapshot 1`] = `
+<div
+  aria-labelledby="headlessui-dialog-title-:r5:"
+  aria-modal="true"
+  class="modal"
+  data-headlessui-state="open"
+  id="headlessui-dialog-:r3:"
+  role="dialog"
+>
+  <div
+    aria-hidden="true"
+    class="modal__overlay"
+    data-headlessui-state="open"
+    id="headlessui-dialog-overlay-:r4:"
+  />
+  <div
+    class="modal__content modal__content--md modal__content--lg"
+  >
+    <div
+      class="modal-header"
+    >
+      <h2
+        class="heading heading--size-headline-md"
+        data-headlessui-state="open"
+        id="headlessui-dialog-title-:r5:"
+      >
+        Modal Title
+      </h2>
+    </div>
+    <div
+      class="modal-body"
+    >
+      Modal content.
+    </div>
+    <div
+      class="modal-footer"
+    >
+      <div
+        class="button-group button-group--spacing-1x footer__button-group"
+      >
+        <button
+          aria-describedby="tippy-13"
+          class="clickable-style clickable-style--lg clickable-style--secondary clickable-style--neutral button button--secondary"
+          tabindex="0"
+          type="button"
+        >
+          Button 1
+        </button>
+        <button
+          class="clickable-style clickable-style--lg clickable-style--primary clickable-style--brand button button--primary"
+          type="button"
+        >
+          Button 2
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Modal WithoutHeaderAndFooter story renders snapshot 1`] = `
 <div
   aria-label="The Modal Amazing Modal You've Ever Seen"
   aria-modal="true"
   class="modal"
   data-headlessui-state="open"
-  id="headlessui-dialog-:r9:"
+  id="headlessui-dialog-:rc:"
   role="dialog"
 >
   <div
     aria-hidden="true"
     class="modal__overlay"
     data-headlessui-state="open"
-    id="headlessui-dialog-overlay-:ra:"
+    id="headlessui-dialog-overlay-:rd:"
   />
   <div
     class="modal__content modal__content--scrollable modal__content--md modal__content--lg"

diff --git a/src/components/ProgressBar/ProgressBar.stories.tsx b/src/components/ProgressBar/ProgressBar.stories.tsx
@@ -114,11 +114,7 @@ export const Interactive: StoryObj<Args> = {
     /**
      * For interactive purposes only, low value in snapping or checking for visual regression since they should be covered in the other stories.
      */
-    chromatic: {
-      disableSnapshot: true,
-    },
-    snapshot: {
-      skip: true,
-    },
+    chromatic: { disableSnapshot: true },
+    snapshot: { skip: true },
   },
 };
diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
@@ -174,8 +174,9 @@ export const ScrollMiddle: StoryObj<Args> = {
     viewport: {
       defaultViewport: 'googlePixel2',
     },
-    chromatic: { viewports: [chromaticViewports.googlePixel2] },
+    // Skip these b/c test environment cannot execute "scroll" on the parent div
     snapshot: { skip: true },
+    chromatic: { viewports: [chromaticViewports.googlePixel2] },
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

diff --git a/src/components/Text/Text.stories.tsx b/src/components/Text/Text.stories.tsx
@@ -145,12 +145,12 @@ export const Variants: StoryObj<Args> = {
     );
   },
   parameters: {
-    /**
-     * Has problems with snapshots since it has too many components and other stories generate enough confidence for our needs.
-     */
     axe: {
       skip: true,
     },
+    /**
+     * Has problems with snapshots since it has too many components and other stories generate enough confidence for our needs.
+     */
     snapshot: {
       skip: true,
     },