raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-03-07 03:01:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
This reverts commit 67ae2e72f3.
This commit is contained in:
Cillian O'Ruanaidh
2022-02-04 11:47:38 +00:00
parent 67ae2e72f3
commit d03b52a163
4 changed files with 23 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
spec/javascripts/stimulus/toggle_controller_test.js
View File

@@ -9,17 +9,9 @@ describe("ToggleController", () => {
describe("#toggle", () => {
beforeEach(() => {
document.body.innerHTML = `<div data-controller="toggle">
<button id="toggle" data-action="click->toggle#toggle"></button>
<button id="toggle-show" data-action="click->toggle#toggle" data-toggle-show="true"></button>
<button id="toggle-hide" data-action="click->toggle#toggle" data-toggle-show="false"></button>
<button id="toggle-with-chevron" data-action="click->toggle#toggle">
<i class="icon-chevron-down"></i>
</button>
<div id="visible-content" data-toggle-target="content" style="display: block;">
visible content
</div>
<div id="invisible-content" data-toggle-target="content" style="display: none;">
invisible content
<span id="button" data-action="click->toggle#toggle" data-toggle-show="true" />
<div id="content" data-toggle-target="content" >
content
</div>
</div>`;
@@ -27,73 +19,14 @@ describe("ToggleController", () => {
application.register("toggle", toggle_controller);
});
it("toggling a button which shows and hides content switches the visibility of content", () => {
const button = document.getElementById("toggle");
const invisibleContent = document.getElementById("invisible-content");
const visibleContent = document.getElementById("visible-content");
expect(invisibleContent.style.display).toBe("none");
expect(visibleContent.style.display).toBe("block");
it("toggle the content", () => {
const button = document.getElementById("button");
const content = document.getElementById("content");
expect(content.style.display).toBe("");
button.click();
expect(invisibleContent.style.display).toBe("block");
expect(visibleContent.style.display).toBe("none");
});
it("toggling a button with 'data-toggle-show=true' shows invisible content", () => {
const button = document.getElementById("toggle-show");
const invisibleContent = document.getElementById("invisible-content");
expect(invisibleContent.style.display).toBe("none");
button.click();
expect(invisibleContent.style.display).toBe("block");
});
it("toggling a button with 'data-toggle-show=true' doesn't hide visible content", () => {
const button = document.getElementById("toggle-show");
const visibleContent = document.getElementById("visible-content");
expect(visibleContent.style.display).toBe("block");
button.click();
expect(visibleContent.style.display).toBe("block");
});
it("toggling a button with 'data-toggle-show=false' hides visible content", () => {
const button = document.getElementById("toggle-hide");
const visibleContent = document.getElementById("visible-content");
expect(visibleContent.style.display).toBe("block");
button.click();
expect(visibleContent.style.display).toBe("none");
});
it("toggling a button with 'data-toggle-show=false' doesn't show invisible content", () => {
const button = document.getElementById("toggle-hide");
const invisibleContent = document.getElementById("invisible-content");
expect(invisibleContent.style.display).toBe("none");
button.click();
expect(invisibleContent.style.display).toBe("none");
});
it("toggling a button with a chevron icon switches the visibility of content and the direction of the icon", () => {
const buttonA = document.getElementById("toggle-with-chevron");
const chevron = buttonA.querySelector("i");
const invisibleContent = document.getElementById("invisible-content");
const visibleContent = document.getElementById("visible-content");
expect(invisibleContent.style.display).toBe("none");
expect(visibleContent.style.display).toBe("block");
expect(chevron.className).toBe("icon-chevron-down");
buttonA.click();
expect(invisibleContent.style.display).toBe("block");
expect(visibleContent.style.display).toBe("none");
expect(chevron.className).toBe("icon-chevron-up");
expect(content.style.display).toBe("block");
});
});
});