[web] add vitest and playwight to next.js web app #1014 (#1016)

* added vitest

* added playwright + fixed title

agdb_web_next/.gitignore

@@ -34,3 +34,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

agdb_web_next/__tests__/components/layout/logo.test.tsx

@@ -0,0 +1,10 @@
+import { expect, describe, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Logo from "@/components/layout/logo";
+
+describe("logo", () => {
+    it("should render the logo", () => {
+        render(<Logo />);
+        expect(screen.getByText("agdb")).toBeDefined();
+    });
+});

agdb_web_next/e2e/example.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from "@playwright/test";
+
+test("should navigate to the about page", async ({ page }) => {
+    // Start from the index page (the baseURL is set via the webServer in the playwright.config.ts)
+    await page.goto("http://localhost:5001/");
+    // Find an element with the text 'About' and click on it
+    await page.click("text=About");
+    // The new URL should be "/about" (baseURL is used there)
+    await expect(page).toHaveURL("http://localhost:5001/about");
+    // The new page should contain an h1 with "About"
+    await expect(page.locator("h1")).toContainText("About");
+});

agdb_web_next/package.json

@@ -3,12 +3,15 @@
     "version": "0.1.0",
     "private": true,
     "scripts": {
-        "dev": "next dev",
+        "dev": "next dev -p 5001",
         "build": "next build",
         "start": "next start",
         "lint": "next lint",
         "format": "prettier . --write",
-        "format:check": "prettier . --check"
+        "format:check": "prettier . --check",
+        "test:unit": "vitest run --coverage",
+        "test:e2e": "playwright test",
+        "before-commit": "npm run format && npm run lint && npm run test:unit && npm run test:e2e"
     },
     "dependencies": {
         "next": "14.1.0",
@@ -18,13 +21,19 @@
         "react-dom": "^18"
     },
     "devDependencies": {
+        "@playwright/test": "^1.41.1",
+        "@testing-library/react": "^14.1.2",
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
+        "@vitejs/plugin-react": "^4.2.1",
+        "@vitest/coverage-v8": "^1.2.2",
         "eslint": "^8",
         "eslint-config-next": "14.1.0",
         "eslint-config-prettier": "^9.1.0",
+        "jsdom": "^24.0.0",
         "prettier": "^3.2.4",
-        "typescript": "^5"
+        "typescript": "^5",
+        "vitest": "^1.2.2"
     }
 }

agdb_web_next/playwright.config.ts

@@ -0,0 +1,77 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+    testDir: "./e2e",
+    /* 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://127.0.0.1:3000',
+
+        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+        trace: "on-first-retry",
+    },
+
+    /* 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 start",
+        url: "http://127.0.0.1:5001",
+        reuseExistingServer: !process.env.CI,
+    },
+});

agdb_web_next/theme.config.tsx

@@ -1,5 +1,29 @@
-import { DocsThemeConfig } from "nextra-theme-docs";
+import { DocsThemeConfig, useConfig } from "nextra-theme-docs";
 import Logo from "@/components/layout/logo";
+import { useRouter } from "next/router";
+
+const useHead = () => {
+    const { asPath, defaultLocale, locale } = useRouter();
+
+    const config = useConfig();
+
+    const url =
+        "https://my-app.com" +
+        (defaultLocale === locale ? asPath : `/${locale}${asPath}`);
+    const title = config.title ? `${config.title} | agdb` : "agdb";
+
+    return (
+        <>
+            <title>{title}</title>
+            <meta property="og:url" content={url} />
+            <meta property="og:title" content={title} />
+            <meta
+                property="og:description"
+                content={config.frontMatter.description || "agdb docs"}
+            />
+        </>
+    );
+};
 
 const config: DocsThemeConfig = {
     logo: Logo,
@@ -17,6 +41,7 @@ const config: DocsThemeConfig = {
         { locale: "en-US", text: "English" },
         { locale: "cs-CZ", text: "Čeština" },
     ],
+    head: useHead,
 };
 
 export default config;

agdb_web_next/vitest.config.ts

@@ -0,0 +1,34 @@
+import {
+    defineConfig,
+    coverageConfigDefaults,
+    configDefaults,
+} from "vitest/config";
+import react from "@vitejs/plugin-react";
+import path from "path";
+
+export default defineConfig({
+    plugins: [react()],
+    test: {
+        environment: "jsdom",
+        exclude: [...configDefaults.exclude, "e2e/*"],
+        root: path.resolve(__dirname, "."),
+        coverage: {
+            provider: "v8",
+            all: true,
+            exclude: [
+                ...coverageConfigDefaults.exclude,
+                "e2e/*",
+                "*.config.*",
+                "middleware.ts",
+            ],
+        },
+    },
+    build: {
+        target: ["es2015", "edge88", "firefox78", "chrome87", "safari12"],
+    },
+    resolve: {
+        alias: {
+            "@": path.resolve(__dirname, "."),
+        },
+    },
+});