NodeList API

[ostark]

TBH, I struggled a bit with writing my first actual test (for the spoke-and-chain demo site).
Especially the text assertion did not feel super intuitive. Maybe I did something wrong?

<?php

it('finds two articles with matching keyword', function () {
    
    // Show and submit the form
    $response = $this->get('/search')
        ->form('#search-form')
        ->fill('q', 'Pine Mountain')
        ->submit();

    // Result: count items
    $response
        ->querySelector('.article-card')
        ->expect()
        ->toHaveCount(2);

    // Result: assert text
    expect($response->querySelector('.article-card')->getText())
        ->each()
        ->toContain('Pine Mountain');
});

[markhuot]

A few notes that may make this easier to read (or more confusing…)?

it('finds two articles with matching keywords')      // all this could go inside a closure too, I just like the brevity of this
    ->get('/search')                                 // the original get
    ->fill('q', 'Pine Mountain')                     // if this is the only form on the page you can skip the explicit `->form()` call
    ->submit()                                       // submit that form
    ->expect()                                       // start an expectation on the response
    ->statusCode->toBe(200)                          // I added this to make sure the form submission was successful, it could also be an `->assertOk()` before the expectation begins
    ->querySelector('.article-card')->toHaveCount(2) // check the count
    ->querySelector('.article-card')->text->each->toBe('Pine Mountain'); // check the text

The trick here is where you put the ->expect() call. By placing it at the response level then you can chain on a bunch of selector expectations against the source HTML. If you're used to old school jQuery style fluent interfaces there was an .end() method that would return the parent context. The ->toBe and ->toHave… methods work the same way. So ->expect() starts by looking at the response. Then you can query the response and when you call ->toHaveCount() it asserts the count but instead of returning the node list of the selector it bounces you back to the expectation and returns the response again so you can chain more expectations. That is why the canonical example works. Those calls to .toBe jump you back to the parent context.

expect(person)
  .firstName.toBe('Michael')
  .lastName.toBe('Bluth')