mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-01-25 20:46:48 +00:00
67ae2e72f3
Partially addresses #8699. This adjusts the Stimulus toggle controller so you can toggle content in both directions via a single element. This is in addition to the previous behaviour for toggling via multiple elements like radio buttons when each element always toggles in one direction only. If a toggle element contains a chevron icon this will automatically toggle the direction of that icon too. Note, in order to not have to re-implement the animation provided by the slideToggle() function in standard JavaScript, this just switches the style :display between 'none' and 'block' so it is not as smooth. Perhaps it could be made more smooth later with a CSS transition.
100 lines
3.9 KiB
JavaScript
100 lines
3.9 KiB
JavaScript
/**
|
|
* @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">
|
|
<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
|
|
</div>
|
|
</div>`;
|
|
|
|
const application = Application.start();
|
|
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");
|
|
|
|
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");
|
|
});
|
|
});
|
|
});
|