fix(Button): loading state spinner variant tests

palmetto · Apr 30, 2024 · 80fcfe9 · 80fcfe9
1 parent 2a48b37
commit 80fcfe9
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 5 deletions.
diff --git a/src/components/Button/Button.test.jsx b/src/components/Button/Button.test.jsx
@@ -277,7 +277,22 @@ describe('Button', () => {
 
     describe('Loading', () => {
       test('it renders the spinning loading indicator', () => {
-        render(<Button tone="neutral" isLoading>Button is loading</Button>);
+        render(
+          <Button tone="neutral" isLoading>
+            Button is loading
+          </Button>,
+        );
+        const spinnerElement = document.getElementsByClassName('spinner')[0];
+        expect(spinnerElement).toBeInTheDocument();
+        expect(spinnerElement).toHaveClass('font-color-dark');
+      });
+
+      test('it renders the spinning loading indicator with prefix icon', () => {
+        render(
+          <Button tone="neutral" iconPrefix="add" isLoading>
+            Button is loading
+          </Button>,
+        );
         const spinnerElement = document.getElementsByClassName('spinner')[0];
         expect(spinnerElement).toBeInTheDocument();
         expect(spinnerElement).toHaveClass('font-color-dark');
@@ -294,6 +309,17 @@ describe('Button', () => {
         expect(spinnerElement).toHaveClass('font-color-dark');
       });
 
+      test('it renders the grey spinning indicator if button variant is tertiary with neutral tone', () => {
+        render(
+          <Button isLoading variant="tertiary" tone="neutral">
+            Button is loading
+          </Button>,
+        );
+        const spinnerElement = document.getElementsByClassName('spinner')[0];
+        expect(spinnerElement).toBeInTheDocument();
+        expect(spinnerElement).toHaveClass('font-color-dark');
+      });
+
       test('it keeps the button text in the dom so the button width does not change', () => {
         render(<Button isLoading>Button is loading</Button>);
         expect(screen.getByText('Button is loading')).toBeInTheDocument();
@@ -320,6 +346,17 @@ describe('Button', () => {
         expect(spinnerElement).toBeInTheDocument();
         expect(spinnerElement).toHaveClass('font-color-white');
       });
+
+      test('it renders white spinning indicator when button is secondary with tone danger', () => {
+        render(
+          <Button variant="secondary" tone="danger" isLoading>
+            Button is loading
+          </Button>,
+        );
+        const spinnerElement = document.getElementsByClassName('spinner')[0];
+        expect(spinnerElement).toBeInTheDocument();
+        expect(spinnerElement).toHaveClass('font-color-danger');
+      });
     });
 
     describe('Disabled and Loading', () => {

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -185,10 +185,6 @@ export const Button = forwardRef<
     };
 
     const getSpinnerVariant = () => {
-      if (tone === 'primary' && (variant === 'secondary' || variant === 'tertiary')) {
-        return 'primary';
-      }
-
       if (tone === 'danger' && (variant === 'secondary' || variant === 'tertiary')) {
         return 'danger';
       }