test: added tests for new button

adaptui · Jul 14, 2021 · 2ab5561 · 2ab5561
1 parent f7ea32d
commit 2ab5561
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 2 deletions.
diff --git a/src/button/__tests__/Button.test.tsx b/src/button/__tests__/Button.test.tsx
@@ -11,6 +11,91 @@ describe("Testing Button", () => {
     expect(screen.getByRole("button")).toHaveTextContent(/hello world/i);
   });
 
+  it("should render properly with iconOnly", () => {
+    render(<Button iconOnly={<p>Icon only</p>}>hello world</Button>);
+
+    expect(screen.queryByText(/hello world/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Icon only/i)).toBeInTheDocument();
+  });
+
+  test("prefix, suffix & children should be ignored when iconOnly is set", () => {
+    render(
+      <Button
+        prefix={<p>prefix</p>}
+        suffix={<p>suffix</p>}
+        iconOnly={<p>Icon only</p>}
+      >
+        hello world
+      </Button>,
+    );
+
+    expect(screen.queryByText(/hello world/i)).not.toBeInTheDocument();
+    expect(screen.queryByText("prefix")).not.toBeInTheDocument();
+    expect(screen.queryByText("suffix")).not.toBeInTheDocument();
+    expect(screen.queryByText(/Icon only/i)).toBeInTheDocument();
+  });
+
+  it("should render with loading spinner when loading is true", () => {
+    render(<Button loading>hello world</Button>);
+
+    expect(screen.getByTestId("testid-spinner")).toBeInTheDocument();
+  });
+
+  it("should render a custom loading spinner", () => {
+    render(
+      <Button loading spinner={<p>spinning</p>}>
+        hello world
+      </Button>,
+    );
+
+    expect(screen.queryByText("spinning")).toBeInTheDocument();
+  });
+
+  it("should render with prefix suffix", () => {
+    render(
+      <Button prefix={<p>prefix</p>} suffix={<p>suffix</p>}>
+        hello world
+      </Button>,
+    );
+
+    expect(screen.queryByText("prefix")).toBeInTheDocument();
+    expect(screen.queryByText("suffix")).toBeInTheDocument();
+  });
+
+  test("when loading, replace prefix with spinner when prefix is provided", () => {
+    render(
+      <Button prefix={<p>prefix</p>} loading>
+        hello world
+      </Button>,
+    );
+
+    expect(screen.queryByText("prefix")).not.toBeInTheDocument();
+    expect(screen.getByTestId("testid-spinner")).toBeInTheDocument();
+  });
+
+  test("when loading, replace suffix with spinner when suffix is provided", () => {
+    render(
+      <Button suffix={<p>suffix</p>} loading>
+        hello world
+      </Button>,
+    );
+
+    expect(screen.queryByText("suffix")).not.toBeInTheDocument();
+    expect(screen.getByTestId("testid-spinner")).toBeInTheDocument();
+  });
+
+  test("when loading, replace suffix with spinner when both suffix and prefix are provided", () => {
+    render(
+      <Button prefix={<p>prefix</p>} suffix={<p>suffix</p>} loading>
+        hello world
+      </Button>,
+    );
+
+    expect(screen.queryByText("prefix")).toBeInTheDocument();
+    expect(screen.queryByText("suffix")).not.toBeInTheDocument();
+    expect(screen.getByTestId("testid-spinner")).toBeInTheDocument();
+  });
+
   it("should not have axe violations", async () => {
     testA11y(<Button>Ally</Button>);
   });

diff --git a/src/button/stories/Button.stories.tsx b/src/button/stories/Button.stories.tsx
@@ -10,7 +10,7 @@ import {
   CloseButtonProps,
 } from "../index";
 import { Spinner } from "../../spinner";
-import { CaretRightIcon, ClockIcon } from "../../icons";
+import { CaretRightIcon, ClockIcon, SearchIcon } from "../../icons";
 import { createControls } from "../../../.storybook/storybookUtils";
 
 export default {

diff --git a/src/spinner/Spinner.tsx b/src/spinner/Spinner.tsx
@@ -47,7 +47,12 @@ export const Spinner = forwardRefWithAs<SpinnerProps, HTMLDivElement, "div">(
     );
 
     return (
-      <Box ref={ref} className={spinnerStyles} {...rest}>
+      <Box
+        ref={ref}
+        className={spinnerStyles}
+        data-testid="testid-spinner"
+        {...rest}
+      >
         {label && <div className={theme.spinner.aria}>{label}</div>}
       </Box>
     );