Integrate PestPHP 4 Browser Tests

Signed-off-by: Mior Muhammad Zaki <crynobone@gmail.com>

Author: crynobone

.gitattributes

@@ -8,3 +8,4 @@
 
 CHANGELOG.md export-ignore
 README.md export-ignore
+.github/workflows/browser-test.yml export-ignore

.github/workflows/browser-tests.yml

@@ -0,0 +1,71 @@
+name: browser-tests
+
+on:
+  push:
+    branches:
+      - pest-ci
+      - develop
+      - main
+  pull_request:
+    branches:
+      - pest-ci
+      - develop
+      - main
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: 8.4
+          tools: composer:v2
+          coverage: xdebug
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'npm'
+
+      - name: Install Node Dependencies
+        run: npm ci
+
+      - name: Install Playwright Dependencies
+        run: npm install playwright@latest
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Add `laravel-labs/starter-kit-browser-tests` Repository
+        run: |
+          composer config repositories.browser-tests '{"type": "vcs", "url": "https://github.com/laravel-labs/starter-kit-browser-tests"}' --file composer.json
+          composer remove "phpunit/phpunit" --dev --no-update
+          composer require "laravel-labs/starter-kit-browser-tests:dev-main@dev" --dev --no-update
+
+      - name: Install Dependencies
+        run: composer install --no-interaction --prefer-dist --optimize-autoloader
+
+      - name: Copy Environment File
+        run: cp .env.example .env
+
+      - name: Generate Application Key
+        run: php artisan key:generate
+
+      - name: Setup Test Environment
+        run: |
+           cp vendor/laravel-labs/starter-kit-browser-tests/phpunit.xml.dist .
+           rm phpunit.xml
+           rm -Rf tests/
+           cp -rf vendor/laravel-labs/starter-kit-browser-tests/tests/ tests/
+
+      - name: Build Assets
+        run: npm run build
+
+      - name: Tests
+        run: php vendor/bin/pest

resources/js/components/DeleteUser.vue

@@ -33,7 +33,7 @@ const passwordInput = ref<InstanceType<typeof Input> | null>(null);
             </div>
             <Dialog>
                 <DialogTrigger as-child>
-                    <Button variant="destructive">Delete account</Button>
+                    <Button variant="destructive" data-test="delete-user-button">Delete account</Button>
                 </DialogTrigger>
                 <DialogContent>
                     <Form
@@ -75,7 +75,7 @@ const passwordInput = ref<InstanceType<typeof Input> | null>(null);
                                 </Button>
                             </DialogClose>
 
-                            <Button type="submit" variant="destructive" :disabled="processing"> Delete account </Button>
+                            <Button type="submit" variant="destructive" :disabled="processing" data-test="confirm-delete-user-button"> Delete account </Button>
                         </DialogFooter>
                     </Form>
                 </DialogContent>

resources/js/components/UserMenuContent.vue

@@ -35,7 +35,7 @@ defineProps<Props>();
     </DropdownMenuGroup>
     <DropdownMenuSeparator />
     <DropdownMenuItem :as-child="true">
-        <Link class="block w-full" :href="logout()" @click="handleLogout" as="button">
+        <Link class="block w-full" :href="logout()" @click="handleLogout" as="button" data-test="logout-button">
             <LogOut class="mr-2 h-4 w-4" />
             Log out
         </Link>

resources/js/pages/auth/ConfirmPassword.vue

@@ -31,7 +31,7 @@ import { LoaderCircle } from 'lucide-vue-next';
                 </div>
 
                 <div class="flex items-center">
-                    <Button class="w-full" :disabled="processing">
+                    <Button class="w-full" :disabled="processing" data-test="confirm-password-button">
                         <LoaderCircle v-if="processing" class="h-4 w-4 animate-spin" />
                         Confirm Password
                     </Button>

resources/js/pages/auth/ForgotPassword.vue

@@ -32,7 +32,7 @@ defineProps<{
                 </div>
 
                 <div class="my-6 flex items-center justify-start">
-                    <Button class="w-full" :disabled="processing">
+                    <Button class="w-full" :disabled="processing" data-test="email-password-reset-link-button">
                         <LoaderCircle v-if="processing" class="h-4 w-4 animate-spin" />
                         Email password reset link
                     </Button>

resources/js/pages/auth/Login.vue

@@ -72,7 +72,7 @@ defineProps<{
                     </Label>
                 </div>
 
-                <Button type="submit" class="mt-4 w-full" :tabindex="4" :disabled="processing">
+                <Button type="submit" class="mt-4 w-full" :tabindex="4" :disabled="processing" data-test="login-button">
                     <LoaderCircle v-if="processing" class="h-4 w-4 animate-spin" />
                     Log in
                 </Button>

resources/js/pages/auth/Register.vue

@@ -54,7 +54,7 @@ import { LoaderCircle } from 'lucide-vue-next';
                     <InputError :message="errors.password_confirmation" />
                 </div>
 
-                <Button type="submit" class="mt-2 w-full" tabindex="5" :disabled="processing">
+                <Button type="submit" class="mt-2 w-full" tabindex="5" :disabled="processing" data-test="register-user-button">
                     <LoaderCircle v-if="processing" class="h-4 w-4 animate-spin" />
                     Create account
                 </Button>

resources/js/pages/auth/ResetPassword.vue

@@ -61,7 +61,7 @@ const inputEmail = ref(props.email);
                     <InputError :message="errors.password_confirmation" />
                 </div>
 
-                <Button type="submit" class="mt-4 w-full" :disabled="processing">
+                <Button type="submit" class="mt-4 w-full" :disabled="processing" data-test="reset-password-button">
                     <LoaderCircle v-if="processing" class="h-4 w-4 animate-spin" />
                     Reset password
                 </Button>

resources/js/pages/settings/Password.vue

@@ -84,7 +84,7 @@ const currentPasswordInput = ref<HTMLInputElement | null>(null);
                     </div>
 
                     <div class="flex items-center gap-4">
-                        <Button :disabled="processing">Save password</Button>
+                        <Button :disabled="processing" data-test="update-password-button">Save password</Button>
 
                         <Transition
                             enter-active-class="transition ease-in-out"