add playwright setup and tests for auth, profile and organization set…

…tings

README.md

@@ -34,9 +34,24 @@ Additional System Requirements:
 Add the following entry to your `/etc/hosts`
 
 ```
-127.0.0.1 time-tracking.local
+127.0.0.1 timetracker.test
+127.0.0.1 playwright.timetracker.test
 ```
 
+## Running E2E Tests
+
+`./vendor/bin/sail up -d ` will automatically start a Playwright UI server that you can access at `https://playwright.timetracker.test`. 
+Make sure that you use HTTPS otherwise the resources will not be loaded correctly.
+
+## Recording E2E Tests
+
+To record E2E tests, you need to install and execute playwright locally using: 
+
+```bash
+npx playwright install
+npx playwright codegen timetracker.test
+``` 
+
 ## Contributing
 
 This project is in a very early stage. The structure and APIs are still subject to change and not stable. 

docker-compose.yml

@@ -57,6 +57,31 @@ services:
                 - '${DB_USERNAME}'
             retries: 3
             timeout: 5s
+    mailpit:
+        image: 'axllent/mailpit:latest'
+        ports:
+            - '${FORWARD_MAILPIT_PORT:-1025}:1025'
+            - '${FORWARD_MAILPIT_DASHBOARD_PORT:-8025}:8025'
+        networks:
+            - sail
+    playwright:
+        image: mcr.microsoft.com/playwright:v1.41.1-jammy
+        command: ['npx', 'playwright', 'test', '--ui-port=8080', '--ui-host=0.0.0.0']
+        working_dir: /src
+        labels:
+            - "traefik.enable=true"
+            - "traefik.docker.network=${NETWORK_NAME}"
+            - "traefik.http.routers.playwright.rule=Host(`playwright.${NGINX_HOST_NAME}`)"
+            - "traefik.http.routers.playwright.entrypoints=web"
+            - "traefik.http.services.playwright.loadbalancer.server.port=8080"
+            - "traefik.http.routers.playwright-https.rule=Host(`playwright.${NGINX_HOST_NAME}`)"
+            - "traefik.http.routers.playwright-https.entrypoints=websecure"
+            - "traefik.http.routers.playwright-https.tls=true"
+        networks:
+            - sail
+            - reverse-proxy
+        volumes:
+            - '.:/src'
 networks:
     reverse-proxy:
         name: "${NETWORK_NAME}"

e2e/auth.spec.ts

@@ -0,0 +1,54 @@
+import { expect, test } from '@playwright/test';
+import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
+
+async function registerNewUser(page, email, password) {
+    await page.getByRole('link', { name: 'Register' }).click();
+    await page.getByLabel('Name').fill('John Doe');
+    await page.getByLabel('Email').fill(email);
+    await page.getByLabel('Password', { exact: true }).fill(password);
+    await page.getByLabel('Confirm Password').fill(password);
+    await page.getByRole('button', { name: 'Register' }).click();
+    await expect(
+        page.getByRole('heading', { name: 'Dashboard' })
+    ).toBeVisible();
+}
+
+test('can register, logout and log back in', async ({ page }) => {
+    await page.goto(PLAYWRIGHT_BASE_URL);
+    const email = `john+${Math.round(Math.random() * 10000)}@doe.com`;
+    const password = 'suchagreatpassword123';
+    await registerNewUser(page, email, password);
+    await expect(
+        page.getByRole('button', { name: "John's Organization" })
+    ).toBeVisible();
+    await page.locator('#currentUserButton').click();
+    await page.getByRole('button', { name: 'Log Out' }).click();
+    await page.waitForLoadState('networkidle');
+    await page.waitForURL(PLAYWRIGHT_BASE_URL + '/');
+    await page.goto(PLAYWRIGHT_BASE_URL + '/login');
+    await page.getByLabel('Email').fill(email);
+    await page.getByLabel('Password').fill(password);
+    await page.getByRole('button', { name: 'Log in' }).click();
+    await expect(
+        page.getByRole('heading', { name: 'Dashboard' })
+    ).toBeVisible();
+});
+
+test('can register and delete account', async ({ page }) => {
+    await page.goto(PLAYWRIGHT_BASE_URL);
+    const email = `john+${Math.round(Math.random() * 10000)}@doe.com`;
+    const password = 'suchagreatpassword123';
+    await registerNewUser(page, email, password);
+    await page.goto(PLAYWRIGHT_BASE_URL + '/user/profile');
+    await page.getByRole('button', { name: 'Delete Account' }).click();
+    await page.getByPlaceholder('Password').fill(password);
+    await page.getByRole('button', { name: 'Delete Account' }).nth(1).click();
+    await page.waitForURL(PLAYWRIGHT_BASE_URL + '/');
+    await page.goto(PLAYWRIGHT_BASE_URL + '/login');
+    await page.getByLabel('Email').fill(email);
+    await page.getByLabel('Password').fill(password);
+    await page.getByRole('button', { name: 'Log in' }).click();
+    await expect(page.getByRole('paragraph')).toContainText(
+        'These credentials do not match our records.'
+    );
+});

e2e/organization.spec.ts

@@ -0,0 +1,48 @@
+import { test, expect } from '../playwright/fixtures';
+import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
+
+async function goToOrganizationSettings(page) {
+    await page.goto(PLAYWRIGHT_BASE_URL + '/dashboard');
+    await page.locator('#currentTeamButton').click();
+    await page.getByRole('link', { name: 'Team Settings' }).click();
+}
+
+test('test that organization name can be updated', async ({ page }) => {
+    await goToOrganizationSettings(page);
+    await page.getByLabel('Team Name').fill('NEW ORG NAME');
+    await page.getByLabel('Team Name').press('Enter');
+    await page.getByLabel('Team Name').press('Meta+r');
+    await expect(page.getByRole('navigation')).toContainText('NEW ORG NAME');
+});
+
+test('test that new editor can be invited', async ({ page }) => {
+    await goToOrganizationSettings(page);
+    const editorId = Math.round(Math.random() * 10000);
+    await page.getByLabel('Email').fill(`new+${editorId}@editor.test`);
+    await page.getByRole('button', { name: 'Editor' }).click();
+    await page.getByRole('button', { name: 'Add' }).click();
+    await expect(page.getByRole('main')).toContainText(
+        `new+${editorId}@editor.test`
+    );
+});
+
+test('test that new admin can be invited', async ({ page }) => {
+    await goToOrganizationSettings(page);
+    const adminId = Math.round(Math.random() * 10000);
+    await page.getByLabel('Email').fill(`new+${adminId}@admin.test`);
+    await page.getByRole('button', { name: 'Administrator' }).click();
+    await page.getByRole('button', { name: 'Add' }).click();
+    await expect(page.getByRole('main')).toContainText(
+        `new+${adminId}@admin.test`
+    );
+});
+test('test that error shows if no role is selected', async ({ page }) => {
+    await goToOrganizationSettings(page);
+    const noRoleId = Math.round(Math.random() * 10000);
+
+    await page.getByLabel('Email').fill(`new+${noRoleId}@norole.test`);
+    await page.getByRole('button', { name: 'Add' }).click();
+    await expect(page.getByRole('main')).toContainText(
+        'The role field is required.'
+    );
+});

e2e/profile.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from '../playwright/fixtures';
+import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
+
+test('test that user name can be updated', async ({ page }) => {
+    await page.goto(PLAYWRIGHT_BASE_URL + '/user/profile');
+    await page.getByLabel('Name').fill('NEW NAME');
+    await page.getByRole('button', { name: 'Save' }).first().click();
+    await page.reload();
+    await expect(page.getByLabel('Name')).toHaveValue('NEW NAME');
+});
+
+test('test that user email can be updated', async ({ page }) => {
+    await page.goto(PLAYWRIGHT_BASE_URL + '/user/profile');
+    const emailId = Math.round(Math.random() * 10000);
+    await page.getByLabel('Email').fill(`newemail+${emailId}@test.com`);
+    await page.getByRole('button', { name: 'Save' }).first().click();
+    await page.reload();
+    await expect(page.getByLabel('Email')).toHaveValue(
+        `newemail+${emailId}@test.com`
+    );
+});

package.json

@@ -6,12 +6,15 @@
         "build": "vite build",
         "lint": "eslint --ext .js,.vue,.ts --ignore-path .gitignore .",
         "lint:fix": "eslint --fix --ext .js,.vue,.ts --ignore-path .gitignore .",
-        "type-check": "vue-tsc --noEmit"
+        "type-check": "vue-tsc --noEmit",
+        "test:e2e": "npx playwright test"
     },
     "devDependencies": {
         "@inertiajs/vue3": "^1.0.0",
+        "@playwright/test": "^1.41.1",
         "@tailwindcss/forms": "^0.5.2",
         "@tailwindcss/typography": "^0.5.2",
+        "@types/node": "^20.11.5",
         "@types/ziggy-js": "^1.8.0",
         "@vitejs/plugin-vue": "^4.5.0",
         "@vue/tsconfig": "^0.5.1",

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:3000',
+    //   reuseExistingServer: !process.env.CI,
+    // },
+});

playwright/config.ts

@@ -0,0 +1 @@
+export const PLAYWRIGHT_BASE_URL = 'http://laravel.test';