Close popout when focus outside

I'm starting to think that these stimulus tests are worthless. The environment is not the same as a browser, which creates extra work to deal with the inconsistencies. And it means we're not testing real world behaviour.

So these are just unit tests, but they take extra effort to put together due to the inter-relatedness with the DOM. Hmm.

spec/javascripts/stimulus/popout_controller_test.js

@@ -20,16 +20,19 @@ describe("PopoutController", () => {
           <input id="input2">
         </div>
       </div>
+      <input id="input3">
     `;
 
     const button = document.getElementById("button");
     const input1 = document.getElementById("input1");
     const input2 = document.getElementById("input2");
+    const input3 = document.getElementById("input3");
   });
 
   describe("Show", () => {
     it("shows the dialog on click", () => {
-      button.click();
+      // button.click(); // For some reason this fails due to passive: true, but works in real life.
+      button.dispatchEvent(new Event("click"));
 
       expect(dialog.style.display).toBe("block"); // visible
     });
@@ -46,4 +49,32 @@ describe("PopoutController", () => {
       expect(dialog.style.display).toBe("none"); // not visible
     });
   });
+
+  describe("Close", () => {
+    beforeEach(() => {
+      button.dispatchEvent(new Event("click")); // Dialog is open
+    })
+
+    it("closes the dialog when click outside", () => {
+      input3.click();
+
+      expect(dialog.style.display).toBe("none"); // not visible
+    });
+
+    it("closes the dialog when focusing another field (eg with tab)", () => {
+      input3.focus();
+
+      expect(dialog.style.display).toBe("none"); // not visible
+    });
+
+    it("doesn't close the dialog when focusing internal field", () => {
+      input2.focus();
+
+      expect(dialog.style.display).toBe("block"); // visible
+    });
+  });
+
+  describe("Cleaning up", () => {
+    // unable to test disconnect
+  });
 });