From 1a766ecb3e28f1af5ba67fff57ac0753a5496f20 Mon Sep 17 00:00:00 2001
From: Nathan Young <1447339+nathanyoung@users.noreply.github.com>
Date: Tue, 30 Apr 2024 11:18:52 -0700
Subject: [PATCH] test(Button): loading state spinner variant tests (#892)

---
 src/components/Button/Button.test.jsx | 50 ++++++++++++++++++++++++++-
 1 file changed, 49 insertions(+), 1 deletion(-)

diff --git a/src/components/Button/Button.test.jsx b/src/components/Button/Button.test.jsx
index 9547ec3e3..3a957a527 100644
--- 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', () => {