Skip to content

Commit 5c11f56

Browse files
jderochervlkCopilotCopilot
authored
refactor: refactoring navbars (#1195)
* refactor: refactoring navbars * making progress on the nav * scrolling works again * refactoring * mobile overlay works * tests are passing * done with mobile overlay * screenshots * removing top padding * fix playground * remove unused open * fix issue with homepage reloading nonstop * restor mdx route * remove dummy page * fixing docs * fix syntax lookup * remove build errors and warnings * commit screenshot changes * chore: update vitest screenshots [skip ci] * remove unused values * remove unused file * tidying up * fix version dropdown * Update src/components/Search.res Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update src/components/BreadCrumbs.res Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Fix mobile overlay not closing on navigation link clicks (#1198) * Initial plan * Add onClick handlers to close mobile overlay for all navigation links Co-authored-by: jderochervlk <60623931+jderochervlk@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: jderochervlk <60623931+jderochervlk@users.noreply.github.com> * PR feedback. * PR feedback * cleanup * Fix sidebar scrolling when it shouldn't --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>
1 parent d407c1a commit 5c11f56

51 files changed

Lines changed: 1070 additions & 350 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/workflows/pull-request.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,3 +47,8 @@ jobs:
4747
run: yarn playwright install --with-deps
4848
- name: Vitest
4949
run: yarn ci:test
50+
- name: Commit and Push changes
51+
uses: stefanzweifel/git-auto-commit-action@v5
52+
with:
53+
commit_message: "chore: update vitest screenshots [skip ci]"
54+
file_pattern: "**/__screenshots__/**/*.png"

‎.gitignore‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,4 +68,8 @@ __tests__/**/*.jsx
6868
_scripts
6969

7070
# Local env files
71-
.env.local
71+
.env.local
72+
73+
# Vitest screenshots
74+
!__tests__/__screenshots__/**/*
75+
.vitest-attachments

‎__tests__/Example.test.res‎

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

‎__tests__/NavbarPrimary_.test.res‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
open ReactRouter
2+
open Vitest
3+
4+
test("desktop has everything visible", async () => {
5+
await viewport(1440, 500)
6+
7+
let screen = await render(
8+
<BrowserRouter>
9+
<NavbarPrimary />
10+
</BrowserRouter>,
11+
)
12+
13+
let leftContent = await screen->getByTestId("navbar-primary-left-content")
14+
15+
await element(await leftContent->getByText("Docs"))->toBeVisible
16+
await element(await leftContent->getByText("Playground"))->toBeVisible
17+
await element(await leftContent->getByText("Blog"))->toBeVisible
18+
await element(await leftContent->getByText("Community"))->toBeVisible
19+
20+
let rightContent = await screen->getByTestId("navbar-primary-right-content")
21+
22+
await element(await rightContent->getByLabelText("GitHub"))->toBeVisible
23+
await element(await rightContent->getByLabelText("X (formerly Twitter)"))->toBeVisible
24+
await element(await rightContent->getByLabelText("Bluesky"))->toBeVisible
25+
await element(await rightContent->getByLabelText("Forum"))->toBeVisible
26+
27+
let navbar = await screen->getByTestId("navbar-primary")
28+
29+
await element(navbar)->toMatchScreenshot("desktop-navbar-primary")
30+
})
31+
32+
test("tablet has everything visible", async () => {
33+
await viewport(900, 500)
34+
35+
let screen = await render(
36+
<BrowserRouter>
37+
<NavbarPrimary />
38+
</BrowserRouter>,
39+
)
40+
41+
let leftContent = await screen->getByTestId("navbar-primary-left-content")
42+
43+
await element(await leftContent->getByText("Docs"))->toBeVisible
44+
await element(await leftContent->getByText("Playground"))->toBeVisible
45+
await element(await leftContent->getByText("Blog"))->toBeVisible
46+
await element(await leftContent->getByText("Community"))->toBeVisible
47+
48+
let rightContent = await screen->getByTestId("navbar-primary-right-content")
49+
50+
await element(await rightContent->getByLabelText("GitHub"))->toBeVisible
51+
await element(await rightContent->getByLabelText("X (formerly Twitter)"))->toBeVisible
52+
await element(await rightContent->getByLabelText("Bluesky"))->toBeVisible
53+
await element(await rightContent->getByLabelText("Forum"))->toBeVisible
54+
55+
let navbar = await screen->getByTestId("navbar-primary")
56+
57+
await element(navbar)->toMatchScreenshot("tablet-navbar-primary")
58+
})
59+
60+
test("phone has some things hidden and a mobile nav that can be toggled", async () => {
61+
await viewport(600, 1200)
62+
63+
let screen = await render(
64+
<BrowserRouter>
65+
<NavbarPrimary />
66+
</BrowserRouter>,
67+
)
68+
69+
let leftContent = await screen->getByTestId("navbar-primary-left-content")
70+
71+
await element(await leftContent->getByText("Docs"))->toBeVisible
72+
await element(await leftContent->getByText("Playground"))->notToBeVisible
73+
await element(await leftContent->getByText("Blog"))->notToBeVisible
74+
await element(await leftContent->getByText("Community"))->notToBeVisible
75+
76+
let rightContent = await screen->getByTestId("navbar-primary-right-content")
77+
78+
await element(await rightContent->getByLabelText("GitHub"))->notToBeVisible
79+
await element(await rightContent->getByLabelText("X (formerly Twitter)"))->notToBeVisible
80+
await element(await rightContent->getByLabelText("Bluesky"))->notToBeVisible
81+
await element(await rightContent->getByLabelText("Forum"))->notToBeVisible
82+
83+
let mobileNav = await screen->getByTestId("mobile-nav")
84+
await element(mobileNav)->notToBeVisible
85+
86+
let button = await screen->getByTestId("toggle-mobile-overlay")
87+
88+
await element(button)->toBeVisible
89+
90+
await button->click
91+
92+
let mobileNavAfterOpen = await screen->getByTestId("mobile-nav")
93+
94+
await element(mobileNavAfterOpen)->toBeVisible
95+
96+
let navbar = await screen->getByTestId("navbar-primary")
97+
98+
await element(navbar)->toMatchScreenshot("mobile-navbar-primary")
99+
100+
await element(mobileNavAfterOpen)->toMatchScreenshot("mobile-overlay-navbar-primary")
101+
})

‎__tests__/NavbarTertiary_.test.res‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
open ReactRouter
2+
open Vitest
3+
4+
let sidebarContent =
5+
<aside>
6+
<div dataTestId="sidebar-version-select"> {React.string("v12 (latest)")} </div>
7+
<div dataTestId="sidebar-categories">
8+
<div> {React.string("OVERVIEW")} </div>
9+
<div> {React.string("Introduction")} </div>
10+
</div>
11+
</aside>
12+
13+
let breadcrumbs =
14+
<span dataTestId="breadcrumbs"> {React.string("Docs / Language Manual / Installation")} </span>
15+
16+
let editLink = <a dataTestId="edit-link" href="#"> {React.string("Edit")} </a>
17+
18+
test("desktop shows breadcrumbs and edit link", async () => {
19+
await viewport(1440, 500)
20+
21+
let screen = await render(
22+
<BrowserRouter>
23+
<NavbarTertiary sidebar=sidebarContent>
24+
breadcrumbs
25+
editLink
26+
</NavbarTertiary>
27+
</BrowserRouter>,
28+
)
29+
30+
let navbar = await screen->getByTestId("navbar-tertiary")
31+
32+
await element(navbar)->toBeVisible
33+
34+
let crumbs = await screen->getByTestId("breadcrumbs")
35+
await element(crumbs)->toBeVisible
36+
37+
let edit = await screen->getByTestId("edit-link")
38+
await element(edit)->toBeVisible
39+
40+
await element(navbar)->toMatchScreenshot("desktop-navbar-tertiary")
41+
})
42+
43+
test("mobile shows breadcrumbs and drawer button", async () => {
44+
await viewport(600, 1200)
45+
46+
let screen = await render(
47+
<BrowserRouter>
48+
<NavbarTertiary sidebar=sidebarContent>
49+
breadcrumbs
50+
editLink
51+
</NavbarTertiary>
52+
</BrowserRouter>,
53+
)
54+
55+
let navbar = await screen->getByTestId("navbar-tertiary")
56+
await element(navbar)->toBeVisible
57+
58+
let crumbs = await screen->getByTestId("breadcrumbs")
59+
await element(crumbs)->toBeVisible
60+
61+
let edit = await screen->getByTestId("edit-link")
62+
await element(edit)->toBeVisible
63+
64+
await element(navbar)->toMatchScreenshot("mobile-navbar-tertiary")
65+
})
66+
67+
test("mobile drawer can be toggled open", async () => {
68+
await viewport(600, 1200)
69+
70+
let screen = await render(
71+
<BrowserRouter>
72+
<NavbarTertiary sidebar=sidebarContent>
73+
breadcrumbs
74+
editLink
75+
</NavbarTertiary>
76+
</BrowserRouter>,
77+
)
78+
79+
// Sidebar dialog should not be visible initially
80+
let sidebar = await screen->getByTestId("sidebar-categories")
81+
await element(sidebar)->notToBeVisible
82+
83+
// Click the drawer toggle button
84+
let drawerButton = await screen->getByRole(#button)
85+
await drawerButton->click
86+
87+
// Sidebar content should now be visible
88+
let sidebarAfter = await screen->getByTestId("sidebar-categories")
89+
await element(sidebarAfter)->toBeVisible
90+
91+
let versionSelect = await screen->getByTestId("sidebar-version-select")
92+
await element(versionSelect)->toBeVisible
93+
})

‎__tests__/VersionSelect_.test.res‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
open Vitest
2+
3+
test("renders current version label", async () => {
4+
let screen = await render(<VersionSelect />)
5+
6+
let el = await screen->getByTestId("version-select")
7+
await element(el)->toBeVisible
8+
9+
let label = await screen->getByText("v12 (latest)")
10+
await element(label)->toBeVisible
11+
})
12+
13+
test("clicking button shows older versions", async () => {
14+
let screen = await render(<VersionSelect />)
15+
16+
// Menu should be hidden initially
17+
let v11 = await screen->getByText("v11")
18+
await element(v11)->notToBeVisible
19+
20+
// Click the trigger button
21+
let button = await screen->getByRole(#button)
22+
await button->click
23+
24+
// Older versions should now be visible
25+
let v11After = await screen->getByText("v11")
26+
await element(v11After)->toBeVisible
27+
28+
let v9 = await screen->getByText("v9.1 - v10.1")
29+
await element(v9)->toBeVisible
30+
31+
let v8 = await screen->getByText("v8.2 - v9.0")
32+
await element(v8)->toBeVisible
33+
34+
let v6 = await screen->getByText("v6.0 - v8.1")
35+
await element(v6)->toBeVisible
36+
})
37+
38+
test("clicking button again closes older versions", async () => {
39+
let screen = await render(<VersionSelect />)
40+
41+
let button = await screen->getByRole(#button)
42+
43+
// Open
44+
await button->click
45+
let v11 = await screen->getByText("v11")
46+
await element(v11)->toBeVisible
47+
48+
// Close
49+
await button->click
50+
let v11After = await screen->getByText("v11")
51+
await element(v11After)->notToBeVisible
52+
})
53+
54+
test("multiple instances have unique popover IDs", async () => {
55+
let screen = await render(
56+
<div>
57+
<div dataTestId="first">
58+
<VersionSelect />
59+
</div>
60+
<div dataTestId="second">
61+
<VersionSelect />
62+
</div>
63+
</div>,
64+
)
65+
66+
let first = await screen->getByTestId("first")
67+
let second = await screen->getByTestId("second")
68+
69+
// Click the button in the first instance
70+
let firstButton = await first->getByRole(#button)
71+
await firstButton->click
72+
73+
// First instance menu should be visible
74+
let firstV11 = await first->getByText("v11")
75+
await element(firstV11)->toBeVisible
76+
77+
// Second instance menu should remain hidden
78+
let secondV11 = await second->getByText("v11")
79+
await element(secondV11)->notToBeVisible
80+
})

‎__tests__/__screenshots__/NavbarPrimary_.test.jsx/desktop-navbar-primary-chromium-linux.png‎

9.92 KB
Loading

‎__tests__/__screenshots__/NavbarPrimary_.test.jsx/mobile-navbar-primary-chromium-linux.png‎

1.69 KB
Loading

‎__tests__/__screenshots__/NavbarPrimary_.test.jsx/mobile-overlay-navbar-primary-chromium-linux.png‎

5.45 KB
Loading

‎__tests__/__screenshots__/NavbarPrimary_.test.jsx/tablet-navbar-primary-chromium-linux.png‎

10 KB
Loading

0 commit comments

Comments
 (0)