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

Show summary of modified records

Browse Source 
I found myself trying to write Ruby in Javascript, and it's not nearly as pretty..
Javascript now has more advanced data structures like Map, but it's rather useless because it doesn't have the usual iterator methods (such as filter, map, reduce etc).

Also for the spec I wasn't sure of the best approach, so will gladly recieve feedback.
This commit is contained in:
David Cook
2023-09-08 13:12:48 +10:00
parent 18e40bebd0
commit daefada5a9
4 changed files with 115 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,39 +11,99 @@ describe("BulkFormController", () => {
application.register("bulk-form", bulk_form_controller);
});
// Mock I18n. TODO: moved to a shared helper
beforeAll(() => {
const mockedT = jest.fn();
mockedT.mockImplementation((string, opts) => (string + ', ' + JSON.stringify(opts)));
global.I18n = {
t: mockedT
};
})
// (jest still doesn't have aroundEach https://github.com/jestjs/jest/issues/4543 )
afterAll(() => {
delete global.I18n;
})
beforeEach(() => {
document.body.innerHTML = `
<form data-controller="bulk-form">
<input id="input1" type="text" value="initial1">
<input id="input2" type="text" value="initial2">
<div id="modified_summary" data-bulk-form-target="modifiedSummary" data-translation-key="modified_summary"></div>
<div data-record-id="1">
<input id="input1a" type="text" value="initial1a">
<input id="input1b" type="text" value="initial1b">
</div>
<div data-record-id="2">
<input id="input2" type="text" value="initial2">
</div>
</form>
`;
});
describe("#toggleModified", () => {
it("marks a changed element as modified", () => {
// const form = document.getElementsByTagName("form")[0];
const input1 = document.getElementById("input1");
describe("Modifying input values", () => {
// This is more of a behaviour spec. Jest doesn't have all the niceties of RSpec so lots of code
// would be repeated if these were broken into multiple examples. So it seems impractical to
// write individual unit tests.
it("counts modified fields and records", () => {
const modified_summary = document.getElementById("modified_summary");
const input1a = document.getElementById("input1a");
const input1b = document.getElementById("input1b");
const input2 = document.getElementById("input2");
expect(input1.classList).not.toContain('modified');
// Record 1: First field changed (we're not simulating a user in a browser here; we're testing DOM events directly)
input1a.value = 'updated1a';
input1a.dispatchEvent(new Event("change"));
// Expect only first field to show modified, and show modified summary translation
expect(input1a.classList).toContain('modified');
expect(input1b.classList).not.toContain('modified');
expect(input2.classList).not.toContain('modified');
expect(modified_summary.textContent).toBe('modified_summary, {"count":1}');
// Value has been changed (we're not simulating a user in a browser here; we're testing DOM events directly)
input1.value = 'updated1';
input1.dispatchEvent(new Event("change"));
// form.dispatchEvent(new Event("change"));
expect(input1.classList).toContain('modified');
// Record 1: Second field changed
input1b.value = 'updated1b';
input1b.dispatchEvent(new Event("change"));
// Expect to show modified, and same summary translation
expect(input1a.classList).toContain('modified');
expect(input1b.classList).toContain('modified');
expect(input2.classList).not.toContain('modified');
expect(modified_summary.textContent).toBe('modified_summary, {"count":1}');
// Change back to original value
input1.value = 'initial1';
input1.dispatchEvent(new Event("change"));
// form.dispatchEvent(new Event("change"));
// Record 2: has been changed
input2.value = 'updated2';
input2.dispatchEvent(new Event("change"));
// Expect all fields to show modified, summary counts both records
expect(input1a.classList).toContain('modified');
expect(input1b.classList).toContain('modified');
expect(input2.classList).toContain('modified');
expect(modified_summary.textContent).toBe('modified_summary, {"count":2}');
expect(input1.classList).not.toContain('modified');
// Record 1: Change first field back to original value
input1a.value = 'initial1a';
input1a.dispatchEvent(new Event("change"));
// Expect first field to not show modified. But both records are still modified.
expect(input1a.classList).not.toContain('modified');
expect(input1b.classList).toContain('modified');
expect(input2.classList).toContain('modified');
expect(modified_summary.textContent).toBe('modified_summary, {"count":2}');
// Record 1: Change second field back to original value
input1b.value = 'initial1b';
input1b.dispatchEvent(new Event("change"));
// Both fields for record 1 show unmodified, but second record is still modified
expect(input1a.classList).not.toContain('modified');
expect(input1b.classList).not.toContain('modified');
expect(input2.classList).toContain('modified');
expect(modified_summary.textContent).toBe('modified_summary, {"count":1}');
// Record 2: Change back to original value
input2.value = 'initial2';
input2.dispatchEvent(new Event("change"));
// No fields or records are modified
expect(input1a.classList).not.toContain('modified');
expect(input1b.classList).not.toContain('modified');
expect(input2.classList).not.toContain('modified');
expect(modified_summary.textContent).toBe('modified_summary, {"count":0}');
});
});
});