add playwright e2e support for extensions

.github/workflows/playwright-extensions.yml

@@ -0,0 +1,185 @@
+name: Playwright Tests - Extensions
+on: push
+permissions:
+  contents: read
+jobs:
+  test:
+    name: test (${{ matrix.variant }})
+    runs-on: ubuntu-latest
+    timeout-minutes: 60
+
+    # Same extension sets as build-private.yml and build-onpremise.yml, so the extension specs run
+    # with and without Billing.
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - variant: private
+            billing: true
+            extensions: Billing Services Invoicing
+          - variant: onpremise
+            billing: false
+            extensions: Invoicing
+
+    services:
+      mailpit:
+        image: 'axllent/mailpit:latest'
+        ports:
+          - 1025:1025
+          - 8025:8025
+      pgsql_test:
+        image: postgres:15
+        env:
+          PGPASSWORD: 'root'
+          POSTGRES_DB: 'laravel'
+          POSTGRES_USER: 'root'
+          POSTGRES_PASSWORD: 'root'
+        ports:
+          - 5432:5432
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+      gotenberg:
+        image: gotenberg/gotenberg:8
+        ports:
+          - 3000:3000
+        options: >-
+          --health-cmd "curl --silent --fail http://localhost:3000/health"
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+
+    steps:
+      - name: "Checkout code"
+        uses: actions/checkout@v7
+
+      - name: "Setup node"
+        uses: actions/setup-node@v7
+        with:
+          node-version: '20.x'
+
+      - name: "Setup PHP"
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: '8.3'
+          extensions: dom, curl, libxml, mbstring, zip, pcntl, pdo, pdo_sqlite, bcmath, soap, intl, gd, exif, iconv
+          coverage: none
+
+      - name: "Read extension manifest"
+        id: extension-manifest
+        run: |
+          {
+            echo "billing_repository=$(jq -r '.Billing.repository' extensions/manifest.json)"
+            echo "billing_ref=$(jq -r '.Billing.ref' extensions/manifest.json)"
+            echo "services_repository=$(jq -r '.Services.repository' extensions/manifest.json)"
+            echo "services_ref=$(jq -r '.Services.ref' extensions/manifest.json)"
+            echo "invoicing_repository=$(jq -r '.Invoicing.repository' extensions/manifest.json)"
+            echo "invoicing_ref=$(jq -r '.Invoicing.ref' extensions/manifest.json)"
+          } >> "$GITHUB_OUTPUT"
+
+      - name: "Checkout billing extension"
+        if: matrix.billing
+        uses: actions/checkout@v7
+        with:
+          repository: ${{ steps.extension-manifest.outputs.billing_repository }}
+          ref: ${{ steps.extension-manifest.outputs.billing_ref }}
+          path: extensions/Billing
+          ssh-key: ${{ secrets.SSH_PRIVATE_KEY_BILLING_EXTENSION }}
+
+      - name: "Install composer dependencies in billing extension"
+        if: matrix.billing
+        working-directory: extensions/Billing
+        env:
+          COMPOSER_AUTH: '{"http-basic": {"spark.laravel.com": {"username": "contact@solidtime.io", "password": "${{ secrets.LARAVEL_SPARK_API_KEY }}"}}}'
+        run: composer install -n --prefer-dist --ignore-platform-reqs
+
+      - name: "Install npm dependencies in billing extension"
+        if: matrix.billing
+        run: cd extensions/Billing && npm ci
+
+      - name: "Checkout services extension"
+        if: matrix.billing
+        uses: actions/checkout@v7
+        with:
+          repository: ${{ steps.extension-manifest.outputs.services_repository }}
+          ref: ${{ steps.extension-manifest.outputs.services_ref }}
+          path: extensions/Services
+          ssh-key: ${{ secrets.SSH_PRIVATE_KEY_SERVICES_EXTENSION }}
+
+      - name: "Install composer dependencies in services extension"
+        if: matrix.billing
+        working-directory: extensions/Services
+        run: composer install -n --prefer-dist --ignore-platform-reqs
+
+      - name: "Install npm dependencies in services extension"
+        if: matrix.billing
+        run: cd extensions/Services && npm ci
+
+      - name: "Checkout invoicing extension"
+        uses: actions/checkout@v7
+        with:
+          repository: ${{ steps.extension-manifest.outputs.invoicing_repository }}
+          ref: ${{ steps.extension-manifest.outputs.invoicing_ref }}
+          path: extensions/Invoicing
+          ssh-key: ${{ secrets.SSH_PRIVATE_KEY_INVOICING_EXTENSION }}
+
+      - name: "Install composer dependencies in invoicing extension"
+        working-directory: extensions/Invoicing
+        run: composer install -n --prefer-dist --ignore-platform-reqs
+
+      - name: "Install npm dependencies in invoicing extension"
+        run: cd extensions/Invoicing && npm ci
+
+      - name: "Run composer install"
+        run: composer install -n --prefer-dist
+
+      # Must run before `migrate` so the extensions' migrations are applied, and before the
+      # frontend build so vite collects the extensions' assets. It also writes
+      # modules_statuses.json, which playwright.config.ts reads to collect the extension specs.
+      - name: "Activate extensions"
+        run: |
+          for extension in ${{ matrix.extensions }}; do
+            php artisan module:enable "$extension"
+          done
+
+      - name: "Prepare Laravel Application"
+        run: |
+          cp .env.ci .env
+          php artisan key:generate
+          php artisan passport:keys
+          php artisan migrate --seed
+
+      - name: "Install dependencies"
+        run: npm ci
+
+      - name: "Build Frontend"
+        run: npm run build
+
+      - name: "Install FrankenPHP"
+        run: |
+          ARCH="$(uname -m)"
+          curl -fsSL "https://github.com/dunglas/frankenphp/releases/latest/download/frankenphp-linux-${ARCH}" -o /usr/local/bin/frankenphp
+          chmod +x /usr/local/bin/frankenphp
+
+      - name: "Run Laravel Octane Server"
+        run: php artisan octane:start --server=frankenphp --host=127.0.0.1 --port=8000 --workers=4 --max-requests=500 > /dev/null 2>&1 &
+        env:
+          OCTANE_SERVER: frankenphp
+
+      - name: "Install Playwright Browsers"
+        run: npx playwright install --with-deps
+
+      # Only the extension specs, the core specs run without extensions in playwright.yml
+      - name: "Run Playwright tests"
+        run: npx playwright test extensions/
+        env:
+          PLAYWRIGHT_BASE_URL: 'http://127.0.0.1:8000'
+          MAILPIT_BASE_URL: 'http://localhost:8025'
+
+      # No artifacts are uploaded on purpose. This repository is public, so every artifact is
+      # downloadable by anyone, and Playwright's reports carry the source of the specs that
+      # produced them (traces embed whole source files, error-context.md embeds a window of the
+      # spec). Those specs live in the private extension repositories. Failures are diagnosed from
+      # the job log; to inspect a trace, reproduce the failure locally with the extension checked out.

app/Service/DeletionService.php

@@ -11,6 +11,7 @@ use App\Models\Client;
 use App\Models\Member;
 use App\Models\Organization;
 use App\Models\OrganizationInvitation;
+use App\Models\Passport\RefreshToken;
 use App\Models\Project;
 use App\Models\ProjectMember;
 use App\Models\Report;
@@ -169,6 +170,10 @@ class DeletionService
             }
         }
 
+        // Refresh tokens are not linked to the user directly, so they need to be deleted via their access tokens.
+        // Otherwise a still-valid refresh token could be used to issue a new access token for a deleted user,
+        // which fails with a foreign key violation on oauth_access_tokens.user_id.
+        RefreshToken::query()->whereIn('access_token_id', $user->accessTokens()->pluck('id'))->delete();
         $user->accessTokens()->delete();
         $user->authCodes()->delete();
 

extensions/manifest.json

@@ -1,7 +1,7 @@
 {
     "Billing": {
         "repository": "solidtime-io/extension-billing",
-        "ref": "v0.0.7"
+        "ref": "v0.0.8"
     },
     "Services": {
         "repository": "solidtime-io/extension-services",
@@ -9,7 +9,7 @@
     },
     "Invoicing": {
         "repository": "solidtime-io/extension-invoicing",
-        "ref": "v0.0.7"
+        "ref": "main"
     },
     "Auditing": {
         "repository": "solidtime-io/extension-auditing",

playwright.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig, devices } from '@playwright/test';
+import { existsSync, readFileSync } from 'node:fs';
 
 /**
  * Read environment variables from file.
@@ -6,11 +7,57 @@ import { defineConfig, devices } from '@playwright/test';
  */
 // require('dotenv').config();
 
+/**
+ * Extensions ship their e2e specs in extensions/<Name>/tests/e2e. Only the specs of extensions
+ * that are enabled in modules_statuses.json (php artisan module:enable <Name>) are collected,
+ * a checked out but disabled extension would fail its specs otherwise.
+ */
+function enabledExtensions(): string[] {
+    const statusesFile = './modules_statuses.json';
+    if (!existsSync(statusesFile)) {
+        return [];
+    }
+    const statuses: Record<string, boolean> = JSON.parse(readFileSync(statusesFile, 'utf-8'));
+    return Object.entries(statuses)
+        .filter(([, enabled]) => enabled)
+        .map(([name]) => name);
+}
+
+/*
+ * Every test root gets its own testDir (instead of testDir: '.') so playwright does not walk the
+ * whole repository, including node_modules, vendor and nested worktrees, to find the specs.
+ */
+const testRoots = [
+    { suffix: '', testDir: './e2e' },
+    ...enabledExtensions().map((name) => ({
+        suffix: '-' + name,
+        testDir: `./extensions/${name}/tests/e2e`,
+    })),
+];
+
+const browsers = [
+    {
+        name: 'chromium',
+        use: { ...devices['Desktop Chrome'] },
+    },
+
+    // Firefox only in CI to keep local runs fast
+    ...(process.env.CI
+        ? [
+              {
+                  name: 'firefox',
+                  use: { ...devices['Desktop Firefox'] },
+              },
+          ]
+        : []),
+];
+
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-    testDir: './e2e',
+    /* Resolves the @e2e/* and @e2e-support/* aliases that extension specs import core helpers with */
+    tsconfig: './tsconfig.json',
     /* Run tests in files in parallel */
     fullyParallel: true,
     /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -32,23 +79,14 @@ export default defineConfig({
 
     timeout: 20 * 1000,
 
-    /* Configure projects for major browsers */
-    projects: [
-        {
-            name: 'chromium',
-            use: { ...devices['Desktop Chrome'] },
-        },
-
-        // Firefox only in CI to keep local runs fast
-        ...(process.env.CI
-            ? [
-                  {
-                      name: 'firefox',
-                      use: { ...devices['Desktop Firefox'] },
-                  },
-              ]
-            : []),
-    ],
+    /* Configure projects for major browsers, core specs keep the plain browser project name */
+    projects: browsers.flatMap((browser) =>
+        testRoots.map((root) => ({
+            name: browser.name + root.suffix,
+            testDir: root.testDir,
+            use: browser.use,
+        }))
+    ),
 
     /* Run your local dev server before starting the tests */
     // webServer: {

resources/js/packages/ui/src/TimeTracker/TimeTrackerEntryInput.vue

@@ -168,6 +168,10 @@ defineExpose({ submit, focusAfterStart });
         data-testid="time_entry_description"
         class="w-full rounded-l-lg py-4 sm:py-2.5 px-3.5 border-b border-b-card-background-separator @2xl:px-4 text-base text-text-primary bg-transparent border-none placeholder-text-secondary focus:ring-0 transition"
         type="text"
+        autocomplete="off"
+        data-1p-ignore
+        data-lpignore="true"
+        data-form-type="other"
         @keydown.enter="submit"
         @keydown.esc="showDropdown = false"
         @blur="updateTimeEntryDescription" />

resources/js/packages/ui/src/TimeTracker/TimeTrackerRangeSelector.vue

@@ -170,6 +170,10 @@ function closeAndFocusInput() {
                             : 'text-text-primary bg-card-background border-border-secondary border border-none'
                     "
                     type="text"
+                    autocomplete="off"
+                    data-1p-ignore
+                    data-lpignore="true"
+                    data-form-type="other"
                     @focusin="openModalOnTab"
                     @click="openModalOnClick"
                     @keydown.exact.tab="focusNextElement"

resources/js/utils/notification.ts

@@ -19,7 +19,7 @@ export const useNotificationsStore = defineStore('notifications', () => {
     const showActionBlockedModal = ref(false);
 
     function addNotification(type: NotificationType, title: string, message?: string) {
-        const uuid = crypto.randomUUID();
+        const uuid = Math.random().toString(36).substring(7);
         notifications.value.push({ title, message, type, uuid });
 
         setTimeout(() => {

tests/Unit/Service/DeletionServiceTest.php

@@ -10,6 +10,9 @@ use App\Exceptions\Api\CanNotDeleteUserWhoIsOwnerOfOrganizationWithMultipleMembe
 use App\Models\Client;
 use App\Models\Member;
 use App\Models\Organization;
+use App\Models\Passport\Client as PassportClient;
+use App\Models\Passport\RefreshToken;
+use App\Models\Passport\Token;
 use App\Models\Project;
 use App\Models\ProjectMember;
 use App\Models\Report;
@@ -23,6 +26,7 @@ use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\Event;
 use Illuminate\Support\Facades\Log;
 use Illuminate\Support\Facades\Storage;
+use Illuminate\Support\Str;
 use PHPUnit\Framework\Attributes\CoversClass;
 use Tests\TestCaseWithDatabase;
 use TiMacDonald\Log\LogEntry;
@@ -424,4 +428,45 @@ class DeletionServiceTest extends TestCaseWithDatabase
             'role' => Role::Placeholder->value,
         ]);
     }
+
+    public function test_delete_user_deletes_access_tokens_and_their_refresh_tokens_but_does_not_delete_tokens_of_other_users(): void
+    {
+        // Arrange
+        $user = User::factory()->create();
+        $otherUser = User::factory()->create();
+        $passportClient = PassportClient::factory()->create();
+
+        $userToken = Token::factory()->forUser($user)->forClient($passportClient)->create();
+        $userRefreshToken = RefreshToken::query()->create([
+            'id' => Str::random(100),
+            'access_token_id' => $userToken->getKey(),
+            'revoked' => false,
+            'expires_at' => now()->addDays(30),
+        ]);
+
+        $otherUserToken = Token::factory()->forUser($otherUser)->forClient($passportClient)->create();
+        $otherUserRefreshToken = RefreshToken::query()->create([
+            'id' => Str::random(100),
+            'access_token_id' => $otherUserToken->getKey(),
+            'revoked' => false,
+            'expires_at' => now()->addDays(30),
+        ]);
+
+        // Act
+        $this->deletionService->deleteUser($user);
+
+        // Assert
+        $this->assertDatabaseMissing(Token::class, [
+            'id' => $userToken->getKey(),
+        ]);
+        $this->assertDatabaseMissing(RefreshToken::class, [
+            'id' => $userRefreshToken->getKey(),
+        ]);
+        $this->assertDatabaseHas(Token::class, [
+            'id' => $otherUserToken->getKey(),
+        ]);
+        $this->assertDatabaseHas(RefreshToken::class, [
+            'id' => $otherUserRefreshToken->getKey(),
+        ]);
+    }
 }

tsconfig.json

@@ -6,7 +6,9 @@
   "compilerOptions": {
     "paths": {
       "@/*": ["./resources/js/*"],
-      "@solidtime/ui": ["./resources/js/packages/ui/src/index.ts"]
+      "@solidtime/ui": ["./resources/js/packages/ui/src/index.ts"],
+      "@e2e/*": ["./e2e/*"],
+      "@e2e-support/*": ["./playwright/*"]
     }
   },
   "skipLibCheck": true,