feat(button): Improve variant restriction and tidy up unit tests (#56)

* chore(typescript): Clean up extra configuration that is no longer needed

* feat(button): Button is now restricted to our own choice of variant

* chore(button): Write and clean up tests for the button

Author: andrewgos

components/src/button/Button.test.tsx

@@ -1,135 +1,51 @@
-import { composeStories } from '@storybook/react';
-import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import fc from 'fast-check';
-import { describe, expect, it, vi } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { fuzzComponent } from '../../../tests/utils/fuzzComponent';
 import { Button, ButtonProps } from './Button';
-import * as stories from './Button.stories';
 
-// Compose all stories from the Button.stories file for testing
-const { Primary } = composeStories(stories);
-
-// Helper to get only valid story components (skip non-stories and metadata)
-type StoryComponent = React.FC<Record<string, unknown>> & {
-  args?: ButtonProps;
-};
-const getValidStories = (storiesObj: Record<string, unknown>) =>
-  Object.entries(composeStories(storiesObj)).filter(
-    ([key, Story]) =>
-      key !== 'default' && key !== '__esModule' && typeof Story === 'function',
-  ) as [string, StoryComponent][];
-
-// --- Storybook Stories Test Suite ---
-describe('Button (Storybook stories)', () => {
-  // Dynamically test all valid stories for rendering and label
-  getValidStories(stories).forEach(([storyName, Story]) => {
-    it(`renders ${storyName} button with default args`, () => {
-      // Render the story as a component
-      render(<Story />);
-      // Use the label from story args, fallback to 'Button' if not set
-      const label = (Story.args && Story.args.label) || 'Button';
-      // Check that the label is rendered
-      expect(screen.getByText(label)).toBeInTheDocument();
-      // Check for accessible role
-      expect(screen.getByRole('button')).toBeInTheDocument();
-    });
+describe('Button: Unit Test', () => {
+  it('applies mds class name', () => {
+    render(<Button label="Button" />);
+    expect(screen.getByRole('button')).toHaveClass('mds-btn');
   });
 
-  // Explicit tests for the Primary story with custom props and edge cases
-  it('renders Primary button with overridden label', () => {
-    // Test that the label prop overrides the default label
-    render(<Primary label="Hello world" />);
-    expect(screen.getByText('Hello world')).toBeInTheDocument();
+  it('renders with empty label', () => {
+    render(<Button label="" />);
+    expect(screen.getByRole('button')).toBeInTheDocument();
   });
 
-  it('calls onClick handler when clicked', () => {
-    // Test that the onClick handler is called when the button is clicked
-    const handleClick = vi.fn();
-    render(<Primary onClick={handleClick} />);
-    screen.getByRole('button').click();
-    expect(handleClick).toHaveBeenCalledTimes(1);
+  it('renders the label correctly', () => {
+    render(<Button label="ThisIsAButton" />);
+    expect(screen.getByRole('button')).toHaveTextContent('ThisIsAButton');
   });
 
-  it('does not call onClick when disabled', () => {
-    // Test that the onClick handler is not called when the button is disabled
-    const handleClick = vi.fn();
-    render(<Primary disabled onClick={handleClick} />);
-    screen.getByRole('button').click();
-    expect(handleClick).not.toHaveBeenCalled();
+  it('applies variant prop', () => {
+    render(<Button label="Button" variant="secondary" />);
+    expect(screen.getByRole('button')).toHaveClass('btn-secondary'); // the class applied by react-bootstrap
   });
 
-  it('applies the correct variant and size classes', () => {
-    // Test that the correct CSS classes are applied for variant and size
-    render(<Primary variant="danger" size="lg" />);
-    const btn = screen.getByRole('button');
-    expect(btn.className).toMatch(/btn-danger/);
-    expect(btn.className).toMatch(/btn-lg/);
+  it('handles invalid variant prop as default variant', () => {
+    render(<Button label="Button" variant="invalid" />);
+    expect(screen.getByRole('button')).toHaveClass('btn-primary'); // the class applied by react-bootstrap
   });
 
-  it('forwards aria-label and other aria props', () => {
-    // Test that aria-label and other aria props are forwarded to the button
-    render(<Primary aria-label="custom label" />);
-    expect(screen.getByLabelText('custom label')).toBeInTheDocument();
+  it('applies the size classes', () => {
+    render(<Button label="Button" size="lg" />);
+    expect(screen.getByRole('button')).toHaveClass('btn-lg');
   });
 
-  it('renders with the correct type attribute', () => {
-    // Test that the type attribute is set correctly
-    render(<Primary type="submit" />);
-    expect(screen.getByRole('button')).toHaveAttribute('type', 'submit');
+  it('respects disabled prop', () => {
+    render(<Button label="Button" disabled />);
+    expect(screen.getByRole('button')).toBeDisabled();
   });
 
   it('forwards extra props to the button element', () => {
-    // Test that extra props like data-testid are forwarded to the button
-    render(<Primary data-testid="my-btn" />);
+    render(<Button label="Button" data-testid="my-btn" />);
     expect(screen.getByTestId('my-btn')).toBeInTheDocument();
   });
 
-  it('respects disabled prop', () => {
-    render(<Primary disabled />);
-    const btn = screen.getByRole('button');
-    expect(btn).toBeDisabled();
-  });
-
-  it('renders with empty label', () => {
-    render(<Primary label="" />);
-    // Should still render a button
-    expect(screen.getByRole('button')).toBeInTheDocument();
-  });
-
-  it('renders with long label', () => {
-    const longLabel = 'L'.repeat(100);
-    render(<Primary label={longLabel} />);
-    expect(screen.getByText(longLabel)).toBeInTheDocument();
-  });
-
-  it('renders with special characters in label', () => {
-    const special = "!@#$%^&*()_+-=[]{}|;:'<>,.?/";
-    render(<Primary label={special} />);
-    expect(screen.getByText(special)).toBeInTheDocument();
-  });
-});
-
-// --- Fuzz Testing Suite ---
-describe('Fuzz Button', () => {
-  // Fuzz with each valid story's args as a seed to ensure real-world coverage
-  getValidStories(stories).forEach(([storyName, Story]) => {
-    if (Story.args) {
-      it(`fuzzes Button with story args for ${storyName}`, () => {
-        // Use the story's args as a fixed input for the fuzzer to ensure all real-world story props are tested
-        fuzzComponent(
-          Button,
-          fc.constant(Story.args),
-          (props: ButtonProps) => props.label,
-          { numRuns: 1 },
-        );
-      });
-    }
-  });
-
-  // Fuzz with 100 random prop combinations for broad edge case coverage
-  it('should render and display label for random props', () => {
-    // Use fast-check to generate 100 random prop combinations for Button
+  it('renders and display label for random props', () => {
     fuzzComponent(
       Button,
       fc.record<ButtonProps>({
@@ -149,10 +65,10 @@ describe('Fuzz Button', () => {
           'outline-secondary',
           'outline-danger',
         ) as unknown as fc.Arbitrary<ButtonProps['variant']>,
+        disabled: fc.boolean(),
         size: fc.option(fc.constantFrom('sm', 'lg'), {
           nil: undefined,
         }) as unknown as fc.Arbitrary<ButtonProps['size']>,
-        disabled: fc.boolean(),
       }),
       (props: ButtonProps) => props.label,
       { numRuns: 100 },

components/src/button/Button.tsx

@@ -7,20 +7,27 @@ import './button.css';
 
 export interface ButtonProps extends RBButtonProps {
   label: string;
-  variant?:
-    | 'primary'
-    | 'secondary'
-    | 'danger'
-    | 'outline-primary'
-    | 'outline-secondary'
-    | 'outline-danger';
+  variant?: string;
   disabled?: boolean;
   size?: 'sm' | 'lg';
 }
 
-export const Button: React.FC<ButtonProps> = ({ label, ...props }) => {
+const allowedVariants = [
+  'primary',
+  'secondary',
+  'danger',
+  'outline-primary',
+  'outline-secondary',
+  'outline-danger',
+];
+
+export const Button: React.FC<ButtonProps> = ({ label, variant, ...props }) => {
+  const resolvedVariant = allowedVariants.includes(variant ?? '')
+    ? variant
+    : 'primary';
+
   return (
-    <RBButton className="mds-btn" {...props}>
+    <RBButton className="mds-btn" variant={resolvedVariant} {...props}>
       {label}
     </RBButton>
   );

tests/setupTests.ts

@@ -1,19 +1 @@
-// This file configures global test setup for Vitest and React Testing Library.
-// It ensures that custom matchers from jest-dom (like toBeInTheDocument) are available in all tests.
-//
-// How it works:
-// - Imports jest-dom to extend expect with custom DOM matchers.
-// - Imports all matchers from jest-dom/matchers.
-// - Extends Vitest's expect with these matchers for type safety and usage in assertions.
-// - Declares the Assertion interface to include jest-dom and TestingLibrary matchers for IDE/type support.
-
 import '@testing-library/jest-dom';
-import * as matchers from '@testing-library/jest-dom/matchers';
-import { TestingLibraryMatchers } from '@testing-library/jest-dom/matchers';
-import { expect } from 'vitest';
-declare module 'vitest' {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  interface Assertion<T = any>
-    extends jest.Matchers<void, T>, TestingLibraryMatchers<T, void> {}
-}
-expect.extend(matchers);

types/global.d.ts

@@ -1,2 +1 @@
 /// <reference types="@vitest/browser-playwright" />
-/// <reference types="@testing-library/jest-dom" />