From 00d92048dc3d031f57c9d36cf4bc9f601b2214c6 Mon Sep 17 00:00:00 2001
From: Ryan Gossiaux <ryan.gossiaux@gmail.com>
Date: Thu, 30 Dec 2021 17:52:03 -1000
Subject: [PATCH] Fix a few Transition-related tests

---
 src/lib/components/listbox/listbox.test.ts | 16 ++++++++++++++--
 src/lib/components/menu/menu.test.ts       | 22 +++++++++++++++++++---
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/listbox/listbox.test.ts b/src/lib/components/listbox/listbox.test.ts
index 9cdd584..c5f495a 100644
--- a/src/lib/components/listbox/listbox.test.ts
+++ b/src/lib/components/listbox/listbox.test.ts
@@ -63,6 +63,16 @@ beforeAll(() => {
 })
 afterAll(() => jest.restoreAllMocks())
 
+function nextFrame() {
+  return new Promise<void>((resolve) => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        resolve();
+      });
+    });
+  });
+}
+
 describe('safeguards', () => {
   it.each([
     ['ListboxButton', ListboxButton],
@@ -610,8 +620,7 @@ describe('Rendering composition', () => {
 
 
 describe('Composition', () => {
-  // TODO: fix this test
-  it.skip(
+  it(
     'should be possible to wrap the ListboxOptions with a Transition component',
     suppressConsoleLogs(async () => {
       let orderFn = jest.fn()
@@ -653,6 +662,9 @@ describe('Composition', () => {
 
       await click(getListboxButton())
 
+      // Wait for all transitions to finish
+      await nextFrame()
+
       // Verify that we tracked the `mounts` and `unmounts` in the correct order
       expect(orderFn.mock.calls).toEqual([
         ['Mounting - Listbox'],
diff --git a/src/lib/components/menu/menu.test.ts b/src/lib/components/menu/menu.test.ts
index 87bcbe6..f8cea3b 100644
--- a/src/lib/components/menu/menu.test.ts
+++ b/src/lib/components/menu/menu.test.ts
@@ -26,6 +26,16 @@ beforeAll(() => {
 })
 afterAll(() => jest.restoreAllMocks())
 
+function nextFrame() {
+  return new Promise<void>((resolve) => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        resolve();
+      });
+    });
+  });
+}
+
 describe('Safe guards', () => {
   it.each([
     ['MenuButton', MenuButton],
@@ -464,7 +474,7 @@ describe('Rendering composition', () => {
 })
 
 describe('Composition', () => {
-  it.skip(
+  it(
     'should be possible to wrap the MenuItems with a Transition component',
     suppressConsoleLogs(async () => {
       let orderFn = jest.fn()
@@ -506,6 +516,9 @@ describe('Composition', () => {
 
       await click(getMenuButton())
 
+      // Wait for all transitions to finish
+      await nextFrame()
+
       // Verify that we tracked the `mounts` and `unmounts` in the correct order
       expect(orderFn.mock.calls).toEqual([
         ['Mounting - Menu'],
@@ -517,8 +530,8 @@ describe('Composition', () => {
     })
   )
 
-  it.skip(
-    'should be possible to wrap the MenuItems with a Transition.Child component',
+  it(
+    'should be possible to wrap the MenuItems with a TransitionChild component',
     suppressConsoleLogs(async () => {
       let orderFn = jest.fn()
       render(
@@ -559,6 +572,9 @@ describe('Composition', () => {
 
       await click(getMenuButton())
 
+      // Wait for all transitions to finish
+      await nextFrame()
+
       // Verify that we tracked the `mounts` and `unmounts` in the correct order
       expect(orderFn.mock.calls).toEqual([
         ['Mounting - Menu'],