Merge pull request #476 from bcgov/feature/component-unit-tests

Unit tests for Header, Footer, Form, InlineAlert, Switch

Author: ty2k

packages/react-components/src/components/Footer/Footer.test.tsx

@@ -0,0 +1,16 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+
+import Footer from "./Footer";
+
+describe("Footer", () => {
+  render(<Footer />);
+
+  // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/contentinfo_role
+  const contentInfoElements = screen.getAllByRole("contentinfo");
+
+  it("renders an HTML footer component", () => {
+    expect(contentInfoElements).toHaveLength(1);
+    expect(contentInfoElements[0].tagName).toBe("FOOTER");
+  });
+});

packages/react-components/src/components/Footer/Footer.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import SvgBcLogo from "../Icons/SvgBcLogo";
 
 import "./Footer.css";

packages/react-components/src/components/Form/Form.test.tsx

@@ -0,0 +1,14 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+
+import Form from "./Form";
+
+describe("Form", () => {
+  render(<Form data-testid="form-element" />);
+
+  const form = screen.getByTestId("form-element");
+
+  it("renders an HTML form component", () => {
+    expect(form.tagName).toBe("FORM");
+  });
+});

packages/react-components/src/components/Header/Header.test.tsx

@@ -0,0 +1,16 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+
+import Header from "./Header";
+
+describe("Header", () => {
+  render(<Header />);
+
+  // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/banner_role
+  const bannerElements = screen.getAllByRole("banner");
+
+  it("renders an HTML header component", () => {
+    expect(bannerElements).toHaveLength(1);
+    expect(bannerElements[0].tagName).toBe("HEADER");
+  });
+});

packages/react-components/src/components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { cloneElement, PropsWithChildren } from "react";
 
 import SvgBcLogo from "../Icons/SvgBcLogo";
 
@@ -38,7 +38,7 @@ export default function Header({
   skipLinks,
   title = "",
   titleElement = "span",
-}: React.PropsWithChildren<HeaderProps>) {
+}: PropsWithChildren<HeaderProps>) {
   function getLogo() {
     if (!logoLinkElement)
       return (
@@ -47,7 +47,7 @@ export default function Header({
         </a>
       );
 
-    return React.cloneElement(logoLinkElement, { children: logoImage });
+    return cloneElement(logoLinkElement, { children: logoImage });
   }
 
   function getTitle() {

packages/react-components/src/components/InlineAlert/InlineAlert.test.tsx

@@ -0,0 +1,37 @@
+import "@testing-library/jest-dom";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+
+import InlineAlert from "./InlineAlert";
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("InlineAlert", () => {
+  it("renders a div with role='note'", () => {
+    render(<InlineAlert variant="info" data-testid="info" />);
+    render(<InlineAlert variant="danger" data-testid="danger" />);
+    render(<InlineAlert variant="success" data-testid="success" />);
+    render(<InlineAlert variant="warning" data-testid="warning" />);
+
+    const alertElements = screen.getAllByRole("note");
+
+    expect(alertElements).toHaveLength(4);
+    expect(alertElements[0].tagName).toBe("DIV");
+  });
+
+  it("isCloseable prop causes a close button to be rendered", () => {
+    const handleClose = jest.fn();
+    render(
+      <InlineAlert isCloseable onClose={handleClose} data-test-id="closeable" />
+    );
+
+    const closeButtons = screen.getAllByRole("button");
+
+    expect(closeButtons[0]).toHaveAccessibleName(/close this alert/i);
+
+    fireEvent.click(closeButtons[0]);
+
+    expect(handleClose).toHaveBeenCalledTimes(1);
+  });
+});

packages/react-components/src/components/InlineAlert/InlineAlert.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import Button from "../Button";
 import ButtonGroup from "../ButtonGroup";
 import SvgCheckCircleIcon from "../Icons/SvgCheckCircleIcon";

packages/react-components/src/components/Select/Select.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {
   Button,
   Collection,

packages/react-components/src/components/Switch/Switch.test.tsx

@@ -0,0 +1,39 @@
+import "@testing-library/jest-dom";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+
+import Switch from "./Switch";
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("Switch", () => {
+  it("renders an HTML input component", () => {
+    render(<Switch>Flip me</Switch>);
+
+    const switchElements = screen.getAllByLabelText(/flip me/i);
+
+    expect(switchElements).toHaveLength(1);
+    expect(switchElements[0].tagName).toBe("INPUT");
+    expect(switchElements[0]).toHaveAccessibleName(/flip me/i);
+  });
+
+  it("onChange handler fires on click", () => {
+    const handleChange = jest.fn();
+    render(<Switch onChange={handleChange}>Power</Switch>);
+
+    const switchElement = screen.getByLabelText(/power/i);
+
+    fireEvent.click(switchElement);
+
+    expect(handleChange).toHaveBeenCalled();
+  });
+
+  it("defaultSelected adds checked attribute", () => {
+    render(<Switch defaultSelected>Standby</Switch>);
+
+    const switchElement = screen.getByLabelText(/standby/i);
+
+    expect(switchElement).toHaveAttribute("checked");
+  });
+});