more menu tests

mongodb · Oct 7, 2024 · d2e1025 · d2e1025
1 parent 8e8142f
commit d2e1025
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 29 deletions.
diff --git a/packages/combobox/src/Combobox.stories.tsx b/packages/combobox/src/Combobox.stories.tsx
@@ -6,6 +6,7 @@ import {
   StoryType,
 } from '@lg-tools/storybook-utils';
 import { StoryFn } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
 
 import Button from '@leafygreen-ui/button';
 import { css } from '@leafygreen-ui/emotion';
@@ -278,3 +279,23 @@ DisabledInput.parameters = {
     },
   },
 };
+
+export const InitialLongComboboxOpen = {
+  render: () => {
+    return (
+      <Combobox
+        multiselect={false}
+        label="Choose a fruit"
+        description="Please pick one"
+        placeholder="Select fruit"
+      >
+        {getComboboxOptions()}
+      </Combobox>
+    );
+  },
+  play: async ctx => {
+    const { findByRole } = within(ctx.canvasElement.parentElement!);
+    const trigger = await findByRole('combobox');
+    userEvent.click(trigger);
+  },
+};
diff --git a/packages/menu/src/Menu.stories.tsx b/packages/menu/src/Menu.stories.tsx
@@ -273,7 +273,7 @@ export const Generated = {
   },
 } satisfies StoryObj<typeof Menu>;
 
-export const InitialLongMenuOpen = {
+export const InitialLongMenuOpen: StoryObj<typeof Menu> = {
   ...LiveExample,
   play: async ctx => {
     const { findByRole } = within(ctx.canvasElement.parentElement!);

diff --git a/packages/search-input/src/SearchInput.stories.tsx b/packages/search-input/src/SearchInput.stories.tsx
@@ -6,6 +6,7 @@ import {
   StoryMetaType,
 } from '@lg-tools/storybook-utils';
 import { StoryFn } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
 import kebabCase from 'lodash/kebabCase';
 import startCase from 'lodash/startCase';
 
@@ -310,3 +311,33 @@ WithResults.parameters = {
 };
 
 export const Generated = () => {};
+
+export const InitialLongSearchOpen = {
+  render: () => {
+    return (
+      <div
+        className={css`
+          width: 256px;
+        `}
+      >
+        <SearchInput aria-label="Item">
+          {data.map(item => (
+            <SearchResult
+              key={item.name}
+              description={item.description}
+              onClick={() => console.log('Storybook: Clicked', item.name)}
+            >
+              {startCase(item.name)}
+            </SearchResult>
+          ))}
+        </SearchInput>
+      </div>
+    );
+  },
+  play: async ctx => {
+    const { getAllByRole } = within(ctx.canvasElement.parentElement!);
+    const trigger = await getAllByRole('searchbox')[0];
+    console.log({ trigger });
+    userEvent.click(trigger);
+  },
+};
diff --git a/packages/select/src/Select.stories.tsx b/packages/select/src/Select.stories.tsx
@@ -5,13 +5,38 @@ import {
   StoryMetaType,
 } from '@lg-tools/storybook-utils';
 import { StoryFn } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { css, cx } from '@leafygreen-ui/emotion';
 import BeakerIcon from '@leafygreen-ui/icon/dist/Beaker';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 
 import { Option, OptionGroup, Select, type SelectProps, Size, State } from '.';
 
+const childrenArray = [
+  <Option key="long" value="long" description="I know a little lorem ipsum">
+    Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget
+    risus varius blandit sit amet non magna.
+  </Option>,
+  <OptionGroup key="Common" label="Common">
+    <Option value="dog">Dog</Option>
+    <Option value="cat">Cat</Option>
+  </OptionGroup>,
+  <OptionGroup key="Less common" label="Less common">
+    <Option value="hamster">Hamster</Option>
+    <Option value="parrot">Parrot</Option>
+  </OptionGroup>,
+  <Option key="iguana" value="iguana">
+    Mexican spiny-tailed iguana
+  </Option>,
+  <Option key="spider" value="spider" description="I'm chill, I swear">
+    Spider
+  </Option>,
+  <Option key="aardvark" value="aardvark" disabled description="Call me Arthur">
+    Aardvark
+  </Option>,
+];
+
 const meta: StoryMetaType<typeof Select> = {
   title: 'Components/Select',
   component: Select,
@@ -46,34 +71,7 @@ const meta: StoryMetaType<typeof Select> = {
     disabled: false,
     allowDeselect: false,
     darkMode: false,
-    children: [
-      <Option key="long" value="long" description="I know a little lorem ipsum">
-        Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget
-        risus varius blandit sit amet non magna.
-      </Option>,
-      <OptionGroup key="Common" label="Common">
-        <Option value="dog">Dog</Option>
-        <Option value="cat">Cat</Option>
-      </OptionGroup>,
-      <OptionGroup key="Less common" label="Less common">
-        <Option value="hamster">Hamster</Option>
-        <Option value="parrot">Parrot</Option>
-      </OptionGroup>,
-      <Option key="iguana" value="iguana">
-        Mexican spiny-tailed iguana
-      </Option>,
-      <Option key="spider" value="spider" description="I'm chill, I swear">
-        Spider
-      </Option>,
-      <Option
-        key="aardvark"
-        value="aardvark"
-        disabled
-        description="Call me Arthur"
-      >
-        Aardvark
-      </Option>,
-    ],
+    children: childrenArray,
     usePortal: true,
   },
   argTypes: {
@@ -164,3 +162,26 @@ NoPortal.parameters = {
 };
 
 export const Generated = () => {};
+
+export const InitialLongSelectOpen = {
+  render: () => {
+    return (
+      <Select
+        className={cx(
+          css`
+            min-width: 200px;
+            max-width: 400px;
+          `,
+        )}
+        aria-label="hey"
+        // eslint-disable-next-line react/no-children-prop
+        children={[...childrenArray, ...childrenArray]}
+      />
+    );
+  },
+  play: async ctx => {
+    const { findByRole } = within(ctx.canvasElement.parentElement!);
+    const trigger = await findByRole('button');
+    userEvent.click(trigger);
+  },
+};