Integrate PestPHP 4 Browser Tests

.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/delete-user.tsx

@@ -22,7 +22,7 @@ export default function DeleteUser() {
 
                 <Dialog>
                     <DialogTrigger asChild>
-                        <Button variant="destructive">Delete account</Button>
+                        <Button variant="destructive" data-test="delete-user-button">Delete account</Button>
                     </DialogTrigger>
                     <DialogContent>
                         <DialogTitle>Are you sure you want to delete your account?</DialogTitle>
@@ -67,7 +67,7 @@ export default function DeleteUser() {
                                         </DialogClose>
 
                                         <Button variant="destructive" disabled={processing} asChild>
-                                            <button type="submit">Delete account</button>
+                                            <button type="submit" data-test="confirm-delete-user-button">Delete account</button>
                                         </Button>
                                     </DialogFooter>
                                 </>

resources/js/components/user-menu-content.tsx

@@ -37,7 +37,7 @@ export function UserMenuContent({ user }: UserMenuContentProps) {
             </DropdownMenuGroup>
             <DropdownMenuSeparator />
             <DropdownMenuItem asChild>
-                <Link className="block w-full" href={logout()} as="button" onClick={handleLogout}>
+                <Link className="block w-full" href={logout()} as="button" onClick={handleLogout} data-test="logout-button">
                     <LogOut className="mr-2" />
                     Log out
                 </Link>

resources/js/layouts/settings/layout.tsx

@@ -2,7 +2,7 @@ import Heading from '@/components/heading';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
 import { cn } from '@/lib/utils';
-import { appearance } from '@/routes';
+import { edit as editAppearance } from '@/routes/appearance';
 import { edit as editPassword } from '@/routes/password';
 import { edit } from '@/routes/profile';
 import { type NavItem } from '@/types';
@@ -22,7 +22,7 @@ const sidebarNavItems: NavItem[] = [
     },
     {
         title: 'Appearance',
-        href: appearance(),
+        href: editAppearance(),
         icon: null,
     },
 ];

resources/js/pages/auth/confirm-password.tsx

@@ -26,7 +26,7 @@ export default function ConfirmPassword() {
                         </div>
 
                         <div className="flex items-center">
-                            <Button className="w-full" disabled={processing}>
+                            <Button className="w-full" disabled={processing} data-test="confirm-password-button">
                                 {processing && <LoaderCircle className="h-4 w-4 animate-spin" />}
                                 Confirm password
                             </Button>

resources/js/pages/auth/forgot-password.tsx

@@ -30,7 +30,7 @@ export default function ForgotPassword({ status }: { status?: string }) {
                             </div>
 
                             <div className="my-6 flex items-center justify-start">
-                                <Button className="w-full" disabled={processing}>
+                                <Button className="w-full" disabled={processing} data-test="email-password-reset-link-button">
                                     {processing && <LoaderCircle className="h-4 w-4 animate-spin" />}
                                     Email password reset link
                                 </Button>

resources/js/pages/auth/login.tsx

@@ -66,7 +66,7 @@ export default function Login({ status, canResetPassword }: LoginProps) {
                                 <Label htmlFor="remember">Remember me</Label>
                             </div>
 
-                            <Button type="submit" className="mt-4 w-full" tabIndex={4} disabled={processing}>
+                            <Button type="submit" className="mt-4 w-full" tabIndex={4} disabled={processing} data-test="login-button">
                                 {processing && <LoaderCircle className="h-4 w-4 animate-spin" />}
                                 Log in
                             </Button>

resources/js/pages/auth/register.tsx

@@ -80,7 +80,7 @@ export default function Register() {
                                 <InputError message={errors.password_confirmation} />
                             </div>
 
-                            <Button type="submit" className="mt-2 w-full" tabIndex={5}>
+                            <Button type="submit" className="mt-2 w-full" tabIndex={5} data-test="register-user-button">
                                 {processing && <LoaderCircle className="h-4 w-4 animate-spin" />}
                                 Create account
                             </Button>

resources/js/pages/auth/reset-password.tsx

@@ -58,7 +58,7 @@ export default function ResetPassword({ token, email }: ResetPasswordProps) {
                             <InputError message={errors.password_confirmation} className="mt-2" />
                         </div>
 
-                        <Button type="submit" className="mt-4 w-full" disabled={processing}>
+                        <Button type="submit" className="mt-4 w-full" disabled={processing} data-test="reset-password-button">
                             {processing && <LoaderCircle className="h-4 w-4 animate-spin" />}
                             Reset password
                         </Button>

resources/js/pages/settings/appearance.tsx

@@ -6,12 +6,12 @@ import { type BreadcrumbItem } from '@/types';
 
 import AppLayout from '@/layouts/app-layout';
 import SettingsLayout from '@/layouts/settings/layout';
-import { appearance } from '@/routes';
+import { edit as editAppearance } from '@/routes/appearance';
 
 const breadcrumbs: BreadcrumbItem[] = [
     {
         title: 'Appearance settings',
-        href: appearance().url,
+        href: editAppearance().url,
     },
 ];
 

resources/js/pages/settings/password.tsx

@@ -100,7 +100,7 @@ export default function Password() {
                                 </div>
 
                                 <div className="flex items-center gap-4">
-                                    <Button disabled={processing}>Save password</Button>
+                                    <Button disabled={processing} data-test="update-password-button">Save password</Button>
 
                                     <Transition
                                         show={recentlySuccessful}

resources/js/pages/settings/profile.tsx

@@ -96,7 +96,7 @@ export default function Profile({ mustVerifyEmail, status }: { mustVerifyEmail:
                                 )}
 
                                 <div className="flex items-center gap-4">
-                                    <Button disabled={processing}>Save</Button>
+                                    <Button disabled={processing} data-test="update-profile-button">Save</Button>
 
                                     <Transition
                                         show={recentlySuccessful}

routes/settings.php

@@ -20,5 +20,5 @@
 
     Route::get('settings/appearance', function () {
         return Inertia::render('settings/appearance');
-    })->name('appearance');
+    })->name('appearance.edit');
 });