Assert view component is rendered

Level 6

I'm trying to mock but does not work

$this->mock(PostList::class, function ($mock) {
   $mock->shouldReceive('render')->once();
});

$response = $this->get('/posts');

// ...

This is the error:

Mockery\Exception\InvalidCountException: Method render(<Any Arguments>) from Mockery_0_App_View_Components_PostsList should be called
 at least 1 times but called 0 times.

What am I missing?

Level 6

Well, don't know why but this works:

$this->app->bind(PostList::class, function () {
   $mock = $this->partialMock(PostList::class);
   $mock->shouldReceive('render')->once();
   return $mock;
});

But this doest not:

$this->partialMock(PostList::class, function ($mock) {
   $mock->shouldReceive('render')->once();
});

Why is this? The second would be the correct one according to this: https://laravel.com/docs/8.x/mocking#mocking-objects

https://laravel.com/docs/8.x/http-tests#rendering-blade-and-components

Level 74

In my opinion you shouldn't mock a feature test since it kind of defeats the purpose of such test.

What you can do is assert that the response contains the information that te component provides. You can do something like this instead or use asseetSee.

Level 6

@Tray2

I have a feature test of the component using the method you say, and I know that is render correctly.

Then I have two controllers (or more) that use the component, but I don't need to test the content of the component because I "know" it renders correctly (I already have that test), so in the controller tests I only need to assert that the component is rendered.

Level 74

@1k3r Still I wouldn't mock it since the component might expect certain variables to be available and therefor should not be mocked. But then again that is just me.

andersb

Level 3

@1k3r Did you find a way to assert that a given blade component was rendered (perhaps X number of times or with certain data)?

https://tray2.se/posts/testing-your-dom-in-laravel

Level 74

@andersb Check this post out, it explains how to assert the dom with laravel-dom-assertions by our own @sinnbeck

1 like

andersb

Level 3

@Tray2 This is a valid point, we could assign an identifier like an id/class to each blade component and assert that such a tag appears in the dom like explained assertElementExists('#main').

This does however require identifiers to be added to all components and it's not possible to test the blade component's data.

Ideally, we were able to assert on the components being rendered like:

$response->assertComponentRendered('example'); 
$response->assertComponentRendered('example', function (View $view) {
    return $view->attributes->name === 'Taylor';
}); 
$response->assertComponentRendered('example', function (View $view) {
    return $view->attributes->name === 'Taylor';
}, 3); // Assert that this is rendered exactly 3 times

Level 74

@andersb A blade component becomes html after the blade file is parsed and the response will be the parsed html. That makes it very hard to assert if a component has been rendered or not. You can only check the resulting html.

To test something like that you would you would indeed need to moch it, and I dont' think it's a great idea to mock in a feature test.

One way would be to wrap the component with a div and give that div an id, then you can test for how many children are rendered. Let's say you compoenent is an article, and you should render three of them.

get('/records')
    ->assertOk()
    ->assertElementExists('#component-wrapper', function (AssertElement $element) {
        $element->contains('article', 3);
    });

Level 6

@andersb we did this:

// some provider
TestResponse::macro('assertComponentRendered', function ($componentClass) {
   Assert::assertTrue(app()->resolved($componentClass), "{$componentClass} not rendered");
});

// test
$response->assertComponentRendered(SomeComponent::class);

andersb