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

Simplify event handlers

Browse Source 
The new 'input' event is for this exact use case.
This commit is contained in:
David Cook
2023-11-23 13:35:15 +11:00
parent 88fe8dcbe0
commit 373743f96d
2 changed files with 15 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -57,9 +57,9 @@ describe("BulkFormController", () => {
});
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');
@@ -67,30 +67,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');
@@ -98,7 +84,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');
@@ -110,7 +96,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}');
@@ -121,21 +107,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');
@@ -145,7 +131,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}');
@@ -156,7 +142,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}');
@@ -193,13 +179,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');
});