Skip to content

Commit 5ed8232

Browse files
committed
test: Add tests and storybook
1 parent 73ed5cd commit 5ed8232

File tree

3 files changed

+82
-1
lines changed

3 files changed

+82
-1
lines changed
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import Box from "@material-ui/core/Box"
2+
import { Story } from "@storybook/react"
3+
import React from "react"
4+
import { UserDropdown, UserDropdownProps } from "./UserDropdown"
5+
6+
export default {
7+
title: "Page/UserDropdown",
8+
component: UserDropdown,
9+
argTypes: {
10+
onSignOut: { action: "Sign Out" },
11+
},
12+
}
13+
14+
const Template: Story<UserDropdownProps> = (args: UserDropdownProps) => (
15+
<Box style={{ backgroundColor: "#000", width: 88 }}>
16+
<UserDropdown {...args} />
17+
</Box>
18+
)
19+
20+
export const Example = Template.bind({})
21+
Example.args = {
22+
user: { id: "1", username: "CathyCoder", email: "cathy@coder.com", created_at: "dawn" },
23+
onSignOut: () => {
24+
return Promise.resolve()
25+
},
26+
}
Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { screen } from "@testing-library/react"
2+
import React from "react"
3+
import { render } from "../../test_helpers"
4+
import { MockUser } from "../../test_helpers/entities"
5+
import { UserDropdown, UserDropdownProps } from "./UserDropdown"
6+
7+
const renderAndClick = async (props: Partial<UserDropdownProps> = {}) => {
8+
render(<UserDropdown user={props.user ?? MockUser} onSignOut={props.onSignOut ?? jest.fn()} />)
9+
const trigger = await screen.findByTestId("user-dropdown-trigger")
10+
trigger.click()
11+
}
12+
13+
describe("UserDropdown", () => {
14+
describe("when the trigger is clicked", () => {
15+
it("opens the menu", async () => {
16+
await renderAndClick()
17+
expect(screen.getByText(/account/i)).toBeDefined()
18+
expect(screen.getByText(/documentation/i)).toBeDefined()
19+
expect(screen.getByText(/sign out/i)).toBeDefined()
20+
})
21+
})
22+
23+
describe("when the menu is open", () => {
24+
describe("and sign out is clicked", () => {
25+
it("calls the onSignOut function", async () => {
26+
const onSignOut = jest.fn()
27+
await renderAndClick({ onSignOut })
28+
screen.getByText(/sign out/i).click()
29+
expect(onSignOut).toBeCalledTimes(1)
30+
})
31+
})
32+
})
33+
34+
it("has the correct link for the documentation item", async () => {
35+
await renderAndClick()
36+
37+
const link = screen.getByText(/documentation/i).closest("a")
38+
if (!link) {
39+
throw new Error("Anchor tag not found for the documentation menu item")
40+
}
41+
42+
expect(link.getAttribute("href")).toBe("https://coder.com/docs")
43+
})
44+
45+
it("has the correct link for the account item", async () => {
46+
await renderAndClick()
47+
48+
const link = screen.getByText(/account/i).closest("a")
49+
if (!link) {
50+
throw new Error("Anchor tag not found for the account menu item")
51+
}
52+
53+
expect(link.getAttribute("href")).toBe("/preferences")
54+
})
55+
})

site/src/components/Navbar/UserDropdown.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const UserDropdown: React.FC<UserDropdownProps> = ({ user, onSignOut }: U
3535
return (
3636
<>
3737
<div>
38-
<MenuItem onClick={handleDropdownClick}>
38+
<MenuItem onClick={handleDropdownClick} data-testid="user-dropdown-trigger">
3939
<div className={styles.inner}>
4040
<Badge overlap="circle">
4141
<UserAvatar username={user.username} />

0 commit comments

Comments
 (0)