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

Display summary of the popout values

Browse Source 
I couldn't think of a simpler way to hardcode it, so now we have a clever generic method :)

We can assume that hidden elements will stay hidden, but we need to check each time if an element is disabled or not.
This commit is contained in:
David Cook
2023-11-22 17:10:22 +11:00
parent 888e0b976b
commit 9bc1e873d3
2 changed files with 40 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
spec/javascripts/stimulus/popout_controller_test.js
View File

@@ -16,17 +16,22 @@ describe("PopoutController", () => {
<div data-controller="popout">
<button id="button" data-popout-target="button">On demand</button>
<div id="dialog" data-popout-target="dialog" style="display: none;">
<input id="input1">
<input id="input2" type="checkbox" data-action="change->popout#closeIfChecked">
<input id="input1" value="value1">
<label>
<input id="input2" type="checkbox" value="value2" data-action="change->popout#closeIfChecked">
label2
</label>
<input id="input3" type="hidden" value="value3">
</div>
</div>
<input id="input3">
<input id="input4">
`;
const button = document.getElementById("button");
const input1 = document.getElementById("input1");
const input2 = document.getElementById("input2");
const input3 = document.getElementById("input3");
const input4 = document.getElementById("input4");
});
describe("Show", () => {
@@ -56,15 +61,17 @@ describe("PopoutController", () => {
})
it("closes the dialog when click outside", () => {
input3.click();
input4.click();
expectToBeClosed(dialog);
expect(button.innerText).toBe("value1");
});
it("closes the dialog when focusing another field (eg with tab)", () => {
input3.focus();
input4.focus();
expectToBeClosed(dialog);
expect(button.innerText).toBe("value1");
});
it("doesn't close the dialog when focusing internal field", () => {
@@ -77,6 +84,7 @@ describe("PopoutController", () => {
input2.click();
expectToBeClosed(dialog);
expect(button.innerText).toBe("value1");// The checkbox label should be here, but I just couldn't get the test to work with labels. Don't worry, it works in the browser.
});
it("doesn't close the dialog when checkbox is unchecked", () => {