feat: update tests

.github/workflows/playwright.yml

@@ -33,7 +33,8 @@ jobs:
       - name: 🏗️ Setup pnpm
         uses: pnpm/action-setup@v4
 
-      - uses: actions/setup-node@v4
+      - name: 🏗️ Setup node
+        uses: actions/setup-node@v4
         with:
           node-version: "20"
           cache: "pnpm"

playwright.config.ts

@@ -1,5 +1,7 @@
 import { defineConfig, devices } from "@playwright/test";
 
+const baseURL = process.env.PLAYWRIGHT_TEST_BASE_URL || "http://localhost:3000";
+
 export default defineConfig({
   testDir: "./tests",
   // Timeout per test
@@ -21,25 +23,15 @@ export default defineConfig({
   // Reporter to use. See https://playwright.dev/docs/test-reporters
   reporter: process.env.CI ? "github" : "list",
 
-  // Run your local dev server before starting the tests:
-  // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
-  // webServer: {
-  //   command: process.env.CI ? "npm run start" : "pnpm dev",
-  //   url: process.env.PLAYWRIGHT_TEST_BASE_URL ?? "http://localhost:3000",
-  //   timeout: 2 * 60 * 1000,
-  //   reuseExistingServer: !process.env.CI,
-  // },
-
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
-    // Maximum time each action such as `click()` can take. Defaults to 0 (no
-    // limit).
+    // Maximum time each action such as `click()` can take. Defaults to 0 (no limit).
     actionTimeout: 0,
 
-    /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL || "http://localhost:3000",
+    // Base URL to use in actions like `await page.goto('/')`.
+    baseURL: baseURL,
 
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    // Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer
     trace: "on-first-retry",
   },
 
@@ -80,4 +72,13 @@ export default defineConfig({
     //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
     // },
   ],
+
+  /* Run your local dev server before starting the tests: */
+  // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
+  // webServer: {
+  //   command: process.env.CI ? "npm run start" : "pnpm dev",
+  //   url: baseURL,
+  //   timeout: 2 * 60 * 1000,
+  //   reuseExistingServer: !process.env.CI,
+  // },
 });

src/app/layout.tsx

@@ -146,8 +146,9 @@ export const viewport: Viewport = {
     { media: "(prefers-color-scheme: dark)", color: "#000" },
   ],
   initialScale: 1,
-  maximumScale: 1,
-  userScalable: false,
+  userScalable: true,
+  minimumScale: 1,
+  maximumScale: 5,
 };
 
 export default async function RootLayout({

src/ui/navbar/navbar.tsx

@@ -130,10 +130,11 @@ export function Navbar() {
           }
         />
         <Tab
+          as="div"
           title={<Divider orientation="vertical" />}
-          className="bg-default-200 px-0"
+          className="pointer-events-none bg-default-200 px-0"
         />
-        <Tab title={<Menu size={20} />} />
+        <Tab title={<Menu size={20} />} aria-label="Command Menu" />
       </Tabs>
     </>
   );

tests/e2e/command-menu.spec.ts

@@ -0,0 +1,78 @@
+import { expect, test } from "@playwright/test";
+
+test("check if navbar with correct tag is present", async ({ page }) => {
+  // Navigate to the page you want to test
+  await page.goto("/");
+
+  // Check if the navbar with aria-label="Navbar" is present
+  const navbar = await page.getByRole("tablist", { name: "Navbar" });
+  await expect(navbar).toBeVisible();
+
+  if (navbar) {
+    const tagName = await navbar.evaluate((el) => el.tagName.toLowerCase());
+    expect(tagName).toBe("nav");
+  }
+});
+
+test("open command menu", async ({ page }) => {
+  // Navigate to the page you want to test
+  await page.goto("/");
+
+  // Check if the navbar with aria-label="Navbar" is present
+  const navbar = await page.getByRole("tablist", { name: "Navbar" });
+  await expect(navbar).toBeVisible();
+
+  // Locate the command menu button
+  const commandMenuButton = page.getByLabel("Command Menu");
+  await expect(commandMenuButton).toBeVisible();
+
+  // Click the command menu button
+  await commandMenuButton.click();
+
+  // Check if the command menu modal is visible
+  const commandMenu = page.getByLabel("Command Menu⌘/Ctrl KEsc");
+  await expect(commandMenu).toBeVisible();
+});
+
+test("search for a command in the command menu", async ({ page }) => {
+  // Navigate to the page you want to test
+  await page.goto("/");
+
+  // Check if the navbar with aria-label="Navbar" is present
+  const navbar = await page.getByRole("tablist", { name: "Navbar" });
+  await expect(navbar).toBeVisible();
+
+  // Locate the command menu button
+  const commandMenuButton = page.getByLabel("Command Menu");
+  await expect(commandMenuButton).toBeVisible();
+
+  // Click the command menu button
+  await commandMenuButton.click();
+
+  // Check if the command menu modal is visible
+  const commandMenu = page.getByLabel("Command Menu⌘/Ctrl KEsc");
+  await expect(commandMenu).toBeVisible();
+
+  // Locate the search input
+  const searchInput = commandMenu.getByPlaceholder("What do you need?");
+  await expect(searchInput).toBeVisible();
+
+  // Type a partial command in the search input
+  await searchInput.fill("exp");
+
+  // Check if the command menu modal is still visible
+  await expect(commandMenu).toBeVisible();
+
+  // Locate the first command in the list
+  const firstCommand = commandMenu.getByLabel("Experience");
+  await expect(firstCommand).toBeVisible();
+
+  // Click the first command in the list
+  await firstCommand.click();
+
+  // Check if the command menu modal is closed
+  await expect(commandMenu).not.toBeVisible();
+
+  // Check if the URL is correct
+  await expect(page).toHaveURL("/experience");
+});

tests/e2e/navbar-navigation.spec.ts

@@ -0,0 +1,100 @@
+import { expect, test } from "@playwright/test";
+
+test("check if navbar with correct tag is present", async ({ page }) => {
+  // Navigate to the page you want to test
+  await page.goto("/");
+
+  // Check if the navbar with aria-label="Navbar" is present
+  const navbar = await page.getByRole('tablist', { name: 'Navbar' });
+  await expect(navbar).toBeVisible();
+
+  if (navbar) {
+    const tagName = await navbar.evaluate((el) => el.tagName.toLowerCase());
+    expect(tagName).toBe("nav");
+  }
+});
+
+test("go to experience page", async ({ page }) => {
+  // Navigate to the page you want to test
+  await page.goto("/");
+
+  // Locate the navbar with aria-label="Navbar" and tag <nav>
+  const navbar = page.locator('nav[aria-label="Navbar"]');
+  await expect(navbar).toBeVisible();
+
+  // Check if each element of the navbar contains an "a" button with href="/experience"
+  const anchor = navbar.locator('a[href="/experience"]');
+  await expect(anchor).toBeVisible();
+
+  // Click the anchor button and verify the URL
+  await anchor.click();
+  await expect(page).toHaveURL("/experience");
+});
+
+test("go to project page", async ({ page }) => {
+  // Navigate to the page you want to test
+  await page.goto("/");
+
+  // Locate the navbar with aria-label="Navbar" and tag <nav>
+  const navbar = page.locator('nav[aria-label="Navbar"]');
+  await expect(navbar).toBeVisible();
+
+  // Check if each element of the navbar contains an "a" button with href="/project"
+  const anchor = navbar.locator('a[href="/project"]');
+  await expect(anchor).toBeVisible();
+
+  // Click the anchor button and verify the URL
+  await anchor.click();
+  await expect(page).toHaveURL("/project");
+});
+
+test("go to blog page", async ({ page }) => {
+  // Navigate to the page you want to test
+  await page.goto("/");
+
+  // Locate the navbar with aria-label="Navbar" and tag <nav>
+  const navbar = page.locator('nav[aria-label="Navbar"]');
+  await expect(navbar).toBeVisible();
+
+  // Check if each element of the navbar contains an "a" button with href="/blog"
+  const anchor = navbar.locator('a[href="/blog"]');
+  await expect(anchor).toBeVisible();
+
+  // Click the anchor button and verify the URL
+  await anchor.click();
+  await expect(page).toHaveURL("/blog");
+});
+
+test("go to stack page", async ({ page }) => {
+  // Navigate to the page you want to test
+  await page.goto("/");
+
+  // Locate the navbar with aria-label="Navbar" and tag <nav>
+  const navbar = page.locator('nav[aria-label="Navbar"]');
+  await expect(navbar).toBeVisible();
+
+  // Check if each element of the navbar contains an "a" button with href="/stack"
+  const anchor = navbar.locator('a[href="/stack"]');
+  await expect(anchor).toBeVisible();
+
+  // Click the anchor button and verify the URL
+  await anchor.click();
+  await expect(page).toHaveURL("/stack");
+});
+
+test("go to contact page", async ({ page }) => {
+  // Navigate to the page you want to test
+  await page.goto("/");
+
+  // Locate the navbar with aria-label="Navbar" and tag <nav>
+  const navbar = page.locator('nav[aria-label="Navbar"]');
+  await expect(navbar).toBeVisible();
+
+  // Check if each element of the navbar contains an "a" button with href="/contact"
+  const anchor = navbar.locator('a[href="/contact"]');
+  await expect(anchor).toBeVisible();
+
+  // Click the anchor button and verify the URL
+  await anchor.click();
+  await expect(page).toHaveURL("/contact");
+});