Testing

How to test applications using Slate components.

Component Testing

Test Slate components like any Blade component:

example.php

use Tests\TestCase;
use Illuminate\Foundation\Testing\RefreshDatabase;

class ButtonTest extends TestCase
{
    public function test_button_renders()
    {
        $view = $this->view('components.button', [
            'variant' => 'primary'
        ]);

        $view->assertSee('button');
    }
}

use Tests\TestCase;
use Illuminate\Foundation\Testing\RefreshDatabase;

class ButtonTest extends TestCase
{
    public function test_button_renders()
    {
        $view = $this->view('components.button', [
            'variant' => 'primary'
        ]);

        $view->assertSee('button');
    }
}

Feature Testing

Test features that use Slate components:

example.php

public function test_user_can_submit_form()
{
    $response = $this->post('/submit', [
        'name' => 'John Doe',
        'email' => 'john@@example.com'
    ]);

    $response->assertStatus(200);
}

public function test_user_can_submit_form()
{
    $response = $this->post('/submit', [
        'name' => 'John Doe',
        'email' => 'john@@example.com'
    ]);

    $response->assertStatus(200);
}

Browser Testing

For interactive components, use browser testing:

example.php

use Laravel\Dusk\Browser;

public function test_modal_opens()
{
    $this->browse(function (Browser $browser) {
        $browser->visit('/')
                ->click('@open-modal')
                ->assertVisible('.modal');
    });
}

use Laravel\Dusk\Browser;

public function test_modal_opens()
{
    $this->browse(function (Browser $browser) {
        $browser->visit('/')
                ->click('@open-modal')
                ->assertVisible('.modal');
    });
}

Best Practices

Test functionality - Not styling
Use semantic selectors - Not class names
Test accessibility - Keyboard navigation, ARIA
Test in dark mode - Ensure it works

Tools

PHPUnit - Unit and feature tests
Laravel Dusk - Browser testing
Pest - Modern testing framework