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

Bob/upgrade jest packages #6461

Closed
wants to merge 6 commits into from
Closed

Bob/upgrade jest packages #6461

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
442ce35
upgrade packages with old subdependencies
fzhao99 Aug 29, 2023
8472dd4
fix packages
fzhao99 Aug 29, 2023
ac425d7
merge conflict
fzhao99 Aug 29, 2023
51d3e1f
org form experimentation
fzhao99 Aug 30, 2023
06f994b
refactor org form
fzhao99 Aug 30, 2023
db5c872
org form rework
fzhao99 Aug 31, 2023
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
4 changes: 2 additions & 2 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@
"@storybook/preset-create-react-app": "^7.1.1",
"@storybook/react": "^7.2.3",
"@storybook/react-webpack5": "^7.1.1",
"@storybook/testing-library": "^0.1.0",
"@storybook/testing-library": "0.2.0",
"@testing-library/jest-dom": "^5.16.5",
"@types/apollo-upload-client": "^17.0.0",
"@types/classnames": "^2.2.11",
Expand All @@ -209,7 +209,7 @@
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-graphql": "^4.0.0",
"eslint-plugin-import": "^2.28.1",
"eslint-plugin-jest-dom": "^4.0.3",
"eslint-plugin-jest-dom": "^5.1.0",
"eslint-plugin-storybook": "^0.6.13",
"eslint-plugin-testing-library": "^5.11.0",
"eslint-plugin-unused-imports": "3.0.0",
Expand Down
203 changes: 105 additions & 98 deletions frontend/src/app/signUp/Organization/OrganizationForm.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import { act, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { render, screen, waitFor } from "@testing-library/react";
import user from "@testing-library/user-event";
import { userEvent } from "@storybook/testing-library";

import OrganizationForm, {
OrganizationCreateRequest,
} from "./OrganizationForm";

const getOrgNameInput = () =>
screen.getByRole("textbox", {
name: "Organization name required",
name: "Organization name *",
});
const getOrgStateDropdown = () =>
screen.getByLabelText("Organization state *") as HTMLSelectElement;
Expand All @@ -20,7 +21,7 @@ const getPhoneInput = () => screen.getByLabelText("Work phone number *");
const getSubmitButton = () => screen.getByText("Continue");

const fillInDropDown = async (input: any, text: string) =>
await act(async () => await userEvent.selectOptions(input, [text]));
await user.selectOptions(input, [text]);

jest.mock("../SignUpApi", () => ({
SignUpApi: {
Expand Down Expand Up @@ -61,6 +62,7 @@ jest.mock("react-router-dom", () => ({
window.scrollTo = jest.fn();

describe("OrganizationForm", () => {
const user = userEvent.setup();
beforeEach(() => {
render(<OrganizationForm />);
});
Expand All @@ -79,8 +81,8 @@ describe("OrganizationForm", () => {

it("displays form errors when submitting invalid input", async () => {
await fillInDropDown(getOrgStateDropdown(), "VI");
await act(async () => await userEvent.tab());
await act(async () => getSubmitButton().click());
await user.tab();
await user.click(getSubmitButton());

expect(await screen.findByText("Organization name is required"));

Expand All @@ -101,7 +103,7 @@ describe("OrganizationForm", () => {
it("clears input when escaping out of modal", async () => {
await fillInDropDown(getOrgStateDropdown(), "VI");
expect(getOrgStateDropdown().value).toEqual("VI");
await act(async () => await userEvent.tab());
await user.tab();
expect(
screen.getByText(
"U.S. Virgin Islands isn't connected to SimpleReport yet.",
Expand All @@ -111,63 +113,76 @@ describe("OrganizationForm", () => {
)
).toBeInTheDocument();

await act(async () => await userEvent.keyboard("{Escape}"));
await user.keyboard("{Escape}");
expect(getOrgStateDropdown().value).toBeFalsy();
});

it("does not clear input when continuing through modal", async () => {
await fillInDropDown(getOrgStateDropdown(), "VI");
expect(getOrgStateDropdown().value).toEqual("VI");
await act(async () => await userEvent.tab());
expect(
screen.getByText(
"U.S. Virgin Islands isn't connected to SimpleReport yet.",
{
exact: false,
}
)
).toBeInTheDocument();

await act(async () => screen.getByLabelText("acknowledged").click());
await act(async () => screen.getByText("Continue sign up").click());
await waitFor(() => {
expect(getOrgStateDropdown().value).toEqual("VI");
});

await user.tab();
const messageString =
"U.S. Virgin Islands isn't connected to SimpleReport yet.";

await waitFor(() => {
screen.getByText(messageString, {
exact: false,
});
});

const acknowledgedCheckbox = screen.getByLabelText("acknowledged");
await user.click(acknowledgedCheckbox);

await waitFor(async () => {
expect(acknowledgedCheckbox).toBeChecked();
});

await waitFor(async () => {
expect(screen.getByText("Continue sign up")).toBeEnabled();
});

await user.click(screen.getByText("Continue sign up"));

expect(getOrgStateDropdown().value).toEqual("VI");
});

it("redirects to identity verification when submitting valid input", async () => {
await act(async () => await userEvent.type(getOrgNameInput(), "Drake"));
it.only("redirects to identity verification when submitting valid input", async () => {
await user.type(getOrgNameInput(), "Drake");
await fillInDropDown(getOrgStateDropdown(), "TX");
await fillInDropDown(getOrgTypeDropdown(), "Employer");
await act(
async () => await userEvent.type(getFirstNameInput(), "Greatest")
);
await act(async () => await userEvent.type(getMiddleNameInput(), "OG"));
await act(async () => await userEvent.type(getLastNameInput(), "Ever"));
await act(
async () => await userEvent.type(getEmailInput(), "[email protected]")
);
await act(async () => await userEvent.type(getPhoneInput(), "8008675309"));
await act(async () => getSubmitButton().click());

expect(
await screen.findByText("Redirected to /sign-up/identity-verification")
);
await user.type(getFirstNameInput(), "Greatest");

await user.type(getMiddleNameInput(), "OG");
await user.type(getLastNameInput(), "Ever");

await user.type(getEmailInput(), "[email protected]");

await user.type(getPhoneInput(), "8008675309");
await user.click(getSubmitButton());

await waitFor(() => {
expect(screen.getByText("Redirected to /sign-up/identity-verification"));
});
});

it("displays a duplicate org error when submitting a duplicate org", async () => {
await act(async () => await userEvent.type(getOrgNameInput(), "Duplicate"));
await user.type(getOrgNameInput(), "Duplicate");
await fillInDropDown(getOrgStateDropdown(), "TX");
await fillInDropDown(getOrgTypeDropdown(), "Employer");
await act(
async () => await userEvent.type(getFirstNameInput(), "Greatest")
);
await act(async () => await userEvent.type(getMiddleNameInput(), "OG"));
await act(async () => await userEvent.type(getLastNameInput(), "Ever"));
await act(
async () => await userEvent.type(getEmailInput(), "[email protected]")
);
await act(async () => await userEvent.type(getPhoneInput(), "8008675309"));
await act(async () => getSubmitButton().click());

await user.type(getFirstNameInput(), "Greatest");

await user.type(getMiddleNameInput(), "OG");
await user.type(getLastNameInput(), "Ever");

await user.type(getEmailInput(), "[email protected]");
await user.type(getPhoneInput(), "8008675309");
await user.click(getSubmitButton());

expect(
await screen.findByText(
Expand All @@ -178,19 +193,17 @@ describe("OrganizationForm", () => {
});

it("displays a duplicate email error when submitting a duplicate email", async () => {
await act(async () => await userEvent.type(getOrgNameInput(), "Foo"));
await user.type(getOrgNameInput(), "Foo");
await fillInDropDown(getOrgStateDropdown(), "TX");
await fillInDropDown(getOrgTypeDropdown(), "Employer");
await act(
async () => await userEvent.type(getFirstNameInput(), "Greatest")
);
await act(async () => await userEvent.type(getMiddleNameInput(), "OG"));
await act(async () => await userEvent.type(getLastNameInput(), "Ever"));
await act(
async () => await userEvent.type(getEmailInput(), "[email protected]")
);
await act(async () => await userEvent.type(getPhoneInput(), "8008675309"));
await act(async () => getSubmitButton().click());

await user.type(getFirstNameInput(), "Greatest");
await user.type(getMiddleNameInput(), "OG");
await user.type(getPhoneInput(), "8008675309");
await user.type(getLastNameInput(), "Ever");
await user.type(getEmailInput(), "[email protected]");

await user.click(getSubmitButton());

expect(
await screen.findByText(
Expand All @@ -201,21 +214,20 @@ describe("OrganizationForm", () => {
});

it("displays a duplicate org error and id verification link for an admin re-signing up", async () => {
await act(
async () => await userEvent.type(getOrgNameInput(), "DuplicateAdmin")
);
await user.type(getOrgNameInput(), "DuplicateAdmin");

await fillInDropDown(getOrgStateDropdown(), "TX");
await fillInDropDown(getOrgTypeDropdown(), "Employer");
await act(
async () => await userEvent.type(getFirstNameInput(), "Greatest")
);
await act(async () => await userEvent.type(getMiddleNameInput(), "OG"));
await act(async () => await userEvent.type(getLastNameInput(), "Ever"));
await act(
async () => await userEvent.type(getEmailInput(), "[email protected]")
);
await act(async () => await userEvent.type(getPhoneInput(), "8008675309"));
await act(async () => getSubmitButton().click());

await user.type(getFirstNameInput(), "Greatest");

await user.type(getMiddleNameInput(), "OG");
await user.type(getLastNameInput(), "Ever");

await user.type(getEmailInput(), "[email protected]");

await user.type(getPhoneInput(), "8008675309");
await user.click(getSubmitButton());

expect(
await screen.findByText(
Expand All @@ -226,22 +238,19 @@ describe("OrganizationForm", () => {
});

it("displays a duplicate org error and instructions for admin user who has finished id verification", async () => {
await act(
async () =>
await userEvent.type(getOrgNameInput(), "IdentityVerificationComplete")
);
await user.type(getOrgNameInput(), "IdentityVerificationComplete");

await fillInDropDown(getOrgStateDropdown(), "TX");
await fillInDropDown(getOrgTypeDropdown(), "Employer");
await act(
async () => await userEvent.type(getFirstNameInput(), "Greatest")
);
await act(async () => await userEvent.type(getMiddleNameInput(), "OG"));
await act(async () => await userEvent.type(getLastNameInput(), "Ever"));
await act(
async () => await userEvent.type(getEmailInput(), "[email protected]")
);
await act(async () => await userEvent.type(getPhoneInput(), "8008675309"));
await act(async () => getSubmitButton().click());

await user.type(getFirstNameInput(), "Greatest");

await user.type(getMiddleNameInput(), "OG");
await user.type(getLastNameInput(), "Ever");

await user.type(getEmailInput(), "[email protected]");
await user.type(getPhoneInput(), "8008675309");
await user.click(getSubmitButton());

expect(
await screen.findByText(
Expand All @@ -252,24 +261,22 @@ describe("OrganizationForm", () => {
});

it("displays a generic error message for Okta internal errors", async () => {
await act(
async () => await userEvent.type(getOrgNameInput(), "InternalError")
);
await user.type(getOrgNameInput(), "InternalError");
await fillInDropDown(getOrgStateDropdown(), "TX");
await fillInDropDown(getOrgTypeDropdown(), "Employer");
await act(
async () => await userEvent.type(getFirstNameInput(), "Greatest")
);
await act(async () => await userEvent.type(getMiddleNameInput(), "OG"));
await act(async () => await userEvent.type(getLastNameInput(), "Ever"));
await act(
async () => await userEvent.type(getEmailInput(), "[email protected]")
);
await act(async () => await userEvent.type(getPhoneInput(), "8008675309"));
await act(async () => getSubmitButton().click());

await user.type(getFirstNameInput(), "Greatest");
await user.type(getMiddleNameInput(), "OG");
await user.type(getLastNameInput(), "Ever");

await user.type(getEmailInput(), "[email protected]");

await user.type(getPhoneInput(), "8008675309");

getSubmitButton().click();

expect(
await screen.findByText(
screen.queryByText(
"An unexpected error occurred. Please resubmit this form",
{ exact: false }
)
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/app/signUp/Organization/OrganizationForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,9 +87,11 @@ const OrganizationForm = () => {
data: organization,
schema,
});
console.log(validation);
if (validation.valid) {
try {
const res = await SignUpApi.createOrganization(organization);
console.log(res);
setOrgExternalId(res.orgExternalId);
} catch (error: any) {
const message = error.message || error;
Expand Down
Loading