test: Added additional tests to bump test coverage

....
mlaursen · Aug 13, 2021 · 4d0371c · 4d0371c
1 parent 6a6b109
commit 4d0371c
Show file tree

Hide file tree

Showing 8 changed files with 454 additions and 1 deletion.
diff --git a/packages/dialog/src/FixedDialog.tsx b/packages/dialog/src/FixedDialog.tsx
@@ -75,7 +75,7 @@ export const FixedDialog = forwardRef<HTMLDivElement, FixedDialogProps>(
         style: propStyle,
         transformOrigin: true,
         ...options,
-        onScroll: (_event, { visible }) => {
+        onScroll: /* istanbul ignore next */ (_event, { visible }) => {
           if (!visible) {
             onRequestClose();
           }

diff --git a/packages/dialog/src/__tests__/FixedDialog.tsx b/packages/dialog/src/__tests__/FixedDialog.tsx
@@ -0,0 +1,48 @@
+import React, { ReactElement, useRef } from "react";
+import { render } from "@testing-library/react";
+import { DATA_RMD_NOSCROLL } from "@react-md/utils";
+
+import { FixedDialog, FixedDialogProps } from "../FixedDialog";
+
+const noop = (): void => {};
+
+function Test({
+  id = "dialog",
+  "aria-label": ariaLabel = "Label",
+  onRequestClose = noop,
+  visible = false,
+  children,
+  ...props
+}: Partial<FixedDialogProps>): ReactElement {
+  const fixedTo = useRef<HTMLButtonElement>(null);
+  return (
+    <>
+      <button type="button" ref={fixedTo}>
+        Fixed To
+      </button>
+      <FixedDialog
+        {...props}
+        id={id}
+        aria-label={ariaLabel}
+        visible={visible}
+        onRequestClose={onRequestClose}
+        fixedTo={fixedTo}
+      >
+        {children}
+      </FixedDialog>
+    </>
+  );
+}
+
+describe("FixedDialog", () => {
+  it("should disable the overlay and scroll lock behavior by default", () => {
+    const onRequestClose = jest.fn();
+    const { baseElement } = render(
+      <Test visible onRequestClose={onRequestClose} />
+    );
+
+    expect(baseElement).toMatchSnapshot();
+    expect(document.body).not.toHaveAttribute(DATA_RMD_NOSCROLL);
+    expect(onRequestClose).not.toBeCalled();
+  });
+});
diff --git a/packages/dialog/src/__tests__/__snapshots__/FixedDialog.tsx.snap b/packages/dialog/src/__tests__/__snapshots__/FixedDialog.tsx.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FixedDialog should disable the overlay and scroll lock behavior by default 1`] = `
+<body>
+  <div>
+    <button
+      type="button"
+    >
+      Fixed To
+    </button>
+  </div>
+  <span
+    class="rmd-overlay rmd-overlay--visible rmd-overlay--clickable rmd-dialog-overlay appear appear-active"
+    id="dialog-overlay"
+    tabindex="-1"
+  />
+  <div
+    aria-label="Label"
+    aria-modal="true"
+    class="rmd-dialog rmd-dialog--fixed"
+    id="dialog"
+    role="dialog"
+    tabindex="-1"
+  />
+</body>
+`;
diff --git a/packages/table/src/__tests__/Table.tsx b/packages/table/src/__tests__/Table.tsx
@@ -0,0 +1,56 @@
+import React, { ReactElement } from "react";
+import { render } from "@testing-library/react";
+
+import { Table, TableProps } from "../Table";
+import { TableHeader } from "../TableHeader";
+import { TableRow } from "../TableRow";
+import { TableCell } from "../TableCell";
+import { TableBody } from "../TableBody";
+import { TableContainer } from "../TableContainer";
+
+function Test(props: TableProps): ReactElement {
+  return (
+    <Table {...props}>
+      <TableHeader>
+        <TableRow>
+          <TableCell header>Header</TableCell>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell>Cell 1</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}
+
+describe("Table", () => {
+  it("should render correctly", () => {
+    const { container, rerender } = render(<Test />);
+    expect(container).toMatchSnapshot();
+
+    rerender(<Test dense hAlign="right" />);
+    expect(container).toMatchSnapshot();
+
+    rerender(<Test lineWrap disableHover disableBorders />);
+    expect(container).toMatchSnapshot();
+
+    rerender(<Test vAlign="top" fullWidth />);
+    expect(container).toMatchSnapshot();
+
+    rerender(
+      <TableContainer>
+        <Test />
+      </TableContainer>
+    );
+    expect(container).toMatchSnapshot();
+
+    rerender(
+      <TableContainer className="test">
+        <Test />
+      </TableContainer>
+    );
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/packages/table/src/__tests__/__snapshots__/Table.tsx.snap b/packages/table/src/__tests__/__snapshots__/Table.tsx.snap
@@ -0,0 +1,225 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Table should render correctly 1`] = `
+<div>
+  <table
+    class="rmd-table"
+  >
+    <thead
+      class="rmd-thead"
+    >
+      <tr
+        class="rmd-tr rmd-tr--bordered"
+      >
+        <th
+          class="rmd-table-cell rmd-table-cell--header rmd-table-cell--no-wrap"
+          scope="col"
+        >
+          Header
+        </th>
+      </tr>
+    </thead>
+    <tbody
+      class="rmd-tbody"
+    >
+      <tr
+        class="rmd-tr rmd-tr--bordered rmd-tr--hoverable"
+      >
+        <td
+          class="rmd-table-cell rmd-table-cell--no-wrap"
+        >
+          Cell 1
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;
+
+exports[`Table should render correctly 2`] = `
+<div>
+  <table
+    class="rmd-table rmd-table--dense"
+  >
+    <thead
+      class="rmd-thead"
+    >
+      <tr
+        class="rmd-tr rmd-tr--bordered"
+      >
+        <th
+          class="rmd-table-cell rmd-table-cell--header rmd-table-cell--right rmd-table-cell--no-wrap"
+          scope="col"
+        >
+          Header
+        </th>
+      </tr>
+    </thead>
+    <tbody
+      class="rmd-tbody"
+    >
+      <tr
+        class="rmd-tr rmd-tr--bordered rmd-tr--hoverable"
+      >
+        <td
+          class="rmd-table-cell rmd-table-cell--right rmd-table-cell--no-wrap"
+        >
+          Cell 1
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;
+
+exports[`Table should render correctly 3`] = `
+<div>
+  <table
+    class="rmd-table"
+  >
+    <thead
+      class="rmd-thead"
+    >
+      <tr
+        class="rmd-tr"
+      >
+        <th
+          class="rmd-table-cell rmd-table-cell--header"
+          scope="col"
+        >
+          Header
+        </th>
+      </tr>
+    </thead>
+    <tbody
+      class="rmd-tbody"
+    >
+      <tr
+        class="rmd-tr"
+      >
+        <td
+          class="rmd-table-cell"
+        >
+          Cell 1
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;
+
+exports[`Table should render correctly 4`] = `
+<div>
+  <table
+    class="rmd-table rmd-table--full-width"
+  >
+    <thead
+      class="rmd-thead"
+    >
+      <tr
+        class="rmd-tr rmd-tr--bordered"
+      >
+        <th
+          class="rmd-table-cell rmd-table-cell--header rmd-table-cell--top rmd-table-cell--vertical rmd-table-cell--no-wrap"
+          scope="col"
+        >
+          Header
+        </th>
+      </tr>
+    </thead>
+    <tbody
+      class="rmd-tbody"
+    >
+      <tr
+        class="rmd-tr rmd-tr--bordered rmd-tr--hoverable"
+      >
+        <td
+          class="rmd-table-cell rmd-table-cell--top rmd-table-cell--vertical rmd-table-cell--no-wrap"
+        >
+          Cell 1
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;
+
+exports[`Table should render correctly 5`] = `
+<div>
+  <div
+    class="rmd-table-container"
+  >
+    <table
+      class="rmd-table"
+    >
+      <thead
+        class="rmd-thead"
+      >
+        <tr
+          class="rmd-tr rmd-tr--bordered"
+        >
+          <th
+            class="rmd-table-cell rmd-table-cell--header rmd-table-cell--no-wrap"
+            scope="col"
+          >
+            Header
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        class="rmd-tbody"
+      >
+        <tr
+          class="rmd-tr rmd-tr--bordered rmd-tr--hoverable"
+        >
+          <td
+            class="rmd-table-cell rmd-table-cell--no-wrap"
+          >
+            Cell 1
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+`;
+
+exports[`Table should render correctly 6`] = `
+<div>
+  <div
+    class="rmd-table-container test"
+  >
+    <table
+      class="rmd-table"
+    >
+      <thead
+        class="rmd-thead"
+      >
+        <tr
+          class="rmd-tr rmd-tr--bordered"
+        >
+          <th
+            class="rmd-table-cell rmd-table-cell--header rmd-table-cell--no-wrap"
+            scope="col"
+          >
+            Header
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        class="rmd-tbody"
+      >
+        <tr
+          class="rmd-tr rmd-tr--bordered rmd-tr--hoverable"
+        >
+          <td
+            class="rmd-table-cell rmd-table-cell--no-wrap"
+          >
+            Cell 1
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+`;
diff --git a/packages/typography/src/__tests__/SrOnly.tsx b/packages/typography/src/__tests__/SrOnly.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { render } from "@testing-library/react";
+
+import { SrOnly } from "../SrOnly";
+
+describe("SrOnly", () => {
+  it("should render correctly", () => {
+    const { container, rerender } = render(<SrOnly>Some Text</SrOnly>);
+    expect(container).toMatchSnapshot();
+
+    rerender(<SrOnly focusable>Some Text</SrOnly>);
+    expect(container).toMatchSnapshot();
+
+    rerender(<SrOnly tabIndex={-1}>Some Text</SrOnly>);
+    expect(container).toMatchSnapshot();
+
+    rerender(
+      <SrOnly tabIndex={-1} focusable>
+        Some Text
+      </SrOnly>
+    );
+    expect(container).toMatchSnapshot();
+
+    rerender(<SrOnly component="div">Some Text</SrOnly>);
+    expect(container).toMatchSnapshot();
+  });
+});