mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-04-06 07:29:16 +00:00
19006d6c17
But don't hide it immediately, because the user can't see if they made a selection, or accidentally closed it. Instead, fade slowly so that you can see the selected option momentarily (like system menus). This gives enough feedback while we wait for the selected action to perform. I did attempt a blink on the item background colour, like my favourite OS does which is really helpful. But couldn't get the CSS to work.
59 lines
2.0 KiB
JavaScript
59 lines
2.0 KiB
JavaScript
/**
|
|
* @jest-environment jsdom
|
|
*/
|
|
|
|
import { Application } from "stimulus";
|
|
import vertical_ellipsis_menu_controller from "../../../app/components/vertical_ellipsis_menu_component/vertical_ellipsis_menu_controller";
|
|
|
|
describe("VerticalEllipsisMenuController test", () => {
|
|
beforeAll(() => {
|
|
const application = Application.start();
|
|
application.register("vertical-ellipsis-menu", vertical_ellipsis_menu_controller);
|
|
});
|
|
|
|
beforeEach(() => {
|
|
document.body.innerHTML = `
|
|
<div data-controller="vertical-ellipsis-menu" id="root">
|
|
<div data-action="click->vertical-ellipsis-menu#toggle" id="button">...</div>
|
|
<div data-vertical-ellipsis-menu-target="content" id="content">
|
|
<a href="#" id="item"></a>
|
|
</div>
|
|
</div>
|
|
`;
|
|
const button = document.getElementById("button");
|
|
const content = document.getElementById("content");
|
|
const item = document.getElementById("item");
|
|
});
|
|
|
|
it("add show class to content when toggle is called", () => {
|
|
expect(content.classList.contains("show")).toBe(false);
|
|
button.click();
|
|
expect(content.classList.contains("show")).toBe(true);
|
|
});
|
|
|
|
it("remove show class from content when clicking button", () => {
|
|
button.click();
|
|
expect(content.classList.contains("show")).toBe(true);
|
|
button.click();
|
|
expect(content.classList.contains("show")).toBe(false);
|
|
});
|
|
|
|
it("remove show class from content when clicking outside", () => {
|
|
button.click();
|
|
expect(content.classList.contains("show")).toBe(true);
|
|
document.body.click();
|
|
expect(content.classList.contains("show")).toBe(false);
|
|
});
|
|
|
|
it("adds selected class to content when clicking a menu item", () => {
|
|
button.click();
|
|
expect(content.classList.contains("selected")).toBe(false);
|
|
item.click();
|
|
expect(content.classList.contains("selected")).toBe(true);
|
|
|
|
// and removes it again when clicking button again
|
|
button.click();
|
|
expect(content.classList.contains("selected")).toBe(false);
|
|
});
|
|
});
|