raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-02-23 01:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #11811 from dacook/buu-stock-levels-11062

Browse Source 
[BUU] Stock level popout
This commit is contained in:
David Cook
2023-12-05 13:56:01 +11:00
committed by GitHub
parent 685a1955bc 6bf418c4eb
commit 300998acb6
15 changed files with 522 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
spec/javascripts/stimulus/bulk_form_controller_test.js
View File

@@ -36,6 +36,7 @@ describe("BulkFormController", () => {
<div data-record-id="1">
<input id="input1a" type="text" value="initial1a">
<input id="input1b" type="text" value="initial1b">
<button>a button is counted as a form element, but value is undefined</button>
</div>
<div data-record-id="2">
<input id="input2" type="text" value="initial2">
@@ -43,22 +44,12 @@ describe("BulkFormController", () => {
<input type="submit">
</form>
`;
const disable1 = document.getElementById("disable1");
const disable1_element = document.getElementById("disable1_element");
const disable2 = document.getElementById("disable2");
const disable2_element = document.getElementById("disable2_element");
const actions = document.getElementById("actions");
const changed_summary = document.getElementById("changed_summary");
const input1a = document.getElementById("input1a");
const input1b = document.getElementById("input1b");
const input2 = document.getElementById("input2");
});
describe("marking changed fields", () => {
it("onChange", () => {
it("onInput", () => {
input1a.value = 'updated1a';
input1a.dispatchEvent(new Event("change"));
input1a.dispatchEvent(new Event("input"));
// Expect only first field to show changed
expect(input1a.classList).toContain('changed');
expect(input1b.classList).not.toContain('changed');
@@ -66,30 +57,16 @@ describe("BulkFormController", () => {
// Change back to original value
input1a.value = 'initial1a';
input1a.dispatchEvent(new Event("change"));
input1a.dispatchEvent(new Event("input"));
expect(input1a.classList).not.toContain('changed');
});
it("onKeyup", () => {
input1a.value = 'u1a';
input1a.dispatchEvent(new Event("keyup"));
// Expect only first field to show changed
expect(input1a.classList).toContain('changed');
expect(input1b.classList).not.toContain('changed');
expect(input2.classList).not.toContain('changed');
// Change back to original value
input1a.value = 'initial1a';
input1a.dispatchEvent(new Event("keyup"));
expect(input1a.classList).not.toContain('changed');
});
it("multiple fields", () => {
input1a.value = 'updated1a';
input1a.dispatchEvent(new Event("change"));
input1a.dispatchEvent(new Event("input"));
input2.value = 'updated2';
input2.dispatchEvent(new Event("change"));
input2.dispatchEvent(new Event("input"));
// Expect only first field to show changed
expect(input1a.classList).toContain('changed');
expect(input1b.classList).not.toContain('changed');
@@ -97,7 +74,7 @@ describe("BulkFormController", () => {
// Change only one back to original value
input1a.value = 'initial1a';
input1a.dispatchEvent(new Event("change"));
input1a.dispatchEvent(new Event("input"));
expect(input1a.classList).not.toContain('changed');
expect(input1b.classList).not.toContain('changed');
expect(input2.classList).toContain('changed');
@@ -109,7 +86,7 @@ describe("BulkFormController", () => {
it("counts changed records ", () => {
// Record 1: First field changed
input1a.value = 'updated1a';
input1a.dispatchEvent(new Event("change"));
input1a.dispatchEvent(new Event("input"));
// Actions and changed summary are shown, with other sections disabled
expect(actions.classList).not.toContain('hidden');
expect(changed_summary.textContent).toBe('changed_summary, {"count":1}');
@@ -120,21 +97,21 @@ describe("BulkFormController", () => {
// Record 1: Second field changed
input1b.value = 'updated1b';
input1b.dispatchEvent(new Event("change"));
input1b.dispatchEvent(new Event("input"));
// Expect to show same summary translation
expect(actions.classList).not.toContain('hidden');
expect(changed_summary.textContent).toBe('changed_summary, {"count":1}');
// Record 2: has been changed
input2.value = 'updated2';
input2.dispatchEvent(new Event("change"));
input2.dispatchEvent(new Event("input"));
// Expect summary to count both records
expect(actions.classList).not.toContain('hidden');
expect(changed_summary.textContent).toBe('changed_summary, {"count":2}');
// Record 1: Change first field back to original value
input1a.value = 'initial1a';
input1a.dispatchEvent(new Event("change"));
input1a.dispatchEvent(new Event("input"));
// Both records are still changed.
expect(input1a.classList).not.toContain('changed');
expect(input1b.classList).toContain('changed');
@@ -144,7 +121,7 @@ describe("BulkFormController", () => {
// Record 1: Change second field back to original value
input1b.value = 'initial1b';
input1b.dispatchEvent(new Event("change"));
input1b.dispatchEvent(new Event("input"));
// Both fields for record 1 show unchanged, but second record is still changed
expect(actions.classList).not.toContain('hidden');
expect(changed_summary.textContent).toBe('changed_summary, {"count":1}');
@@ -155,7 +132,7 @@ describe("BulkFormController", () => {
// Record 2: Change back to original value
input2.value = 'initial2';
input2.dispatchEvent(new Event("change"));
input2.dispatchEvent(new Event("input"));
// Actions are hidden and other sections are now re-enabled
expect(actions.classList).toContain('hidden');
expect(changed_summary.textContent).toBe('changed_summary, {"count":0}');
@@ -192,13 +169,13 @@ describe("BulkFormController", () => {
// Record 1: First field changed
input1a.value = 'updated1a';
input1a.dispatchEvent(new Event("change"));
input1a.dispatchEvent(new Event("input"));
// Expect actions to remain visible
expect(actions.classList).not.toContain('hidden');
// Change back to original value
input1a.value = 'initial1a';
input1a.dispatchEvent(new Event("change"));
input1a.dispatchEvent(new Event("input"));
// Expect actions to remain visible
expect(actions.classList).not.toContain('hidden');
});

104
spec/javascripts/stimulus/popout_controller_test.js Normal file
View File

@@ -0,0 +1,104 @@
/**
* @jest-environment jsdom
*/
import { Application } from "stimulus";
import popout_controller from "../../../app/webpacker/controllers/popout_controller";
describe("PopoutController", () => {
beforeAll(() => {
const application = Application.start();
application.register("popout", popout_controller);
});
beforeEach(() => {
document.body.innerHTML = `
<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" 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="input4">
`;
});
describe("Show", () => {
it("shows the dialog on click", () => {
// button.click(); // For some reason this fails due to passive: true, but works in real life.
button.dispatchEvent(new Event("click"));
expectToBeShown(dialog);
});
it("shows the dialog on keyboard down arrow", () => {
button.dispatchEvent(new KeyboardEvent("keydown", { keyCode: 40 }));
expectToBeShown(dialog);
});
it("doesn't show the dialog on other key press (tab)", () => {
button.dispatchEvent(new KeyboardEvent("keydown", { keyCode: 9 }));
expectToBeClosed(dialog);
});
});
describe("Close", () => {
beforeEach(() => {
button.dispatchEvent(new Event("click")); // Dialog is open
})
it("closes the dialog when click outside", () => {
input4.click();
expectToBeClosed(dialog);
expect(button.innerText).toBe("value1");
});
it("closes the dialog when focusing another field (eg with tab)", () => {
input4.focus();
expectToBeClosed(dialog);
expect(button.innerText).toBe("value1");
});
it("doesn't close the dialog when focusing internal field", () => {
input2.focus();
expectToBeShown(dialog);
});
it("closes the dialog when checkbox is checked", () => {
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", () => {
input2.click();
button.dispatchEvent(new Event("click")); // Dialog is opened again
input2.click();
expect(input2.checked).toBe(false);
expectToBeShown(dialog);
});
});
describe("Cleaning up", () => {
// unable to test disconnect
});
});
function expectToBeShown(element) {
expect(element.style.display).toBe("block");
}
function expectToBeClosed(element) {
expect(element.style.display).toBe("none");
}

64
spec/javascripts/stimulus/toggle_control_controller_test.js Normal file
View File

@@ -0,0 +1,64 @@
/**
* @jest-environment jsdom
*/
import { Application } from "stimulus";
import toggle_controller from "../../../app/webpacker/controllers/toggle_control_controller";
describe("ToggleControlController", () => {
beforeAll(() => {
const application = Application.start();
application.register("toggle-control", toggle_controller);
});
describe("#disableIfPresent", () => {
describe("with checkbox", () => {
beforeEach(() => {
document.body.innerHTML = `<div data-controller="toggle-control">
<input id="checkbox" type="checkbox" value="1" data-action="change->toggle-control#disableIfPresent" />
<input id="control" data-toggle-control-target="control">
</div>`;
});
it("Disables when checkbox is checked", () => {
checkbox.click();
expect(checkbox.checked).toBe(true);
expect(control.disabled).toBe(true);
});
it("Enables when checkbox is un-checked", () => {
checkbox.click();
checkbox.click();
expect(checkbox.checked).toBe(false);
expect(control.disabled).toBe(false);
});
});
describe("with input", () => {
beforeEach(() => {
document.body.innerHTML = `<div data-controller="toggle-control">
<input id="input" value="" data-action="input->toggle-control#disableIfPresent" />
<input id="control" data-toggle-control-target="control">
</div>`;
});
it("Disables when input is filled", () => {
input.value = "test"
input.dispatchEvent(new Event("input"));
expect(control.disabled).toBe(true);
});
it("Enables when input is emptied", () => {
input.value = "test"
input.dispatchEvent(new Event("input"));
input.value = ""
input.dispatchEvent(new Event("input"));
expect(control.disabled).toBe(false);
});
});
});
});