From 1b8c1bd27a3816473a6c78c0a33f086eee75374d Mon Sep 17 00:00:00 2001
From: Cillian O'Ruanaidh <contact@cilliano.com>
Date: Fri, 11 Feb 2022 10:21:26 +0000
Subject: [PATCH] Only initialise Stimulus app once in Jest tests in :beforeAll
 rather than :beforeEach

Before there was an issue with the remote_toggle_controller tests, which contains two tests. If you commented out one test and ran the other it would pass and vice versa but if both tests were uncommented only the first test would ever pass, the second one would fail. See https://github.com/openfoodfoundation/openfoodnetwork/pull/8805#discussion_r801464322

Co-authored-by: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
---
 .../stimulus/paymentmethod_controller_test.js         | 10 ++++++----
 .../stimulus/remote_toggle_controller_test.js         | 11 ++++++-----
 .../stimulus/stripe_cards_controller_test.js          |  8 +++++---
 spec/javascripts/stimulus/tabs_controller_test.js     | 10 ++++++----
 spec/javascripts/stimulus/toggle_controller_test.js   |  8 +++++---
 spec/javascripts/stimulus/update_controller_test.js   |  8 +++++---
 6 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/spec/javascripts/stimulus/paymentmethod_controller_test.js b/spec/javascripts/stimulus/paymentmethod_controller_test.js
index 09180ac066..b81dbbf605 100644
--- a/spec/javascripts/stimulus/paymentmethod_controller_test.js
+++ b/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", () => {
diff --git a/spec/javascripts/stimulus/remote_toggle_controller_test.js b/spec/javascripts/stimulus/remote_toggle_controller_test.js
index e46a0b61fe..507ce3827d 100644
--- a/spec/javascripts/stimulus/remote_toggle_controller_test.js
+++ b/spec/javascripts/stimulus/remote_toggle_controller_test.js
@@ -6,6 +6,11 @@ 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 = `
@@ -17,9 +22,6 @@ describe("RemoteToggleController", () => {
         </div>
         <div id="content">...</div>
       `;
-
-      const application = Application.start();
-      application.register("remote-toggle", remote_toggle_controller);
     });
 
     it("clicking a toggle switches the visibility of the :data-remote-toggle-selector element", () => {
@@ -36,8 +38,7 @@ describe("RemoteToggleController", () => {
       expect(content.style.display).toBe("block");
     });
 
-    /* skipping, this test passes when it's the only test in this file but not otherwise? */
-    it.skip("clicking a toggle with a chevron icon switches the visibility of content and the direction of the icon", () => {
+    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");
diff --git a/spec/javascripts/stimulus/stripe_cards_controller_test.js b/spec/javascripts/stimulus/stripe_cards_controller_test.js
index 44679a1e81..36d74ea314 100644
--- a/spec/javascripts/stimulus/stripe_cards_controller_test.js
+++ b/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", () => {
diff --git a/spec/javascripts/stimulus/tabs_controller_test.js b/spec/javascripts/stimulus/tabs_controller_test.js
index a67296bd0b..fa4ab5d737 100644
--- a/spec/javascripts/stimulus/tabs_controller_test.js
+++ b/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", () => {
diff --git a/spec/javascripts/stimulus/toggle_controller_test.js b/spec/javascripts/stimulus/toggle_controller_test.js
index 7dcd527e16..c60669d1b8 100644
--- a/spec/javascripts/stimulus/toggle_controller_test.js
+++ b/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", () => {
diff --git a/spec/javascripts/stimulus/update_controller_test.js b/spec/javascripts/stimulus/update_controller_test.js
index 33c85645c7..a6c4463944 100644
--- a/spec/javascripts/stimulus/update_controller_test.js
+++ b/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", () => {