Merge pull request #41 from theopensystemslab/unit-testing

Add more snapshots

src/components/__tests__/Date.tsx

@@ -0,0 +1,39 @@
+import { cleanup, fireEvent, render, wait } from "@testing-library/react";
+import * as React from "react";
+
+import Date from "../Date";
+
+afterEach(cleanup);
+
+describe("Date Component", () => {
+  it("should render snapshot", () => {
+    const title = " test title";
+    const name = "test name";
+    const type = "number";
+    const options = ["day", "month", "year"];
+    const inputProps = {
+      day: {
+        min: 1,
+        max: 31
+      },
+      month: {
+        min: 1,
+        max: 12
+      },
+      year: {
+        min: 1920,
+        max: 2020
+      }
+    };
+    const { asFragment } = render(
+      <Date
+        title={title}
+        name={name}
+        type={type}
+        options={options}
+        inputProps={inputProps}
+      />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

src/components/__tests__/ExpandableCheckboxes.tsx

@@ -0,0 +1,35 @@
+import { cleanup, render } from "@testing-library/react";
+import * as React from "react";
+
+import ExpandableCheckboxes from "../ExpandableCheckboxes";
+
+afterEach(cleanup);
+
+describe("Expandable Checkboxes Component", () => {
+  it("render snapshot", () => {
+    const title = "Expandable Checkboxes";
+    const name = "ExpandableCheckboxes";
+    const panelsOptions = [
+      {
+        sectionTitle: "section A",
+        values: ["Response A1", "Response A2", "Response A3"]
+      },
+      {
+        sectionTitle: "section B",
+        values: ["Response B1", "Response B2", "Response B3"]
+      },
+      {
+        sectionTitle: "section C",
+        values: ["Response C1", "Response C2", "Response C3"]
+      }
+    ];
+    const { asFragment } = render(
+      <ExpandableCheckboxes
+        title={title}
+        name={name}
+        panelsOptions={panelsOptions}
+      />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

src/components/__tests__/FileUpload.tsx

@@ -0,0 +1,18 @@
+import { cleanup, fireEvent, render, wait } from "@testing-library/react";
+import * as React from "react";
+
+import FileUpload from "../FileUpload";
+
+afterEach(cleanup);
+
+describe("File Upload Component", () => {
+  it("should render snapshot", () => {
+    const maxSize = 40000;
+    const accept = ["image/*"];
+    const title = "File upload";
+    const { asFragment } = render(
+      <FileUpload maxSize={maxSize} accept={accept} title={title} />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

src/components/__tests__/StreetAddress.tsx

@@ -0,0 +1,19 @@
+import { cleanup, fireEvent, render, wait } from "@testing-library/react";
+import * as React from "react";
+
+import StreetAddress from "../StreetAddress";
+
+afterEach(cleanup);
+
+describe("Street Address Component", () => {
+  it("should render snapshot", () => {
+    const title = " test title";
+    const name = "test name";
+    const type = "text";
+    const options = ["building", "street", "city", "county", "postcode"];
+    const { asFragment } = render(
+      <StreetAddress title={title} name={name} type={type} options={options} />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

src/components/__tests__/Text.tsx

@@ -0,0 +1,18 @@
+import { cleanup, fireEvent, render, wait } from "@testing-library/react";
+import * as React from "react";
+
+import Text from "../Text";
+
+afterEach(cleanup);
+
+describe("Text Component", () => {
+  it("should render snapshot", () => {
+    const title = " test title";
+    const name = "test name";
+    const type = "text";
+    const { asFragment } = render(
+      <Text title={title} name={name} type={type} />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

src/components/__tests__/__snapshots__/Date.tsx.snap

@@ -0,0 +1,90 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Date Component should render snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="MuiBox-root MuiBox-root-2"
+  >
+    <form>
+      <div
+        class="MuiTypography-root MuiTypography-h5 MuiTypography-gutterBottom"
+      >
+         test title
+      </div>
+      <div
+        class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1"
+      >
+        <div
+          class="MuiGrid-root MuiGrid-item"
+        >
+          <label
+            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated"
+          >
+            day
+          </label>
+          <div
+            class="MuiInputBase-root MuiInput-root MuiInput-underline"
+            required=""
+          >
+            <input
+              class="MuiInputBase-input MuiInput-input"
+              max="31"
+              min="1"
+              name="test name-day"
+              required=""
+              type="number"
+              value=""
+            />
+          </div>
+        </div>
+        <div
+          class="MuiGrid-root MuiGrid-item"
+        >
+          <label
+            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated"
+          >
+            month
+          </label>
+          <div
+            class="MuiInputBase-root MuiInput-root MuiInput-underline"
+            required=""
+          >
+            <input
+              class="MuiInputBase-input MuiInput-input"
+              max="12"
+              min="1"
+              name="test name-month"
+              required=""
+              type="number"
+              value=""
+            />
+          </div>
+        </div>
+        <div
+          class="MuiGrid-root MuiGrid-item"
+        >
+          <label
+            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated"
+          >
+            year
+          </label>
+          <div
+            class="MuiInputBase-root MuiInput-root MuiInput-underline"
+            required=""
+          >
+            <input
+              class="MuiInputBase-input MuiInput-input"
+              max="2020"
+              min="1920"
+              name="test name-year"
+              required=""
+              type="number"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </form>
+  </div>
+</DocumentFragment>
+`;