fix: add test for disabled Select

chanzuckerberg · Dec 6, 2022 · de528be · de528be
1 parent d3701fe
commit de528be
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/src/components/Select/Select.test.tsx b/src/components/Select/Select.test.tsx
@@ -8,6 +8,7 @@ import * as stories from './Select.stories';
 const { OpenByDefault, Disabled, ...closedStories } = stories;
 
 const OpenByDefaultComponent = composeStory(OpenByDefault, stories.default);
+const DisabledComponent = composeStory(Disabled, stories.default);
 
 const exampleOptions = [
   {
@@ -34,6 +35,16 @@ describe('<Select />', () => {
     },
   });
 
+  it('does not open a list when clicked and disabled', async () => {
+    render(<DisabledComponent />);
+
+    const openTrigger = await screen.findByRole('button');
+    fireEvent.click(openTrigger);
+
+    // see if there are any options, which there should not be
+    expect(screen.queryByRole('option')).not.toBeInTheDocument();
+  });
+
   it('renders the OpenByDefault story', async () => {
     const { container } = render(<OpenByDefaultComponent />);
     await OpenByDefaultComponent.play({ canvasElement: container });

diff --git a/src/components/Select/__snapshots__/Select.test.tsx.snap b/src/components/Select/__snapshots__/Select.test.tsx.snap
@@ -691,11 +691,11 @@ exports[`<Select /> renders the OpenByDefault story 1`] = `
   data-testid="dropdown"
 >
   <button
-    aria-controls="headlessui-listbox-options-49"
+    aria-controls="headlessui-listbox-options-51"
     aria-expanded="true"
     aria-haspopup="true"
     class="select-button"
-    id="headlessui-listbox-button-48"
+    id="headlessui-listbox-button-50"
     type="button"
   >
     <span>
@@ -716,17 +716,17 @@ exports[`<Select /> renders the OpenByDefault story 1`] = `
     </svg>
   </button>
   <div
-    aria-activedescendant="headlessui-listbox-option-54"
-    aria-labelledby="headlessui-listbox-button-48"
+    aria-activedescendant="headlessui-listbox-option-56"
+    aria-labelledby="headlessui-listbox-button-50"
     aria-orientation="vertical"
     class="popover-container select__options select__options--full-width"
-    id="headlessui-listbox-options-49"
+    id="headlessui-listbox-options-51"
     role="listbox"
     tabindex="0"
   >
     <div
       class="popover-list-item"
-      id="headlessui-listbox-option-53"
+      id="headlessui-listbox-option-55"
       role="option"
       tabindex="-1"
     >
@@ -738,7 +738,7 @@ exports[`<Select /> renders the OpenByDefault story 1`] = `
     <div
       aria-selected="true"
       class="popover-list-item popover-list-item--active"
-      id="headlessui-listbox-option-54"
+      id="headlessui-listbox-option-56"
       role="option"
       tabindex="-1"
     >
@@ -763,7 +763,7 @@ exports[`<Select /> renders the OpenByDefault story 1`] = `
     </div>
     <div
       class="popover-list-item"
-      id="headlessui-listbox-option-55"
+      id="headlessui-listbox-option-57"
       role="option"
       tabindex="-1"
     >