updated tests

Author: bubulux

apps/frontend/ui/src/navigation/partials/OptionConcepts/stories.tsx

@@ -6,18 +6,14 @@ import OptionConcepts from "@app-ui/navigation/partials/OptionConcepts";
 const meta: Meta = {
   title: "App/UI/Navigation/Partials/OptionConcepts",
   component: OptionConcepts,
-  args: {
-    concepts: ["Partiality", "Signaling", "Connectivity", "Transformativity"],
-    onSearch: () => {},
-  },
 };
 
 export default meta;
 
 type Story = StoryObj<typeof OptionConcepts>;
 
 export const Index: Story = {
-  render: () => {
+  render: (props) => {
     const [checkedValues, setCheckedValues] = useState<
       Record<string, string[]>
     >({
@@ -39,8 +35,12 @@ export const Index: Story = {
             setIsFetching(false);
           }, 2000);
         }}
-        isReqestingConcepts={isFetching}
-        disableButton={checkedValues.concept.length === 0 || isFetching}
+        isReqestingConcepts={isFetching || props.isReqestingConcepts}
+        disableButton={
+          checkedValues.concept.length === 0 ||
+          isFetching ||
+          props.disableButton
+        }
         checkedValuesState={checkedValues}
         setCheckedValuesState={setCheckedValues}
       />

apps/frontend/ui/src/navigation/partials/OptionConcepts/tests.tsx

@@ -1,18 +1,36 @@
+import { useState } from "react";
+
 import { render, screen, fireEvent } from "@tests-unit-browser";
 import "@testing-library/jest-dom";
 
 import OptionConcepts from "@app-ui/navigation/partials/OptionConcepts";
 
+function Wrapper() {
+  const [checkedValues, setCheckedValues] = useState<Record<string, string[]>>({
+    concept: [],
+  });
+  const [isFetching, setIsFetching] = useState(false);
+
+  return (
+    <OptionConcepts
+      concepts={["concept1", "concept2", "concept3"]}
+      onSearch={() => {
+        setIsFetching(true);
+        setTimeout(() => {
+          setIsFetching(false);
+        }, 3000);
+      }}
+      isReqestingConcepts={isFetching}
+      disableButton={checkedValues.concept.length === 0 || isFetching}
+      checkedValuesState={checkedValues}
+      setCheckedValuesState={setCheckedValues}
+    />
+  );
+}
+
 describe("OptionConcepts", () => {
   it("should render with given concepts", () => {
-    const onSearch = jest.fn((value: string) => value);
-
-    render(
-      <OptionConcepts
-        concepts={["concept1", "concept2", "concept3"]}
-        onSearch={onSearch}
-      />,
-    );
+    render(<Wrapper />);
 
     const menuList = screen.getByRole("menu");
     expect(menuList).toBeInTheDocument();
@@ -26,40 +44,45 @@ describe("OptionConcepts", () => {
   });
 
   it("should be able to select different concepts", () => {
-    const onSearch = jest.fn((value: string) => value);
-
-    render(
-      <OptionConcepts
-        concepts={["concept1", "concept2", "concept3"]}
-        onSearch={onSearch}
-      />,
-    );
+    render(<Wrapper />);
 
     const concept1 = screen.getByText("concept1");
-    expect(concept1).toBeInTheDocument();
     const concept2 = screen.getByText("concept2");
-    expect(concept2).toBeInTheDocument();
     const concept3 = screen.getByText("concept3");
-    expect(concept3).toBeInTheDocument();
 
     const searchButton = screen.getByRole("button", { name: "Search" });
     expect(searchButton).toBeInTheDocument();
     expect(searchButton).toBeDisabled();
 
     fireEvent.click(concept1);
+    // has aria-checked attribute, when checked
+    expect(concept1.parentElement).toHaveAttribute("aria-checked", "true");
     expect(searchButton).toBeEnabled();
 
-    fireEvent.click(searchButton);
-    expect(onSearch).toHaveBeenCalledWith("concept1");
-
     fireEvent.click(concept2);
-    fireEvent.click(searchButton);
-    expect(onSearch).toHaveBeenCalledWith("concept2");
+    expect(concept2.parentElement).toHaveAttribute("aria-checked", "true");
+    // concept1 should be unchecked -> exclusitivity
+    expect(concept1.parentElement).toHaveAttribute("aria-checked", "false");
 
     fireEvent.click(concept3);
+    expect(concept3.parentElement).toHaveAttribute("aria-checked", "true");
+    expect(concept2.parentElement).toHaveAttribute("aria-checked", "false");
+  });
+
+  it("should show loading state and disable search button", () => {
+    render(<Wrapper />);
+
+    const concept1 = screen.getByText("concept1");
+    const searchButton = screen.getByRole("button", { name: "Search" });
+
+    fireEvent.click(concept1);
+    expect(searchButton).toBeEnabled();
+
     fireEvent.click(searchButton);
-    expect(onSearch).toHaveBeenCalledWith("concept3");
+    expect(searchButton).toBeDisabled();
 
-    expect(onSearch).toHaveBeenCalledTimes(3);
+    // role progressbar is used for loading state
+    const loading = screen.getByRole("progressbar");
+    expect(loading).toBeInTheDocument();
   });
 });