ci: Select component: refactor tests

tsedio · May 12, 2022 · b16d26c · b16d26c
1 parent c3c148e
commit b16d26c
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 103 deletions.
diff --git a/packages/config/craco.config.js b/packages/config/craco.config.js
@@ -20,7 +20,28 @@ module.exports = (name, config = {}, ensure = true) => ({
         CONFIG: true
       },
       resetMocks: false,
-      setupFilesAfterEnv: [require.resolve("./jest/setupTests.js")]
+      setupFilesAfterEnv: [require.resolve("./jest/setupTests.js")],
+      // Indicates whether the coverage information should be collected while executing the test
+      collectCoverage: true,
+
+      // An array of glob patterns indicating a set of files for which coverage information should be collected
+      collectCoverageFrom: ["<rootDir>/src/**"],
+
+      // The directory where Jest should output its coverage files
+      coverageDirectory: "coverage",
+
+      // An array of regexp pattern strings used to skip coverage collection
+      coveragePathIgnorePatterns: [
+        "index.ts",
+        "/node_modules/",
+        "__mock__",
+        ".stories.tsx",
+        "src/config",
+        "src/bin",
+        "fixture.ts",
+        "/interfaces",
+        "__fixtures__"
+      ]
     }
   },
   webpack: {

diff --git a/packages/react-formio/craco.config.js b/packages/react-formio/craco.config.js
@@ -1,2 +1,11 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-module.exports = require("@tsed/config/craco.config")("react-formio", {});
+module.exports = require("@tsed/config/craco.config")("react-formio", {
+  coverageThreshold: {
+    global: {
+      branches: 44.6,
+      functions: 60.98,
+      lines: 60.98,
+      statements: 62.27
+    }
+  }
+});
diff --git a/packages/react-formio/src/components/select/select.component.spec.tsx b/packages/react-formio/src/components/select/select.component.spec.tsx
@@ -1,105 +1,86 @@
 import React from "react";
-import { Sandbox } from "./select.stories";
 import { fireEvent, render } from "@testing-library/react";
+import { Choicesjs, Sandbox } from "./select.stories";
 
-describe("select component", () => {
-  it("should render the select component", () => {
-    const { getByTestId } = render(<Sandbox {...Sandbox.args} name={"test"} />);
+describe("Select", () => {
+  describe("select component Sandbox version", () => {
+    it("should render the select component", () => {
+      const { getByTestId } = render(<Sandbox {...Sandbox.args} name={"test-sandbox"} />);
 
-    expect(getByTestId("select_test")).toBeInTheDocument();
-  });
+      expect(getByTestId("select_test-sandbox")).toBeInTheDocument();
+    });
 
-  it("should render select options with 'Placeholder test' as fisrt value", () => {
-    const choices = [
-      { label: "test1", value: "value1" },
-      { label: "test2", value: "value2" }
-    ];
-    const placeHolderTest = "Placeholder test";
-
-    const { getByTestId, getByText } = render(
-      <Sandbox
-        {...Sandbox.args}
-        placeholder={placeHolderTest}
-        choices={choices}
-        name={"test"}
-      />
-    );
-    const selectOptions = Array.prototype.map.call(
-      getByTestId("select_test").children,
-      (label) => label.textContent
-    );
-
-    expect(getByTestId("select_test").firstChild.textContent).toBe(
-      placeHolderTest
-    );
-    (selectOptions as Array<string>).map((option) => {
-      return expect(getByText(option)).toBeInTheDocument();
+    it("should render the select component with a different size", () => {
+      const { getByTestId } = render(<Sandbox {...Sandbox.args} size='small' name={"test-sandbox"} />);
+      const select = getByTestId("select_test-sandbox");
+      expect(select).toBeInTheDocument();
+      expect(select).toHaveClass("form-control-small");
     });
-  });
 
-  it("should have Placeholder label as selected option by default", () => {
-    const choices = [
-      { label: "test1", value: "value1" },
-      { label: "test2", value: "value2" }
-    ];
-    const placeHolderTest = "Placeholder test";
-
-    const { getAllByTestId } = render(
-      <Sandbox
-        {...Sandbox.args}
-        placeholder={placeHolderTest}
-        choices={choices}
-        name={"test"}
-      />
-    );
-
-    const selectedElement = Array.prototype.find.call(
-      getAllByTestId("select-option"),
-      (option) => {
-        return option.selected === true;
-      }
-    ).textContent;
-
-    expect(selectedElement).toEqual(placeHolderTest);
-  });
+    it("should render select options with 'Placeholder test' as first value", () => {
+      const choices = [
+        { label: "test1", value: "value1" },
+        { label: "test2", value: "value2" }
+      ];
+
+      const placeHolderTest = "Placeholder test";
+
+      const { getByRole } = render(<Sandbox {...Sandbox.args} placeholder={placeHolderTest} choices={choices} name={"test-sandbox"} />);
+
+      expect(getByRole("option", { name: "Placeholder test" })).toBeInTheDocument();
+      expect(getByRole("option", { name: "test1" })).toBeInTheDocument();
+      expect(getByRole("option", { name: "test2" })).toBeInTheDocument();
+    });
+
+    it("should have Placeholder label as selected option by default", () => {
+      const choices = [
+        { label: "test1", value: "value1" },
+        { label: "test2", value: "value2" }
+      ];
+      const placeHolderTest = "Placeholder test";
+
+      const { getByRole } = render(<Sandbox {...Sandbox.args} placeholder={placeHolderTest} choices={choices} name={"test-sandbox"} />);
+      const option = getByRole("option", { name: placeHolderTest }) as HTMLOptionElement;
 
-  it("should change the value of the selected option when you click on another choice ", () => {
-    const choices = [
-      { label: "test1", value: "value1" },
-      { label: "test2", value: "value2" }
-    ];
-    const placeHolderTest = "Placeholder test";
-
-    const { getByTestId, getAllByTestId } = render(
-      <Sandbox
-        {...Sandbox.args}
-        placeholder={placeHolderTest}
-        choices={choices}
-        name={"test"}
-      />
-    );
-
-    fireEvent.change(getByTestId("select_test"), {
-      target: { value: "value1" }
+      expect(option.selected).toBeTruthy();
     });
-    let selectedElement = Array.prototype.find.call(
-      getAllByTestId("select-option"),
-      (option) => {
-        return option.selected === true;
-      }
-    ).textContent;
-    expect(selectedElement).toEqual("test1");
-
-    fireEvent.change(getByTestId("select_test"), {
-      target: { value: "value2" }
+
+    it("should change the value of the selected option when you click on another choice", () => {
+      const choices = [
+        { label: "test1", value: "value1" },
+        { label: "test2", value: "value2" }
+      ];
+      const placeHolderTest = "Placeholder test";
+      const onChange = jest.fn();
+
+      const { getByRole, getByTestId } = render(
+        <Sandbox {...Sandbox.args} placeholder={placeHolderTest} choices={choices} name={"test-sandbox"} onChange={onChange} />
+      );
+
+      fireEvent.change(getByTestId("select_test-sandbox"), {
+        target: { value: "value1" }
+      });
+
+      const option = getByRole("option", { name: "test1" }) as HTMLOptionElement;
+
+      expect(option.selected).toBeTruthy();
+      expect(onChange).toHaveBeenCalledWith("test-sandbox", "value1");
+    });
+  });
+
+  describe("select component Choicesjs version", () => {
+    it("should render select options with 'test1' as first value", () => {
+      const choices = [
+        { label: "test1", value: "value1" },
+        { label: "test2", value: "value2" }
+      ];
+      const placeHolderTest = "Placeholder test";
+
+      const { getByRole } = render(
+        <Choicesjs {...Choicesjs.args} layout={"choicesjs"} choices={choices} placeholder={placeHolderTest} name={"test-choicesjs"} />
+      );
+
+      expect(getByRole("option", { name: "test1" })).toBeInTheDocument();
     });
-    selectedElement = Array.prototype.find.call(
-      getAllByTestId("select-option"),
-      (option) => {
-        return option.selected === true;
-      }
-    ).textContent;
-
-    expect(selectedElement).toEqual("test2");
   });
 });
diff --git a/packages/react-formio/src/components/select/select.component.tsx b/packages/react-formio/src/components/select/select.component.tsx
@@ -24,7 +24,7 @@ export function Select<T = any>({
   onChange,
   required,
   value,
-  choices = [],
+  choices,
   description,
   placeholder,
   prefix,
@@ -80,12 +80,7 @@ export function Select<T = any>({
       >
         {choices.map(({ label, value }) => {
           return (
-            <option
-              data-testid='select-option'
-              key={String(value)}
-              label={label}
-              value={value as any}
-            >
+            <option key={String(value)} label={label} value={value as any}>
               {label}
             </option>
           );

diff --git a/packages/react-formio/src/components/select/select.stories.tsx b/packages/react-formio/src/components/select/select.stories.tsx
@@ -15,7 +15,7 @@ const useValue = (args: any) => {
     value,
     onChange(name: string, value: any) {
       setValue(value);
-      return () => args.onChange(name, value);
+      args.onChange(name, value);
     }
   };
 };