Browser Testing met Laravel Dusk in 5.4

Dusk is een component wat nieuw is in Laravel 5.4. Het versimpeld de manier waarop wij als ontwikkelaars Browser Tests kunnen uitvoeren.

Waarom

Het lijkt me een goede stap om dit als extra vangnet te kunnen implementeren. In de ideale wereld zou je 100% test-coverage willen hebben met wat simpelere Unit Tests en Feature Tests maar steeds vaker worden applicaties opgebouwd met complexe JavaScript aan de voorkant zoals AngularJS, ReactJS of Vue.js.

De valkuil met Unit Tests

Unit Tests zijn waarvoor ze bedoeld zijn erg goed - het puntsgewijs testen van functies. “Als ik er X in stop, moet er Y uitkomen”. Dit kan ik meten aan de PHP/back-end kant, maar wat als ik wil meten: “Ik vul een foutief e-mail adres in en er moet een rood kader omheen komen.”

Het lijkt simpel, maar hiervoor is daadwerkelijke rendering nodig aan de zeide van een client: Browser Tests.

De technische “Hoe”

Zoals bijna alles met Laravel, de syntax is duidelijk en eenvoudig te onthouden. Ik zal hieronder de stappen omschrijven die benodigd zijn Dusk draaiende te krijgen.

Installatie

Dit is een summiere beschrijving van hetgeen te vinden op de documentatiepagina van Laravel Dusk. Ik ga er vanuit dat er reeds een werkende Laravel applicatie staat.

Om te beginnen, dienen we het composer component laravel/dusk op te nemen in ons project.

$ composer require laravel/dusk

Zodra deze geïnstalleerd is, moeten we de ServiceProvider registreren in de applicatie. Een goede plek om deze te registreren is in de AppServiceProvider in de methode register.

use Laravel\Dusk\DuskServiceProvider;

/**
 * Register any application services.
 *
 * @return void
 */
public function register()
{
    if ($this->app->environment('local', 'testing')) {
        $this->app->register(DuskServiceProvider::class);
    }
}

Om vervolgens de mappenstructuur correct aan te maken op de schijf voer je dit commando uit:

$ php artisan dusk:install

Zorg er voor dat in het configuratiebestand .env de APP_URL correct staat ingesteld naar de locatie van je applicatie. Dat is in mijn geval https://browsertest-test.app/.

De testcase: Inloggen

Maak op de commandline een nieuwe test aan:

$ php artisan dusk:make LoginTest

Deze is nu geplaatst in de map tests/Browser. Wat ik wil gaan doen in deze test:

  • Een gebruiker maken met e-mail adres test@jorijn.com
  • Testen of ik kan inloggen met deze gebruiker via de browser
  • De aangemaakte gebruiker verwijderen

Voeg deze functie toe aan de nieuw aangemaakte test:

public function testLogin()
{
  $user = factory(\App\User::class)->create([
    'email' => 'test@jorijn.com',
  ]);

  $this->browse(function ($browser) use ($user) {
      $browser->visit('/login')
              ->type('email', $user->email)
              ->type('password', 'secret')
              ->press('Login')
              ->assertPathIs('/home');
  });

  $user->delete();
}

Draai nu vervolgens met Artisan het Dusk commando:

$ php artisan dusk

Als alles goed gegaan is zie je nu dat er een nieuw Chrome venster opent die geheel geautomatiseerd deze handelingen uitvoert.

Laravel Dusk in de Terminal

Conclusie

Laravel Dusk is een eenvoudige manier om op een snelle manier een toch relatief grote set aan functionaliteit te testen. Dit is een goede manier om op de machine van de developer functionaliteit te kunnen testen. In een volgend artikel wil ik het aspect van headless testen met bijvoorbeeld PhantomJS toelichten.

Update 15-03-2017

Ik heb een update geschreven om testing ook headless met PhantomJS te doen.