Skip to content

Commit

Permalink
FE: Update User menu to use react select 5 (#24281)
Browse files Browse the repository at this point in the history
  • Loading branch information
@RachelElysia
RachelElysia authored Dec 20, 2024
1 parent 0ffa2cd commit d6b80c9
Show file tree
Hide file tree
Showing 9 changed files with 328 additions and 134 deletions.
1 change: 1 addition & 0 deletions frontend/components/AvatarTopNav/AvatarTopNav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ const Avatar = ({ className, size, user }: IAvatarInterface): JSX.Element => {
src={gravatar_url_dark || DEFAULT_GRAVATAR_LINK_DARK}
onError={onError}
onLoad={onLoad}
data-testid="user-avatar"
/>
</div>
);
Expand Down
1 change: 0 additions & 1 deletion frontend/components/AvatarTopNav/_styles.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
.avatar-wrapper-top-nav {
margin-right: 8px;
svg {
display: block;
}
Expand Down
148 changes: 107 additions & 41 deletions frontend/components/top_nav/SiteTopNav/SiteTopNav.tests.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,18 +37,29 @@ describe("SiteTopNav - component", () => {
/>
);

await user.click(screen.getByTestId("user-menu"));
await user.click(screen.getByTestId("user-avatar"));

expect(screen.getByText(/hosts/i)).toBeInTheDocument();
expect(screen.getByText(/controls/i)).toBeInTheDocument();
expect(screen.getByText(/software/i)).toBeInTheDocument();
expect(screen.getByText(/queries/i)).toBeInTheDocument();
expect(screen.getByText(/policies/i)).toBeInTheDocument();
expect(screen.getByText(/settings/i)).toBeInTheDocument();
expect(screen.getByText(/manage users/i)).toBeInTheDocument();
expect(screen.getByText(/my account/i)).toBeInTheDocument();
expect(screen.getByText(/documentation/i)).toBeInTheDocument();
expect(screen.getByText(/sign out/i)).toBeInTheDocument();
expect(
screen.getByRole("menuitem", { name: /settings/i })
).toBeInTheDocument();

expect(
screen.getByRole("menuitem", { name: /manage users/i })
).toBeInTheDocument();
expect(
screen.getByRole("menuitem", { name: /my account/i })
).toBeInTheDocument();
expect(
screen.getByRole("menuitem", { name: /documentation/i })
).toBeInTheDocument();
expect(
screen.getByRole("menuitem", { name: /sign out/i })
).toBeInTheDocument();
});
it("renders correct navigation for free global maintainer", async () => {
const render = createCustomRenderer({
Expand All @@ -73,16 +84,22 @@ describe("SiteTopNav - component", () => {
/>
);

await user.click(screen.getByTestId("user-menu"));
await user.click(screen.getByTestId("user-avatar"));

expect(screen.getByText(/hosts/i)).toBeInTheDocument();
expect(screen.getByText(/controls/i)).toBeInTheDocument();
expect(screen.getByText(/software/i)).toBeInTheDocument();
expect(screen.getByText(/queries/i)).toBeInTheDocument();
expect(screen.getByText(/policies/i)).toBeInTheDocument();
expect(screen.getByText(/my account/i)).toBeInTheDocument();
expect(screen.getByText(/documentation/i)).toBeInTheDocument();
expect(screen.getByText(/sign out/i)).toBeInTheDocument();
expect(
screen.getByRole("menuitem", { name: /my account/i })
).toBeInTheDocument();
expect(
screen.getByRole("menuitem", { name: /documentation/i })
).toBeInTheDocument();
expect(
screen.getByRole("menuitem", { name: /sign out/i })
).toBeInTheDocument();

expect(screen.queryByText(/settings/i)).not.toBeInTheDocument();
expect(screen.queryByText(/manage users/i)).not.toBeInTheDocument();
Expand All @@ -109,15 +126,21 @@ describe("SiteTopNav - component", () => {
/>
);

await user.click(screen.getByTestId("user-menu"));
await user.click(screen.getByTestId("user-avatar"));

expect(screen.getByText(/hosts/i)).toBeInTheDocument();
expect(screen.getByText(/software/i)).toBeInTheDocument();
expect(screen.getByText(/queries/i)).toBeInTheDocument();
expect(screen.getByText(/policies/i)).toBeInTheDocument();
expect(screen.getByText(/my account/i)).toBeInTheDocument();
expect(screen.getByText(/documentation/i)).toBeInTheDocument();
expect(screen.getByText(/sign out/i)).toBeInTheDocument();
expect(
screen.getByRole("menuitem", { name: /my account/i })
).toBeInTheDocument();
expect(
screen.getByRole("menuitem", { name: /documentation/i })
).toBeInTheDocument();
expect(
screen.getByRole("menuitem", { name: /sign out/i })
).toBeInTheDocument();

expect(screen.queryByText(/controls/i)).not.toBeInTheDocument();
expect(screen.queryByText(/settings/i)).not.toBeInTheDocument();
Expand All @@ -143,18 +166,28 @@ describe("SiteTopNav - component", () => {
/>
);

await user.click(screen.getByTestId("user-menu"));
await user.click(screen.getByTestId("user-avatar"));

expect(screen.getByText(/hosts/i)).toBeInTheDocument();
expect(screen.getByText(/controls/i)).toBeInTheDocument();
expect(screen.getByText(/software/i)).toBeInTheDocument();
expect(screen.getByText(/queries/i)).toBeInTheDocument();
expect(screen.getByText(/policies/i)).toBeInTheDocument();
expect(screen.getByText(/settings/i)).toBeInTheDocument();
expect(screen.getByText(/manage users/i)).toBeInTheDocument();
expect(screen.getByText(/my account/i)).toBeInTheDocument();
expect(screen.getByText(/documentation/i)).toBeInTheDocument();
expect(screen.getByText(/sign out/i)).toBeInTheDocument();
expect(
screen.getByRole("menuitem", { name: /settings/i })
).toBeInTheDocument();
expect(
screen.getByRole("menuitem", { name: /manage users/i })
).toBeInTheDocument();
expect(
screen.getByRole("menuitem", { name: /my account/i })
).toBeInTheDocument();
expect(
screen.getByRole("menuitem", { name: /documentation/i })
).toBeInTheDocument();
expect(
screen.getByRole("menuitem", { name: /sign out/i })
).toBeInTheDocument();
});
it("renders correct navigation for premium global maintainer", async () => {
const render = createCustomRenderer({
Expand All @@ -179,16 +212,22 @@ describe("SiteTopNav - component", () => {
/>
);

await user.click(screen.getByTestId("user-menu"));
await user.click(screen.getByTestId("user-avatar"));

expect(screen.getByText(/hosts/i)).toBeInTheDocument();
expect(screen.getByText(/controls/i)).toBeInTheDocument();
expect(screen.getByText(/software/i)).toBeInTheDocument();
expect(screen.getByText(/queries/i)).toBeInTheDocument();
expect(screen.getByText(/policies/i)).toBeInTheDocument();
expect(screen.getByText(/my account/i)).toBeInTheDocument();
expect(screen.getByText(/documentation/i)).toBeInTheDocument();
expect(screen.getByText(/sign out/i)).toBeInTheDocument();
expect(
screen.getByRole("menuitem", { name: /my account/i })
).toBeInTheDocument();
expect(
screen.getByRole("menuitem", { name: /documentation/i })
).toBeInTheDocument();
expect(
screen.getByRole("menuitem", { name: /sign out/i })
).toBeInTheDocument();

expect(screen.queryByText(/settings/i)).not.toBeInTheDocument();
expect(screen.queryByText(/manage users/i)).not.toBeInTheDocument();
Expand All @@ -215,15 +254,21 @@ describe("SiteTopNav - component", () => {
/>
);

await user.click(screen.getByTestId("user-menu"));
await user.click(screen.getByTestId("user-avatar"));

expect(screen.getByText(/hosts/i)).toBeInTheDocument();
expect(screen.getByText(/software/i)).toBeInTheDocument();
expect(screen.getByText(/queries/i)).toBeInTheDocument();
expect(screen.getByText(/policies/i)).toBeInTheDocument();
expect(screen.getByText(/my account/i)).toBeInTheDocument();
expect(screen.getByText(/documentation/i)).toBeInTheDocument();
expect(screen.getByText(/sign out/i)).toBeInTheDocument();
expect(
screen.getByRole("menuitem", { name: /my account/i })
).toBeInTheDocument();
expect(
screen.getByRole("menuitem", { name: /documentation/i })
).toBeInTheDocument();
expect(
screen.getByRole("menuitem", { name: /sign out/i })
).toBeInTheDocument();

expect(screen.queryByText(/controls/i)).not.toBeInTheDocument();
expect(screen.queryByText(/settings/i)).not.toBeInTheDocument();
Expand Down Expand Up @@ -252,17 +297,25 @@ describe("SiteTopNav - component", () => {
/>
);

await user.click(screen.getByTestId("user-menu"));
await user.click(screen.getByTestId("user-avatar"));

expect(screen.getByText(/hosts/i)).toBeInTheDocument();
expect(screen.getByText(/controls/i)).toBeInTheDocument();
expect(screen.getByText(/software/i)).toBeInTheDocument();
expect(screen.getByText(/queries/i)).toBeInTheDocument();
expect(screen.getByText(/policies/i)).toBeInTheDocument();
expect(screen.getByText(/settings/i)).toBeInTheDocument();
expect(screen.getByText(/my account/i)).toBeInTheDocument();
expect(screen.getByText(/documentation/i)).toBeInTheDocument();
expect(screen.getByText(/sign out/i)).toBeInTheDocument();
expect(
screen.getByRole("menuitem", { name: /settings/i })
).toBeInTheDocument();
expect(
screen.getByRole("menuitem", { name: /my account/i })
).toBeInTheDocument();
expect(
screen.getByRole("menuitem", { name: /documentation/i })
).toBeInTheDocument();
expect(
screen.getByRole("menuitem", { name: /sign out/i })
).toBeInTheDocument();

expect(screen.queryByText(/manage users/i)).not.toBeInTheDocument();
});
Expand All @@ -289,16 +342,22 @@ describe("SiteTopNav - component", () => {
/>
);

await user.click(screen.getByTestId("user-menu"));
await user.click(screen.getByTestId("user-avatar"));

expect(screen.getByText(/hosts/i)).toBeInTheDocument();
expect(screen.getByText(/controls/i)).toBeInTheDocument();
expect(screen.getByText(/software/i)).toBeInTheDocument();
expect(screen.getByText(/queries/i)).toBeInTheDocument();
expect(screen.getByText(/policies/i)).toBeInTheDocument();
expect(screen.getByText(/my account/i)).toBeInTheDocument();
expect(screen.getByText(/documentation/i)).toBeInTheDocument();
expect(screen.getByText(/sign out/i)).toBeInTheDocument();
expect(
screen.getByRole("menuitem", { name: /my account/i })
).toBeInTheDocument();
expect(
screen.getByRole("menuitem", { name: /documentation/i })
).toBeInTheDocument();
expect(
screen.getByRole("menuitem", { name: /sign out/i })
).toBeInTheDocument();

expect(screen.queryByText(/settings/i)).not.toBeInTheDocument();
expect(screen.queryByText(/manage users/i)).not.toBeInTheDocument();
Expand All @@ -325,15 +384,22 @@ describe("SiteTopNav - component", () => {
/>
);

await user.click(screen.getByTestId("user-menu"));
await user.click(screen.getByTestId("user-avatar"));

expect(screen.getByText(/hosts/i)).toBeInTheDocument();
expect(screen.getByText(/software/i)).toBeInTheDocument();
expect(screen.getByText(/queries/i)).toBeInTheDocument();
expect(screen.getByText(/policies/i)).toBeInTheDocument();
expect(screen.getByText(/my account/i)).toBeInTheDocument();
expect(screen.getByText(/documentation/i)).toBeInTheDocument();
expect(screen.getByText(/sign out/i)).toBeInTheDocument();

expect(
screen.getByRole("menuitem", { name: /my account/i })
).toBeInTheDocument();
expect(
screen.getByRole("menuitem", { name: /documentation/i })
).toBeInTheDocument();
expect(
screen.getByRole("menuitem", { name: /sign out/i })
).toBeInTheDocument();

expect(screen.queryByText(/controls/i)).not.toBeInTheDocument();
expect(screen.queryByText(/settings/i)).not.toBeInTheDocument();
Expand Down
2 changes: 1 addition & 1 deletion frontend/components/top_nav/SiteTopNav/SiteTopNav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ import { IUser } from "interfaces/user";
import { QueryParams } from "utilities/url";

import LinkWithContext from "components/LinkWithContext";
import UserMenu from "components/top_nav/UserMenu";
// @ts-ignore
import OrgLogoIcon from "components/icons/OrgLogoIcon";

import UserMenu from "../UserMenu";
import getNavItems, { INavItem } from "./navItems";

interface ISiteTopNavProps {
Expand Down
Loading

0 comments on commit d6b80c9

Please sign in to comment.