screenshots

Author: jderochervlk

.gitignore

@@ -68,4 +68,7 @@ __tests__/**/*.jsx
 _scripts
 
 # Local env files
-.env.local
+.env.local
+
+# Vitest screenshots
+!__tests__/__screenshots__/**/*

__tests__/NavbarPrimary_.test.res

@@ -23,6 +23,10 @@ test("desktop has everything visible", async () => {
   await element(rightContent->getByLabelText("X (formerly Twitter)"))->toBeVisible
   await element(rightContent->getByLabelText("Bluesky"))->toBeVisible
   await element(rightContent->getByLabelText("Forum"))->toBeVisible
+
+  let navbar = await screen->getByTestId("navbar-primary")
+
+  await element(navbar)->toMatchScreenshot("desktop-navbar-primary")
 })
 
 test("tablet has everything visible", async () => {
@@ -47,6 +51,10 @@ test("tablet has everything visible", async () => {
   await element(rightContent->getByLabelText("X (formerly Twitter)"))->toBeVisible
   await element(rightContent->getByLabelText("Bluesky"))->toBeVisible
   await element(rightContent->getByLabelText("Forum"))->toBeVisible
+
+  let navbar = await screen->getByTestId("navbar-primary")
+
+  await element(navbar)->toMatchScreenshot("tablet-navbar-primary")
 })
 
 test("phone has some things hidden and a mobile nav that can be toggled", async () => {
@@ -84,8 +92,9 @@ test("phone has some things hidden and a mobile nav that can be toggled", async
 
   await element(mobileNav)->toBeVisible
 
-  // await element(screen->getByLabelText("Github"))->toBeVisible
-  // await element(screen->getByLabelText("X (formerly Twitter)"))->toBeVisible
-  // await element(screen->getByLabelText("Bluesky"))->toBeVisible
-  // await element(screen->getByLabelText("Forum"))->toBeVisible
+  let navbar = await screen->getByTestId("navbar-primary")
+
+  await element(navbar)->toMatchScreenshot("mobile-navbar-primary")
+
+  await element(mobileNav)->toMatchScreenshot("mobile-overlay-navbar-primary")
 })

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

@@ -71,3 +71,6 @@ external toBeVisible: element => promise<unit> = "toBeVisible"
 
 @send @scope("not")
 external notToBeVisible: element => promise<unit> = "toBeVisible"
+
+@send
+external toMatchScreenshot: (element, string) => promise<unit> = "toMatchScreenshot"

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

@@ -104,7 +104,7 @@ let make = () => {
 
   <>
     <nav
-      id="main-navbar"
+      dataTestId="navbar-primary"
       className={`
     sticky top-0 h-16 w-full items-center bg-gray-90 shadow text-white-80 text-14 z-100
     grid grid-rows-1 grid-cols-[[full-start]_minmax(1rem,1fr)_[content-start]_min(1280px,100%-2rem)_[content-end]_minmax(1rem,1fr)_[full-end]]