Prevent popout from updating display value

Watch out, HAML will strip an attribute with boolean false, so we need to use a string. Or reconsider using false as a default value..

I wish Jest had the rspec concept of `let`.

spec/javascripts/stimulus/popout_controller_test.js

@@ -11,24 +11,11 @@ describe("PopoutController", () => {
     application.register("popout", popout_controller);
   });
 
-  beforeEach(() => {
-    document.body.innerHTML = `
-      <div data-controller="popout">
-        <button id="button" data-popout-target="button">On demand</button>
-        <div id="dialog" data-popout-target="dialog" style="display: none;">
-          <input id="input1" value="value1" required>
-          <label>
-            <input id="input2" type="checkbox" value="value2" data-action="change->popout#closeIfChecked">
-            label2
-          </label>
-          <input id="input3" type="hidden" value="value3">
-        </div>
-      </div>
-      <input id="input4">
-    `;
-  });
-
   describe("Show", () => {
+    beforeEach(() => {
+      document.body.innerHTML = htmlTemplate();
+    });
+
     it("shows the dialog on click", () => {
       // button.click(); // For some reason this fails due to passive: true, but works in real life.
       button.dispatchEvent(new Event("click"));
@@ -64,6 +51,10 @@ describe("PopoutController", () => {
   });
 
   describe("Close", () => {
+    beforeEach(() => {
+      document.body.innerHTML = htmlTemplate();
+    });
+    // For some reason this has to be in a separate block
     beforeEach(() => {
       button.dispatchEvent(new Event("click")); // Dialog is open
     })
@@ -113,11 +104,43 @@ describe("PopoutController", () => {
     });
   });
 
+  describe("disable update-display", () => {
+    beforeEach(() => {
+      document.body.innerHTML = htmlTemplate({updateDisplay: "false" });
+    })
+
+    it("doesn't update display value", () => {
+      expect(button.innerText).toBe("On demand");
+      button.dispatchEvent(new Event("click")); // Dialog is open
+      input4.click(); //close dialog
+
+      expectToBeClosed(dialog);
+      expect(button.innerText).toBe("On demand");
+    });
+  });
+
   describe("Cleaning up", () => {
     // unable to test disconnect
   });
 });
 
+function htmlTemplate(opts = {updateDisplay: ""}) {
+  return `
+    <div data-controller="popout" data-popout-update-display-value="${opts['updateDisplay']}">
+      <button id="button" data-popout-target="button">On demand</button>
+      <div id="dialog" data-popout-target="dialog" style="display: none;">
+        <input id="input1" value="value1" required>
+        <label>
+          <input id="input2" type="checkbox" value="value2" data-action="change->popout#closeIfChecked">
+          label2
+        </label>
+        <input id="input3" type="hidden" value="value3">
+      </div>
+    </div>
+    <input id="input4">
+  `;
+}
+
 function expectToBeShown(element) {
   expect(element.style.display).toBe("block");
 }