feat: add e2e tests

.gitignore

@@ -39,3 +39,11 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/

package.json

@@ -7,6 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "test:e2e": "playwright test",
     "preview": "next build && next start"
   },
   "dependencies": {
@@ -49,6 +50,7 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@playwright/test": "^1.63.0",
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/pg": "^8.11.11",

playwright.config.ts

@@ -0,0 +1,79 @@
+import {defineConfig, devices} from '@playwright/test';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+    testDir: './tests',
+    /* Run tests in files in parallel */
+    fullyParallel: true,
+    /* Fail the build on CI if you accidentally left test.only in the source code. */
+    forbidOnly: !!process.env.CI,
+    /* Retry on CI only */
+    retries: process.env.CI ? 2 : 0,
+    /* Opt out of parallel tests on CI. */
+    workers: process.env.CI ? 1 : undefined,
+    /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+    reporter: 'html',
+    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+    use: {
+        /* Base URL to use in actions like `await page.goto('')`. */
+        baseURL: 'http://localhost:3000',
+        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+        trace: 'on-first-retry',
+        screenshot: 'only-on-failure',
+    },
+    expect: {
+        toHaveScreenshot: {
+            pathTemplate: '{testDir}/__screenshots__{/projectName}/{testFilePath}/{arg}{ext}',
+        },
+        toMatchAriaSnapshot: {
+            pathTemplate: '{testDir}/__snapshots__/{testFilePath}/{arg}{ext}',
+        }
+    },
+
+    /* Configure projects for major browsers */
+    projects: [
+        {
+            name: 'chromium',
+            use: {...devices['Desktop Chrome']},
+        },
+
+        {
+            name: 'firefox',
+            use: {...devices['Desktop Firefox']},
+        },
+
+        {
+            name: 'webkit',
+            use: {...devices['Desktop Safari']},
+        },
+
+        /* Test against mobile viewports. */
+        // {
+        //   name: 'Mobile Chrome',
+        //   use: { ...devices['Pixel 5'] },
+        // },
+        // {
+        //   name: 'Mobile Safari',
+        //   use: { ...devices['iPhone 12'] },
+        // },
+
+        /* Test against branded browsers. */
+        // {
+        //   name: 'Microsoft Edge',
+        //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+        // },
+        // {
+        //   name: 'Google Chrome',
+        //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+        // },
+    ],
+
+    /* Run your local dev server before starting the tests */
+    webServer: {
+        command: 'npm run preview',
+        url: 'http://localhost:3000',
+        reuseExistingServer: !process.env.CI,
+    },
+});

src/app/layout.tsx

@@ -36,7 +36,7 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         <SidebarProvider>
-          <AppSidebar />
+          <AppSidebar aria-label={"sidebar"}/>
           <SidebarInset>
             <AppHeader />
             {/* <ThemeRegistry options={{ key: 'joy' }}> */}

src/components/app-sidebar.tsx

@@ -164,7 +164,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
     }
 
     return (
-        <Sidebar collapsible="icon" {...props}>
+        <Sidebar collapsible="icon" {...props} role={"navigation"}>
             <SidebarHeader>
                 <SidebarMenu>
                     <SidebarMenuItem>

tests/__snapshots__/homepage.spec.ts/landing-page-breadcrumbs-match-snapshot-1.aria.yml

@@ -0,0 +1,7 @@
+- button "Toggle Sidebar":
+  - img
+  - text: ""
+- navigation "breadcrumb":
+  - list:
+    - listitem:
+      - link "Home" [disabled]

tests/__snapshots__/homepage.spec.ts/landing-page-main-content-matches-snapshot-1.aria.yml

@@ -0,0 +1,28 @@
+- main:
+  - button "Toggle Sidebar":
+    - img
+    - text: ""
+  - navigation "breadcrumb":
+    - list:
+      - listitem:
+        - link "Home" [disabled]
+  - heading "👋 Welcome to AV QC Portal" [level=2]
+  - paragraph:
+    - text: This web portal is actively being developed as a companion to the
+    - link "AV QC pipeline":
+      - /url: https://github.com/dptools/dpinterview
+    - text: project, designed to streamline audiovisual quality control processes.
+  - link "🔍 Quality Control Monitor and manage quality issues in your audio/video recordings with more intuitive interfaces.":
+    - /url: /issues
+    - heading "🔍 Quality Control" [level=4]
+    - paragraph: Monitor and manage quality issues in your audio/video recordings with more intuitive interfaces.
+  - link "📊 Real-time Monitoring Track performance metrics and health indicators of your audio/video processing systems in real time. [Superset]":
+    - /url: http://localhost:8088
+    - heading "📊 Real-time Monitoring" [level=4]
+    - paragraph: Track performance metrics and health indicators of your audio/video processing systems in real time. [Superset]
+  - paragraph:
+    - text: This project is under active development. Check back for updates or contribute on
+    - link "GitHub":
+      - /url: https://github.com/dheshanm/dpinterview-web
+    - text: .
+  - region "Notifications alt+T"

tests/__snapshots__/homepage.spec.ts/landing-page-sidebar-matches-snapshot-1.aria.yml

@@ -0,0 +1,42 @@
+- navigation "sidebar":
+  - list:
+    - listitem:
+      - link "AV QC Portal v0.2.0":
+        - /url: /
+        - img
+        - text: ""
+  - text: Navigation
+  - list:
+    - listitem:
+      - link "Issues":
+        - /url: /issues
+        - img
+        - text: ""
+      - button "Toggle":
+        - img
+        - text: ""
+    - listitem:
+      - link "Interviews":
+        - /url: /interviews
+        - img
+        - text: ""
+      - button "Toggle":
+        - img
+        - text: ""
+    - listitem:
+      - link "Audio Journals":
+        - /url: /journals
+        - img
+        - text: ""
+  - list:
+    - listitem:
+      - link "GitHub":
+        - /url: https://github.com/dheshanm/dpinterview-web
+        - img
+        - text: ""
+    - listitem:
+      - link "Superset":
+        - /url: http://localhost:8088
+        - img
+        - text: ""
+  - button "Toggle Sidebar"

tests/__snapshots__/homepage.spec.ts/landing-page-test-1.aria.yml

@@ -0,0 +1,28 @@
+- main:
+  - button "Toggle Sidebar":
+    - img
+    - text: ""
+  - navigation "breadcrumb":
+    - list:
+      - listitem:
+        - link "Home" [disabled]
+  - heading "👋 Welcome to AV QC Portal" [level=2]
+  - paragraph:
+    - text: This web portal is actively being developed as a companion to the
+    - link "AV QC pipeline":
+      - /url: https://github.com/dptools/dpinterview
+    - text: project, designed to streamline audiovisual quality control processes.
+  - link "🔍 Quality Control Monitor and manage quality issues in your audio/video recordings with more intuitive interfaces.":
+    - /url: /issues
+    - heading "🔍 Quality Control" [level=4]
+    - paragraph: Monitor and manage quality issues in your audio/video recordings with more intuitive interfaces.
+  - link "📊 Real-time Monitoring Track performance metrics and health indicators of your audio/video processing systems in real time. [Superset]":
+    - /url: http://localhost:8088
+    - heading "📊 Real-time Monitoring" [level=4]
+    - paragraph: Track performance metrics and health indicators of your audio/video processing systems in real time. [Superset]
+  - paragraph:
+    - text: This project is under active development. Check back for updates or contribute on
+    - link "GitHub":
+      - /url: https://github.com/dheshanm/dpinterview-web
+    - text: .
+  - region "Notifications alt+T"

tests/__snapshots__/interviews.spec.ts/Interviews-page-breadcrumbs-match-snapshot-1.aria.yml

@@ -0,0 +1,10 @@
+- button "Toggle Sidebar":
+  - img
+  - text: ""
+- navigation "breadcrumb":
+  - list:
+    - listitem:
+      - link "Home":
+        - /url: /
+    - listitem:
+      - link "Interviews" [disabled]

tests/__snapshots__/interviews.spec.ts/Interviews-page-sidebar-matches-snapshot-1.aria.yml

@@ -0,0 +1,49 @@
+- navigation "sidebar":
+  - list:
+    - listitem:
+      - link "AV QC Portal v0.2.0":
+        - /url: /
+        - img
+        - text: ""
+  - text: Navigation
+  - list:
+    - listitem:
+      - link "Issues":
+        - /url: /issues
+        - img
+        - text: ""
+      - button "Toggle":
+        - img
+        - text: ""
+    - listitem:
+      - link "Interviews":
+        - /url: /interviews
+        - img
+        - text: ""
+      - button "Toggle" [expanded]:
+        - img
+        - text: ""
+      - list:
+        - listitem:
+          - link "Pending QC":
+            - /url: /interviews/qc/pending
+        - listitem:
+          - link "Completed QC":
+            - /url: /interviews/qc/completed
+    - listitem:
+      - link "Audio Journals":
+        - /url: /journals
+        - img
+        - text: ""
+  - list:
+    - listitem:
+      - link "GitHub":
+        - /url: https://github.com/dheshanm/dpinterview-web
+        - img
+        - text: ""
+    - listitem:
+      - link "Superset":
+        - /url: http://localhost:8088
+        - img
+        - text: ""
+  - button "Toggle Sidebar"