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

Replace remote_toggle with method inside generic controller

Browse Source 
- put former remote toggle ctrller toggle method
   in new toggleAdvancedSettings in more generic toggle ctrller
 - modified acordingly the 2 associated views
 - put former test code in more generic ctrller test file
 - deleted now useless ctrller + test files
This commit is contained in:
cyrillefr
2024-02-06 17:02:23 +01:00
parent d772c590da
commit f8cb98f43e
6 changed files with 62 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
spec/javascripts/stimulus/remote_toggle_controller_test.js
View File

@@ -1,59 +0,0 @@
/**
* @jest-environment jsdom
*/
import { Application } from "stimulus";
import remote_toggle_controller from "../../../app/webpacker/controllers/remote_toggle_controller";
describe("RemoteToggleController", () => {
beforeAll(() => {
const application = Application.start();
application.register("remote-toggle", remote_toggle_controller);
});
describe("#toggle", () => {
beforeEach(() => {
document.body.innerHTML = `
<div data-controller="remote-toggle" data-remote-toggle-selector-value="#content">
<button id="remote-toggle" data-action="click->remote-toggle#toggle"></button>
<button id="remote-toggle-with-chevron" data-action="click->remote-toggle#toggle">
<i class="icon-chevron-down" data-remote-toggle-target="chevron"></i>
</button>
</div>
<div id="content">...</div>
`;
});
it("clicking a toggle switches the visibility of the :data-remote-toggle-selector element", () => {
const button = document.getElementById("remote-toggle");
const content = document.getElementById("content");
expect(content.style.display).toBe("");
button.click();
expect(content.style.display).toBe("none");
button.click();
expect(content.style.display).toBe("block");
});
it("clicking a toggle with a chevron icon switches the visibility of content and the direction of the icon", () => {
const button = document.getElementById("remote-toggle-with-chevron");
const chevron = button.querySelector("i");
const content = document.getElementById("content");
expect(content.style.display).toBe("");
expect(chevron.className).toBe("icon-chevron-down");
button.click();
expect(content.style.display).toBe("none");
expect(chevron.className).toBe("icon-chevron-up");
button.click();
expect(content.style.display).toBe("block");
expect(chevron.className).toBe("icon-chevron-down");
});
});
});

45
spec/javascripts/stimulus/toggle_control_controller_test.js
View File

@@ -108,4 +108,49 @@ describe("ToggleControlController", () => {
expect(content.style.display).toBe("block");
});
});
describe("#toggleAdvancedSettings", () => {
beforeEach(() => {
document.body.innerHTML = `
<div data-controller="toggle-control" data-toggle-control-selector-value="#content">
<button id="remote-toggle" data-action="click->toggle-control#toggleAdvancedSettings"></button>
<button id="remote-toggle-with-chevron" data-action="click->toggle-control#toggleAdvancedSettings">
<i class="icon-chevron-down" data-toggle-control-target="chevron"></i>
</button>
</div>
<div id="content">...</div>
`;
});
it("clicking a toggle switches the visibility of the :data-remote-toggle-selector element", () => {
const button = document.getElementById("remote-toggle");
const content = document.getElementById("content");
expect(content.style.display).toBe("");
button.click();
expect(content.style.display).toBe("none");
button.click();
expect(content.style.display).toBe("block");
});
it("clicking a toggle with a chevron icon switches the visibility of content and the direction of the icon", () => {
const button = document.getElementById("remote-toggle-with-chevron");
const chevron = button.querySelector("i");
const content = document.getElementById("content");
expect(content.style.display).toBe("");
expect(chevron.className).toBe("icon-chevron-down");
button.click();
expect(content.style.display).toBe("none");
expect(chevron.className).toBe("icon-chevron-up");
button.click();
expect(content.style.display).toBe("block");
expect(chevron.className).toBe("icon-chevron-down");
});
});
});