Summer Sale! All accounts are 50% off this week.

secondman's avatar

Testing Blade/Volt Components

I'm using the Breeze/Volt functional api version, and all of my components are housed in the components directory and called via x-component just like traditional blade components. So in other words I have no components housed in the livewire directory, though many components contain livewire goodness.

How does one go about testing these components?

For instance here is the default action-message.blade.php code:

@props(['on'])

<div x-data="{ shown: false, timeout: null }" x-init="@this.on('{{ $on }}', () => {
    clearTimeout(timeout);
    shown = true;
    timeout = setTimeout(() => { shown = false }, 2000);
})" x-show.transition.out.opacity.duration.1500ms="shown"
  x-transition:leave.opacity.duration.1500ms style="display: none;"
  {{ $attributes->merge(['class' => 'text-sm text-gray-600 dark:text-gray-400']) }}>
  {{ $slot->isEmpty() ? 'Saved.' : $slot }}
</div>

I'm using WireUI which will replace a lot of these, so I'm really only interested in testing the ones I know will remain, like application-logo, action-message and so on.

The only path I've found so far is to wrap them in @volt('component.action-message') but they aren't really volt enabled.

Did I miss something along the way?

0 likes
7 replies
LaryAI's avatar
Level 58

To test Blade/Volt components in Laravel, you can follow these steps:

  1. Create a test class for your component. In Laravel, you can use the TestCase class provided by PHPUnit to write your tests. Make sure your test class extends the TestCase class.

  2. In your test class, use the blade method provided by Laravel to render the Blade/Volt component. The blade method takes two arguments: the path to the Blade/Volt component file and an array of data to pass to the component.

  3. Assert the expected output of the component. You can use the assertSee or assertSeeText methods provided by PHPUnit to assert that a specific text or HTML element is present in the rendered output.

Here's an example of how you can write a test for the action-message component:

use Tests\TestCase;

class ActionMessageTest extends TestCase
{
    public function testActionMessageComponent()
    {
        $output = $this->blade('path/to/action-message.blade.php', [
            'on' => 'event-name',
            'attributes' => ['class' => 'my-class'],
            'slot' => 'Saved.',
        ]);

        $this->assertSee('Saved.', $output);
        $this->assertSeeText('Saved.', $output);
        $this->assertSee('text-sm text-gray-600 dark:text-gray-400', $output);
    }
}

Make sure to replace 'path/to/action-message.blade.php' with the actual path to your action-message.blade.php file.

Note: The blade method is not a built-in Laravel method. You can create a helper method or trait to define this method in your test suite.

Remember to run your tests using the phpunit command to execute the test cases.

I hope this helps! Let me know if you have any further questions.

secondman's avatar

I converted LaryAI's PHPunit class to pest and it doesn't work.

newbie360's avatar

@secondman So how you know in the resources\views\components which is blade or livewire component ?

because you are mixing all the files into a directory

anyways, did you added resources\views\components into VoltServiceProvider ?

secondman's avatar

@newbie360

To be honest ... I'm not sure. I just know they didn't render correctly from the livewire directory ... so I moved them and called them like normal blade components and now they render like fire.

Everything works perfect other than testing.

I can't figure out any way to test them so at this point I feel like I'll probably just exclude them for code coverage since it doesn't seem there's a way to test them.

newbie360's avatar

@secondman But you have changed the component location, and i use Volt with default component loctaion without any problem

secondman's avatar

@newbie360

I'm not referring to components from that location anyway. I'm referring to the default blade components as I already mentioned. They contain Livewire code as well. Yet .... not in the livewire directory.

So let's stick to the topic, not worry about the location of files that aren't being discussed.

Please or to participate in this conversation.