Merge pull request #8805 from cillian/remove-inline-advanced-settings-toggle-js

Replace inline JS for toggling order cycle advanced settings with StimulusJs controller

app/views/admin/order_cycles/_order_cycle_top_buttons.html.haml

@@ -1,19 +1,8 @@
 - content_for :page_actions do
-  :javascript
-    function toggleSettings(){
-      if( $('#advanced_settings').is(":visible") ){
-        $('button#toggle_settings i').switchClass("icon-chevron-up","icon-chevron-down")
-      }
-      else {
-        $('button#toggle_settings i').switchClass("icon-chevron-down","icon-chevron-up")
-      }
-      $("#advanced_settings").slideToggle()
-    }
-
-  %li
-    %button#toggle_settings{ onClick: 'toggleSettings()' }
+  %li{ "data-controller": "remote-toggle", "data-remote-toggle-selector-value": "#advanced_settings" }
+    %button#toggle_settings{ "data-action": "click->remote-toggle#toggle" }
       = t('.advanced_settings')
-      %i.icon-chevron-down
+      %i.icon-chevron-down{ "data-remote-toggle-target": "chevron" }
 
-#advanced_settings{ hidden: true }
+#advanced_settings{ style: "display: none" }
   = render partial: "/admin/order_cycles/advanced_settings"

app/webpacker/controllers/remote_toggle_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  static targets = ["chevron"];
+  static values = { selector: String }
+
+  toggle(event) {
+    if (this.hasChevronTarget) {
+      this.chevronTarget.classList.toggle("icon-chevron-down")
+      this.chevronTarget.classList.toggle("icon-chevron-up")
+    }
+
+    const element = document.querySelector(this.selectorValue)
+    element.style.display = element.style.display === "none" ? "block" : "none"
+  }
+}
+

spec/javascripts/stimulus/paymentmethod_controller_test.js

@@ -6,13 +6,18 @@ import { Application } from "stimulus";
 import paymentmethod_controller from "../../../app/webpacker/controllers/paymentmethod_controller";
 
 describe("PaymentmethodController", () => {
+  beforeAll(() => {
+    const application = Application.start();
+    application.register("paymentmethod", paymentmethod_controller);
+  });
+
   describe("#selectPaymentMethod", () => {
     beforeEach(() => {
       document.body.innerHTML = `<div data-controller="paymentmethod">
          <input id="paymentmethod_1" data-action="click->paymentmethod#selectPaymentMethod" data-paymentmethod-id="paymentmethod1" data-paymentmethod-target="input" />
          <input id="paymentmethod_2" data-action="click->paymentmethod#selectPaymentMethod" data-paymentmethod-id="paymentmethod2" data-paymentmethod-target="input" checked="checked" />
          <input id="paymentmethod_3" data-action="click->paymentmethod#selectPaymentMethod" data-paymentmethod-id="paymentmethod3" data-paymentmethod-target="input"/>
-         
+
          <div class="paymentmethod-container" id="paymentmethod1">
           <input type="number" id="input1" />
           <select id="select1" >
@@ -32,9 +37,6 @@ describe("PaymentmethodController", () => {
           </select>
          </div>
        </div>`;
-
-      const application = Application.start();
-      application.register("paymentmethod", paymentmethod_controller);
     });
 
     it("fill the right payment container", () => {

spec/javascripts/stimulus/remote_toggle_controller_test.js

@@ -0,0 +1,59 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { Application } from "stimulus";
+import remote_toggle_controller from "../../../app/webpacker/controllers/remote_toggle_controller";
+
+describe("RemoteToggleController", () => {
+  beforeAll(() => {
+    const application = Application.start();
+    application.register("remote-toggle", remote_toggle_controller);
+  });
+
+  describe("#toggle", () => {
+    beforeEach(() => {
+      document.body.innerHTML = `
+        <div data-controller="remote-toggle" data-remote-toggle-selector-value="#content">
+          <button id="remote-toggle" data-action="click->remote-toggle#toggle"></button>
+          <button id="remote-toggle-with-chevron" data-action="click->remote-toggle#toggle">
+            <i class="icon-chevron-down" data-remote-toggle-target="chevron"></i>
+          </button>
+        </div>
+        <div id="content">...</div>
+      `;
+    });
+
+    it("clicking a toggle switches the visibility of the :data-remote-toggle-selector element", () => {
+      const button = document.getElementById("remote-toggle");
+      const content = document.getElementById("content");
+      expect(content.style.display).toBe("");
+
+      button.click();
+
+      expect(content.style.display).toBe("none");
+
+      button.click();
+
+      expect(content.style.display).toBe("block");
+    });
+
+    it("clicking a toggle with a chevron icon switches the visibility of content and the direction of the icon", () => {
+      const button = document.getElementById("remote-toggle-with-chevron");
+      const chevron = button.querySelector("i");
+      const content = document.getElementById("content");
+      expect(content.style.display).toBe("");
+      expect(chevron.className).toBe("icon-chevron-down");
+
+      button.click();
+
+      expect(content.style.display).toBe("none");
+      expect(chevron.className).toBe("icon-chevron-up");
+
+      button.click();
+
+      expect(content.style.display).toBe("block");
+      expect(chevron.className).toBe("icon-chevron-down");
+    });
+  });
+});

spec/javascripts/stimulus/stripe_cards_controller_test.js

@@ -6,6 +6,11 @@ import { Application } from "stimulus";
 import stripe_cards_controller from "../../../app/webpacker/controllers/stripe_cards_controller";
 
 describe("StripeCardsController", () => {
+  beforeAll(() => {
+    const application = Application.start();
+    application.register("stripe-cards", stripe_cards_controller);
+  });
+
   beforeEach(() => {
     document.body.innerHTML = `<div data-controller="stripe-cards">
        <select data-action="change->stripe-cards#onSelectCard" id="select">
@@ -17,9 +22,6 @@ describe("StripeCardsController", () => {
         <input type="hidden" id="input_1">
        </div>
       </div>`;
-
-    const application = Application.start();
-    application.register("stripe-cards", stripe_cards_controller);
   });
   describe("#connect", () => {
     it("initialize with the right display state", () => {

spec/javascripts/stimulus/tabs_controller_test.js

@@ -6,6 +6,11 @@ import { Application } from "stimulus";
 import tabs_controller from "../../../app/webpacker/controllers/tabs_controller";
 
 describe("TabsController", () => {
+  beforeAll(() => {
+    const application = Application.start();
+    application.register("tabs", tabs_controller);
+  });
+
   describe("#select", () => {
     beforeEach(() => {
       document.body.innerHTML = `
@@ -13,7 +18,7 @@ describe("TabsController", () => {
           <button data-tabs-target="tab" data-action="click->tabs#select">Dogs</button>
           <button data-tabs-target="tab" data-action="click->tabs#select">Cats</button>
           <button data-tabs-target="tab" data-action="click->tabs#select">Birds</button>
-          
+
           <div class="content-area" data-tabs-target="content" >
             Dogs content
           </div>
@@ -25,9 +30,6 @@ describe("TabsController", () => {
           </div>
         </div>
       `;
-
-      const application = Application.start();
-      application.register("tabs", tabs_controller);
     });
 
     it("shows the corresponding content when a tab button is clicked", () => {

spec/javascripts/stimulus/toggle_controller_test.js

@@ -6,6 +6,11 @@ import { Application } from "stimulus";
 import toggle_controller from "../../../app/webpacker/controllers/toggle_controller";
 
 describe("ToggleController", () => {
+  beforeAll(() => {
+    const application = Application.start();
+    application.register("toggle", toggle_controller);
+  });
+
   describe("#toggle", () => {
     beforeEach(() => {
       document.body.innerHTML = `<div data-controller="toggle">
@@ -14,9 +19,6 @@ describe("ToggleController", () => {
           content
         </div>
       </div>`;
-
-      const application = Application.start();
-      application.register("toggle", toggle_controller);
     });
 
     it("toggle the content", () => {

spec/javascripts/stimulus/update_controller_test.js

@@ -6,15 +6,17 @@ import { Application } from "stimulus";
 import updateinput_controller from "../../../app/webpacker/controllers/updateinput_controller";
 
 describe("updateInput controller", () => {
+  beforeAll(() => {
+    const application = Application.start();
+    application.register("updateinput", updateinput_controller);
+  });
+
   describe("#update", () => {
     beforeEach(() => {
       document.body.innerHTML = `<form data-controller="updateinput">
         <input id="input" type="hidden" value="false" data-updateinput-target="input" />
         <div id="submit" data-action="click->updateinput#update" data-updateinput-value="true" />
       </form>`;
-
-      const application = Application.start();
-      application.register("updateinput", updateinput_controller);
     });
 
     it("update the input value", () => {