wip

index.html

@@ -11,7 +11,17 @@
     <script src="//cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/@popperjs/core@2"></script>
 
-    <main class="flex-1 overflow-auto bg-gray-50 h-screen">
+    <div x-data x-popover>
+        <button x-popover:button>Open</button>
+
+        <ul x-popover:panel>
+            <li><a href="#">First</a></li>
+            <li><a href="#">Second</a></li>
+            <li><a href="#">Third</a></li>
+        </ul>
+    </div>
+
+    <!-- <main class="flex-1 overflow-auto bg-gray-50 h-screen">
         <div class="flex justify-center items-center space-x-12 p-12">
             <button>Previous</button>
             <nav
@@ -91,5 +101,5 @@
             </nav>
             <button>Next</button>
         </div>
-    </main>
+    </main> -->
 </html>

tests/cypress/integration/plugins/ui/popover.spec.js

@@ -0,0 +1,127 @@
+import { beVisible, haveAttribute, haveText, html, notBeVisible, notHaveAttribute, test } from '../../../utils'
+
+test('button toggles panel',
+    [html`
+        <div x-data x-popover>
+            <button x-popover:button>Toggle</button>
+
+            <ul x-popover:panel>
+                Dialog Contents!
+            </ul>
+        </div>
+    `],
+    ({ get }) => {
+        get('ul').should(notBeVisible())
+        get('button').click()
+        get('ul').should(beVisible())
+        get('button').click()
+        get('ul').should(notBeVisible())
+    },
+)
+
+test('has accessibility attributes',
+    [html`
+        <div x-data x-popover>
+            <button x-popover:button>Toggle</button>
+
+            <ul x-popover:panel>
+                Dialog Contents!
+            </ul>
+        </div>
+    `],
+    ({ get }) => {
+        get('button').should(haveAttribute('aria-expanded', 'false'))
+        get('button').should(notHaveAttribute('aria-controls'))
+        get('button').click()
+        get('button').should(haveAttribute('aria-expanded', 'true'))
+        get('button').should(haveAttribute('aria-controls', 'alpine-popover-panel-1'))
+    },
+)
+
+test('escape closes panel',
+    [html`
+        <div x-data x-popover>
+            <button x-popover:button>Toggle</button>
+
+            <ul x-popover:panel>
+                Dialog Contents!
+            </ul>
+        </div>
+    `],
+    ({ get }) => {
+        get('ul').should(notBeVisible())
+        get('button').click()
+        get('ul').should(beVisible())
+        get('body').type('{esc}')
+        get('ul').should(notBeVisible())
+    },
+)
+
+test('clicking outside closes panel',
+    [html`
+        <div>
+            <div x-data x-popover>
+                <button x-popover:button>Toggle</button>
+
+                <ul x-popover:panel>
+                    Dialog Contents!
+                </ul>
+            </div>
+
+            <h1>Click away to me</h1>
+        </div>
+    `],
+    ({ get }) => {
+        get('ul').should(notBeVisible())
+        get('button').click()
+        get('ul').should(beVisible())
+        get('h1').click()
+        get('ul').should(notBeVisible())
+    },
+)
+
+test('clicking outside closes panel',
+    [html`
+        <div>
+            <div x-data x-popover>
+                <button x-popover:button>Toggle</button>
+
+                <ul x-popover:panel>
+                    Dialog Contents!
+                </ul>
+            </div>
+
+            <h1>Click away to me</h1>
+        </div>
+    `],
+    ({ get }) => {
+        get('ul').should(notBeVisible())
+        get('button').click()
+        get('ul').should(beVisible())
+        get('h1').click()
+        get('ul').should(notBeVisible())
+    },
+)
+
+test('focusing away closes panel',
+    [html`
+        <div>
+            <div x-data x-popover>
+                <button x-popover:button>Toggle</button>
+
+                <ul x-popover:panel>
+                    Dialog Contents!
+                </ul>
+            </div>
+
+            <button>Focus Me</button>
+        </div>
+    `],
+    ({ get }) => {
+        get('ul').should(notBeVisible())
+        get('button').click()
+        get('ul').should(beVisible())
+        cy.focused().tab()
+        get('ul').should(notBeVisible())
+    },
+)