Merge pull request #8099 from jibees/8097-test-stimulus

Add jest and stimulusjs testing

.github/workflows/build.yml

@@ -274,6 +274,9 @@ jobs:
       - name: Run JS tests
         run: RAILS_ENV=test bundle exec rake karma:run
 
+      - name: Run jest tests
+        run: yarn jest
+
       # Migration tests need to be run in a separate task.
       # See: https://github.com/openfoodfoundation/openfoodnetwork/pull/6924#issuecomment-813056525
       - name: Run migration tests

babel.config.js

@@ -64,7 +64,8 @@ module.exports = function(api) {
         {
           async: false
         }
-      ]
+      ],
+      ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
     ].filter(Boolean)
   }
 }

package.json

@@ -8,11 +8,17 @@
   "scripts": {
     "storybook": "start-storybook"
   },
+  "jest": {
+    "testRegex": [
+      "spec/javascripts/.*_test\\.js"
+    ]
+  },
   "devDependencies": {
     "@storybook/addon-controls": "^6.3.7",
     "@storybook/addon-docs": "^6.3.7",
     "@storybook/server": "^6.3.7",
     "jasmine-core": "~2.4.1",
+    "jest": "^27.0.6",
     "karma": "~6.3.4",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coffee-preprocessor": "~1.0.1",

spec/javascripts/stimulus/toggle_controller_test.js

@@ -0,0 +1,32 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { Application } from "stimulus";
+import toggle_controller from "../../../app/webpacker/controllers/toggle_controller";
+
+describe("ToggleController", () => {
+  describe("#toggle", () => {
+    beforeEach(() => {
+      document.body.innerHTML = `<div data-controller="toggle">
+        <span id="button" data-action="click->toggle#toggle" data-toggle-show="true" />
+        <div id="content" data-toggle-target="content" >
+          content
+        </div>
+      </div>`;
+
+      const application = Application.start();
+      application.register("toggle", toggle_controller);
+    });
+
+    it("toggle the content", () => {
+      const button = document.getElementById("button");
+      const content = document.getElementById("content");
+      expect(content.style.display).toBe("");
+
+      button.click();
+
+      expect(content.style.display).toBe("block");
+    });
+  });
+});