From 0f06ae8ca5c1db70429ac713bb344adf61037570 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Thu, 21 Nov 2024 20:10:16 -0500
Subject: [PATCH] Fixup test output for DefaultBox.test.js

---
 .../src/components/Upload/DefaultBox.test.js  | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/client/src/components/Upload/DefaultBox.test.js b/client/src/components/Upload/DefaultBox.test.js
index cdf918838b41..6aa9bb63de6a 100644
--- a/client/src/components/Upload/DefaultBox.test.js
+++ b/client/src/components/Upload/DefaultBox.test.js
@@ -1,4 +1,5 @@
 import { mount } from "@vue/test-utils";
+import flushPromises from "flush-promises";
 import { getLocalVue } from "tests/jest/helpers";
 
 import mountTarget from "./DefaultBox.vue";
@@ -26,6 +27,30 @@ function getWrapper() {
 }
 
 describe("Default", () => {
+    let UnpatchedIntersectionObserver;
+
+    beforeEach(() => {
+        UnpatchedIntersectionObserver = global.IntersectionObserver;
+
+        // The use of b-textarea in this DefaultRow causes the following warning:
+        // [Vue warn]: Error in directive b-visible unbind hook: "TypeError: this.observer.disconnect is not a function"
+        // I don't think there is a problem with the usage so I think this a bug in bootstrap vue, it can be worked around
+        // with the following code - but just suppressing the warning is probably better?
+        const observerMock = jest.fn(function IntersectionObserver(callback) {
+            this.observe = jest.fn();
+            this.disconnect = jest.fn();
+            // Optionally add a trigger() method to manually trigger a change
+            this.trigger = (mockedMutationsList) => {
+                callback(mockedMutationsList, this);
+            };
+        });
+        global.IntersectionObserver = observerMock;
+    });
+
+    afterEach(() => {
+        global.IntersectionObserver = UnpatchedIntersectionObserver;
+    });
+
     it("rendering", async () => {
         const wrapper = getWrapper();
         expect(wrapper.vm.counterAnnounce).toBe(0);
@@ -34,6 +59,7 @@ describe("Default", () => {
         expect(wrapper.find("#btn-reset").classes()).toEqual(expect.arrayContaining(["disabled"]));
         expect(wrapper.find("#btn-start").classes()).toEqual(expect.arrayContaining(["disabled"]));
         expect(wrapper.find("#btn-stop").classes()).toEqual(expect.arrayContaining(["disabled"]));
+        await flushPromises();
     });
 
     it("resets properly", async () => {
@@ -44,6 +70,7 @@ describe("Default", () => {
         expect(wrapper.vm.counterAnnounce).toBe(1);
         await wrapper.find("#btn-reset").trigger("click");
         expect(wrapper.vm.showHelper).toBe(true);
+        await flushPromises();
     });
 
     it("does render remote files button", async () => {
@@ -51,6 +78,7 @@ describe("Default", () => {
         expect(wrapper.find("#btn-remote-files").exists()).toBeTruthy();
         await wrapper.setProps({ fileSourcesConfigured: false });
         expect(wrapper.find("#btn-remote-files").exists()).toBeFalsy();
+        await flushPromises();
     });
 
     it("renders a limited set", async () => {
@@ -61,5 +89,6 @@ describe("Default", () => {
         expect(wrapper.findAll(".upload-row").length).toBe(3);
         const textMessage = wrapper.find("[data-description='lazyload message']");
         expect(textMessage.text()).toBe("Only showing first 3 of 5 entries.");
+        await flushPromises();
     });
 });