no log: Completely refactor testing interface

frontend/src/components/bazarr/Language.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { rawRender, screen } from "@/tests";
 import { describe, it } from "vitest";
 import { Language } from ".";
 
@@ -9,13 +9,13 @@ describe("Language text", () => {
   };
 
   it("should show short text", () => {
-    render(<Language.Text value={testLanguage}></Language.Text>);
+    rawRender(<Language.Text value={testLanguage}></Language.Text>);
 
     expect(screen.getByText(testLanguage.code2)).toBeDefined();
   });
 
   it("should show long text", () => {
-    render(<Language.Text value={testLanguage} long></Language.Text>);
+    rawRender(<Language.Text value={testLanguage} long></Language.Text>);
 
     expect(screen.getByText(testLanguage.name)).toBeDefined();
   });
@@ -23,7 +23,7 @@ describe("Language text", () => {
   const testLanguageWithHi: Language.Info = { ...testLanguage, hi: true };
 
   it("should show short text with HI", () => {
-    render(<Language.Text value={testLanguageWithHi}></Language.Text>);
+    rawRender(<Language.Text value={testLanguageWithHi}></Language.Text>);
 
     const expectedText = `${testLanguageWithHi.code2}:HI`;
 
@@ -31,7 +31,7 @@ describe("Language text", () => {
   });
 
   it("should show long text with HI", () => {
-    render(<Language.Text value={testLanguageWithHi} long></Language.Text>);
+    rawRender(<Language.Text value={testLanguageWithHi} long></Language.Text>);
 
     const expectedText = `${testLanguageWithHi.name} HI`;
 
@@ -44,7 +44,7 @@ describe("Language text", () => {
   };
 
   it("should show short text with Forced", () => {
-    render(<Language.Text value={testLanguageWithForced}></Language.Text>);
+    rawRender(<Language.Text value={testLanguageWithForced}></Language.Text>);
 
     const expectedText = `${testLanguageWithHi.code2}:Forced`;
 
@@ -52,7 +52,9 @@ describe("Language text", () => {
   });
 
   it("should show long text with Forced", () => {
-    render(<Language.Text value={testLanguageWithForced} long></Language.Text>);
+    rawRender(
+      <Language.Text value={testLanguageWithForced} long></Language.Text>
+    );
 
     const expectedText = `${testLanguageWithHi.name} Forced`;
 
@@ -73,7 +75,7 @@ describe("Language list", () => {
   ];
 
   it("should show all languages", () => {
-    render(<Language.List value={elements}></Language.List>);
+    rawRender(<Language.List value={elements}></Language.List>);
 
     elements.forEach((value) => {
       expect(screen.getByText(value.name)).toBeDefined();

frontend/src/components/inputs/Action.test.tsx

@@ -1,5 +1,5 @@
+import { rawRender, screen } from "@/tests";
 import { faStickyNote } from "@fortawesome/free-regular-svg-icons";
-import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, it, vitest } from "vitest";
 import Action from "./Action";
@@ -9,7 +9,7 @@ const testIcon = faStickyNote;
 
 describe("Action button", () => {
   it("should be a button", () => {
-    render(<Action icon={testIcon} label={testLabel}></Action>);
+    rawRender(<Action icon={testIcon} label={testLabel}></Action>);
     const element = screen.getByRole("button", { name: testLabel });
 
     expect(element.getAttribute("type")).toEqual("button");
@@ -17,7 +17,7 @@ describe("Action button", () => {
   });
 
   it("should show icon", () => {
-    render(<Action icon={testIcon} label={testLabel}></Action>);
+    rawRender(<Action icon={testIcon} label={testLabel}></Action>);
     // TODO: use getBy...
     const element = screen.getByRole("img", { hidden: true });
 
@@ -27,7 +27,7 @@ describe("Action button", () => {
 
   it("should call on-click event when clicked", async () => {
     const onClickFn = vitest.fn();
-    render(
+    rawRender(
       <Action icon={testIcon} label={testLabel} onClick={onClickFn}></Action>
     );
 

frontend/src/components/inputs/ChipInput.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { rawRender, screen } from "@/tests";
 import userEvent from "@testing-library/user-event";
 import { describe, it, vitest } from "vitest";
 import ChipInput from "./ChipInput";
@@ -8,7 +8,7 @@ describe("ChipInput", () => {
 
   // TODO: Support default value
   it.skip("should works with default value", () => {
-    render(<ChipInput defaultValue={existedValues}></ChipInput>);
+    rawRender(<ChipInput defaultValue={existedValues}></ChipInput>);
 
     existedValues.forEach((value) => {
       expect(screen.getByText(value)).toBeDefined();
@@ -16,7 +16,7 @@ describe("ChipInput", () => {
   });
 
   it("should works with value", () => {
-    render(<ChipInput value={existedValues}></ChipInput>);
+    rawRender(<ChipInput value={existedValues}></ChipInput>);
 
     existedValues.forEach((value) => {
       expect(screen.getByText(value)).toBeDefined();
@@ -29,7 +29,9 @@ describe("ChipInput", () => {
       expect(values).toContain(typedValue);
     });
 
-    render(<ChipInput value={existedValues} onChange={mockedFn}></ChipInput>);
+    rawRender(
+      <ChipInput value={existedValues} onChange={mockedFn}></ChipInput>
+    );
 
     const element = screen.getByRole("searchbox");
 

frontend/src/components/inputs/Selector.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { rawRender, screen } from "@/tests";
 import userEvent from "@testing-library/user-event";
 import { describe, it, vitest } from "vitest";
 import { Selector, SelectorOption } from "./Selector";
@@ -18,14 +18,18 @@ const testOptions: SelectorOption<string>[] = [
 describe("Selector", () => {
   describe("options", () => {
     it("should work with the SelectorOption", () => {
-      render(<Selector name={selectorName} options={testOptions}></Selector>);
+      rawRender(
+        <Selector name={selectorName} options={testOptions}></Selector>
+      );
 
       // TODO: selectorName
       expect(screen.getByRole("searchbox")).toBeDefined();
     });
 
     it("should display when clicked", async () => {
-      render(<Selector name={selectorName} options={testOptions}></Selector>);
+      rawRender(
+        <Selector name={selectorName} options={testOptions}></Selector>
+      );
 
       const element = screen.getByRole("searchbox");
 
@@ -40,7 +44,7 @@ describe("Selector", () => {
 
     it("shouldn't show default value", async () => {
       const option = testOptions[0];
-      render(
+      rawRender(
         <Selector
           name={selectorName}
           options={testOptions}
@@ -53,7 +57,7 @@ describe("Selector", () => {
 
     it("shouldn't show value", async () => {
       const option = testOptions[0];
-      render(
+      rawRender(
         <Selector
           name={selectorName}
           options={testOptions}
@@ -71,7 +75,7 @@ describe("Selector", () => {
       const mockedFn = vitest.fn((value: string | null) => {
         expect(value).toEqual(clickedOption.value);
       });
-      render(
+      rawRender(
         <Selector
           name={selectorName}
           options={testOptions}
@@ -111,7 +115,7 @@ describe("Selector", () => {
       const mockedFn = vitest.fn((value: { name: string } | null) => {
         expect(value).toEqual(clickedOption.value);
       });
-      render(
+      rawRender(
         <Selector
           name={selectorName}
           options={objectOptions}
@@ -133,7 +137,7 @@ describe("Selector", () => {
   describe("placeholder", () => {
     it("should show when no selection", () => {
       const placeholder = "Empty Selection";
-      render(
+      rawRender(
         <Selector
           name={selectorName}
           options={testOptions}

frontend/src/pages/Authentication.test.tsx

@@ -1,17 +1,10 @@
-import { render, screen } from "@testing-library/react";
-import { QueryClientProvider } from "react-query";
+import { render, screen } from "@/tests";
 import { describe, it } from "vitest";
 import Authentication from "./Authentication";
 
-import queryClient from "@/apis/queries";
-
 describe("Authentication", () => {
   it("should render without crash", () => {
-    render(
-      <QueryClientProvider client={queryClient}>
-        <Authentication></Authentication>
-      </QueryClientProvider>
-    );
+    render(<Authentication></Authentication>);
 
     expect(screen.getByPlaceholderText("Username")).toBeDefined();
     expect(screen.getByPlaceholderText("Password")).toBeDefined();

frontend/src/pages/Settings/components/Layout.test.tsx

@@ -1,30 +1,23 @@
-import queryClient from "@/apis/queries";
+import { render, screen } from "@/tests";
 import { Text } from "@mantine/core";
-import { render, screen } from "@testing-library/react";
-import { QueryClientProvider } from "react-query";
-import { BrowserRouter } from "react-router-dom";
 import { describe, it } from "vitest";
 import Layout from "./Layout";
 
-const renderLayout = () => {
-  render(
-    <BrowserRouter>
-      <QueryClientProvider client={queryClient}>
-        <Layout name="Test Settings">
-          <Text>Value</Text>
-        </Layout>
-      </QueryClientProvider>
-    </BrowserRouter>
-  );
-};
-
 describe("Settings layout", () => {
   it.concurrent("should be able to render without issues", () => {
-    renderLayout();
+    render(
+      <Layout name="Test Settings">
+        <Text>Value</Text>
+      </Layout>
+    );
   });
 
   it.concurrent("save button should be disabled by default", () => {
-    renderLayout();
+    render(
+      <Layout name="Test Settings">
+        <Text>Value</Text>
+      </Layout>
+    );
 
     expect(screen.getByRole("button", { name: "Save" })).toBeDisabled();
   });

frontend/src/pages/Settings/components/Section.test.tsx

@@ -1,12 +1,12 @@
+import { rawRender, screen } from "@/tests";
 import { Text } from "@mantine/core";
-import { render, screen } from "@testing-library/react";
 import { describe, it } from "vitest";
 import { Section } from "./Section";
 
 describe("Settings section", () => {
   const header = "Section Header";
   it("should show header", () => {
-    render(<Section header="Section Header"></Section>);
+    rawRender(<Section header="Section Header"></Section>);
 
     expect(screen.getByText(header)).toBeDefined();
     expect(screen.getByRole("separator")).toBeDefined();
@@ -14,7 +14,7 @@ describe("Settings section", () => {
 
   it("should show children", () => {
     const text = "Section Child";
-    render(
+    rawRender(
       <Section header="Section Header">
         <Text>{text}</Text>
       </Section>
@@ -26,7 +26,7 @@ describe("Settings section", () => {
 
   it("should work with hidden", () => {
     const text = "Section Child";
-    render(
+    rawRender(
       <Section header="Section Header" hidden>
         <Text>{text}</Text>
       </Section>

frontend/src/pages/Settings/components/forms.test.tsx

@@ -1,6 +1,6 @@
+import { rawRender, RenderOptions, screen } from "@/tests";
 import { useForm } from "@mantine/form";
-import { render, screen } from "@testing-library/react";
-import { FunctionComponent } from "react";
+import { FunctionComponent, ReactElement } from "react";
 import { describe, it } from "vitest";
 import { FormContext, FormValues } from "../utilities/FormValues";
 import { Number, Text } from "./forms";
@@ -15,14 +15,15 @@ const FormSupport: FunctionComponent = ({ children }) => {
   return <FormContext.Provider value={form}>{children}</FormContext.Provider>;
 };
 
+const formRender = (
+  ui: ReactElement,
+  options?: Omit<RenderOptions, "wrapper">
+) => rawRender(ui, { wrapper: FormSupport, ...options });
+
 describe("Settings form", () => {
   describe("number component", () => {
     it("should be able to render", () => {
-      render(
-        <FormSupport>
-          <Number settingKey="test-numberValue"></Number>
-        </FormSupport>
-      );
+      formRender(<Number settingKey="test-numberValue"></Number>);
 
       expect(screen.getByRole("textbox")).toBeDefined();
     });
@@ -30,11 +31,7 @@ describe("Settings form", () => {
 
   describe("text component", () => {
     it("should be able to render", () => {
-      render(
-        <FormSupport>
-          <Text settingKey="test-textValue"></Text>
-        </FormSupport>
-      );
+      formRender(<Text settingKey="test-textValue"></Text>);
 
       expect(screen.getByRole("textbox")).toBeDefined();
     });

frontend/src/tests/index.tsx

@@ -11,3 +11,4 @@ const customRender = (
 export * from "@testing-library/react";
 // override render method
 export { customRender as render };
+export { render as rawRender };