no log: Completely refactor testing interface

pull/2060/head
LASER-Yi 2 years ago
parent 75a7dc8cdf
commit 415a2e13d3

@ -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();

@ -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>
);

@ -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");

@ -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}

@ -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();

@ -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();
});

@ -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>

@ -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();
});

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

Loading…
Cancel
Save