verify behaviour in tests

tailwindlabs · Sep 28, 2022 · 2475e88 · 2475e88
1 parent 458979f
commit 2475e88
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 36 deletions.
diff --git a/packages/@headlessui-react/src/components/popover/popover.test.tsx b/packages/@headlessui-react/src/components/popover/popover.test.tsx
@@ -1953,7 +1953,7 @@ describe('Keyboard interactions', () => {
       })
     )
 
-    xit(
+    it(
       'should close the Popover by pressing `Enter` on a Popover.Button and go to the href of the `a` inside a Popover.Panel',
       suppressConsoleLogs(async () => {
         render(

diff --git a/packages/@headlessui-vue/src/components/popover/popover.test.ts b/packages/@headlessui-vue/src/components/popover/popover.test.ts
@@ -85,38 +85,46 @@ describe('Rendering', () => {
           html`
             <PopoverGroup>
               <Popover>
-                <PopoverButton>Trigger 1</PopoverButton>
-                <PopoverPanel>Panel 1</PopoverPanel>
+                <PopoverButton data-trigger="1">Trigger 1</PopoverButton>
+                <PopoverPanel data-panel="1">Panel 1</PopoverPanel>
               </Popover>
               <Popover>
-                <PopoverButton>Trigger 2</PopoverButton>
-                <PopoverPanel>Panel 2</PopoverPanel>
+                <PopoverButton data-trigger="2">Trigger 2</PopoverButton>
+                <PopoverPanel data-panel="2">Panel 2</PopoverPanel>
               </Popover>
             </PopoverGroup>
           `
         )
 
-        assertPopoverButton({ state: PopoverState.InvisibleUnmounted }, getByText('Trigger 1'))
-        assertPopoverButton({ state: PopoverState.InvisibleUnmounted }, getByText('Trigger 2'))
+        function getTrigger(number: number) {
+          return document.querySelector(`[data-trigger="${number}"]`)! as HTMLElement
+        }
 
-        assertPopoverPanel({ state: PopoverState.InvisibleUnmounted }, getByText('Panel 1'))
-        assertPopoverPanel({ state: PopoverState.InvisibleUnmounted }, getByText('Panel 2'))
+        function getPanel(number: number) {
+          return document.querySelector(`[data-panel="${number}"]`)! as HTMLElement
+        }
 
-        await click(getByText('Trigger 1'))
+        assertPopoverButton({ state: PopoverState.InvisibleUnmounted }, getTrigger(1))
+        assertPopoverButton({ state: PopoverState.InvisibleUnmounted }, getTrigger(2))
 
-        assertPopoverButton({ state: PopoverState.Visible }, getByText('Trigger 1'))
-        assertPopoverButton({ state: PopoverState.InvisibleUnmounted }, getByText('Trigger 2'))
+        assertPopoverPanel({ state: PopoverState.InvisibleUnmounted }, getPanel(1))
+        assertPopoverPanel({ state: PopoverState.InvisibleUnmounted }, getPanel(2))
 
-        assertPopoverPanel({ state: PopoverState.Visible }, getByText('Panel 1'))
-        assertPopoverPanel({ state: PopoverState.InvisibleUnmounted }, getByText('Panel 2'))
+        await click(getTrigger(1))
 
-        await click(getByText('Trigger 2'))
+        assertPopoverButton({ state: PopoverState.Visible }, getTrigger(1))
+        assertPopoverButton({ state: PopoverState.InvisibleUnmounted }, getTrigger(2))
 
-        assertPopoverButton({ state: PopoverState.InvisibleUnmounted }, getByText('Trigger 1'))
-        assertPopoverButton({ state: PopoverState.Visible }, getByText('Trigger 2'))
+        assertPopoverPanel({ state: PopoverState.Visible }, getPanel(1))
+        assertPopoverPanel({ state: PopoverState.InvisibleUnmounted }, getPanel(2))
 
-        assertPopoverPanel({ state: PopoverState.InvisibleUnmounted }, getByText('Panel 1'))
-        assertPopoverPanel({ state: PopoverState.Visible }, getByText('Panel 2'))
+        await click(getTrigger(2))
+
+        assertPopoverButton({ state: PopoverState.InvisibleUnmounted }, getTrigger(1))
+        assertPopoverButton({ state: PopoverState.Visible }, getTrigger(2))
+
+        assertPopoverPanel({ state: PopoverState.InvisibleUnmounted }, getPanel(1))
+        assertPopoverPanel({ state: PopoverState.Visible }, getPanel(2))
       })
     )
   })
@@ -1098,47 +1106,55 @@ describe('Keyboard interactions', () => {
           html`
             <PopoverGroup>
               <Popover>
-                <PopoverButton>Trigger 1</PopoverButton>
-                <PopoverPanel>Panel 1</PopoverPanel>
+                <PopoverButton data-trigger="1">Trigger 1</PopoverButton>
+                <PopoverPanel data-panel="1">Panel 1</PopoverPanel>
               </Popover>
 
               <Popover>
-                <PopoverButton>Trigger 2</PopoverButton>
-                <PopoverPanel>Panel 2</PopoverPanel>
+                <PopoverButton data-trigger="2">Trigger 2</PopoverButton>
+                <PopoverPanel data-panel="2">Panel 2</PopoverPanel>
               </Popover>
             </PopoverGroup>
           `
         )
 
+        function getTrigger(number: number) {
+          return document.querySelector(`[data-trigger="${number}"]`)! as HTMLElement
+        }
+
+        function getPanel(number: number) {
+          return document.querySelector(`[data-panel="${number}"]`)! as HTMLElement
+        }
+
         // Focus the button of the first Popover
-        getByText('Trigger 1')?.focus()
+        getTrigger(1)?.focus()
 
         // Verify popover is closed
-        assertPopoverButton({ state: PopoverState.InvisibleUnmounted }, getByText('Trigger 1'))
-        assertPopoverButton({ state: PopoverState.InvisibleUnmounted }, getByText('Trigger 2'))
+        assertPopoverButton({ state: PopoverState.InvisibleUnmounted }, getTrigger(1))
+        assertPopoverButton({ state: PopoverState.InvisibleUnmounted }, getTrigger(2))
 
         // Open popover
-        await click(getByText('Trigger 1'))
+        await click(getTrigger(1))
 
         // Verify popover is open
-        assertPopoverButton({ state: PopoverState.Visible }, getByText('Trigger 1'))
-        assertPopoverButton({ state: PopoverState.InvisibleUnmounted }, getByText('Trigger 2'))
+        assertPopoverButton({ state: PopoverState.Visible }, getTrigger(1))
+        assertPopoverButton({ state: PopoverState.InvisibleUnmounted }, getTrigger(2))
 
-        assertPopoverPanel({ state: PopoverState.Visible }, getByText('Panel 1'))
-        assertPopoverPanel({ state: PopoverState.InvisibleUnmounted }, getByText('Panel 2'))
+        assertPopoverPanel({ state: PopoverState.Visible }, getPanel(1))
+        assertPopoverPanel({ state: PopoverState.InvisibleUnmounted }, getPanel(2))
 
         // Focus the button of the second popover menu
-        getByText('Trigger 2')?.focus()
+        getTrigger(2)?.focus()
 
         // Close popover
         await press(Keys.Escape)
 
         // Verify both popovers are closed
-        assertPopoverButton({ state: PopoverState.InvisibleUnmounted }, getByText('Trigger 1'))
-        assertPopoverButton({ state: PopoverState.InvisibleUnmounted }, getByText('Trigger 2'))
+        assertPopoverButton({ state: PopoverState.InvisibleUnmounted }, getTrigger(1))
+        assertPopoverButton({ state: PopoverState.InvisibleUnmounted }, getTrigger(2))
 
         // Verify the button of the second popover is still focused
-        assertActiveElement(getByText('Trigger 2'))
+        assertActiveElement(getTrigger(2))
       })
     )
   })
@@ -2029,7 +2045,7 @@ describe('Keyboard interactions', () => {
       })
     )
 
-    xit(
+    it(
       'should close the Popover by pressing `Enter` on a PopoverButton and go to the href of the `a` inside a PopoverPanel',
       suppressConsoleLogs(async () => {
         renderTemplate(
-Original file line number
+Diff line change
@@ Expand Up / @@ -1953,7 +1953,7 @@ describe('Keyboard interactions', () => { @@
           })
         )
-        xit(
+        it(
           'should close the Popover by pressing `Enter` on a Popover.Button and go to the href of the `a` inside a Popover.Panel',
           suppressConsoleLogs(async () => {
             render(
@@ Expand Down @@