From 3c73a042c43f32a877b6caba25d94e390395da58 Mon Sep 17 00:00:00 2001
From: William Kennedy <williamkennedyjnr@gmail.com>
Date: Fri, 27 Nov 2020 15:25:40 +0000
Subject: [PATCH] WIP add tests

---
 __tests__/setup.js       | 16 ----------------
 __tests__/toggle_test.js | 28 +++++++++-------------------
 package.json             |  4 ----
 3 files changed, 9 insertions(+), 39 deletions(-)
 delete mode 100644 __tests__/setup.js

diff --git a/__tests__/setup.js b/__tests__/setup.js
deleted file mode 100644
index efdbe9e..0000000
--- a/__tests__/setup.js
+++ /dev/null
@@ -1,16 +0,0 @@
-const fs = require("fs");
-const path = require("path");
-
-const shim = fs.readFileSync(
-   path.resolve(
-         "node_modules",
-         "mutationobserver-shim",
-         "dist",
-         "mutationobserver.min.js"
-       ),
-    { encoding: "utf-8" }
-);
-const script = window.document.createElement("script");
-script.textContent = shim;
-
-window.document.body.appendChild(script);
diff --git a/__tests__/toggle_test.js b/__tests__/toggle_test.js
index 2652a02..ec3604b 100644
--- a/__tests__/toggle_test.js
+++ b/__tests__/toggle_test.js
@@ -3,19 +3,14 @@
 import { Application, Controller } from "stimulus";
 import Toggle from "toggle";
 
-const emitEvent = (element, eventType) => {
-  const event = new Event(eventType);
-  element.dispatchEvent(event);
-};
-
 describe("ToggleController", () => {
-  describe(".toggledClass", () => {
+  describe("#toggle", () => {
     beforeEach(() => {
-      document.body.innerHTML = `<div data-controller='toggle' class="m-2">
-    <div data-action='click->toggle#toggle' class="bg-gray-900 text-white p-6">
+      document.body.innerHTML = `<div data-controller='toggle' data-toggle-class='toggledClass' class="m-2">
+    <div id='toggleAction' data-action='click->toggle#toggle' class="bg-gray-900 text-white p-6">
       What is the question?
     </div>
-    <div id='toggleTarget' data-target='toggle.toggleable' class="m-4 hidden">
+    <div id='toggleTarget' data-target='toggle.toggleable' class="m-4">
       <p>This is the answer</p>
     </div>
   </div>`
@@ -25,16 +20,11 @@ describe("ToggleController", () => {
     });
 
 
-    it("toggles hidden class from toggle.toggleable", () => {
-      let toggleTarget = document.getElementById('toggleTarget')
-      const evt = new Event('click', { bubbles: true, cancelable: false, composed: false });
-      toggleTarget.stimulate('click');
-      console.log(toggleTarget.className)
-      toggleTarget.dispatchEvent(evt)
-      toggleTarget.stimulate('click');
-      console.log(toggleTarget.className)
-      expect(toggleTarget.className.includes('hidden')).toEqual(false)
-
+    it("adds active class to toggle.toggleable", () => {
+      const toggleAction = document.getElementById('toggleAction')
+      const toggleTarget = document.getElementById('toggleTarget')
+      toggleAction.click()
+      expect(toggleTarget.className.includes('toggledClass')).toEqual(true)
     });
   });
 });
diff --git a/package.json b/package.json
index 9326591..9a87867 100644
--- a/package.json
+++ b/package.json
@@ -34,9 +34,6 @@
     "test": "jest"
   },
   "jest": {
-    "setupFiles": [
-      "./__tests__/setup.js"
-    ],
     "testRegex": ".*_test.js",
     "roots": [
       "__tests__"
@@ -48,7 +45,6 @@
   },
   "devDependencies": {
     "babel-jest": "^26.6.3",
-    "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-preset-es2015": "^6.24.1",
     "jest": "^26.6.3",
     "microbundle": "^0.12.3",