Add some Dusk Browser Macros

README.md

@@ -128,6 +128,12 @@ Livewire comes with a bunch of Dusk macros which you can use.
 
 Check them out in the Livewire source in ['livewire/src/Features/SupportTesting/DuskBrowserMacros.php'](https://github.com/livewire/livewire/blob/main/src/Features/SupportTesting/DuskBrowserMacros.php).
 
+In addition, the package provides the following:
+
+- `assertSeeInOrder('@container', ['a', 'b', 'c'])`
+- `assertIsVisibleInContainer(@container, @item)`
+- `assertIsNotVisibleInContainer(@container, @item)`
+
 ## Demo Package
 
 A demo package has been setup which gives a sample of how this package can be used. Check it out here

src/DuskBrowserMixin.php

@@ -0,0 +1,81 @@
+<?php
+
+namespace LivewireDuskTestbench;
+
+use Illuminate\Testing\Constraints\SeeInOrder;
+use PHPUnit\Framework\Assert as PHPUnit;
+
+class DuskBrowserMixin
+{
+    public function assertSeeInOrder()
+    {
+        return function ($selector, $contents) {
+            /** @var \Laravel\Dusk\Browser $this */
+            $fullSelector = $this->resolver->format($selector);
+
+            $element = $this->resolver->findOrFail($selector);
+
+            $contentsString = implode(', ', $contents);
+
+            PHPUnit::assertThat(
+                array_map('e', $contents),
+                new SeeInOrder($element->getText()),
+                "Did not see expected contents [{$contentsString}] within element [{$fullSelector}]."
+            );
+
+            return $this;
+        };
+    }
+
+    public function assertIsVisibleInContainer()
+    {
+        $script = $this->isVisibleScript();
+
+        return function ($container, $selector) use ($script) {
+            /** @var \Laravel\Dusk\Browser $this */
+            $fullSelector = $this->resolver->format($selector);
+            $fullContainer = $this->resolver->format($container);
+
+            $this->resolver->findOrFail($selector);
+            $this->resolver->findOrFail($container);
+
+            PHPUnit::assertTrue(
+                $this->driver->executeScript(sprintf($script, $fullSelector, $fullContainer)),
+                "Element [{$fullSelector}] is not visible in [{$fullContainer}]"
+            );
+
+            return $this;
+        };
+    }
+
+    public function assertIsNotVisibleInContainer()
+    {
+        $script = $this->isVisibleScript();
+
+        return function ($container, $selector) use ($script) {
+            /** @var \Laravel\Dusk\Browser $this */
+            $fullSelector = $this->resolver->format($selector);
+            $fullContainer = $this->resolver->format($container);
+
+            $this->resolver->findOrFail($selector);
+            $this->resolver->findOrFail($container);
+
+            PHPUnit::assertFalse(
+                $this->driver->executeScript(sprintf($script, $fullSelector, $fullContainer)),
+                "Element [{$fullSelector}] is visible in [{$fullContainer}]"
+            );
+
+            return $this;
+        };
+    }
+
+    protected function isVisibleScript()
+    {
+        return '
+            let elRect = document.querySelector(`%1$s`).getBoundingClientRect()
+            let containerRect = document.querySelector(`%2$s`).getBoundingClientRect()
+
+            return containerRect.top < elRect.bottom && containerRect.bottom > elRect.top
+        ';
+    }
+}

src/LivewireDuskTestbenchServiceProvider.php

@@ -3,28 +3,12 @@
 namespace LivewireDuskTestbench;
 
 use Illuminate\Support\ServiceProvider;
-use Illuminate\Testing\Constraints\SeeInOrder;
 use Laravel\Dusk\Browser;
-use PHPUnit\Framework\Assert as PHPUnit;
 
 class LivewireDuskTestbenchServiceProvider extends ServiceProvider
 {
     public function boot()
     {
-        Browser::macro('assertSeeInOrder', function ($selector, $contents) {
-            $fullSelector = $this->resolver->format($selector);
-
-            $element = $this->resolver->findOrFail($selector);
-
-            $contentsString = implode(', ', $contents);
-
-            PHPUnit::assertThat(
-                array_map('e', $contents),
-                new SeeInOrder($element->getText()),
-                "Did not see expected contents [{$contentsString}] within element [{$fullSelector}]."
-            );
-
-            return $this;
-        });
+        Browser::mixin(new DuskBrowserMixin());
     }
 }

tests/Browser/DuskBrowserMixinsTest.php

@@ -0,0 +1,73 @@
+<?php
+
+namespace LivewireDuskTestbench\Tests\Browser;
+
+use Livewire\Component;
+use Livewire\Livewire;
+
+class DuskBrowserMixinsTest extends TestCase
+{
+    /** @test */
+    public function assert_see_in_order_macro_works()
+    {
+        Livewire::visit(new class extends Component
+        {
+            public function render()
+            {
+                return <<< 'HTML'
+                <div>
+                    <ul dusk="list">
+                        <li>bob</li>
+                        <li>john</li>
+                        <li>bill</li>
+                    </ul>
+                </div>
+                HTML;
+            }
+        })
+            ->assertSeeInOrder('@list', ['bob', 'john', 'bill']);
+    }
+
+    /** @test */
+    public function assert_is_visibile_in_container_works()
+    {
+        Livewire::visit(new class extends Component
+        {
+            public function render()
+            {
+                return <<< 'HTML'
+                <div>
+                    <ul style="height:10px" dusk="list">
+                        <li style="height:10px" dusk="bob">bob</li>
+                        <li style="height:10px" dusk="john">john</li>
+                        <li style="height:10px" dusk="bill">bill</li>
+                    </ul>
+                </div>
+                HTML;
+            }
+        })
+            ->assertIsVisibleInContainer('@list', '@bob');
+    }
+
+    /** @test */
+    public function assert_is_not_visibile_in_container_works()
+    {
+        Livewire::visit(new class extends Component
+        {
+            public function render()
+            {
+                return <<< 'HTML'
+                <div>
+                    <ul style="height:10px" dusk="list">
+                        <li style="height:10px" dusk="bob">bob</li>
+                        <li style="height:10px" dusk="john">john</li>
+                        <li style="height:10px" dusk="bill">bill</li>
+                    </ul>
+                </div>
+                HTML;
+            }
+        })
+            ->assertIsNotVisibleInContainer('@list', '@john')
+            ->assertIsNotVisibleInContainer('@list', '@bill');
+    }
+}