F
Filament3mo ago
Jo

Testing a Livewire component that is has been added to an Infolist

I'f like to know how to test a Livewire component that has been added to an Infolist. I'm calling a Livewire component on an Infolist like this:
->schema([
Livewire::make(ManageJobGrade::class)
])
->schema([
Livewire::make(ManageJobGrade::class)
])
The Livewire component itself (used example from the Filament docs)
class ManageJobGrade extends Component implements HasForms, HasActions
{
use InteractsWithActions;
use InteractsWithForms;

public Job $job;

public function deleteAction(): Action
{
return Action::make('delete')
->requiresConfirmation()
->action(fn () => $this->job->delete());
}
}
class ManageJobGrade extends Component implements HasForms, HasActions
{
use InteractsWithActions;
use InteractsWithForms;

public Job $job;

public function deleteAction(): Action
{
return Action::make('delete')
->requiresConfirmation()
->action(fn () => $this->job->delete());
}
}
Now the test which is not working:
it('can delete jobs', function () {
$job = Job::factory()->create();

livewire(ViewJob::class, [
'job' => $job,
])
->mountAction('delete')
->assertActionExists('delete');
});
it('can delete jobs', function () {
$job = Job::factory()->create();

livewire(ViewJob::class, [
'job' => $job,
])
->mountAction('delete')
->assertActionExists('delete');
});
I know that usually on the Infolist we use mountInfolistAction() and not mountAction() but I saw in the HTML generated by the Livewire action that it's using just mountAction() and, besides, mountInfolistAction() didn't work. I also tried to do livewire(ManageJobGrade::class ... instead but then it literally passes every time, even when I put nonsense IDs in there.
Solution:
sorry for the delay. Yes, I believe you can follow this approach: validate the component using assertSeeLivewire and then proceed with testing the next component.
Jump to solution
10 Replies
Jo
Jo3mo ago
No, using call doesn't seem to make any difference. I also dumped out the entire output of the test and I can see from the HTML that it's telling the truth, the component really isn't there! So I think it must be something I'm missing in the way I'm doing livewire(ViewJob::class ... etc that isn't including the Livewire component from the schema for some reason. I don't know what though.
LeandroFerreira
LeandroFerreira3mo ago
if you have a mini repo to reproduce this issue on Github, I can take a look after..
Jo
Jo3mo ago
Ok, I'll put one together and then let you know! Thanks!
Jo
Jo3mo ago
Ok, so I've been tinkering about today to create a mini repo as you mentioned, and in doing so I have actually made some progress because the mindset behind making a mini repo is forcing me to go back to basics! What I have discovered is that can do effective testing if I target the Livewire component directly. But I just can't do it from the resource. I have to do it in 2 steps. One step test canSeeLivewire() on the resource and then another test to do all the assertions for the actions on the Livewire component itself. Anyway, I created the mini repo as you mentioned yesterday. If you have time, please take a look at the tests tests/Feature/PostTest.php and let me know if you think this is the best way to do it or if there's a better way? https://github.com/joseph-d/filament-livewire-test My biggest concern doing it this way is that I'm not truly testing if the action works when nested in the resource, because I'm testing the two things separately. So I'd like to find an integrated way to accomplish this if it's possible?
GitHub
GitHub - joseph-d/filament-livewire-test
Contribute to joseph-d/filament-livewire-test development by creating an account on GitHub.
Jo
Jo3mo ago
I put some info in the README file of the repo to show which tests are currently failing and which are passing.
LeandroFerreira
LeandroFerreira3mo ago
Did ->assertSeeLivewire(ManagePost::class) work to you?
Jo
Jo3mo ago
Yes, that assertion works for me. So maybe I misunderstood how testing is supposed to be conducted? Is it good enough just to test the Resource for assertSeeLivewire() in one test and then for the next test test the actual Component for the behaviour of actions?
Solution
LeandroFerreira
LeandroFerreira3mo ago
sorry for the delay. Yes, I believe you can follow this approach: validate the component using assertSeeLivewire and then proceed with testing the next component.
Jo
Jo3mo ago
Thank you for replying. Yes, after writing a bunch of tests following this method it seeems to be working quite well. I also read on the Livewire site that testing components in isolation is the way to go, so it was obviously wrong for me to be essentially trying to test one component through another. Thanks again for your help!