From 1a86f08c6d9aff05040ebb0d81076ed4d9bef0d4 Mon Sep 17 00:00:00 2001
From: Jens Ahrengot Boddum <ahrengot@gmail.com>
Date: Tue, 13 Feb 2024 13:31:11 +0100
Subject: [PATCH] Add failing test for keyboard controls with `x-teleport`

---
 .../integration/plugins/ui/menu.spec.js       | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/tests/cypress/integration/plugins/ui/menu.spec.js b/tests/cypress/integration/plugins/ui/menu.spec.js
index ccb0ac291..6e6874b3e 100644
--- a/tests/cypress/integration/plugins/ui/menu.spec.js
+++ b/tests/cypress/integration/plugins/ui/menu.spec.js
@@ -219,6 +219,54 @@ test('keyboard controls',
     },
 )
 
+test('keyboard controls with x-teleport',
+    [html`
+        <div x-data x-menu>
+            <span>
+                <button x-menu:button trigger>
+                    <span>Options</span>
+                </button>
+            </span>
+
+            <template x-teleport="body">
+                <div x-menu:items items>
+                    <a x-menu:item href="#account-settings" :class="$menuItem.isActive && 'active'">
+                        Account settings
+                    </a>
+                    <a x-menu:item href="#support" :class="$menuItem.isActive && 'active'">
+                        Support
+                    </a>
+                </div>
+            </template>
+        </div>`],
+    ({ get }) => {
+        get('.active').should(notExist())
+        get('[trigger]').type(' ')
+        get('[items]')
+            .should(beVisible())
+            .should(haveFocus())
+            .type('{downarrow}')
+        get('[href="#account-settings"]')
+            .should(haveClasses(['active']))
+        get('[items]')
+            .type('{downarrow}')
+        get('[href="#support"]')
+            .should(haveClasses(['active']))
+            .type('{uparrow}')
+        get('[href="#account-settings"]')
+            .should(haveClasses(['active']))
+        get('[items]')
+            .tab()
+            .should(haveFocus())
+            .should(beVisible())
+            .tab({ shift: true})
+            .should(haveFocus())
+            .should(beVisible())
+            .type('{esc}')
+            .should(notBeVisible())
+    },
+)
+
 test('search',
     [html`
         <div x-data x-menu>