Laravel test order of elements on page - php

Question

I want to test whether my sorting works properly with Laravel TestCase. I have simple test page:
<div id="values">
#foreach(['Value1', 'Value2'] as $value)
<div class="test-class">{{$value}}</div>
#endforeach
</div>
And now i want to test if the first .test-class element contains 'Value1'. I had tried different approaches, and had no success. Here are first one:
public function testSorting()
{
$this->visit(route('dummy'));
$this->see('Value1');
$this->seeInElement('.test-class:first-of-type', 'Value2');
}
This one resulted in exception:
Symfony\Component\CssSelector\Exception\ExpressionErrorException: "*:first-of-type" is not implemented.
Then I tried
$this->seeInElement('#values:first-child', 'Value2');
and my test when green. But it should be red, because first child is 'Value1'. It totally ignored ':first-child' part.
Then I tried
$this->seeInElement('#values:nth-child(1)', 'Value2');
and got green too. So this approach doesn't work either.
Have I missed something? Or there is no way to test order of elements on page with Laravel tests?

Answer 1

I'm late to the party here, but I've been using the below to check the ordering of items on the page. Seems to work out so well so far.
Implement the below method on your TestCase base class.
/**
* Given a CSS selector string, check if the elements matching the query
* contain the values provided, in the order they are provided.
*
* #param string $selector
* #param array $contents
* #return $this
*/
public function seeInOrder($selector, Array $contents)
{
$matches = $this->crawler->filter($selector);
try {
foreach ($matches as $index => $domElement) {
$needle = $contents[$index];
$this->assertContains($needle, trim($domElement->textContent));
}
} catch (PHPUnit_Framework_ExpectationFailedException $e) {
$this->fail('Failed asserting that the element at index ' . $index . ' contains the string "' . $contents[$index] . '"');
}
return $this;
}
Usage:
/**
* Test that the /books route returns a list of books in explicit order.
*
* #test
* #return void
*/
public function books_index_page_lists_books_in_explicit_order()
{
$book_1 = factory(App\Book::class)->create([
'order' => 0
]);
$book_2 = factory(App\Book::class)->create([
'order' => 1
]);
$this->visit('/books')
->see($book_1->title)
->see($book_2->title)
->seeInOrder('.books .book', [
$book_1->title,
$book_2->title
]);
}

Answer 2

Not a solution for your specific question, but a workaround for your problem:
You could enumerate your test-class divs with the $loop->iteration helper variable, which contains the number of the current loop iteration.
<div id="values">
#foreach(['Value1', 'Value2'] as $value)
<div class="test-class" id="value_{{$loop->iteration}}">{{$value}}</div>
#endforeach
</div>
Now your div classes have an enumerated id beginning with 1 and you can use the selector #value_1 in your test to select the first div:
$this->seeInElement('#value_1', 'Value2');

Answer 3

I stumbled onto this question for my HTTP test, if you're using that no need to build your own function like in the answers below. Laravel ships with a bunch of assertions, including assertSeeInOrder:
https://laravel.com/docs/7.x/http-tests#assert-see-in-order

Answer 4

So, i have solved it. The key was to look into \Symfony\Component\DomCrawler\Crawler class. It has a lot of useful methods like first(), last() or eq($number). I have created this method in my TestCase class:
public function seeInFirstElement($selector, $text)
{
$this->assertContains($text, trim($this->crawler->filter($selector)->first()->text()));
return $this;
}
You can get rid of trim() function but with it the output looks better in case of failed test.
So, in my tests I use such constructions to test ordering:
$this->seeInFirstElement('.test-class', 'Value1');