test: add first playwright test

.gitignore

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

package.json

@@ -10,6 +10,7 @@
     "lint:format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\" --plugin-search-dir --ignore-path .gitignore",
     "lint:format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\" --plugin-search-dir --ignore-path .gitignore",
     "lint": "pnpm lint:fix && pnpm lint:format",
+    "test": "playwright test",
     "stripe:listen": "stripe listen --forward-to localhost:3000/api/webhooks/stripe --latest",
     "postinstall": "prisma generate",
     "prisma:generate": "prisma generate",
@@ -60,6 +61,7 @@
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^4.1.1",
+    "@playwright/test": "^1.39.0",
     "@types/eslint": "^8.44.6",
     "@types/negotiator": "^0.6.2",
     "@types/node": "20.8.7",

playwright.config.js

@@ -0,0 +1,108 @@
+/* eslint-disable notice/notice */
+
+import { defineConfig, devices } from '@playwright/test'
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+
+  /* Maximum time one test can run for. */
+  timeout: 15_000,
+
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5_000,
+  },
+
+  /* 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: {
+    /* 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: 'http://localhost: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',
+
+      /* Project-specific settings. */
+      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: {
+    //     channel: 'msedge',
+    //   },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: {
+    //     channel: 'chrome',
+    //   },
+    // },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  // outputDir: 'test-results/',
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   port: 3000,
+  // },
+})

src/components/auth/ButtonLogout.tsx

@@ -55,12 +55,12 @@ export function LogoutBtn() {
             variant="tertiary"
             className="mb-4 mr-0 block justify-center lg:mb-0 lg:mr-4"
           >
-            <Link href="/login" className="px-8 py-4">
+            <Link href="/login" className="btn-login px-8 py-4">
               Login
             </Link>
           </Button>
           <Button variant="primary" className="justify-center text-center">
-            <Link href="/register" className="px-8 py-4">
+            <Link href="/register" className="btn-register px-8 py-4">
               Sign-up
             </Link>
           </Button>

tests/fixture.js

@@ -0,0 +1,41 @@
+import i18nEn from '@/locale/messages/en'
+import i18nEs from '@/locale/messages/es'
+
+const i18nFixture = createI18nFixture({
+  // i18n configuration options
+  options: {
+    debug: false,
+    ns: ['translations'],
+    supportedLngs: ['fr', 'es'],
+    cleanCode: true,
+    resources: {
+      en: {
+        translations: i18nEn,
+      },
+      es: {
+        translations: i18nEs,
+      },
+    },
+  },
+  // Fetch translations in every test or fetch once
+  // Default: true
+  cache: true,
+  // Run as auto fixture to be available through all tests by getI18nInstance()
+  // Default: true
+  auto: true,
+})
+
+export const testI18n =
+  baseTest.extend(i18nFixture).extend <
+  { i18nFix: i18n } >
+  {
+    i18nFix: async ({ i18n, locale }, use) => {
+      if (locale === 'es-ES') {
+        i18n.changeLanguage('es')
+        await use(i18n)
+      } else {
+        i18n.changeLanguage('fr')
+        await use(i18n)
+      }
+    },
+  }

tests/homePage.spec.js

@@ -0,0 +1,26 @@
+const { test, expect } = require('@playwright/test')
+
+test.describe('Page tests', () => {
+  // berofe each test go to   http://localhost:3000/es
+  test.beforeEach(async ({ page }) => {
+    await page.goto('http://localhost:3000/es')
+  })
+
+  // Test for title
+  test('has title', async ({ page }) => {
+    await expect(page).toHaveTitle('Johan Guse | Frontend Developer')
+  })
+
+  // Test for redirect link
+  test('get started link(first) redirects to signin or paths', async ({
+    page,
+  }) => {
+    await page.locator('.btn-login').click()
+
+    if (process.env.AUTH === '1') {
+      await expect(page).toHaveURL(/signin/)
+    } else {
+      await expect(page).toHaveURL(/paths/)
+    }
+  })
+})

tests/navbarDesktop.spec.js

@@ -0,0 +1,27 @@
+import { browserContext, expect, test } from '@playwright/test'
+
+test.skip(process.env.AUTH === '1')
+
+// skip if mobile
+test.skip(({ isMobile }) => isMobile)
+
+// Test navbar on every page
+test.afterEach(async ({ page }) => {
+  // Runs after each test by checking navbar components
+
+  // skip if mobile
+  // test.skip(browserName != 'chromium', 'Mobile navbar different');
+
+  await expect(page.getByRole('link', { name: 'Login' })).toBeVisible()
+  await expect(page.getByRole('link', { name: 'Register' })).toBeVisible()
+})
+
+test('check navbar on /login', async ({ page }) => {
+  // ideally have this be authenticated
+  await page.goto('/login')
+})
+
+test('check navbar on /register', async ({ page }) => {
+  // ideally have this be authenticated
+  await page.goto('/register')
+})

tsconfig.json

@@ -32,7 +32,8 @@
     "**/*.tsx",
     "**/*.cjs",
     "**/*.mjs",
-    ".next/types/**/*.ts"
+    ".next/types/**/*.ts",
+    "tests/fixture.js"
   ],
   "exclude": ["node_modules"]
 }