Add browser tests for appointment scheduling

Author: joaopms

.env.dusk.local

@@ -0,0 +1,68 @@
+APP_NAME="Vet Clinic"
+APP_ENV=local
+APP_KEY=base64:9KDkHF6Lgad26mlBRfLQOCdun5j8IhLO+FpU307o1Mk=
+APP_DEBUG=true
+APP_URL=http://localhost:8000
+
+APP_LOCALE=en
+APP_FALLBACK_LOCALE=en
+APP_FAKER_LOCALE=en_US
+
+APP_MAINTENANCE_DRIVER=file
+# APP_MAINTENANCE_STORE=database
+
+PHP_CLI_SERVER_WORKERS=4
+
+BCRYPT_ROUNDS=12
+
+LOG_CHANNEL=stack
+LOG_STACK=single
+LOG_DEPRECATIONS_CHANNEL=null
+LOG_LEVEL=debug
+
+DB_CONNECTION=sqlite
+DB_DATABASE_NAME=database_dusk.sqlite
+# DB_HOST=127.0.0.1
+# DB_PORT=3306
+# DB_DATABASE=laravel
+# DB_USERNAME=root
+# DB_PASSWORD=
+
+SESSION_DRIVER=database
+SESSION_LIFETIME=120
+SESSION_ENCRYPT=false
+SESSION_PATH=/
+SESSION_DOMAIN=null
+
+BROADCAST_CONNECTION=log
+FILESYSTEM_DISK=local
+QUEUE_CONNECTION=database
+
+CACHE_STORE=database
+# 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=smtp
+MAIL_SCHEME=null
+MAIL_HOST=127.0.0.1
+MAIL_PORT=1025
+MAIL_USERNAME=null
+MAIL_PASSWORD=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}"
+
+DUSK_HEADLESS_DISABLED=true

README.md

@@ -24,6 +24,9 @@ npm install
 # Create .env file (and ask before overwritting)
 cp -i .env.example .env
 
+# Create the database file used for browser tests (set by DB_DATABASE_NAME in .env.dusk.local)
+touch database/database_dusk.sqlite
+
 # Create app key
 php artisan key:generate
 

config/database.php

@@ -34,7 +34,7 @@
         'sqlite' => [
             'driver' => 'sqlite',
             'url' => env('DB_URL'),
-            'database' => env('DB_DATABASE', database_path('database.sqlite')),
+            'database' => env('DB_DATABASE', database_path(env('DB_DATABASE_NAME', 'database.sqlite'))),
             'prefix' => '',
             'foreign_key_constraints' => env('DB_FOREIGN_KEYS', true),
             'busy_timeout' => null,

database/factories/AppointmentFactory.php

@@ -30,7 +30,7 @@ public function definition(): array
 
     public function assigned(): self
     {
-        return $this->state(function (array $attributes) {
+        return $this->state(function () {
             return [
                 'receptionist_id' => User::factory()->receptionist(),
                 'medic_id' => User::factory()->medic(),

database/factories/UserFactory.php

@@ -45,7 +45,7 @@ public function unverified(): static
 
     public function receptionist(): self
     {
-        return $this->state(function (array $attributes) {
+        return $this->state(function () {
             return [
                 'type' => UserType::Receptionist,
             ];
@@ -54,7 +54,7 @@ public function receptionist(): self
 
     public function medic(): self
     {
-        return $this->state(function (array $attributes) {
+        return $this->state(function () {
             return [
                 'type' => UserType::Medic,
             ];

resources/js/pages/client/ScheduleAppointment.vue

@@ -140,6 +140,7 @@ function createAnimalType(item: string) {
                             <UFormField label="Type" name="animal.type" class="w-full" required>
                                 <UInputMenu
                                     v-model="form.animal.type"
+                                    data-input-field-name="animal.type"
                                     placeholder="Your pet type"
                                     create-item="always"
                                     :items="animalTypes"
@@ -178,12 +179,7 @@ function createAnimalType(item: string) {
                                     <UInput v-model="form.appointment.preferred_date" type="date" class="w-full" />
                                 </UFormField>
                                 <UFormField name="appointment.preferred_time">
-                                    <UCheckboxGroup
-                                        v-model="form.appointment.preferred_time"
-                                        orientation="horizontal"
-                                        name="appointment.preferredTime"
-                                        :items="timeOfDay"
-                                    />
+                                    <UCheckboxGroup v-model="form.appointment.preferred_time" orientation="horizontal" :items="timeOfDay" />
                                 </UFormField>
                             </div>
                             <!-- Appointment: symptoms-->

tests/Browser/ScheduleAppointmentTest.php

@@ -1,10 +1,64 @@
 <?php
 
+use App\TimeOfDay;
+use Carbon\Carbon;
 use Laravel\Dusk\Browser;
+use Tests\TestCase;
+use Tests\TestData\AppointmentSchedule;
 
-test('example', function () {
+$VALID_APPOINTMENT = AppointmentSchedule::valid();
+
+test('can visit page', function () {
     $this->browse(function (Browser $browser) {
         $browser->visit('/')
-                ->assertSee('Laravel');
+            ->assertSee(config('app.name'));
+    });
+});
+
+test('can schedule appointment', function () use ($VALID_APPOINTMENT) {
+    $data = collect($VALID_APPOINTMENT);
+    $data_dot = $data->dot();
+    $this->browse(function (Browser $browser) use ($data, $data_dot) {
+        $browser->visit('/');
+
+        // Type fields that can be typed
+        // Use the collection and except before flattening to dot notation so appointment.preferred_time does not get flattened as well
+        $data->except(['animal.type', 'appointment.preferred_date', 'appointment.preferred_time'])
+            ->dot()
+            ->each(fn ($value, $key) => $browser->type($key, $value));
+
+        // Manually set the value of fields like date (depends on the browser format)
+        $data_dot->only(['appointment.preferred_date'])
+            ->each(function ($value, $key) use ($browser) {
+                $browser->type($key, Carbon::createFromFormat(TestCase::DATE_FORMAT, $value)->format('mdY'));
+            });
+
+        // Manually type data in select inputs
+        $data_dot->only(['animal.type'])
+            ->each(function ($value, $key) use ($browser) {
+                $browser->keys("[data-input-field-name='$key']",
+                    $value,
+                    '{enter}',
+                );
+            });
+
+        // Check checkboxes
+        collect([
+            ...Arr::map(
+                $data['appointment']['preferred_time'],
+                fn (string $value) => TimeOfDay::from($value)->name
+            ),
+        ])
+            ->each(function ($label) use ($browser) {
+                $browser->click("[aria-label='$label']");
+            });
+
+        // Submit
+        $browser->click('button[type=submit]')
+            ->waitForText('Success');
     });
+
+    $this->assertDatabaseCount('clients', 1);
+    $this->assertDatabaseCount('animals', 1);
+    $this->assertDatabaseCount('appointments', 1);
 });

tests/Feature/Client/ScheduleAppointmentTest.php

@@ -1,27 +1,10 @@
 <?php
 
 use App\Models\Client;
-use App\TimeOfDay;
-use Database\Factories\AnimalFactory;
 use Tests\TestCase;
+use Tests\TestData\AppointmentSchedule;
 
-$VALID_APPOINTMENT = [
-    'client' => [
-        'name' => fake()->name,
-        'email' => fake()->email,
-    ],
-    'animal' => [
-        'name' => fake()->randomElement(AnimalFactory::NAMES),
-        'type' => fake()->randomElement(AnimalFactory::TYPES),
-        'age_years' => fake()->numberBetween(1, 20),
-        'age_months' => fake()->numberBetween(0, 12),
-    ],
-    'appointment' => [
-        'preferred_date' => fake()->dateTimeInInterval(now(), '+30 days')->format('Y-m-d'),
-        'preferred_time' => [fake()->randomElement(TimeOfDay::selectable())->value],
-        'symptoms' => fake()->realText(),
-    ],
-];
+$VALID_APPOINTMENT = AppointmentSchedule::valid();
 
 function scheduleAppointment(TestCase $self, array $data): void
 {
@@ -47,12 +30,7 @@ function scheduleAppointment(TestCase $self, array $data): void
 test('can schedule appointment', function () use ($VALID_APPOINTMENT) {
     $data = $VALID_APPOINTMENT;
 
-    // Try to schedule an appointment
-    $response = $this
-        ->post(route('public.schedule-appointment'), $data);
-
-    // Check for redirect. Since we're using Inertia, it redirects the user to the homepage on success
-    $response->assertRedirect(route('public.home'));
+    scheduleAppointment($this, $data);
 
     // Check if data was saved
     $this->assertDatabaseHas('clients', $data['client']);
@@ -90,11 +68,7 @@ function scheduleAppointment(TestCase $self, array $data): void
 
     // Try to schedule an appointment, twice, with the same data
     for ($i = 0; $i < 2; $i++) {
-        $response = $this
-            ->post(route('public.schedule-appointment'), $data);
-
-        // Check for redirect. Since we're using Inertia, it redirects the user to the homepage on success
-        $response->assertRedirect(route('public.home'));
+        scheduleAppointment($this, $data);
     }
 
     // Check if the client was updated

tests/Pest.php

@@ -1,7 +1,7 @@
 <?php
 
 pest()->extend(Tests\DuskTestCase::class)
-//  ->use(Illuminate\Foundation\Testing\DatabaseMigrations::class)
+    ->use(Illuminate\Foundation\Testing\DatabaseMigrations::class)
     ->in('Browser');
 
 /*

tests/TestCase.php

@@ -6,5 +6,5 @@
 
 abstract class TestCase extends BaseTestCase
 {
-    //
+    const string DATE_FORMAT = 'Y-m-d';
 }