test: add tests for components

lacuna-technologies · Jul 23, 2022 · df4aa05 · df4aa05
1 parent 8112686
commit df4aa05
Show file tree

Hide file tree

Showing 8 changed files with 381 additions and 3 deletions.
diff --git a/src/components/Admonition.tsx b/src/components/Admonition.tsx
@@ -5,7 +5,7 @@ const Admonition = ({
   className = ``,
   title = ``,
   children = null,
-  onClick = null,
+  onClick = () => null,
 }) => {
   const [shouldHide, setShouldHide] = useState(false)
   const dismissAdmonition = useCallback((event) => {
@@ -20,7 +20,7 @@ const Admonition = ({
         className,
         onClick ? `cursor-pointer hover:bg-100` : ``,
       )}
-      onClick={onClick ? onClick : () => {}}
+      onClick={onClick}
     >
       <div className="grow">
         <div className="inline-flex flex-row">

diff --git a/src/components/AnimatedLoading.tsx b/src/components/AnimatedLoading.tsx
@@ -1,4 +1,6 @@
-const AnimatedLoading = () => {
+import type { FunctionComponent } from "preact"
+
+const AnimatedLoading: FunctionComponent = () => {
   return (
     <div className="inline-flex flex-row items-center">
       <div className="ml-[0.2rem]">Loading...</div>

diff --git a/src/components/__tests__/Admonition.test.tsx b/src/components/__tests__/Admonition.test.tsx
@@ -0,0 +1,15 @@
+import Admonition from "components/Admonition"
+import { render } from '@testing-library/preact'
+
+describe(`Admonition`, () => {
+  it(`should render without errors`, () => {
+    const tree = render(
+      <Admonition title="Warning">
+        <p>
+          Fun will now commence
+        </p>
+      </Admonition>,
+    )
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/components/__tests__/AnimatedLoading.test.tsx b/src/components/__tests__/AnimatedLoading.test.tsx
@@ -0,0 +1,11 @@
+import AnimatedLoading from 'components/AnimatedLoading'
+import { render } from '@testing-library/preact'
+
+describe(`AnimatedLoading`, () => {
+  it(`should render without errors`, () => {
+    const tree = render(
+      <AnimatedLoading />,
+    )
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/components/__tests__/SelectInput.test.tsx b/src/components/__tests__/SelectInput.test.tsx
@@ -0,0 +1,26 @@
+import SelectInput from "components/SelectInput"
+import { render } from '@testing-library/preact'
+
+const OPTIONS = [
+  { content: `Jack Cloth`, value: `cloth` },
+  { content: `Anne Oldman`, value: `oldman` },
+  { content: `Tom Boss`, value: `boss` },
+  { content: `Asap Qureshi`, value: `qureshi` },
+]
+
+const ON_CHANGE = jest.fn()
+
+describe(`SelectInput`, () => {
+
+  it(`should render without errors`, () => {
+    const tree = render(
+      <SelectInput
+        options={OPTIONS}
+        value={OPTIONS[0].value}
+        onChange={ON_CHANGE}
+        defaultValue={OPTIONS[0].value}
+      />,
+    )
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/components/__tests__/__snapshots__/Admonition.test.tsx.snap b/src/components/__tests__/__snapshots__/Admonition.test.tsx.snap
@@ -0,0 +1,114 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Admonition should render without errors 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="border border-solid border-gray-400 px-2 py-1 flex flex-row hover:bg-gray-100 cursor-pointer hover:bg-100"
+      >
+        <div
+          class="grow"
+        >
+          <div
+            class="inline-flex flex-row"
+          >
+            <strong>
+              Warning
+            </strong>
+          </div>
+          <div>
+            <p>
+              Fun will now commence
+            </p>
+          </div>
+        </div>
+        <div
+          class="cursor-pointer text-xs p-1"
+        >
+          ✕
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="border border-solid border-gray-400 px-2 py-1 flex flex-row hover:bg-gray-100 cursor-pointer hover:bg-100"
+    >
+      <div
+        class="grow"
+      >
+        <div
+          class="inline-flex flex-row"
+        >
+          <strong>
+            Warning
+          </strong>
+        </div>
+        <div>
+          <p>
+            Fun will now commence
+          </p>
+        </div>
+      </div>
+      <div
+        class="cursor-pointer text-xs p-1"
+      >
+        ✕
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/src/components/__tests__/__snapshots__/AnimatedLoading.test.tsx.snap b/src/components/__tests__/__snapshots__/AnimatedLoading.test.tsx.snap
@@ -0,0 +1,98 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AnimatedLoading should render without errors 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="inline-flex flex-row items-center"
+      >
+        <div
+          class="ml-[0.2rem]"
+        >
+          Loading...
+        </div>
+        <div
+          class="inline-block relative w-[80px] h-[10px] loading-container"
+        >
+          <div />
+          <div />
+          <div />
+          <div />
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="inline-flex flex-row items-center"
+    >
+      <div
+        class="ml-[0.2rem]"
+      >
+        Loading...
+      </div>
+      <div
+        class="inline-block relative w-[80px] h-[10px] loading-container"
+      >
+        <div />
+        <div />
+        <div />
+        <div />
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;