Adding more dusk tests

.env.dusk.ci

@@ -0,0 +1,60 @@
+APP_NAME='DevDojo Auth'
+APP_ENV=testing
+APP_KEY=base64:La7oMA4FgO9U3dEgYzu7UwlpYjFvGKSgP2uwnkbaPK8=
+APP_DEBUG=true
+APP_TIMEZONE=UTC
+APP_URL=http://127.0.0.1:8000
+
+APP_LOCALE=en
+APP_FALLBACK_LOCALE=en
+APP_FAKER_LOCALE=en_US
+
+APP_MAINTENANCE_DRIVER=file
+APP_MAINTENANCE_STORE=database
+
+BCRYPT_ROUNDS=12
+
+LOG_CHANNEL=stack
+LOG_STACK=single
+LOG_DEPRECATIONS_CHANNEL=null
+LOG_LEVEL=debug
+
+DB_CONNECTION=sqlite
+DB_DATABASE=/home/runner/work/auth/auth/laravel_app/database/dusk.sqlite
+
+SESSION_DRIVER=file
+SESSION_LIFETIME=120
+SESSION_ENCRYPT=false
+SESSION_PATH=/
+SESSION_DOMAIN=null
+
+BROADCAST_CONNECTION=log
+FILESYSTEM_DISK=local
+QUEUE_CONNECTION=database
+
+CACHE_STORE=file
+CACHE_PREFIX=
+
+MEMCACHED_HOST=127.0.0.1
+
+REDIS_CLIENT=phpredis
+REDIS_HOST=127.0.0.1
+REDIS_PASSWORD=null
+REDIS_PORT=6379
+
+MAIL_MAILER=log
+MAIL_HOST=127.0.0.1
+MAIL_PORT=2525
+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
+
+VITE_APP_NAME="${APP_NAME}"

.github/workflows/tests.yml

@@ -108,20 +108,60 @@ jobs:
         composer install
       working-directory: ./laravel_app
 
-    - name: Install PestPHP and PHPStan
+    - name: Install PestPHP, PHPStan, Dusk, and Dusk API Conf
       run: |
         composer require pestphp/pest --dev --with-all-dependencies
         composer require larastan/larastan:^2.0 --dev --with-all-dependencies
+        composer require laravel/dusk --dev --with-all-dependencies
+        composer require alebatistella/duskapiconf --dev --with-all-dependencies
+        composer require protonemedia/laravel-dusk-fakes:^1.6 --dev --with-all-dependencies
       working-directory: ./laravel_app
 
+    - name: Upgrade Chrome Driver
+      run: php artisan dusk:chrome-driver --detect
+      working-directory: ./laravel_app
+
+    - name: Start Chrome Driver
+      run: ./vendor/laravel/dusk/bin/chromedriver-linux &
+      working-directory: ./laravel_app
+
+    - name: Check Chrome & ChromeDriver Versions
+      run: |
+        google-chrome --version
+        chromedriver --version
+
     - name: Clear all view caches
       run: php artisan view:clear
       working-directory: ./laravel_app
 
+    - name: Run Artisan Serve
+      run: php artisan serve --no-reload &
+      working-directory: ./laravel_app
+
     - name: Run Tests
       run: ./vendor/bin/pest
       working-directory: ./laravel_app
 
+    - name: Run Dusk Tests
+      env:
+        APP_URL: http://127.0.0.1:8000
+        APP_ENV: testing
+      run: php artisan dusk -vvv
+      working-directory: ./laravel_app
+
+    - name: Upload Screenshots
+      if: failure()
+      uses: actions/upload-artifact@v2
+      with:
+        name: screenshots
+        path: tests/Browser/screenshots
+    - name: Upload Console Logs
+      if: failure()
+      uses: actions/upload-artifact@v2
+      with:
+        name: console
+        path: tests/Browser/console
+
     - name: Move the PHP config file to the root directory
       run: cp vendor/devdojo/auth/phpstan.neon phpstan.neon
       working-directory: ./laravel_app

README.md

@@ -17,7 +17,7 @@ Be sure to visit the official documentation at <a href="https://devdojo.com/auth
 
 ## Installation
 
-To install this package you'll want to first have Laravel Breeze, Jetstream, Genesis, or any other Laravel starter kit installed. Then you'll need to install the package:
+You can install this package into any new Laravel application, or any of the available <a href="https://devdojo.com/auth/docs/install" target="_blank">Laravel Starter Kits</a>.
 
 ```
 composer require devdojo/auth

composer.json

@@ -34,7 +34,10 @@
         "pestphp/pest": "^2.34",
         "pestphp/pest-plugin-laravel": "^2.4",
         "larastan/larastan": "^2.0",
-        "phpstan/phpstan": "^1.11"
+        "phpstan/phpstan": "^1.11",
+        "laravel/dusk": "^8.2",
+        "protonemedia/laravel-dusk-fakes": "^1.6",
+        "alebatistella/duskapiconf": "^1.2"
     },
     "autoload": {
         "psr-4": {

database/migrations/2024_04_24_000002_update_passwords_field_to_be_nullable.php

@@ -2,6 +2,7 @@
 
 use Illuminate\Database\Migrations\Migration;
 use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\Schema;
 
 return new class extends Migration
@@ -22,9 +23,14 @@ public function up()
      */
     public function down()
     {
+        // Update records with NULL values to avoid constraint violations
+        DB::table('users')->whereNull('name')->update(['name' => '']);
+        DB::table('users')->whereNull('password')->update(['password' => '']);
+
+        // Change the table structure
         Schema::table('users', function (Blueprint $table) {
-            $table->string('password')->nullable(false)->change();
             $table->string('name')->nullable(false)->change();
+            $table->string('password')->nullable(false)->change();
         });
     }
 };

resources/views/components/elements/input-placeholder.blade.php

@@ -2,7 +2,7 @@
     'value' => ''
 ])
 
-<div {{ $attributes->merge(['class' => 'px-3.5 bg-gray-50 py-2.5 text-sm flex items-center justify-between border rounded-md border-gray-300']) }}>
+<div data-auth="email-read-only-placeholder" {{ $attributes->merge(['class' => 'px-3.5 bg-gray-50 py-2.5 text-sm flex items-center justify-between border rounded-md border-gray-300']) }}>
     <span>{{ $value }}</span>
     {{ $slot }}
 </div>

resources/views/components/layouts/app.blade.php

@@ -4,7 +4,10 @@
     @include('auth::includes.head')
 </head>
 <body id="auth-body" class="overflow-hidden relative w-screen h-screen" style="background-color:{{ config('devdojo.auth.appearance.background.color') }}">
-    <div x-data class="relative w-full h-full" x-cloak>
+    @php
+        $dyanicPageId = str_replace('/', '-', str_replace('.', '', Request::path()));
+    @endphp
+    <div x-data data-auth="{{ $dyanicPageId }}" class="relative w-full h-full" x-cloak>
         @if(config('devdojo.auth.appearance.background.image'))
             <img src="{{ config('devdojo.auth.appearance.background.image') }}" id="auth-background-image" class="object-cover absolute z-10 w-screen h-screen" />
             <div id="auth-background-image-overlay" class="absolute inset-0 z-20 w-screen h-screen" style="background-color:{{ config('devdojo.auth.appearance.background.image_overlay_color') }}; opacity:{{ config('devdojo.auth.appearance.background.image_overlay_opacity') }};"></div>

resources/views/components/setup/sidebar-links.blade.php

@@ -43,7 +43,7 @@
                 ></x-auth::setup.sidebar-link-item>
                 <x-auth::setup.sidebar-link-item
                     newTab="true"
-                    pageLink="https://devdojo.com/platform/auth/docs"
+                    pageLink="https://devdojo.com/auth/docs"
                     icon="notebook"
                     text="Documentation"
                 ></x-auth::setup.sidebar-link-item>

resources/views/pages/auth/login.blade.php

@@ -135,11 +135,11 @@ public function authenticate()
 
                             @if($showPasswordField)
                                 <x-auth::elements.input-placeholder value="{{ $email }}">
-                                    <button type="button" wire:click="editIdentity" class="font-medium text-blue-500">Edit</button>
+                                    <button type="button" data-auth="edit-email-button" wire:click="editIdentity" class="font-medium text-blue-500">Edit</button>
                                 </x-auth::elements.input-placeholder>
                             @else  
                                 @if($showIdentifierInput)
-                                    <x-auth::elements.input label="Email Address" type="email" wire:model="email" autofocus="true" id="email" required />
+                                    <x-auth::elements.input label="Email Address" type="email" wire:model="email" autofocus="true" data-auth="email-input" id="email" required />
                                 @endif
                             @endif
 
@@ -158,19 +158,19 @@ public function authenticate()
                             @endif
 
                             @if($showPasswordField)
-                                <x-auth::elements.input label="Password" type="password" wire:model="password" id="password" />
+                                <x-auth::elements.input label="Password" type="password" wire:model="password" id="password" data-auth="password-input" />
                                 <div class="flex justify-between items-center mt-6 text-sm leading-5">
-                                    <x-auth::elements.text-link href="{{ route('auth.password.request') }}">Forgot your password?</x-auth::elements.text-link>
+                                    <x-auth::elements.text-link href="{{ route('auth.password.request') }}" data-auth="forgot-password-link">Forgot your password?</x-auth::elements.text-link>
                                 </div>
                             @endif
 
-                            <x-auth::elements.button type="primary" rounded="md" size="md" submit="true">Continue</x-auth::elements.button>
+                            <x-auth::elements.button type="primary" data-auth="submit-button" rounded="md" size="md" submit="true">Continue</x-auth::elements.button>
                         </form>
 
 
                         <div class="mt-3 space-x-0.5 text-sm leading-5 text-left" style="color:{{ config('devdojo.auth.appearance.color.text') }}">
                             <span class="opacity-[47%]">Don't have an account?</span>
-                            <x-auth::elements.text-link href="{{ route('auth.register') }}">Sign up</x-auth::elements.text-link>
+                            <x-auth::elements.text-link data-auth="register-link" href="{{ route('auth.register') }}">Sign up</x-auth::elements.text-link>
                         </div>
 
                         @if(config('devdojo.auth.settings.login_show_social_providers') && config('devdojo.auth.settings.social_providers_location') != 'top')

resources/views/pages/auth/password/reset.blade.php

@@ -51,7 +51,7 @@ public function sendResetPasswordLink()
             />
 
             @if ($emailSentMessage)
-                <div class="p-4 mt-5 bg-green-50 rounded-md dark:bg-green-600">
+                <div class="p-4 mb-2 bg-green-50 rounded-md dark:bg-green-600">
                     <div class="flex">
                         <div class="flex-shrink-0">
                             <svg class="w-5 h-5 text-green-400 dark:text-white" fill="currentColor" viewBox="0 0 20 20">

resources/views/pages/auth/register.blade.php

@@ -128,19 +128,19 @@ public function register()
                     @php
                         $autofocusEmail = ($showNameField) ? false : true;
                     @endphp
-                    <x-auth::elements.input label="Email Address" id="email" type="email" wire:model="email" :autofocus="$autofocusEmail" required />
+                    <x-auth::elements.input label="Email Address" id="email" type="email" wire:model="email" data-auth="email-input" :autofocus="$autofocusEmail" required />
                 @endif
 
                 @if($showPasswordField)
-                    <x-auth::elements.input label="Password" type="password" wire:model="password" id="password" required />
+                    <x-auth::elements.input label="Password" type="password" wire:model="password" id="password" data-auth="password-input" required />
                 @endif
 
-                <x-auth::elements.button rounded="md" submit="true">Continue</x-auth::elements.button>
+                <x-auth::elements.button data-auth="submit-button" rounded="md" submit="true">Continue</x-auth::elements.button>
             </form>
 
             <div class="mt-3 space-x-0.5 text-sm leading-5 text-left" style="color:{{ config('devdojo.auth.appearance.color.text') }}">
                 <span class="opacity-[47%]">Already have an account?</span>
-                <x-auth::elements.text-link href="{{ route('auth.login') }}">Sign in</x-auth::elements.text-link>
+                <x-auth::elements.text-link data-auth="login-link" href="{{ route('auth.login') }}">Sign in</x-auth::elements.text-link>
             </div>
 
             @if(config('devdojo.auth.settings.social_providers_location') != 'top')

resources/views/pages/auth/verify.blade.php

@@ -57,7 +57,7 @@ public function resend()
                 @endif
 
                 <div class="text-sm leading-6 text-gray-700 dark:text-gray-400">
-                    <p>Before proceeding, please check your email for a verification link. If you did not receive the email, <a wire:click="resend" class="text-gray-700 underline transition duration-150 ease-in-out cursor-pointer dark:text-gray-300 hover:text-gray-600 focus:outline-none focus:underline">click here to request another</a>.</p>
+                    <p>Before proceeding, please check your email for a verification link. If you did not receive the email, <a wire:click="resend" data-auth="verify-email-resend-link" class="text-gray-700 underline transition duration-150 ease-in-out cursor-pointer dark:text-gray-300 hover:text-gray-600 focus:outline-none focus:underline">click here to request another</a>.</p>
                 </div>
 
 

src/AuthServiceProvider.php

@@ -144,5 +144,10 @@ public function register()
         $this->app->singleton(Google2FA::class, function ($app) {
             return new Google2FA();
         });
+
+        // Register the DuskServiceProvider
+        if (($this->app->environment('local') || $this->app->environment('testing')) && class_exists(\Laravel\Dusk\DuskServiceProvider::class)) {
+            $this->app->register(\Devdojo\Auth\Providers\DuskServiceProvider::class);
+        }
     }
 }

src/Providers/DuskServiceProvider.php

@@ -0,0 +1,71 @@
+<?php
+
+namespace Devdojo\Auth\Providers;
+
+use Illuminate\Support\ServiceProvider;
+use Laravel\Dusk\Browser;
+use Laravel\Dusk\Dusk;
+
+class DuskServiceProvider extends ServiceProvider
+{
+    /**
+     * Register Dusk's browser macros.
+     */
+    public function boot(): void
+    {
+        Dusk::selectorHtmlAttribute('data-auth');
+
+        Browser::macro('authAttributeChange', function (?string $selector, string $attribute, string $value) {
+            $this->script("document.querySelector('$selector').setAttribute('$attribute', '$value');");
+
+            return $this;
+        });
+
+        Browser::macro('authAttributeRemove', function (?string $selector, string $attribute) {
+            $this->script("document.querySelector('$selector').removeAttribute('$attribute');");
+
+            return $this;
+        });
+
+        Browser::macro('testValidationErrorOnSubmit', function (string $message = '') {
+            $this
+                ->click('@submit-button')
+                ->waitForText($message)
+                ->assertSee($message);
+
+            return $this;
+        });
+
+        Browser::macro('createJohnDoe', function () {
+            $user = \App\Models\User::factory()->create([
+                'email' => '[email protected]',
+                'password' => \Hash::make('password'),
+            ]);
+
+            return $this;
+        });
+
+        Browser::macro('assertRedirectAfterAuthUrlIsCorrect', function () {
+            $redirectExpectedToBe = '/';
+            if (class_exists(\Devdojo\Genesis\Genesis::class)) {
+                $redirectExpectedToBe = '/dashboard';
+            }
+            $this->assertPathIs($redirectExpectedToBe);
+
+            return $this;
+        });
+
+        Browser::macro('clearLogFile', function () {
+            file_put_contents(storage_path('logs/laravel.log'), '');
+
+            return $this;
+        });
+
+        Browser::macro('getLogFile', function ($callback) {
+            $content = file_get_contents(storage_path('logs/laravel.log'));
+            $callback($content);
+
+            return $this;
+        });
+    }
+}