Add a simple CheckboxDisplay controller that show/hide content

depending on the checkbox state (checked or not)

spec/javascripts/stimulus/checkbox_display_controller_test.js

@@ -0,0 +1,39 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { Application } from "stimulus";
+import checkbox_display_controller from "../../../app/webpacker/controllers/checkbox_display_controller";
+
+describe("CheckboxDisplayController", () => {
+  beforeAll(() => {
+    const application = Application.start();
+    application.register("checkbox-display", checkbox_display_controller);
+  });
+
+  describe("#toggle", () => {
+    beforeEach(() => {
+      document.body.innerHTML = `<div >
+        <input type="checkbox" id="checkbox" data-controller="checkbox-display" data-checkbox-display-target-id-value="content" />
+        <div id="content">
+          content
+        </div>
+      </div>`;
+    });
+
+    it("show the content if the checkbox is checked, hide content either", () => {
+      const checkbox = document.getElementById("checkbox");
+      const content = document.getElementById("content");
+      
+      expect(content.style.display).toBe("none");
+
+      checkbox.click();
+
+      expect(content.style.display).toBe("block");
+
+      checkbox.click();
+
+      expect(content.style.display).toBe("none");
+    });
+  });
+});