From 81f5755e3d53ef827ad55cb08c2b08e8b782f477 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Mon, 31 Jan 2022 16:34:35 +0000
Subject: [PATCH] Add tests for tabs_controller

---
 .../stimulus/tabs_controller_test.js          | 67 +++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 spec/javascripts/stimulus/tabs_controller_test.js

diff --git a/spec/javascripts/stimulus/tabs_controller_test.js b/spec/javascripts/stimulus/tabs_controller_test.js
new file mode 100644
index 0000000000..a67296bd0b
--- /dev/null
+++ b/spec/javascripts/stimulus/tabs_controller_test.js
@@ -0,0 +1,67 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { Application } from "stimulus";
+import tabs_controller from "../../../app/webpacker/controllers/tabs_controller";
+
+describe("TabsController", () => {
+  describe("#select", () => {
+    beforeEach(() => {
+      document.body.innerHTML = `
+        <div data-controller="tabs">
+          <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>
+          <div class="content-area" data-tabs-target="content" >
+            Cats content
+          </div>
+          <div class="content-area" data-tabs-target="content" >
+            Birds content
+          </div>
+        </div>
+      `;
+
+      const application = Application.start();
+      application.register("tabs", tabs_controller);
+    });
+
+    it("shows the corresponding content when a tab button is clicked", () => {
+      const dogs_button = document.querySelectorAll('button')[0];
+      const cats_button = document.querySelectorAll('button')[1];
+      const birds_button = document.querySelectorAll('button')[2];
+      const dogs_content = document.querySelectorAll('.content-area')[0];
+      const cats_content = document.querySelectorAll('.content-area')[1];
+      const birds_content = document.querySelectorAll('.content-area')[2];
+
+      expect(dogs_content.hidden).toBe(false);
+      expect(cats_content.hidden).toBe(true);
+      expect(birds_content.hidden).toBe(true);
+
+      expect(document.querySelectorAll('button.active').length).toBe(1);
+      expect(document.querySelectorAll('button.active')[0]).toBe(dogs_button);
+
+      birds_button.click();
+
+      expect(dogs_content.hidden).toBe(true);
+      expect(cats_content.hidden).toBe(true);
+      expect(birds_content.hidden).toBe(false);
+
+      expect(document.querySelectorAll('button.active').length).toBe(1);
+      expect(document.querySelectorAll('button.active')[0]).toBe(birds_button);
+
+      cats_button.click();
+
+      expect(dogs_content.hidden).toBe(true);
+      expect(cats_content.hidden).toBe(false);
+      expect(birds_content.hidden).toBe(true);
+
+      expect(document.querySelectorAll('button.active').length).toBe(1);
+      expect(document.querySelectorAll('button.active')[0]).toBe(cats_button);
+    });
+  });
+});