@dhasdk/simple-ui 1.0.8 → 1.0.10

package/src/lib/Select.spec.tsx

@@ -1,493 +0,0 @@
-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/);
-  });
-});