Skip to content

Commit 9f15bee

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Refactor Navbar and its tests
1 parent ad81b13 commit 9f15bee

12 files changed

+114
-276
lines changed

‎site/src/components/Dashboard/Navbar/NavbarView.stories.tsx

Lines changed: 20 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,34 @@
1-
import { Story } from "@storybook/react";
1+
import type { Meta, StoryObj } from "@storybook/react";
22
import { MockUser, MockUser2 } from "../../../testHelpers/entities";
3-
import { NavbarView, NavbarViewProps } from "./NavbarView";
3+
import { NavbarView } from "./NavbarView";
44

5-
export default {
5+
const meta: Meta<typeof NavbarView> = {
66
title: "components/NavbarView",
77
component: NavbarView,
8-
argTypes: {
9-
onSignOut: { action: "Sign Out" },
8+
args: {
9+
user: MockUser,
1010
},
1111
};
1212

13-
const Template: Story<NavbarViewProps> = (args: NavbarViewProps) => (
14-
<NavbarView {...args} />
15-
);
13+
export default meta;
14+
type Story = StoryObj<typeof NavbarView>;
1615

17-
export const ForAdmin = Template.bind({});
18-
ForAdmin.args = {
19-
user: MockUser,
20-
onSignOut: () => {
21-
return Promise.resolve();
22-
},
23-
};
16+
export const ForAdmin: Story = {};
2417

25-
export const ForMember = Template.bind({});
26-
ForMember.args = {
27-
user: MockUser2,
28-
onSignOut: () => {
29-
return Promise.resolve();
18+
export const ForMember: Story = {
19+
args: {
20+
user: MockUser2,
21+
canViewAuditLog: false,
22+
canViewDeployment: false,
23+
canViewAllUsers: true,
3024
},
3125
};
3226

33-
export const SmallViewport = Template.bind({});
34-
SmallViewport.args = {
35-
user: MockUser,
36-
onSignOut: () => {
37-
return Promise.resolve();
38-
},
39-
};
40-
SmallViewport.parameters = {
41-
viewport: {
42-
defaultViewport: "tablet",
27+
export const SmallViewport: Story = {
28+
parameters: {
29+
viewport: {
30+
defaultViewport: "tablet",
31+
},
32+
chromatic: { viewports: [420] },
4333
},
44-
chromatic: { viewports: [420] },
4534
};

‎site/src/components/Dashboard/Navbar/NavbarView.test.tsx

Lines changed: 0 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { screen } from "@testing-library/react";
22
import {
33
MockPrimaryWorkspaceProxy,
44
MockUser,
5-
MockUser2,
65
} from "../../../testHelpers/entities";
76
import { renderWithAuth } from "../../../testHelpers/renderHelpers";
87
import { Language as navLanguage, NavbarView } from "./NavbarView";
@@ -28,18 +27,6 @@ describe("NavbarView", () => {
2827
return;
2928
};
3029

31-
const env = process.env;
32-
33-
// REMARK: copying process.env so we don't mutate that object or encounter conflicts between tests
34-
beforeEach(() => {
35-
process.env = { ...env };
36-
});
37-
38-
// REMARK: restoring process.env
39-
afterEach(() => {
40-
process.env = env;
41-
});
42-
4330
it("workspaces nav link has the correct href", async () => {
4431
renderWithAuth(
4532
<NavbarView
@@ -85,32 +72,6 @@ describe("NavbarView", () => {
8572
expect((userLink as HTMLAnchorElement).href).toContain("/users");
8673
});
8774

88-
it("renders profile picture for user", async () => {
89-
// Given
90-
const mockUser = {
91-
...MockUser,
92-
username: "bryan",
93-
avatar_url: "",
94-
};
95-
96-
// When
97-
renderWithAuth(
98-
<NavbarView
99-
proxyContextValue={proxyContextValue}
100-
user={mockUser}
101-
onSignOut={noop}
102-
canViewAuditLog
103-
canViewDeployment
104-
canViewAllUsers
105-
/>,
106-
);
107-
108-
// Then
109-
// There should be a 'B' avatar!
110-
const element = await screen.findByText("B");
111-
expect(element).toBeDefined();
112-
});
113-
11475
it("audit nav link has the correct href", async () => {
11576
renderWithAuth(
11677
<NavbarView
@@ -126,21 +87,6 @@ describe("NavbarView", () => {
12687
expect((auditLink as HTMLAnchorElement).href).toContain("/audit");
12788
});
12889

129-
it("audit nav link is hidden for members", async () => {
130-
renderWithAuth(
131-
<NavbarView
132-
proxyContextValue={proxyContextValue}
133-
user={MockUser2}
134-
onSignOut={noop}
135-
canViewAuditLog={false}
136-
canViewDeployment
137-
canViewAllUsers
138-
/>,
139-
);
140-
const auditLink = screen.queryByText(navLanguage.audit);
141-
expect(auditLink).not.toBeInTheDocument();
142-
});
143-
14490
it("deployment nav link has the correct href", async () => {
14591
renderWithAuth(
14692
<NavbarView
@@ -157,19 +103,4 @@ describe("NavbarView", () => {
157103
"/deployment/general",
158104
);
159105
});
160-
161-
it("deployment nav link is hidden for members", async () => {
162-
renderWithAuth(
163-
<NavbarView
164-
proxyContextValue={proxyContextValue}
165-
user={MockUser2}
166-
onSignOut={noop}
167-
canViewAuditLog={false}
168-
canViewDeployment={false}
169-
canViewAllUsers
170-
/>,
171-
);
172-
const auditLink = screen.queryByText(navLanguage.deployment);
173-
expect(auditLink).not.toBeInTheDocument();
174-
});
175106
});

‎site/src/components/Dashboard/Navbar/UserDropdown/BorderedMenu/BorderedMenu.tsx renamed to ‎site/src/components/Dashboard/Navbar/UserDropdown/BorderedMenu.tsx

File renamed without changes.

‎site/src/components/Dashboard/Navbar/UserDropdown/BorderedMenu/BorderedMenuRow.tsx renamed to ‎site/src/components/Dashboard/Navbar/UserDropdown/BorderedMenuRow.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { makeStyles } from "@mui/styles";
33
import CheckIcon from "@mui/icons-material/Check";
44
import { FC } from "react";
55
import { NavLink } from "react-router-dom";
6-
import { ellipsizeText } from "../../../../../utils/ellipsizeText";
7-
import { Typography } from "../../../../Typography/Typography";
6+
import { ellipsizeText } from "utils/ellipsizeText";
7+
import { Typography } from "components/Typography/Typography";
88

99
type BorderedMenuRowVariant = "narrow" | "wide";
1010

‎site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.stories.tsx

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,16 @@
1-
import Box from "@mui/material/Box";
2-
import { Story } from "@storybook/react";
31
import { MockUser } from "../../../../testHelpers/entities";
4-
import { UserDropdown, UserDropdownProps } from "./UserDropdown";
2+
import { UserDropdown } from "./UserDropdown";
3+
import type { Meta, StoryObj } from "@storybook/react";
54

6-
export default {
5+
const meta: Meta<typeof UserDropdown> = {
76
title: "components/UserDropdown",
87
component: UserDropdown,
9-
argTypes: {
10-
onSignOut: { action: "Sign Out" },
8+
args: {
9+
user: MockUser,
1110
},
1211
};
1312

14-
const Template: Story<UserDropdownProps> = (args: UserDropdownProps) => (
15-
<Box style={{ backgroundColor: "#000", width: 88 }}>
16-
<UserDropdown {...args} />
17-
</Box>
18-
);
13+
export default meta;
14+
type Story = StoryObj<typeof UserDropdown>;
1915

20-
export const Example = Template.bind({});
21-
Example.args = {
22-
user: MockUser,
23-
onSignOut: () => {
24-
return Promise.resolve();
25-
},
26-
};
16+
export const Example: Story = {};

‎site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.test.tsx

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@ import MenuItem from "@mui/material/MenuItem";
33
import { makeStyles } from "@mui/styles";
44
import { useState, FC, PropsWithChildren, MouseEvent } from "react";
55
import { colors } from "theme/colors";
6-
import * as TypesGen from "../../../../api/typesGenerated";
7-
import { navHeight } from "../../../../theme/constants";
8-
import { BorderedMenu } from "./BorderedMenu/BorderedMenu";
6+
import * as TypesGen from "api/typesGenerated";
7+
import { navHeight } from "theme/constants";
8+
import { BorderedMenu } from "./BorderedMenu";
99
import {
1010
CloseDropdown,
1111
OpenDropdown,
12-
} from "../../../DropdownArrows/DropdownArrows";
13-
import { UserAvatar } from "../../../UserAvatar/UserAvatar";
14-
import { UserDropdownContent } from "./UserDropdownContent/UserDropdownContent";
12+
} from "components/DropdownArrows/DropdownArrows";
13+
import { UserAvatar } from "components/UserAvatar/UserAvatar";
14+
import { UserDropdownContent } from "./UserDropdownContent";
1515
import { BUTTON_SM_HEIGHT } from "theme/theme";
1616

1717
export interface UserDropdownProps {

‎site/src/components/Dashboard/Navbar/UserDropdown/UserDropdownContent.stories.tsx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { MockUser } from "testHelpers/entities";
2+
import { UserDropdownContent } from "./UserDropdownContent";
3+
import type { Meta, StoryObj } from "@storybook/react";
4+
5+
const meta: Meta<typeof UserDropdownContent> = {
6+
title: "components/UserDropdownContent",
7+
component: UserDropdownContent,
8+
};
9+
10+
export default meta;
11+
type Story = StoryObj<typeof UserDropdownContent>;
12+
13+
export const ExampleNoRoles: Story = {
14+
args: {
15+
user: {
16+
...MockUser,
17+
roles: [],
18+
},
19+
},
20+
};
21+
22+
export const ExampleOneRole: Story = {
23+
args: {
24+
user: {
25+
...MockUser,
26+
roles: [{ name: "member", display_name: "Member" }],
27+
},
28+
},
29+
};
30+
31+
export const ExampleThreeRoles: Story = {
32+
args: {
33+
user: {
34+
...MockUser,
35+
roles: [
36+
{ name: "admin", display_name: "Admin" },
37+
{ name: "member", display_name: "Member" },
38+
{ name: "auditor", display_name: "Auditor" },
39+
],
40+
},
41+
},
42+
};

‎site/src/components/Dashboard/Navbar/UserDropdown/UserDropdownContent.test.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { screen } from "@testing-library/react";
2+
import { MockUser } from "testHelpers/entities";
3+
import { render } from "testHelpers/renderHelpers";
4+
import { Language, UserDropdownContent } from "./UserDropdownContent";
5+
6+
describe("UserDropdownContent", () => {
7+
it("has the correct link for the account item", () => {
8+
render(
9+
<UserDropdownContent
10+
user={MockUser}
11+
onSignOut={jest.fn()}
12+
onPopoverClose={jest.fn()}
13+
/>,
14+
);
15+
16+
const link = screen.getByText(Language.accountLabel).closest("a");
17+
if (!link) {
18+
throw new Error("Anchor tag not found for the account menu item");
19+
}
20+
21+
expect(link.getAttribute("href")).toBe("/settings/account");
22+
});
23+
24+
it("calls the onSignOut function", () => {
25+
const onSignOut = jest.fn();
26+
render(
27+
<UserDropdownContent
28+
user={MockUser}
29+
onSignOut={onSignOut}
30+
onPopoverClose={jest.fn()}
31+
/>,
32+
);
33+
screen.getByText(Language.signOutLabel).click();
34+
expect(onSignOut).toBeCalledTimes(1);
35+
});
36+
});

‎site/src/components/Dashboard/Navbar/UserDropdown/UserDropdownContent/UserDropdownContent.tsx renamed to ‎site/src/components/Dashboard/Navbar/UserDropdown/UserDropdownContent.tsx

File renamed without changes.

‎site/src/components/Dashboard/Navbar/UserDropdown/UserDropdownContent/UserDropdownContent.stories.tsx

Lines changed: 0 additions & 43 deletions
This file was deleted.

0 commit comments

Comments
 (0)