Merge pull request #111 from deriv-com/markwylde/add-unit-tests-for-button

chore: add unit tests for button

Author: markw-deriv

lib/components/Button/__test__/Button.spec.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Button } from '../';
+
+describe('Button component', () => {
+  it('renders without crashing', () => {
+    render(<Button>Test Button</Button>);
+    expect(screen.getByRole('button', { name: /test button/i })).toBeInTheDocument();
+  });
+
+  it('applies the "contained" variant classes when variant is "contained"', () => {
+    const { container } = render(<Button variant="contained">Test Button</Button>);
+    expect(container.firstChild).toHaveClass('deriv-button__variant--contained');
+  });
+
+  it('applies the "ghost" variant classes when variant is "ghost"', () => {
+    const { container } = render(<Button variant="ghost">Test Button</Button>);
+    expect(container.firstChild).toHaveClass('deriv-button__variant--ghost');
+  });
+
+  it('applies the "outlined" variant classes when variant is "outlined"', () => {
+    const { container } = render(<Button variant="outlined">Test Button</Button>);
+    expect(container.firstChild).toHaveClass('deriv-button__variant--outlined');
+  });
+
+  it('applies the correct color class based on the "color" prop', () => {
+    const { container } = render(<Button color="primary">Test Button</Button>);
+    expect(container.firstChild).toHaveClass('deriv-button__color--primary');
+  });
+
+  it('applies full width class when "isFullWidth" prop is true', () => {
+    const { container } = render(<Button isFullWidth>Test Button</Button>);
+    expect(container.firstChild).toHaveClass('deriv-button__full-width');
+  });
+
+  it('does not apply full width class when "isFullWidth" prop is false', () => {
+    const { container } = render(<Button>Test Button</Button>);
+    expect(container.firstChild).not.toHaveClass('deriv-button__full-width');
+  });
+
+  it('shows loader when "isLoading" prop is true', () => {
+    render(<Button isLoading>Test Button</Button>);
+    expect(screen.getByTestId('dt_derivs-loader')).toBeInTheDocument();
+  });
+
+  it('does not show loader when "isLoading" prop is false', () => {
+    render(<Button>Test Button</Button>);
+    expect(screen.queryByTestId('loader')).toBeNull();
+  });
+
+  it('disables the button when "disabled" prop is true', () => {
+    render(<Button disabled>Test Button</Button>);
+    expect(screen.getByRole('button', { name: /test button/i })).toBeDisabled();
+  });
+
+  it('disables the button when "isLoading" prop is true', () => {
+    render(<Button isLoading>Test Button</Button>);
+    expect(screen.getByRole('button', { name: /test button/i })).toBeDisabled();
+  });
+
+  it('applies the correct size class based on the "size" prop', () => {
+    const { container } = render(<Button size="lg">Test Button</Button>);
+    expect(container.firstChild).toHaveClass('deriv-button__size--lg');
+  });
+
+  it('applies the correct rounded class based on the "rounded" prop', () => {
+    const { container } = render(<Button rounded="md">Test Button</Button>);
+    expect(container.firstChild).toHaveClass('deriv-button__rounded--md');
+  });
+
+  it('shows the icon when provided and not loading', () => {
+    const Icon = () => <span>Icon</span>;
+    render(<Button icon={<Icon />}>Test Button</Button>);
+    expect(screen.getByText('Icon')).toBeInTheDocument();
+  });
+
+  it('does not show the icon when "isLoading" prop is true', () => {
+    const Icon = () => <span>Icon</span>;
+    render(<Button isLoading icon={<Icon />}>Test Button</Button>);
+    expect(screen.queryByText('Icon')).toBeNull();
+  });
+
+  it('renders children text when not loading', () => {
+    render(<Button>Test Button</Button>);
+    expect(screen.getByRole('button', { name: /test button/i })).toHaveTextContent('Test Button');
+  });
+
+  it('does not render children text when "isLoading" prop is true', () => {
+    render(<Button isLoading>Test Button</Button>);
+    expect(screen.queryByText('Test Button')).toBeNull();
+  });
+});

lib/components/Button/index.tsx

@@ -13,7 +13,7 @@ interface ButtonProps extends ComponentProps<"button"> {
     icon?: ReactElement;
     isFullWidth?: boolean;
     isLoading?: boolean;
-    rounded?: Extract<TGenericSizes, "md" | "sm">;
+    rounded?: Extract<TGenericSizes, "lg" | "md" | "sm">;
     size?: Extract<TGenericSizes, "lg" | "md" | "sm">;
     textSize?: ComponentProps<typeof Text>["size"];
     variant?: TVariant;
@@ -84,6 +84,7 @@ export const Button = ({
                 className,
             )}
             disabled={rest.disabled || isLoading}
+            aria-label={rest.children && typeof rest.children === 'string' ? rest.children : ''}
             {...rest}
         >
             {isLoading && (