raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-02-07 22:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Sytem specs + controller spec

Browse Source 
- controller spec is lighter since it is based on an html element
This commit is contained in:
cyrillefr
2024-02-25 16:40:44 +01:00
parent 428b9b273c
commit b08623df23
3 changed files with 23 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
spec/javascripts/stimulus/dropdown_controller_test.js
View File

@@ -13,13 +13,20 @@ describe("Dropdown controller", () => {
describe("Controller", () => {
beforeEach(() => {
document.body.innerHTML = `<div data-controller="dropdown" id="container">
<span id="dropdown" data-action="click->dropdown#toggle">
<span id="arrow" data-dropdown-target="arrow" data-expanded-class="expandedClass expandedCLass2" data-collapsed-class="collapsedClass" />
</span>
<div id="menu" data-dropdown-target="menu" >
</div>
document.body.innerHTML = `<div id="container">
<details data-controller="dropdown" id="dropdown">
<summary id='summary'>
<span class="icon-reorder">
Actions
</span>
</summary>
<div id = "menu" class="menu" data-action="click->dropdown#closeOnMenu">
<div class="menu_item">
<span>Item 1</span>
<span>Item 2</span>
</div>
</div>
</details>
</div>`;
});
@@ -27,48 +34,15 @@ describe("Dropdown controller", () => {
document.body.innerHTML = "";
});
it("hide menu by default", () => {
const menu = document.getElementById("menu");
expect(menu.classList.contains("hidden")).toBe(true);
});
it("show menu when toggle and add/remove class on arrow", () => {
const dropdown = document.getElementById("dropdown");
const arrow = document.getElementById("arrow");
const menu = document.getElementById("menu");
expect(menu.classList.contains("hidden")).toBe(true);
expect(arrow.classList.contains("expandedClass")).toBe(false);
expect(arrow.classList.contains("expandedClass2")).toBe(false);
expect(arrow.classList.contains("collapsedClass")).toBe(true);
dropdown.click();
expect(menu.classList.contains("hidden")).toBe(false);
expect(arrow.classList.contains("expandedClass")).toBe(true);
expect(arrow.classList.contains("expandedCLass2")).toBe(true);
expect(arrow.classList.contains("collapsedClass")).toBe(false);
});
it ("hide menu when click outside", () => {
const dropdown = document.getElementById("dropdown");
const menu = document.getElementById("menu");
dropdown.click();
expect(menu.classList.contains("hidden")).toBe(false);
//open the details
dropdown.toggleAttribute('open')
//click elsewhere
document.body.click();
expect(menu.classList.contains("hidden")).toBe(true);
});
it ("do not display menu when disabled", () => {
const dropdown = document.getElementById("dropdown");
const container = document.getElementById("container");
const menu = document.getElementById("menu");
container.classList.add("disabled");
dropdown.click();
expect(menu.classList.contains("hidden")).toBe(true);
expect(dropdown.open).toBe(false);
});
});
});