test(Button): loading state spinner variant tests (#892)

palmetto · Apr 30, 2024 · 1a766ec · 1a766ec
1 parent 2a48b37
commit 1a766ec
Showing 1 changed file with 49 additions and 1 deletion.
diff --git a/src/components/Button/Button.test.jsx b/src/components/Button/Button.test.jsx
@@ -277,7 +277,33 @@ 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 primary spinning loading indicator with prefix icon', () => {
+        render(
+          <Button tone="primary" variant="secondary" iconPrefix="add" isLoading>
+            Button is loading
+          </Button>,
+        );
+        const spinnerElement = document.getElementsByClassName('spinner')[0];
+        expect(spinnerElement).toBeInTheDocument();
+        expect(spinnerElement).toHaveClass('font-color-primary');
+      });
+
+      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 +320,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 +357,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', () => {