From 74216915067bcb0eb1f96d2f80a4baa35728ecb3 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 20 Jun 2023 16:35:38 +0200
Subject: [PATCH] Creates a dropdown controller with its specs

---
 .../controllers/dropdown_controller.js        | 28 +++++++++++
 .../stimulus/dropdown_controller_test.js      | 46 +++++++++++++++++++
 2 files changed, 74 insertions(+)
 create mode 100644 app/webpacker/controllers/dropdown_controller.js
 create mode 100644 spec/javascripts/stimulus/dropdown_controller_test.js

diff --git a/app/webpacker/controllers/dropdown_controller.js b/app/webpacker/controllers/dropdown_controller.js
new file mode 100644
index 0000000000..f84dca2ec3
--- /dev/null
+++ b/app/webpacker/controllers/dropdown_controller.js
@@ -0,0 +1,28 @@
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  static targets = ["arrow", "menu"];
+
+  connect() {
+    this.#hide();
+  }
+
+  toggle() {
+    if (this.menuTarget.classList.contains("hidden")) {
+      this.#show();
+    } else {
+      this.#hide();
+    }
+  }
+
+  #show() {
+    this.menuTarget.classList.remove("hidden");
+    this.arrowTarget.classList.remove(this.arrowTarget.dataset.collapsedClass);
+    this.arrowTarget.classList.add(this.arrowTarget.dataset.expandedClass);
+  }
+  #hide() {
+    this.menuTarget.classList.add("hidden");
+    this.arrowTarget.classList.remove(this.arrowTarget.dataset.expandedClass);
+    this.arrowTarget.classList.add(this.arrowTarget.dataset.collapsedClass);
+  }
+}
diff --git a/spec/javascripts/stimulus/dropdown_controller_test.js b/spec/javascripts/stimulus/dropdown_controller_test.js
new file mode 100644
index 0000000000..c2e3079075
--- /dev/null
+++ b/spec/javascripts/stimulus/dropdown_controller_test.js
@@ -0,0 +1,46 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { Application } from "stimulus";
+import dropdown_controller from "../../../app/webpacker/controllers/dropdown_controller";
+
+describe("Dropdown controller", () => {
+  beforeAll(() => {
+    const application = Application.start();
+    application.register("dropdown", dropdown_controller);
+  });
+
+  describe("Controller", () => {
+    beforeEach(() => {
+      document.body.innerHTML = `<div data-controller="dropdown">
+        <span id="dropdown" data-action="click->dropdown#toggle">
+          <span id="arrow" data-dropdown-target="arrow" data-expanded-class="expandedClass" data-collapsed-class="collapsedClass" />
+        </span>
+        <div id="menu" data-dropdown-target="menu" >
+
+        </div>
+      </div>`;
+    });
+
+    it("hide menu by default", () => {
+      const menu = document.getElementById("menu");
+      expect(menu.classList.contains("hidden")).toBe(true);
+    });
+
+    it("show menu when toggle and add/remove class on arrow", () => {
+      const dropdown = document.getElementById("dropdown");
+      const arrow = document.getElementById("arrow");
+      const menu = document.getElementById("menu");
+      expect(menu.classList.contains("hidden")).toBe(true);
+      expect(arrow.classList.contains("expandedClass")).toBe(false);
+      expect(arrow.classList.contains("collapsedClass")).toBe(true);
+
+      dropdown.click();
+
+      expect(menu.classList.contains("hidden")).toBe(false);
+      expect(arrow.classList.contains("expandedClass")).toBe(true);
+      expect(arrow.classList.contains("collapsedClass")).toBe(false);
+    });
+  });
+});