playwright (#3)

* add playwright setup and tests for auth, profile and organization settings

* add playwright github action

* add sqlite database

* fix playwright base url

* add mailpit and parallelization

* remove additional waitForUrl in fixture

* fix tests

* remove waitforurl in tests

* change playwright github action to only one worker

* try promiso all to avoid loading errors

* change environment to include http protocol

* convert back to simpler structure

* add caching of playwright browser binaries

* test if playwright in ci works faster with multiple workers

* change back to one worker

* remove browser binary caching

* try using playwright container to speedup browser setup

* rollback image changes

* add playwright gitignore changes

---------

Co-authored-by: Gregor Vostrak <[email protected]>

.env.ci

@@ -0,0 +1,54 @@
+APP_NAME=Laravel
+APP_ENV=local
+APP_KEY=
+APP_DEBUG=true
+APP_URL=http://localhost
+
+LOG_CHANNEL=stack
+LOG_DEPRECATIONS_CHANNEL=null
+LOG_LEVEL=debug
+
+DB_CONNECTION=sqlite
+
+BROADCAST_DRIVER=log
+CACHE_DRIVER=file
+FILESYSTEM_DISK=local
+QUEUE_CONNECTION=sync
+SESSION_DRIVER=database
+SESSION_LIFETIME=120
+
+MEMCACHED_HOST=127.0.0.1
+
+REDIS_HOST=127.0.0.1
+REDIS_PASSWORD=null
+REDIS_PORT=6379
+
+MAIL_MAILER=smtp
+MAIL_HOST=mailpit
+MAIL_PORT=1025
+MAIL_USERNAME=null
+MAIL_PASSWORD=null
+MAIL_ENCRYPTION=null
+MAIL_FROM_ADDRESS="[email protected]"
+MAIL_FROM_NAME="${APP_NAME}"
+
+AWS_ACCESS_KEY_ID=
+AWS_SECRET_ACCESS_KEY=
+AWS_DEFAULT_REGION=us-east-1
+AWS_BUCKET=
+AWS_USE_PATH_STYLE_ENDPOINT=false
+
+PUSHER_APP_ID=
+PUSHER_APP_KEY=
+PUSHER_APP_SECRET=
+PUSHER_HOST=
+PUSHER_PORT=443
+PUSHER_SCHEME=https
+PUSHER_APP_CLUSTER=mt1
+
+VITE_APP_NAME="${APP_NAME}"
+VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
+VITE_PUSHER_HOST="${PUSHER_HOST}"
+VITE_PUSHER_PORT="${PUSHER_PORT}"
+VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
+VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

.github/workflows/playwright.yml

@@ -0,0 +1,63 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    services:
+      mailpit:
+        image: 'axllent/mailpit:latest'
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Setup PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: '8.2'
+          extensions: dom, curl, libxml, mbstring, zip, pcntl, pdo, sqlite, pdo_sqlite, bcmath, soap, intl, gd, exif, iconv
+          coverage: none
+
+      - name: Run composer install
+        run: composer install -n --prefer-dist
+
+      - name: Create SQLite database
+        run: touch database/database.sqlite
+
+      - name: Prepare Laravel Application
+        run: |
+          cp .env.ci .env
+          php artisan key:generate
+          php artisan migrate --seed
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build Frontend
+        run: npm run build
+
+      - name: Run Laravel Server
+        run: php artisan serve > /dev/null 2>&1 &
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: npx playwright test
+        env:
+          PLAYWRIGHT_BASE_URL: 'http://127.0.0.1:8000'
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+

.gitignore

@@ -20,3 +20,7 @@ yarn-error.log
 /.fleet
 /.idea
 /.vscode
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

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.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,50 @@
+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 page.reload();
+    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 page.reload();
+    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`
+    );
+});