Skip to content

Commit

Permalink
test: Update tests and file names
Browse files Browse the repository at this point in the history
  • Loading branch information
@DafyddLlyr
DafyddLlyr committed Oct 30, 2024
1 parent db59acb commit 3eb45c2
Show file tree
Hide file tree
Showing 11 changed files with 80 additions and 74 deletions.
4 changes: 2 additions & 2 deletions editor.planx.uk/src/pages/FlowEditor/components/Team/errors/addNewEditorErrors.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
export const AddNewEditorErrors = {
export const AddNewMemberErrors = {
USER_ALREADY_EXISTS: {
regex: /violates unique constraint "users_email_key"/i,
errorMessage: "User already exists",
},
};
export const isUserAlreadyExistsError = (error: string) =>
AddNewEditorErrors.USER_ALREADY_EXISTS.regex.test(error);
AddNewMemberErrors.USER_ALREADY_EXISTS.regex.test(error);
2 changes: 1 addition & 1 deletion editor.planx.uk/src/pages/FlowEditor/components/Team/formSchema.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as Yup from "yup";

export const upsertEditorSchema = Yup.object({
export const upsertMemberSchema = Yup.object({
firstName: Yup.string().required("Enter a first name"),
lastName: Yup.string().required("Enter a last name"),
email: Yup.string()
Expand Down
8 changes: 4 additions & 4 deletions ...eamMembers.addNewEditor.demoTeam.test.tsx → ...eamMembers.addNewMember.demoTeam.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import { waitFor, within } from "@testing-library/react";
import { useStore } from "pages/FlowEditor/lib/store";
import { vi } from "vitest";

import { DEMO_TEAM_ID } from "../components/EditorUpsertModal";
import { DEMO_TEAM_ID } from "../components/UserUpsertModal";
import { setupTeamMembersScreen } from "./helpers/setupTeamMembersScreen";
import { userTriesToAddNewEditor } from "./helpers/userTriesToAddNewEditor";
import { userTriesToAddNewMember } from "./helpers/userTriesToAddNewMember";
import { mockTeamMembersData } from "./mocks/mockTeamMembersData";
import { mockPlatformAdminUser } from "./mocks/mockUsers";

Expand Down Expand Up @@ -34,9 +34,9 @@ describe("adding a new user to the Demo team", () => {
expect(currentUsers).toHaveLength(3);

const { user, getByTestId } = await setupTeamMembersScreen();
await userTriesToAddNewEditor(user);
await userTriesToAddNewMember(user);

const membersTable = getByTestId("members-table-add-editor");
const membersTable = getByTestId("members-table-add-member");

await waitFor(() => {
expect(
Expand Down
6 changes: 3 additions & 3 deletions ...s.addNewEditor.errors.serverSide.test.tsx → ...s.addNewMember.errors.serverSide.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { FullStore, useStore } from "pages/FlowEditor/lib/store";
import { vi } from "vitest";

import { setupTeamMembersScreen } from "./helpers/setupTeamMembersScreen";
import { userTriesToAddNewEditor } from "./helpers/userTriesToAddNewEditor";
import { userTriesToAddNewMember } from "./helpers/userTriesToAddNewMember";
import { mockTeamMembersData } from "./mocks/mockTeamMembersData";
import { alreadyExistingUser, mockPlatformAdminUser } from "./mocks/mockUsers";

Expand All @@ -17,7 +17,7 @@ vi.mock(
}),
);

describe("when a user fills in the 'add a new editor' form correctly but there is a server-side error", () => {
describe("when a user fills in the 'add a new member' form correctly but there is a server-side error", () => {
afterAll(() => useStore.setState(initialState));
beforeEach(async () => {
useStore.setState({
Expand All @@ -26,7 +26,7 @@ describe("when a user fills in the 'add a new editor' form correctly but there i
});

const { user } = await setupTeamMembersScreen();
await userTriesToAddNewEditor(user);
await userTriesToAddNewMember(user);
});

it("shows an appropriate error message", async () => {
Expand Down
6 changes: 3 additions & 3 deletions ...wEditor.errors.userAlreadyExists.test.tsx → ...wMember.errors.userAlreadyExists.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { FullStore, useStore } from "pages/FlowEditor/lib/store";
import { vi } from "vitest";

import { setupTeamMembersScreen } from "./helpers/setupTeamMembersScreen";
import { userTriesToAddNewEditor } from "./helpers/userTriesToAddNewEditor";
import { userTriesToAddNewMember } from "./helpers/userTriesToAddNewMember";
import { mockTeamMembersData } from "./mocks/mockTeamMembersData";
import { alreadyExistingUser, mockPlatformAdminUser } from "./mocks/mockUsers";

Expand All @@ -18,7 +18,7 @@ vi.mock(
);
let initialState: FullStore;

describe("when a user fills in the 'add a new editor' form correctly but the user already exists", () => {
describe("when a user fills in the 'add a new member' form correctly but the user already exists", () => {
afterAll(() => useStore.setState(initialState));
beforeEach(async () => {
useStore.setState({
Expand All @@ -27,7 +27,7 @@ describe("when a user fills in the 'add a new editor' form correctly but the use
});

const { user } = await setupTeamMembersScreen();
await userTriesToAddNewEditor(user);
await userTriesToAddNewMember(user);
});

it("shows an appropriate error message", async () => {
Expand Down
8 changes: 4 additions & 4 deletions ...s.addNewEditor.noExistingMembers.test.tsx → ...s.addNewMember.noExistingMembers.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const mockTeamMembersDataWithNoTeamEditors: TeamMember[] = [
},
];

describe("when a user views the 'Team members' screen but there are no existing team editors listed", () => {
describe("when a user views the 'Team members' screen but there are no existing team members listed", () => {
beforeEach(async () => {
useStore.setState({
teamMembers: mockTeamMembersDataWithNoTeamEditors,
Expand All @@ -25,10 +25,10 @@ describe("when a user views the 'Team members' screen but there are no existing
getByText("No members found");
});

it("shows the 'add a new editor' button", async () => {
const teamEditorsTable = screen.getByTestId("team-editors");
it("shows the 'add a new member' button", async () => {
const teamMembersTable = screen.getByTestId("team-members");
expect(
await within(teamEditorsTable).findByText("Add a new editor"),
await within(teamMembersTable).findByText("Add a new member"),

Check failure on line 31 in editor.planx.uk/src/pages/FlowEditor/components/Team/tests/TeamMembers.addNewMember.noExistingMembers.test.tsx

View workflow job for this annotation

GitHub Actions / Run React Tests

src/pages/FlowEditor/components/Team/tests/TeamMembers.addNewMember.noExistingMembers.test.tsx > when a user views the 'Team members' screen but there are no existing team members listed > shows the 'add a new member' button 

TestingLibraryElementError: Unable to find an element with the text: Add a new member. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
<div
  class="MuiBox-root css-5cyujn"
  data-testid="team-members"
>
  <h3
    class="MuiTypography-root MuiTypography-h2 MuiTypography-gutterBottom css-mn4f0i-MuiTypography-root"
  >
    Team members
  </h3>
  <p
    class="MuiTypography-root MuiTypography-body1 css-1o0jdks-MuiTypography-root"
  >
    Editors have access to edit your services, whilst viewers can only browse your services.
  </p>
  <table
    class="MuiTable-root css-zrur86-MuiTable-root"
  >
    <thead
      class="MuiTableHead-root css-15wwp11-MuiTableHead-root"
    >
      <tr
        class="MuiTableRow-root MuiTableRow-head css-1ggmixc-MuiTableRow-root"
      >
        <th
          class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-oiato4-MuiTableCell-root"
          scope="col"
        >
          <strong>
            No members found
          </strong>
        </th>
      </tr>
    </thead>
    <tbody
      class="MuiTableBody-root css-apqrd9-MuiTableBody-root"
    >
      <tr
        class="MuiTableRow-root css-1ggmixc-MuiTableRow-root"
      >
        <td
          class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1w5vrx3-MuiTableCell-root"
          colspan="3"
        >
          <button
            class="MuiButtonBase-root css-q7vuq-MuiButtonBase-root"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1pdpm1l-MuiSvgIcon-root"
              data-testid="AddCircleOutlineIcon"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"
              />
            </svg>
             
            Add a new editor
            <span
              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
            />
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Ignored nodes: comments, script, style
<div
  class="MuiBox-root css-5cyujn"
  data-testid="team-members"
>
  <h3
    class="MuiTypography-root MuiTypography-h2 MuiTypography-gutterBottom css-mn4f0i-MuiTypography-root"
  >
    Team members
  </h3>
  <p
    class="MuiTypography-root MuiTypography-body1 css-1o0jdks-MuiTypography-root"
  >
    Editors have access to edit your services, whilst viewers can only browse your services.
  </p>
  <table
    class="MuiTable-root css-zrur86-MuiTable-root"
  >
    <thead
      class="MuiTableHead-root css-15wwp11-MuiTableHead-root"
    >
      <tr
        class="MuiTableRow-root MuiTableRow-head css-1ggmixc-MuiTableRow-root"
      >
        <th
          class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-oiato4-MuiTableCell-root"
          scope="col"
        >
          <strong>
            No members found
          </strong>
        </th>
      </tr>
    </thead>
    <tbody
      class="MuiTableBody-root css-apqrd9-MuiTableBody-root"
    >
      <tr
        class="MuiTableRow-root css-1ggmixc-MuiTableRow-root"
      >
        <td
          class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-1w5vrx3-MuiTableCell-root"
          colspan="3"
        >
          <button
            class="MuiButtonBase-root css-q7vuq-MuiButtonBase-root"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1pdpm1l-MuiSvgIcon-root"
              data-testid="AddCircleOutlineIcon"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                d="M13 7h-2v4H7
).toBeVisible();
});
});
48 changes: 24 additions & 24 deletions ...m/tests/TeamMembers.addNewEditor.test.tsx → ...m/tests/TeamMembers.addNewMember.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import { vi } from "vitest";
import { axe } from "vitest-axe";

import { setup } from "../../../../../testUtils";
import { EditorUpsertModal } from "../components/EditorUpsertModal";
import { UserUpsertModal } from "../components/UserUpsertModal";
import { setupTeamMembersScreen } from "./helpers/setupTeamMembersScreen";
import { userTriesToAddNewEditor } from "./helpers/userTriesToAddNewEditor";
import { userTriesToAddNewMember } from "./helpers/userTriesToAddNewMember";
import { mockTeamMembersData } from "./mocks/mockTeamMembersData";
import {
emptyTeamMemberObj,
Expand All @@ -29,7 +29,7 @@ vi.mock(

let initialState: FullStore;

describe("when a user presses 'add a new editor'", () => {
describe("when a user presses 'add a new member'", () => {
beforeEach(async () => {
useStore.setState({
teamMembers: mockTeamMembersData,
Expand All @@ -39,11 +39,11 @@ describe("when a user presses 'add a new editor'", () => {
});
const { user } = await setupTeamMembersScreen();

const teamEditorsTable = screen.getByTestId("team-editors");
const addEditorButton = await within(teamEditorsTable).findByText(
"Add a new editor",
const teamMembersTable = screen.getByTestId("team-members");
const addMemberButton = await within(teamMembersTable).findByText(
"Add a new member",
);
user.click(addEditorButton);
user.click(addMemberButton);
});

it("opens the modal and displays the input fields", async () => {
Expand All @@ -52,7 +52,7 @@ describe("when a user presses 'add a new editor'", () => {
});
});

describe("when a user fills in the 'add a new editor' form correctly", () => {
describe("when a user fills in the 'add a new member' form correctly", () => {
afterAll(() => useStore.setState(initialState));

beforeEach(async () => {
Expand All @@ -63,11 +63,11 @@ describe("when a user fills in the 'add a new editor' form correctly", () => {
teamId: 1,
});
const { user } = await setupTeamMembersScreen();
await userTriesToAddNewEditor(user);
await userTriesToAddNewMember(user);
});

it("adds the new user row to the Team Editors table", async () => {
const membersTable = screen.getByTestId("members-table-add-editor");
it("adds the new user row to the Team Members table", async () => {
const membersTable = screen.getByTestId("members-table-add-member");

await waitFor(() => {
expect(
Expand All @@ -89,7 +89,7 @@ describe("when a user fills in the 'add a new editor' form correctly", () => {
});
});

describe("when the addNewEditor modal is rendered", () => {
describe("when the addNewMember modal is rendered", () => {
beforeEach(async () => {
useStore.setState({
teamSlug: "planx",
Expand All @@ -100,7 +100,7 @@ describe("when the addNewEditor modal is rendered", () => {
it("should not have any accessibility issues", async () => {
const { container } = setup(
<DndProvider backend={HTML5Backend}>
<EditorUpsertModal
<UserUpsertModal
showModal={true}
setShowModal={() => {}}
initialValues={emptyTeamMemberObj}
Expand All @@ -115,7 +115,7 @@ describe("when the addNewEditor modal is rendered", () => {
});
});

describe("'add a new editor' button is hidden from Templates team", () => {
describe("'add a new member' button is hidden from Templates team", () => {
beforeEach(async () => {
useStore.setState({
teamMembers: mockTeamMembersData,
Expand All @@ -126,11 +126,11 @@ describe("'add a new editor' button is hidden from Templates team", () => {
});

it("hides the button on the Templates team", async () => {
const { user: _user } = await setupTeamMembersScreen();
const teamEditorsTable = screen.getByTestId("team-editors");
const addEditorButton =
within(teamEditorsTable).queryByText("Add a new editor");
expect(addEditorButton).not.toBeInTheDocument();
await setupTeamMembersScreen();
const teamMembers = screen.getByTestId("team-members");
const addMemberButton =
within(teamMembers).queryByText("Add a new member");
expect(addMemberButton).not.toBeInTheDocument();
});
});

Expand All @@ -145,10 +145,10 @@ describe("when a user is not a platform admin", () => {
});

it("hides the button from non-admin users", async () => {
const { user: _user } = await setupTeamMembersScreen();
const teamEditorsTable = screen.getByTestId("team-editors");
const addEditorButton =
within(teamEditorsTable).queryByText("Add a new editor");
expect(addEditorButton).not.toBeInTheDocument();
await setupTeamMembersScreen();
const teamMembersTable = screen.getByTestId("team-members");
const addMemberButton =
within(teamMembersTable).queryByText("Add a new member");
expect(addMemberButton).not.toBeInTheDocument();
});
});
16 changes: 8 additions & 8 deletions editor.planx.uk/src/pages/FlowEditor/components/Team/tests/TeamMembers.removeUser.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@ describe("when a user presses 'remove' button", () => {
});
const { user, container } = await setupTeamMembersScreen();

const teamEditorsTable = screen.getByTestId("team-editors");
const removeRowButton = await within(teamEditorsTable).findByTestId(
const teamMembersTable = screen.getByTestId("team-members");
const removeRowButton = await within(teamMembersTable).findByTestId(
"remove-button-3",
);
axeContainer = container;
Expand Down Expand Up @@ -79,10 +79,10 @@ describe("when a user clicks 'Remove user' button", () => {
});
const { user } = await setupTeamMembersScreen();

const teamEditorsTable = screen.getByTestId("team-editors");
const teamMembersTable = screen.getByTestId("team-members");

const removeRowButton =
within(teamEditorsTable).getByTestId("remove-button-3");
within(teamMembersTable).getByTestId("remove-button-3");

await user.click(removeRowButton);

Expand Down Expand Up @@ -127,9 +127,9 @@ describe("'remove' button is hidden from Templates team", () => {

it("hides the button on the Templates team", async () => {
const { user: _user } = await setupTeamMembersScreen();
const teamEditorsTable = screen.getByTestId("team-editors");
const teamMembersTable = screen.getByTestId("team-members");
const editButton =
within(teamEditorsTable).queryByTestId("remove-button-3");
within(teamMembersTable).queryByTestId("remove-button-3");
expect(editButton).not.toBeInTheDocument();
});
});
Expand All @@ -146,9 +146,9 @@ describe("when a user is not a platform admin", () => {
await setupTeamMembersScreen();
});
it("does not show a remove button", async () => {
const teamEditorsTable = screen.getByTestId("team-editors");
const teamMembersTable = screen.getByTestId("team-members");
const addEditorButton =
within(teamEditorsTable).queryByTestId("remove-button-0");
within(teamMembersTable).queryByTestId("remove-button-0");

expect(addEditorButton).not.toBeInTheDocument();
});
Expand Down
Loading

0 comments on commit 3eb45c2

Please sign in to comment.