@dhasdk/simple-ui 1.0.7 → 1.0.8

package/src/lib/Select.spec.tsx

@@ -0,0 +1,493 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { vi } from "vitest";
+import { axe } from "vitest-axe";
+import { Select, SelectProps } from "./Select";
+
+describe("Select Component", () => {
+  const options = [
+    { name: "Option 1", value: "1" },
+    { name: "Option 2", value: "2" },
+    { name: "Option 3", value: "3" },
+  ];
+
+  it("renders the select dropdown with the default state, error, and variant fill", () => {
+    render(<Select variant="fill" error options={options} setSelectedOption={vi.fn()} />);
+    const button = screen.getByRole("button", { name: /Options/i });
+
+    //clicks the button twice to open and close the menu, verifying correct chevrons render
+    fireEvent.click(button);
+    fireEvent.click(button);
+
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveTextContent("Options");
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+
+  it("renders the dropdown label when provided", () => {
+    render(<Select label="Dropdown Label" options={options} setSelectedOption={vi.fn()} />);
+    const label = screen.getByText("Dropdown Label");
+
+    expect(label).toBeInTheDocument();
+    expect(label).toHaveClass("text-black");
+  });
+
+  it("toggles the dropdown menu on button click", () => {
+    render(<Select options={options} setSelectedOption={vi.fn()} />);
+    const button = screen.getByRole("button");
+
+    // Menu should not be present initially
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+
+    // Open the dropdown
+    fireEvent.click(button);
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+
+    // Close the dropdown
+    fireEvent.click(button);
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+
+
+  it("selects an option and calls the callback", () => {
+    const setSelectedOptionMock = vi.fn();
+    render(<Select options={options} setSelectedOption={setSelectedOptionMock} />);
+
+    const button = screen.getByRole("button");
+    fireEvent.click(button);
+
+    const option = screen.getByText("Option 1");
+    fireEvent.click(option);
+
+    expect(setSelectedOptionMock).toHaveBeenCalledWith("1");
+    expect(button).toHaveTextContent("Option 1");
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+
+  it("falls back to the option name if no value is provided", () => {
+    const customOptions = [{ name: "No Value Option" }];
+    const setSelectedOptionMock = vi.fn();
+
+    render(<Select options={customOptions} setSelectedOption={setSelectedOptionMock} />);
+    const button = screen.getByRole("button");
+
+    fireEvent.click(button);
+
+    const option = screen.getByText("No Value Option");
+    fireEvent.click(option);
+
+    expect(setSelectedOptionMock).toHaveBeenCalledWith("No Value Option");
+    expect(button).toHaveTextContent("No Value Option");
+  });
+
+  it("closes the dropdown when clicking outside", () => {
+    render(<Select options={options} setSelectedOption={vi.fn()} />);
+    const button = screen.getByRole("button");
+
+    // Open the dropdown
+    fireEvent.click(button);
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+
+    // Click outside
+    fireEvent.mouseDown(document.body);
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+
+
+  it("applies custom classes and merges them with default styles", () => {
+    render(
+      <Select
+        className="custom-class"
+        options={options}
+        setSelectedOption={vi.fn()}
+      />
+    );
+
+    const button = screen.getByRole("button");
+    expect(button).toHaveClass("custom-class");
+  });
+
+  it("applies variant-specific styles", () => {
+    render(<Select variant="outline" options={options} setSelectedOption={vi.fn()} />);
+    const button = screen.getByRole("button");
+
+    expect(button).toHaveClass("border-[#b3b3b3] bg-white border");
+  });
+
+  it("renders a disabled dropdown", () => {
+    render(
+      <Select
+        options={options}
+        setSelectedOption={vi.fn()}
+        disabled
+      />
+    );
+
+    const button = screen.getByRole("button");
+    expect(button).toBeDisabled();
+    expect(button).toHaveClass("disabled:bg-dha-mc-bottom-nav-background disabled:text-dha-mc-checkbox-inactive");
+  });
+
+
+  it('falls back to the default variant when an invalid variant is provided', () => {
+    const { container } = render(
+      <Select
+        options={options}
+        variant="InvalidVariant"
+        setSelectedOption={vitest.fn()}
+      />
+    );
+
+    // Verify that the classes for the "default" variant are applied
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('hover:bg-gray-200');
+  });
+
+});
+
+
+describe('Select Accessibility Tests', () => {
+  const mockSetSelectedOption = vi.fn();
+  const options = [
+    { name: 'Option 1', value: '1' },
+    { name: 'Option 2', value: '2' },
+    { name: 'Option 3', value: '3' },
+  ];
+
+  const renderComponent = (props: Partial<SelectProps> = {}) =>
+    render(
+      <Select
+        label="Choose an option"
+        options={options}
+        setSelectedOption={mockSetSelectedOption}
+        {...props}
+      />
+    );
+
+  it('should have no accessibility violations in the default state', async () => {
+    const { container } = renderComponent();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should have no accessibility violations when open', async () => {
+    const { container, getByRole } = renderComponent();
+    const button = getByRole('button', { name: /Select options/i });
+    fireEvent.click(button);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should include a label if provided', () => {
+    const { getByText } = renderComponent({ label: 'Accessible Label' });
+    expect(getByText('Accessible Label')).toBeInTheDocument();
+  });
+
+  it('should render options correctly', () => {
+    const { getByRole, getByLabelText } = renderComponent();
+    const button = getByRole('button', { name: /Select options/i });
+    fireEvent.click(button);
+
+    options.forEach((option) => {
+      const optionElement = getByLabelText(`option ${option.name}`);
+      expect(optionElement).toBeInTheDocument();
+    });
+  });
+
+  it('should allow selecting an option', () => {
+    const { getByRole, getByLabelText } = renderComponent();
+    const button = getByRole('button', { name: /Select options/i });
+    fireEvent.click(button);
+
+    const optionToSelect = getByLabelText('option Option 2');
+    fireEvent.click(optionToSelect);
+
+    expect(mockSetSelectedOption).toHaveBeenCalledWith('2');
+    expect(button).toHaveTextContent('Option 2');
+  });
+
+  it('should support disabled state', () => {
+    const { getByRole } = renderComponent({ disabled: true });
+    const button = getByRole('button', { name: /Select options/i });
+    expect(button).toBeDisabled();
+  });
+
+  it('should handle custom classes without affecting accessibility', async () => {
+    const { container } = renderComponent({ className: 'custom-class' });
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should handle an empty options array gracefully', () => {
+    const { queryByRole } = renderComponent({ options: [] });
+    const dropdown = queryByRole('listbox');
+    expect(dropdown).not.toBeInTheDocument();
+  });
+
+  it('should close the dropdown when clicking outside', () => {
+    const { getByRole, container } = renderComponent();
+    const button = getByRole('button', { name: /Options/i });
+    fireEvent.click(button);
+
+    fireEvent.mouseDown(container);
+    expect(button).toHaveAttribute('aria-expanded', 'false');
+  });
+
+
+  it('should maintain focus management for keyboard users', () => {
+    const options = [
+      { name: 'Option 1', value: '1' },
+      { name: 'Option 2', value: '2' },
+      { name: 'Option 3', value: '3' },
+    ];
+
+    const { getByRole, getByLabelText } = renderComponent({
+      options,
+      optionsLabel: 'Choose an option',
+    });
+
+    const button = getByRole('button', { name: /Choose an option/i });
+    fireEvent.click(button); // Open the dropdown
+
+    const firstOption = getByLabelText('option Option 1');
+    fireEvent.keyDown(firstOption, { key: 'Enter', code: 'Enter' }); // Simulate Enter key press
+    // fireEvent.click(firstOption); // works, meaning keyboard is NOT. Need to fix ...
+
+    expect(mockSetSelectedOption).toHaveBeenCalledWith('1'); // Verify correct value is selected
+    expect(button).toHaveTextContent('Option 1'); // Verify button displays the selected option
+  });
+
+  it('should move focus to the next option with ArrowDown key', () => {
+    renderComponent();
+    const button = screen.getByRole('button', { name: /Select options/i });
+    fireEvent.click(button);
+
+    const listbox = screen.getByRole('listbox');
+
+    // Press ArrowDown
+    fireEvent.keyDown(listbox, { key: 'ArrowDown' });
+
+    // Second option should be focused (because the first key press advances the focus to first option)
+    expect(screen.getByRole('option', { name: 'option Option 2' })).toHaveFocus();
+
+    // Press ArrowDown again
+    fireEvent.keyDown(listbox, { key: 'ArrowDown' });
+
+    // Third option should now be focused
+    expect(screen.getByRole('option', { name: 'option Option 3' })).toHaveFocus();
+  });
+
+  it('should move focus to the previous option with ArrowUp key', () => {
+    renderComponent();
+    const button = screen.getByRole('button', { name: /Select options/i });
+    fireEvent.click(button);
+
+    const listbox = screen.getByRole('listbox');
+
+    // Press ArrowUp
+    fireEvent.keyDown(listbox, { key: 'ArrowUp' });
+
+    // Wraps around to the last option
+    expect(screen.getByRole('option', { name: 'option Option 3' })).toHaveFocus();
+
+    // Press ArrowUp again
+    fireEvent.keyDown(listbox, { key: 'ArrowUp' });
+
+    // Second option should be focused
+    expect(screen.getByRole('option', { name: 'option Option 2' })).toHaveFocus();
+  });
+
+
+  it('should move focus to the first option with Home key', () => {
+    renderComponent();
+    const button = screen.getByRole('button', { name: /Select options/i });
+    fireEvent.click(button);
+
+    const listbox = screen.getByRole('listbox');
+
+    // Press Home
+    fireEvent.keyDown(listbox, { key: 'Home' });
+
+    // First option should be focused
+    expect(screen.getByRole('option', { name: 'option Option 1' })).toHaveFocus();
+  });
+
+  it('should move focus to the last option with End key', () => {
+    renderComponent();
+    const button = screen.getByRole('button', { name: /Select options/i });
+    fireEvent.click(button);
+
+    const listbox = screen.getByRole('listbox');
+
+    // Press End
+    fireEvent.keyDown(listbox, { key: 'End' });
+
+    // Last option should be focused
+    expect(screen.getByRole('option', { name: 'option Option 3' })).toHaveFocus();
+  });
+
+  // it('should call preventDefault for navigation keys', () => {
+  //   renderComponent();
+  //   const button = screen.getByRole('button', { name: /Select options/i });
+  //   fireEvent.click(button);
+
+  //   const listbox = screen.getByRole('listbox');
+
+  //   // Spy on preventDefault
+  //   const preventDefaultSpy = vi.fn();
+
+  //   // Simulate the keydown event
+  //   fireEvent.keyDown(listbox, {
+  //     key: 'ArrowDown',
+  //     preventDefault: preventDefaultSpy,
+  //   });
+
+  //   // Ensure preventDefault was called
+  //   expect(preventDefaultSpy).toHaveBeenCalled();
+  // });
+
+  it('should close the select box when Escape key is pressed', () => {
+    // Render the component
+    renderComponent();
+
+    // Open the dropdown
+    const button = screen.getByRole('button', { name: /Select options/i });
+    fireEvent.click(button);
+
+    // Verify that the dropdown is open
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+
+    // Press the Escape key
+    fireEvent.keyDown(screen.getByRole('listbox'), { key: 'Escape' });
+
+    // Verify that the dropdown is closed
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  });
+
+  it('should close the dropdown when focus moves outside', () => {
+    renderComponent();
+
+    // Open the dropdown
+    const button = screen.getByRole('button', { name: /Select options/i });
+    fireEvent.click(button);
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+
+    // Simulate focus moving outside
+    fireEvent.focusIn(document.body);
+
+    // Verify the dropdown is closed
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  });
+
+  it('should select an option when Enter is pressed (using event.code)', () => {
+    renderComponent();
+
+    // Open the dropdown
+    const button = screen.getByRole('button', { name: /Select options/i });
+    fireEvent.click(button);
+
+    // Verify that the dropdown is open
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+
+    // Press Enter (using event.code)
+    fireEvent.keyDown(screen.getByRole('option', { name: 'option Option 1' }), {
+      code: 'Enter',
+    });
+
+    // Verify that the dropdown is closed
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  });
+
+  it('should select an option when Space key is pressed', () => {
+    renderComponent();
+
+    // Open the dropdown
+    const button = screen.getByRole('button', { name: /Select options/i });
+    fireEvent.click(button);
+
+    // Verify that the dropdown is open
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+
+    // Press Space key
+    fireEvent.keyDown(screen.getByRole('option', { name: 'option Option 1' }), {
+      key: ' ',
+    });
+
+    // Verify that the dropdown is closed
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  });
+
+  it('should close the select box when Escape key is pressed without selecting an option', () => {
+    renderComponent();
+
+    // Open the dropdown
+    const button = screen.getByRole('button', { name: /Select options/i });
+    fireEvent.click(button);
+
+    // Verify that the dropdown is open
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+
+    // Press Escape key on an option
+    fireEvent.keyDown(screen.getByRole('option', { name: 'option Option 1' }), {
+      key: 'Escape',
+    });
+
+    // Verify that the dropdown is closed
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+
+    // Ensure no option was selected
+    expect(button).toHaveTextContent('Options');
+  });
+
+  it("positions dropdown above the button when there is insufficient space below", () => {
+    // Set global dimensions so that containerHeight is 600.
+    Object.defineProperty(window, "innerHeight", {
+      writable: true,
+      configurable: true,
+      value: 600,
+    });
+    Object.defineProperty(document.body, "offsetHeight", {
+      writable: true,
+      configurable: true,
+      value: 600,
+    });
+
+    const setSelectedOptionMock = vi.fn();
+    const { container } = render(<Select options={options} setSelectedOption={setSelectedOptionMock} />);
+
+    // Override container's bounding rect to simulate a button with top:200 and bottom:500.
+    const outerContainer = container.firstChild as HTMLElement;
+    outerContainer.getBoundingClientRect = () => ({
+      top: 200,
+      bottom: 500, // available space below = 600 - 500 = 100
+      left: 0,
+      right: 600,
+      width: 600,
+      height: 300,
+      x: 0,
+      y: 0,
+      toJSON: () => {('')}
+    });
+
+    // Save the original descriptor for offsetHeight.
+    const originalOffsetHeight = Object.getOwnPropertyDescriptor(HTMLDivElement.prototype, 'offsetHeight');
+    // Override offsetHeight so that any element with role "listbox" reports a height of 150.
+    Object.defineProperty(HTMLDivElement.prototype, 'offsetHeight', {
+      configurable: true,
+      get: function () {
+        if (this.getAttribute && this.getAttribute('role') === 'listbox') {
+          return 150;
+        }
+        return originalOffsetHeight && originalOffsetHeight.get ? originalOffsetHeight.get.call(this) : 0;
+      },
+    });
+
+    // Open the dropdown so that updateDropdownPosition runs.
+    const button = screen.getByRole("button");
+    fireEvent.click(button);
+
+    // With spaceBelow (100) < dropdownHeight (150) and container top (200) > 150,
+    // updateDropdownPosition should set isAbove to true, causing the button to have "rounded-b-lg".
+    expect(button.className).toMatch(/rounded-b-lg/);
+  });
+});