@dhasdk/simple-ui 1.0.7 → 1.0.8

package/src/lib/Select--Select.stories.tsx

@@ -0,0 +1,387 @@
+import { Meta, StoryContext } from '@storybook/react';
+import { expect, userEvent, within, waitFor, fireEvent } from 'storybook/test';
+import { Select } from './Select';
+import { Filled } from './Button--Button.stories';
+
+
+const meta: Meta<typeof Select> = {
+  title: 'Components/Select',   // Tells Storybook to place the Select component inside Components section
+  component: Select,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    label: { control: 'text'},
+    optionsLabel: { control: 'text'},
+    variant: { control: 'text'},
+  },
+  args: { // default options argument so as to not define repeatedly below
+    variant: 'default',
+    options: [
+      {name: 'blue'},
+      {name: 'white'},
+      {name: 'red'},
+      {name: 'green'},
+      {name: 'yellow'},
+    ],
+  }
+}
+
+/*
+  <Dropdown
+    label='Border Color'
+    optionsLabel='Choose a Color'
+    variant='MedCard'
+    options={[
+      {name: 'gray', value: 'border-gray-500'},
+      {name: 'Blue', value: 'border-blue-500'}
+      ]}
+    setSelectedOption={setSelectedBorder} />
+*/
+
+export default meta;
+
+// type Story = StoryObj<typeof Select>;
+
+//export const ToggleHandler: StoryFn = () => {
+
+// const SelectDefault:StoryFn = (args: SelectProps) => {
+export const SelectDefault = {
+  args: {
+    setSelectedOption: () => console.log('Clicked! Value: '),
+  },
+  play:async ({ canvasElement }: StoryContext) => {
+
+    // Load canvas area to interact with
+    const canvas = within(canvasElement);
+
+    // search for an item that begins with 'Select options' - this is the drop-down box
+    await new Promise((resolve) => setTimeout(resolve, 750));
+    const selectComponent = await waitFor(() => canvas.getByLabelText(/^Select options.*$/i), { timeout: 500 });
+
+    // Click on Select to open it
+    selectComponent.click();
+
+    await new Promise((resolve) => setTimeout(resolve, 750));
+    // We should be able to find an option with the name of 'red'
+    const option1 = await waitFor(() => canvas.getByLabelText('option red'), { timeout: 750 });
+
+    await new Promise((resolve) => setTimeout(resolve, 750));
+    // test that option1 ('red') was selected and is visible
+    expect(option1).toBeVisible();
+
+    // click 'red' option
+    option1.click();
+
+  }
+};
+
+export const SelectOutline = {
+  args: {
+    setSelectedOption: () => console.log('Clicked! Value: '),
+    variant: 'outline',
+  },
+}
+
+export const SelectFill = {
+  args: {
+    setSelectedOption: () => console.log('Clicked! Value: '),
+    variant: 'fill',
+  },
+}
+
+const testOptions = [
+  { name: 'Option 1', value: '1' },
+  { name: 'Option 2', value: '2' },
+  { name: 'Option 3', value: '3' },
+];
+
+
+export const CloseOnEscapeDocument = {
+  args: {
+    label: 'Test Select',
+    options: testOptions,
+    setSelectedOption: (val: string) => console.log('Selected: ', val),
+  },
+  play: async ({ canvasElement }: StoryContext) => {
+    const canvas = within(canvasElement);
+    // Find the select button by its accessible name (which includes the current selected option).
+    const selectButton = canvas.getByRole('button', { name: /Select options -/ });
+    // Click to open the dropdown.
+    fireEvent.click(selectButton);
+    // Wait until the dropdown (the listbox) appears.
+    await waitFor(() => expect(canvas.getByRole('listbox')).toBeInTheDocument());
+    // Dispatch a keydown event with Escape on the document.
+    fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' });
+    // Wait until the dropdown is closed.
+    await waitFor(() => expect(canvas.queryByRole('listbox')).toBeNull());
+  },
+};
+
+export const CloseOnFocusOutside = {
+  args: {
+    label: 'Test Select',
+    options: testOptions,
+    setSelectedOption: (val: string) => console.log('Selected: ', val),
+  },
+  play: async ({ canvasElement }: StoryContext) => {
+    const canvas = within(canvasElement);
+    // Create an external button (outside the Select component) and add it to the document.
+    const externalButton = document.createElement('button');
+    externalButton.textContent = 'External';
+    document.body.appendChild(externalButton);
+
+    // Open the dropdown.
+    const selectButton = canvas.getByRole('button', { name: /Select options -/ });
+    fireEvent.click(selectButton);
+    await waitFor(() => expect(canvas.getByRole('listbox')).toBeInTheDocument());
+
+    // Focus the external button to simulate focus leaving the Select.
+    externalButton.focus();
+    // Fire a focusin event on that element.
+    fireEvent.focusIn(externalButton);
+    // Wait for the dropdown to be closed.
+    await waitFor(() => expect(canvas.queryByRole('listbox')).toBeNull());
+
+    // Clean up the external element.
+    document.body.removeChild(externalButton);
+  },
+};
+
+export const KeyboardNavigationInDropdown = {
+  args: {
+    label: 'Test Select',
+    options: testOptions,
+    setSelectedOption: (val: string) => console.log('Selected: ', val),
+  },
+  play: async ({ canvasElement }: StoryContext) => {
+    const canvas = within(canvasElement);
+    const selectButton = canvas.getByRole('button', { name: /Select options -/ });
+    fireEvent.click(selectButton);
+
+    // Wait for the dropdown (listbox) to appear.
+    const listbox = await waitFor(() => canvas.getByRole('listbox'));
+
+    // When opened, the toggle sets focusedIndex to 0 so Option 1 should be focused.
+    await waitFor(() => {
+      expect(document.activeElement?.getAttribute('aria-label')).toMatch(/option Option 1/);
+    });
+
+    // Press ArrowDown to move focus to Option 2.
+    fireEvent.keyDown(listbox, { key: 'ArrowDown', code: 'ArrowDown' });
+    await waitFor(() => {
+      expect(document.activeElement?.getAttribute('aria-label')).toMatch(/option Option 2/);
+    });
+
+    // Press ArrowUp to move focus back to Option 1.
+    fireEvent.keyDown(listbox, { key: 'ArrowUp', code: 'ArrowUp' });
+    await waitFor(() => {
+      expect(document.activeElement?.getAttribute('aria-label')).toMatch(/option Option 1/);
+    });
+
+    // Press End to move focus to the last option (Option 3).
+    fireEvent.keyDown(listbox, { key: 'End', code: 'End' });
+    await waitFor(() => {
+      expect(document.activeElement?.getAttribute('aria-label')).toMatch(/option Option 3/);
+    });
+
+    // Press Home to move focus back to the first option (Option 1).
+    fireEvent.keyDown(listbox, { key: 'Home', code: 'Home' });
+    await waitFor(() => {
+      expect(document.activeElement?.getAttribute('aria-label')).toMatch(/option Option 1/);
+    });
+  },
+};
+
+export const OptionKeydownActions = {
+  args: {
+    label: 'Test Select',
+    options: testOptions,
+    setSelectedOption: (val: string) => console.log('Selected: ', val),
+  },
+  play: async ({ canvasElement }: StoryContext) => {
+    const canvas = within(canvasElement);
+    const selectButton = canvas.getByRole('button', { name: /Select options -/ });
+
+    // Open the dropdown.
+    fireEvent.click(selectButton);
+    await waitFor(() => expect(canvas.getByRole('listbox')).toBeInTheDocument());
+
+    // Find the option button for "Option 2" (its aria-label is "option Option 2").
+    const option2 = canvas.getByRole('option', { name: /option Option 2/ });
+
+    // Simulate a keydown event with "Enter" on Option 2.
+    fireEvent.keyDown(option2, { key: 'Enter', code: 'Enter' });
+    // After pressing Enter, the dropdown should close and the select button's accessible name
+    // should update to include "Option 2".
+    await waitFor(() => {
+      expect(canvas.queryByRole('listbox')).toBeNull();
+      expect(selectButton).toHaveAccessibleName('Select options - Option 2');
+    });
+
+    // Re-open the dropdown to test the Escape key on an option.
+    fireEvent.click(selectButton);
+    await waitFor(() => expect(canvas.getByRole('listbox')).toBeInTheDocument());
+    // Find the option button for "Option 3".
+    const option3 = canvas.getByRole('option', { name: /option Option 3/ });
+    // Simulate a keydown event with "Escape" on Option 3.
+    fireEvent.keyDown(option3, { key: 'Escape', code: 'Escape' });
+    // The dropdown should close and the selection should remain as "Option 2" from the previous selection.
+    await waitFor(() => {
+      expect(canvas.queryByRole('listbox')).toBeNull();
+      expect(selectButton).toHaveAccessibleName('Select options - Option 2');
+    });
+  },
+};
+
+export const FallbackVariant = {
+  args: {
+    label: 'Fallback Variant',
+    variant: 'nonexistent', // not defined in variants
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setSelectedOption: () => {},
+  },
+  play: async ({ canvasElement }: StoryContext) => {
+    const canvas = within(canvasElement);
+    const btn = canvas.getByRole('button', { name: /Select options -/ });
+    // Assert that a unique class from variants.default is present.
+    expect(btn.className).toContain('hover:bg-gray-200');
+  },
+};
+
+// const SelectDefault:StoryFn = (args: SelectProps) => {
+  export const SelectCloseTest = {
+    args: {
+      setSelectedOption: () => console.log('Clicked! Value: '),
+    },
+    play:async ({ canvasElement }: StoryContext) => {
+
+      // Load canvas area to interact with
+      const canvas = within(canvasElement);
+
+      // search for an item that begins with 'Select options' - this is the drop-down box
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      const selectComponent = await waitFor(() => canvas.getByLabelText(/^Select options.*$/i), { timeout: 500 });
+
+      // Click on Select to open it
+      selectComponent.click();
+
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      // We should be able to find an option with the name of 'red'
+      const option1 = await waitFor(() => canvas.getByLabelText('option red'), { timeout: 750 });
+
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      // test that option1 ('red') was selected and is visible
+      expect(option1).toBeVisible();
+
+      // select outside of select and click that region to close opened component
+      await new Promise((resolve) => setTimeout(resolve, 750));
+      await userEvent.click(document.body);
+    }
+  };
+
+
+  export const SelectWithLabel = {
+    args: {
+      setSelectedOption: () => console.log('Clicked! Value: '),
+      label: 'Select a Color',
+      options: [
+        {name: 'Blue', value: 'blue'},
+        {name: 'White', value: 'white'},
+        {name: 'Red', value: 'red'},
+        {name: 'Green', value: 'green'},
+        {name: 'Yellow', value: 'yellow'},
+      ],
+    }
+  }
+
+  export const SelectItemValues = {
+    args: {
+      setSelectedOption: () => console.log('Clicked! Value: '),
+      options: [
+        {name: 'Blue', value: 'blue'},
+        {name: 'White', value: 'white'},
+        {name: 'Red', value: 'red'},
+        {name: 'Green', value: 'green'},
+        {name: 'Yellow', value: 'yellow'},
+      ],
+    },
+    play:async ({ canvasElement }: StoryContext) => {
+
+      // Load canvas area to interact with
+      const canvas = within(canvasElement);
+
+      // search for an item that begins with 'Select options' - this is the drop-down box
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      const selectComponent = await waitFor(() => canvas.getByLabelText(/^Select options.*$/i), { timeout: 500 });
+
+      // Click on Select to open it
+      selectComponent.click();
+
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      // We should be able to find an option with the name of 'red'
+      const option1 = await waitFor(() => canvas.getByLabelText('option Red'), { timeout: 750 });
+
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      // test that option1 ('red') was selected and is visible
+      expect(option1).toBeVisible();
+
+      // click 'red' option
+      option1.click();
+
+    }
+  };
+
+  // story to simulate the case when the select dropdown is close to the bottom of the container
+  // and will open upward
+  export const SelectAbove = {
+    args: {
+      setSelectedOption: () => console.log('Clicked! Value: '),
+    },
+    play: async ({ canvasElement }: StoryContext) => {
+      // Force a limited document height to simulate constrained space.
+      Object.defineProperty(document.body, 'offsetHeight', {
+        configurable: true,
+        value: 350,
+      });
+
+      const canvas = within(canvasElement);
+      // Get the select button.
+      const selectButton = canvas.getByRole('button', { name: /^Select options/ });
+      // Override the container’s bounding rect to simulate that the select is near the bottom.
+      const container = selectButton.parentElement;
+      if (container) {
+        container.getBoundingClientRect = () => ({
+          top: 250,    // Must be > dropdownHeight
+          bottom: 310, // This makes the button’s bottom near the bottom of the container
+          left: 0,
+          right: 600,
+          width: 600,
+          height: 60,
+          x: 0,
+          y: 0,
+          toJSON: () => ({}),
+        });
+      }
+
+      // Open the dropdown.
+      selectButton.click();
+
+      // Wait for the dropdown to appear.
+      const listbox = await waitFor(() => canvas.getByRole('listbox'));
+      // Force the dropdown's height to a value that will trigger the condition.
+      Object.defineProperty(listbox, 'offsetHeight', {
+        configurable: true,
+        value: 100,
+      });
+
+      // Given these values:
+      // - containerHeight becomes 350 (from document.body.offsetHeight),
+      // - buttonRect.bottom is 310,
+      // so spaceBelow = 350 - 310 = 40, which is less than dropdownHeight (100),
+      // and buttonRect.top (250) is greater than 100.
+      // Therefore, the updateDropdownPosition() in the component file should call setIsAbove(true).
+      // We verify this by checking for the styling applied when isAbove is true.
+      expect(listbox.className).toContain('rounded-t-lg');
+    },
+  };