Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clean up a few things in tests #3139

Merged
merged 8 commits into from
Jan 24, 2024
Merged

Clean up a few things in tests #3139

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
009955e
Remove unused mocks
grahamalama Jan 23, 2024
fabc3ad
test_utils.jsx -> testUtils.tsx
grahamalama Jan 23, 2024
c4ec0d0
Delete createComponent
grahamalama Jan 23, 2024
6e96dc6
Tweak renderWithProvider
grahamalama Jan 23, 2024
01282d2
Make testing-library assertions on `screen`, rather than `node`
grahamalama Jan 23, 2024
c214132
Run prettier
grahamalama Jan 23, 2024
9849d6e
Merge remote-tracking branch 'origin/master' into cleanup-tests
grahamalama Jan 23, 2024
39d3648
Use `screen` in a few more places
grahamalama Jan 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 0 additions & 11 deletions test/__mocks__/kinto-http.js
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion test/__mocks__/styleMock.js
View file
Open in desktop

This file was deleted.

6 changes: 0 additions & 6 deletions test/__mocks__/svgrMock.js
View file
Open in desktop

This file was deleted.

58 changes: 29 additions & 29 deletions test/components/AuthForm_test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { renderWithProvider } from "../test_utils";
import { screen } from "@testing-library/react";
import { renderWithProvider } from "../testUtils";
import { DEFAULT_KINTO_SERVER } from "../../src/constants";
import { DEFAULT_SERVERINFO } from "../../src/reducers/session";
import { render, fireEvent, waitFor } from "@testing-library/react";
Expand All @@ -12,20 +13,19 @@ describe("AuthForm component", () => {

describe("Single server config option", () => {
it("should set the default server url in a visible field", () => {
const node = renderWithProvider(
renderWithProvider(
<AuthForm
session={{ authenticated: false, serverInfo: DEFAULT_SERVERINFO }}
/>
);

const element = node.queryByLabelText("Server*");
const element = screen.queryByLabelText("Server*");
expect(element.type).toBe("text");
expect(element.value).toBe(DEFAULT_KINTO_SERVER);
});
});
describe("Authentication types", () => {
let node,
setupSession,
let setupSession,
getServerInfo,
navigateToExternalAuth,
navigateToOpenID,
Expand Down Expand Up @@ -65,31 +65,31 @@ describe("AuthForm component", () => {
},
},
};
node = renderWithProvider(<AuthForm {...props} />);
renderWithProvider(<AuthForm {...props} />);
});

it("should render a setup form", () => {
expect(node.getByTestId("formWrapper")).toBeDefined();
expect(screen.getByTestId("formWrapper")).toBeDefined();
});

describe("Basic Auth", () => {
it("should submit setup data", async () => {
fireEvent.change(node.queryByLabelText("Server*"), {
fireEvent.change(screen.queryByLabelText("Server*"), {
target: { value: "http://test.server/v1" },
});
await node.findByTestId("spinner"); // spinner should show up
await screen.findByTestId("spinner"); // spinner should show up
await waitFor(() => new Promise(resolve => setTimeout(resolve, 400))); // debounce wait
expect(node.queryByTestId("spinner")).toBeNull(); // spinner should be gone by now
expect(screen.queryByTestId("spinner")).toBeNull(); // spinner should be gone by now

fireEvent.click(node.getByLabelText("Basic Auth"));
fireEvent.change(node.getByLabelText("Username*"), {
fireEvent.click(screen.getByLabelText("Basic Auth"));
fireEvent.change(screen.getByLabelText("Username*"), {
target: { value: "user" },
});
fireEvent.change(node.getByLabelText("Password*"), {
fireEvent.change(screen.getByLabelText("Password*"), {
target: { value: "pass" },
});

fireEvent.click(node.getByText(/Sign in using/));
fireEvent.click(screen.getByText(/Sign in using/));
expect(setupSession).toHaveBeenCalledWith({
server: "http://test.server/v1",
authType: "basicauth",
Expand All @@ -104,18 +104,18 @@ describe("AuthForm component", () => {

describe("LDAP", () => {
it("should submit setup data", async () => {
fireEvent.change(node.queryByLabelText("Server*"), {
fireEvent.change(screen.queryByLabelText("Server*"), {
target: { value: "http://test.server/v1" },
});
await waitFor(() => new Promise(resolve => setTimeout(resolve, 500))); // debounce wait
fireEvent.click(node.getByLabelText("LDAP"));
fireEvent.change(node.getByLabelText("Email*"), {
fireEvent.click(screen.getByLabelText("LDAP"));
fireEvent.change(screen.getByLabelText("Email*"), {
target: { value: "[email protected]" },
});
fireEvent.change(node.getByLabelText("Password*"), {
fireEvent.change(screen.getByLabelText("Password*"), {
target: { value: "pass" },
});
fireEvent.click(node.getByText(/Sign in using/));
fireEvent.click(screen.getByText(/Sign in using/));
expect(setupSession).toHaveBeenCalledWith({
server: "http://test.server/v1",
authType: "ldap",
Expand All @@ -130,12 +130,12 @@ describe("AuthForm component", () => {

describe("FxA", () => {
it("should navigate to external auth URL", async () => {
fireEvent.change(node.queryByLabelText("Server*"), {
fireEvent.change(screen.queryByLabelText("Server*"), {
target: { value: "http://test.server/v1" },
});
await waitFor(() => new Promise(resolve => setTimeout(resolve, 500))); // debounce wait
fireEvent.click(node.getByLabelText("Firefox Account"));
fireEvent.click(node.getByText(/Sign in using/));
fireEvent.click(screen.getByLabelText("Firefox Account"));
fireEvent.click(screen.getByText(/Sign in using/));
expect(navigateToExternalAuth).toHaveBeenCalledWith({
server: "http://test.server/v1",
authType: "fxa", // fxa = credentials omitted
Expand All @@ -146,12 +146,12 @@ describe("AuthForm component", () => {

describe("OpenID", () => {
it("should navigate to external auth URL", async () => {
fireEvent.change(node.queryByLabelText("Server*"), {
fireEvent.change(screen.queryByLabelText("Server*"), {
target: { value: "http://test.server/v1" },
});
await waitFor(() => new Promise(resolve => setTimeout(resolve, 500))); // debounce wait
fireEvent.click(node.getByLabelText("OpenID Connect (Google)"));
fireEvent.click(node.getByText(/Sign in using/));
fireEvent.click(screen.getByLabelText("OpenID Connect (Google)"));
fireEvent.click(screen.getByText(/Sign in using/));
expect(navigateToOpenID).toHaveBeenCalledWith(
{
server: "http://test.server/v1",
Expand All @@ -173,9 +173,9 @@ describe("AuthForm component", () => {
servers: [],
session: { authenticated: false, serverInfo: DEFAULT_SERVERINFO },
};
const node = renderWithProvider(<AuthForm {...props} />);
renderWithProvider(<AuthForm {...props} />);

expect(node.queryByLabelText("Server*").value).toBe(
expect(screen.queryByLabelText("Server*").value).toBe(
"https://demo.kinto-storage.org/v1/"
);
});
Expand All @@ -188,9 +188,9 @@ describe("AuthForm component", () => {
servers: [{ server: "http://server.test/v1", authType: "anonymous" }],
session: { authenticated: false, serverInfo: DEFAULT_SERVERINFO },
};
const node = renderWithProvider(<AuthForm {...props} />);
renderWithProvider(<AuthForm {...props} />);

expect(node.queryByLabelText("Server*").value).toBe(
expect(screen.queryByLabelText("Server*").value).toBe(
"http://server.test/v1"
);
});
Expand Down
56 changes: 28 additions & 28 deletions test/components/BaseForm_test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from "react";
import { fireEvent, render } from "@testing-library/react";
import { fireEvent, render, screen } from "@testing-library/react";
import BaseForm from "../../src/components/BaseForm";

const testSchema = {
Expand Down Expand Up @@ -40,18 +40,18 @@ const testUiSchema = {

describe("BaseForm component", () => {
it("Should render a rjsf form as expected", async () => {
const result = render(
render(
<BaseForm
className="testClass"
schema={testSchema}
uiSchema={testUiSchema}
/>
);

const inputTitle = await result.findByLabelText("Title");
const inputContent = await result.findByLabelText("Content");
const submit = await result.findByText("Submit");
const spinner = result.queryByTestId("spinner");
const inputTitle = await screen.findByLabelText("Title");
const inputContent = await screen.findByLabelText("Content");
const submit = await screen.findByText("Submit");
const spinner = screen.queryByTestId("spinner");

expect(inputTitle.disabled).toBe(false);
expect(inputContent.disabled).toBe(false);
Expand All @@ -60,7 +60,7 @@ describe("BaseForm component", () => {
});

it("Should disable the form if disabled is true", async () => {
const result = render(
render(
<BaseForm
className="testClass"
disabled={true}
Expand All @@ -69,10 +69,10 @@ describe("BaseForm component", () => {
/>
);

const inputTitle = await result.findByLabelText("Title");
const inputContent = await result.findByLabelText("Content");
const submit = await result.findByText("Submit");
const spinner = result.queryByTestId("spinner");
const inputTitle = await screen.findByLabelText("Title");
const inputContent = await screen.findByLabelText("Content");
const submit = await screen.findByText("Submit");
const spinner = screen.queryByTestId("spinner");

expect(inputTitle.disabled).toBe(true);
expect(inputContent.disabled).toBe(true);
Expand All @@ -81,7 +81,7 @@ describe("BaseForm component", () => {
});

it("Should show a spinner and disable the form when showSpinner is true", async () => {
const result = render(
render(
<BaseForm
className="testClass"
showSpinner={true}
Expand All @@ -90,10 +90,10 @@ describe("BaseForm component", () => {
/>
);

const inputTitle = await result.findByLabelText("Title");
const inputContent = await result.findByLabelText("Content");
const submit = await result.findByText("Submit");
const spinner = result.queryByTestId("spinner");
const inputTitle = await screen.findByLabelText("Title");
const inputContent = await screen.findByLabelText("Content");
const submit = await screen.findByText("Submit");
const spinner = screen.queryByTestId("spinner");

expect(inputTitle.disabled).toBe(true);
expect(inputContent.disabled).toBe(true);
Expand All @@ -102,7 +102,7 @@ describe("BaseForm component", () => {
});

it("Should show a spinner and disable the form when form is submitted", async () => {
const result = render(
render(
<BaseForm
className="testClass"
schema={testSchema}
Expand All @@ -111,25 +111,25 @@ describe("BaseForm component", () => {
/>
);

const inputTitle = await result.findByLabelText("Title");
const inputContent = await result.findByLabelText("Content");
const submit = await result.findByText("Submit");
const inputTitle = await screen.findByLabelText("Title");
const inputContent = await screen.findByLabelText("Content");
const submit = await screen.findByText("Submit");

expect(inputTitle.disabled).toBe(false);
expect(inputContent.disabled).toBe(false);
expect(submit.disabled).toBe(false);
expect(result.queryByTestId("spinner")).toBeNull();
expect(screen.queryByTestId("spinner")).toBeNull();

fireEvent.click(submit);

expect(inputTitle.disabled).toBe(true);
expect(inputContent.disabled).toBe(true);
expect(submit.disabled).toBe(true);
expect(result.queryByTestId("spinner")).toBeDefined();
expect(screen.queryByTestId("spinner")).toBeDefined();
});

it("Should scroll to the first property that fails validation", async () => {
const result = render(
render(
<BaseForm
className="testClass"
schema={testSchema}
Expand All @@ -143,16 +143,16 @@ describe("BaseForm component", () => {
);
const testFn = vi.fn();

const submit = await result.findByText("Submit");
const titleLabel = await result.findByText("Title");
const submit = await screen.findByText("Submit");
const titleLabel = await screen.findByText("Title");
titleLabel.scrollIntoView = testFn;
fireEvent.click(submit);
expect(testFn).toHaveBeenCalledTimes(1);
expect(titleLabel.getAttribute("for")).toBe("root_title");
});

it("Should scroll to the top of the form if validation failed without a specific property", async () => {
const result = render(
render(
<BaseForm
className="testClass"
schema={testSchema}
Expand All @@ -166,8 +166,8 @@ describe("BaseForm component", () => {
);
const testFn = vi.fn();

const submit = await result.findByText("Submit");
const formWrapper = await result.findByTestId("formWrapper");
const submit = await screen.findByText("Submit");
const formWrapper = await screen.findByTestId("formWrapper");
formWrapper.scrollIntoView = testFn;
fireEvent.click(submit);
expect(testFn).toHaveBeenCalledTimes(1);
Expand Down
27 changes: 14 additions & 13 deletions test/components/CollectionForm_test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from "react";
import { renderWithProvider } from "../test_utils";
import { renderWithProvider } from "../testUtils";
import { screen } from "@testing-library/react";

import CollectionForm from "../../src/components/collection/CollectionForm";

Expand Down Expand Up @@ -66,11 +67,11 @@ describe("CollectionForm component", () => {
],
bucket_id: "default",
});
const result = renderWithProvider(<CollectionForm {...localTestProps} />);
renderWithProvider(<CollectionForm {...localTestProps} />);

const warning = result.queryByText(warningText);
const warning = screen.queryByText(warningText);
expect(warning).toBeNull();
const title = await result.findByLabelText("Collection id*");
const title = await screen.findByLabelText("Collection id*");
expect(title.disabled).toBe(false);
});

Expand All @@ -89,11 +90,11 @@ describe("CollectionForm component", () => {
localTestProps.collection.data.id = "test";
localTestProps.formData = {};

const result = renderWithProvider(<CollectionForm {...localTestProps} />);
renderWithProvider(<CollectionForm {...localTestProps} />);

const warning = result.queryByText(warningText);
const warning = screen.queryByText(warningText);
expect(warning).toBeNull();
const title = await result.findByLabelText("Collection id*");
const title = await screen.findByLabelText("Collection id*");
expect(title.disabled).toBe(false);
});

Expand All @@ -108,11 +109,11 @@ describe("CollectionForm component", () => {
bucket_id: "default",
},
];
const result = renderWithProvider(<CollectionForm {...localTestProps} />);
renderWithProvider(<CollectionForm {...localTestProps} />);

const warning = await result.queryByText(warningText);
const warning = await screen.queryByText(warningText);
expect(warning).toBeDefined();
const title = await result.findByLabelText("Collection id*");
const title = await screen.findByLabelText("Collection id*");
expect(title.disabled).toBe(true);
});

Expand All @@ -133,11 +134,11 @@ describe("CollectionForm component", () => {
localTestProps.bid = "default";
localTestProps.formData = {};

const result = renderWithProvider(<CollectionForm {...localTestProps} />);
renderWithProvider(<CollectionForm {...localTestProps} />);

const warning = await result.queryByText(warningText);
const warning = await screen.queryByText(warningText);
expect(warning).toBeDefined();
const title = await result.findByLabelText("Collection id*");
const title = await screen.findByLabelText("Collection id*");
expect(title.disabled).toBe(true);
});
});
Loading