Mengenal Laravel Dusk Untuk Testing

Laravel Dusk adalah salah satu fitur baru yang diperkenalkan di Laravel 5.4. Dusk adalah sebuah tool untuk melakukan pengujian aplikasi.

Salah satu kekurangan melakukan pengujian menggunakan PHPUnit adalah kita tidak bisa menguji fungsionalitas aplikasi yang ada JavaScript di sisi klien. Dengan menggunakan Dusk kita bisa melakukan pengujian yang berjalan di browser sehingga fitur JavaScript si sisi klien dapat diuji.

Dusk dibuat berdasarkan open source tool ChromeDriver dan Facebook Php-webdriver sehingga mudah digunakan tanpa memerlukan pengalaman menggunakan Selenium. Di artikel ini kita akan membahas bagaimana cara memasang Dusk di aplikasi Laravel dan menjalankan beberapa pengujian sederhana termasuk pengujian otentikasi (authentication testing).

Mengapa Menggunakan Dusk?

Versi Laravel sebelumnya menggunakan Symfony BrowserKit untuk mensimulasikan sebuah web browser.Komponen ini memiliki keterbatasan karena bukan browser sungguhan. Dengan Dusk sistem otomasi dapat dimanfaatkan melalui ChromeDriver dan Facebook Php-webdriver.

Salah satu fitur Dusk dapat mengunggu suatu kondisi menjadi true di sisi frontend sebelum mengeksekusi pengujian. Contoh, ia dapat menunggu komponen JavaScript atau selektor CSS untuk dimuat sebelum melakukan aksi manapun.

Pemasangan

Untuk memulai mari kita buat proyek Laravel baru:

laravel new dusk

Lalu masuk ke folder tersebut dan pull paket laravel/dusk:

cd dusk
composer require laravel/dusk

Saat memasang paket Laravel biasanya kelas service provider didaftarkan di config/app.php. Namun, Dusk menampilkan beberapa celah keamanan yang kita tidak ingin bocor dilingkungan production, contohnya kemampuan untuk login sebagai user yang berbeda.

Untuk mengatasi masalah ini, kita perlu mendaftarkan kelas service providernya dalam sebuah kondisi. Hal ini akan membatasi agar fitur tersebut hanya berjalan dilingkungan local/development. Buka file app\Providers\AppServiceProvider.php

use Laravel\Dusk\DuskServiceProvider;// Importing DuskServiceProvider class

...

public function register()
{
    if ($this->app->environment('local', 'testing')) {
        $this->app->register(DuskServiceProvider::class);
    }
}

Jalankan peritnah artisan untuk memasang Dusk:

php artisan dusk:install

Perintah ini akan membuat folder Browser didalam folder tests dan menambahkan beberapa contoh file pengujian. Diantara folder lain didalamnya, kita juga dapat melihat ada folder bernama screenshots, yang dipakai untuk menyimpan gambar layar saat pengujian gagal. Fitur ini sangat berguna saat melakukan debugging.

Selanjutnya kita perlu menambah key APP_URL di file .env dengan URL untuk mengakses aplikasi kita. Contoh, jika menggunakan server bawaan, maka kita bisa tuliskan http://localhost:8000. Pastikan development server menyala sebelum memulai pengujian jika tidak maka akan menghasilkan pengujian yang gagal. Jalankan php artisan serve untuk menjalankan server bawaan.

Kita juga puny opsi untuk membuat Dusk menggunakan file environment sendiri, lakukan dengan membuat .env.dusk.{environment}. Contoh, untuk environment local file ini dapat dinamakan .env.dusk.local. Penggunaan file environment sendiri sangat berguna jika ingin menggunakan database test tanpa menggunakan database yang sudah ada tapi menggunakan database yang berbeda, misalnya database test.

Mulai Pengujian

Untuk menjalankan pengujian jalankan perintah:

php artisan dusk

Perintah di atas akan menjalankan ExampleTest di tests\Browser\ExampleTest.php. Kita akan melihat sesuatu seperti berikut ini:

Hasilnya di atas adalah: OK (1 test, 1 assertion) ditampilkan. Jika membuka file tests\Browser\ExampleTest.php maka akan terlihat method berikut:

...
public function testBasicExample()
    {
    //Visit the homepage and look for the text 'Laravel'
        $this->browse(function (Browser $browser) {
            $browser->visit('/')
                    ->assertSee('Laravel');
        });
    }

Disini method browse menerima sebuah callback yang merupakan kelas Browser. Di dalam callback ini kita bisa memanggil method lain assertion lain. Method visit() sesuai namanya akan mengunjui URL yang diberikan di dalam argumen. Method assertSee() memeriksa jika teks yang ditulis sebagai argumen terdapat dihalaman yang dikunjungi.

Jadi pada contoh di atas halaman homepage dikunjungi dan pemeriksaan untuk teks 'Laravel' terjadi. Ada beberapa jenis assertion yang tersedia, lihat dokumentasi untuk informasi lainnya.

Apa yang terjadi jika kita ganti teks 'Laravel' di argument assertSee() dengan teks yang tidak ada di halaman yang dikunjungi? Tentu saja kita akan mendapatkan pengujian yang gagal. Hasilnya terlihat sebagai berikut:

Pengujian gagal karean Dusk tidak melihat teks 'Bla' yang penulis tambah di method assertSee() di halaman homepage. Coba buka folder tests\Browser\screenshtos\ dan lihat screenshot dari pengujian yang baru saja gagal.

Form dan Otentikasi

Dusk juga bisa melakukan pengujian form dan otensikasi. Mari kita persiapan pengujian ini dengan membuat sebuah database dan memperbarui file .env lalu jalankan:

php artisan make:auth

Perintah ini membuat beberapa file scaffolding dan migrasi untuk otentikasi. Jika menggunakan mariaDB atau MySQL versi dibawah 5.7.7 kita perlu mengubah method boot() di file app\Provideres\AppServiceProvider.php:

use Illuminate\Support\Facades\Schema;

public function boot()
{
    Schema::defaultStringLength(191);
}

Lalu jalankan:

php artisan migrate

Perintah tersebut melakukan migrasi database dan mengubah halaman homepage sehingga muncul link Login dan Register di pojok kanan atas:

Berikutnya buat pengujian baru bernama RegisterTest dengan menjalankan:

php artisan dusk:make RegisterTest

Sekarang di foler tests\Browser ada file RegisterTest.php sebagai berikut:

<?php

namespace Tests\Browser;

use Tests\DuskTestCase;
use Illuminate\Foundation\Testing\DatabaseMigrations;

class RegisterTest extends DuskTestCase
{
    /**
     * A Dusk test example.
     *
     * @return void
     */
    public function testExample()
    {
        $this->browse(function ($browser) {
            $browser->visit('/')
                    ->assertSee('Laravel');
        });
    }
}

Edit isi method testExample() menjadi:

public function testExample()
    {
        $this->browse(function ($browser) {
            $browser->visit('/') //Go to the homepage
                    ->clickLink('Register') //Click the Register link
                    ->assertSee('Register') //Make sure the phrase in the arguement is on the page
            //Fill the form with these values
                    ->value('#name', 'Joe') 
                    ->value('#email', 'joe@example.com')
                    ->value('#password', '123456')
                    ->value('#password-confirm', '123456')
                    ->click('button[type="submit"]') //Click the submit button on the page
                    ->assertPathIs('/home') //Make sure you are in the home page
            //Make sure you see the phrase in the arguement
                    ->assertSee("You are logged in!"); 
        });
    }

Kita juga bisa menghapus file ExampleTest.php yang sudah tidak diperlukan. Lalu jalankan:

php artisan dusk

Kita akan lihat:

Kesimpulan

Laravel Dusk membuat pengujian menjadi lebih mudah dan efisien. Kita sudah mempelajari dasar-dasar menyiapkan Dusk, belajar menulis kode pengujian sederhana dan otentikasi. Di lain waktu kita akan mengenal fitur-fitur lainnya.

Diterjemahkan dari Introduction to Laravel Dusk yang ditulis oleh Caleb Oki