From a7f6af58f4463a7df5ccdbc45ff2100c82de65f0 Mon Sep 17 00:00:00 2001
From: Mark Wylde <mark.wylde@regentmarkets.com>
Date: Wed, 6 Mar 2024 17:24:58 +0000
Subject: [PATCH 1/3] chore: add unit tests for button

---
 .../Button/__test__/Button.spec.tsx           | 92 +++++++++++++++++++
 lib/components/Button/index.tsx               |  1 +
 2 files changed, 93 insertions(+)
 create mode 100644 lib/components/Button/__test__/Button.spec.tsx

diff --git a/lib/components/Button/__test__/Button.spec.tsx b/lib/components/Button/__test__/Button.spec.tsx
new file mode 100644
index 00000000..ce6de08a
--- /dev/null
+++ b/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="lg">Test Button</Button>);
+    expect(container.firstChild).toHaveClass('deriv-button__rounded--lg');
+  });
+
+  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();
+  });
+});
diff --git a/lib/components/Button/index.tsx b/lib/components/Button/index.tsx
index 7f5a1ee4..c6c914fb 100644
--- a/lib/components/Button/index.tsx
+++ b/lib/components/Button/index.tsx
@@ -84,6 +84,7 @@ export const Button = ({
                 className,
             )}
             disabled={rest.disabled || isLoading}
+            aria-label={rest.children}
             {...rest}
         >
             {isLoading && (

From cf8c43fffacae82734a456d02ec5c6c3f9f6dd95 Mon Sep 17 00:00:00 2001
From: Mark Wylde <mark.wylde@regentmarkets.com>
Date: Wed, 6 Mar 2024 17:31:39 +0000
Subject: [PATCH 2/3] chore: add unit tests for button

---
 lib/components/Button/__test__/Button.spec.tsx | 4 ++--
 lib/components/Button/index.tsx                | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/components/Button/__test__/Button.spec.tsx b/lib/components/Button/__test__/Button.spec.tsx
index ce6de08a..1705afe5 100644
--- a/lib/components/Button/__test__/Button.spec.tsx
+++ b/lib/components/Button/__test__/Button.spec.tsx
@@ -64,8 +64,8 @@ describe('Button component', () => {
   });
 
   it('applies the correct rounded class based on the "rounded" prop', () => {
-    const { container } = render(<Button rounded="lg">Test Button</Button>);
-    expect(container.firstChild).toHaveClass('deriv-button__rounded--lg');
+    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', () => {
diff --git a/lib/components/Button/index.tsx b/lib/components/Button/index.tsx
index c6c914fb..c3efb69b 100644
--- a/lib/components/Button/index.tsx
+++ b/lib/components/Button/index.tsx
@@ -84,7 +84,7 @@ export const Button = ({
                 className,
             )}
             disabled={rest.disabled || isLoading}
-            aria-label={rest.children}
+            aria-label={rest.children && typeof rest.children === 'string' ? rest.children : ''}
             {...rest}
         >
             {isLoading && (

From d94d8d8873cf7a1e6cde2895ef77cf93868103a3 Mon Sep 17 00:00:00 2001
From: Mark Wylde <mark.wylde@regentmarkets.com>
Date: Thu, 7 Mar 2024 07:07:55 +0000
Subject: [PATCH 3/3] fix: add lg type for rounded

---
 lib/components/Button/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/components/Button/index.tsx b/lib/components/Button/index.tsx
index c3efb69b..a5764bed 100644
--- a/lib/components/Button/index.tsx
+++ b/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;