diff --git a/client/src/controllers/ProgressController.ts b/client/src/controllers/ProgressController.ts index 7058fa698d..2493a011b6 100644 --- a/client/src/controllers/ProgressController.ts +++ b/client/src/controllers/ProgressController.ts @@ -69,7 +69,7 @@ export class ProgressController extends Controller { window.cancelSpinner = () => { const attr = `data-${identifier}-loading-value`; - document.querySelectorAll(`[${attr}="true"]`).forEach((element) => { + document.querySelectorAll(`[${attr}~="true"]`).forEach((element) => { element.removeAttribute(attr); }); }; diff --git a/client/src/includes/chooserModal.js b/client/src/includes/chooserModal.js index 95be30c6aa..13b187e38c 100644 --- a/client/src/includes/chooserModal.js +++ b/client/src/includes/chooserModal.js @@ -25,8 +25,13 @@ const validateCreationForm = (form) => { } }); if (hasErrors) { - // eslint-disable-next-line no-undef - setTimeout(cancelSpinner, 500); + setTimeout(() => { + // clear any loading state on progress buttons + const attr = 'data-w-progress-loading-value'; + form.querySelectorAll(`[${attr}~="true"]`).forEach((element) => { + element.removeAttribute(attr); + }); + }, 500); } return !hasErrors; }; diff --git a/client/src/includes/chooserModal.test.js b/client/src/includes/chooserModal.test.js new file mode 100644 index 0000000000..ddf7c6a498 --- /dev/null +++ b/client/src/includes/chooserModal.test.js @@ -0,0 +1,64 @@ +import { validateCreationForm } from './chooserModal'; + +jest.useFakeTimers(); + +describe('chooserModal', () => { + describe('validateCreationForm', () => { + let form; + + beforeEach(() => { + document.body.innerHTML = ` +
+
+
+ +
+ +
+ `; + + form = document.getElementById('form'); + }); + + afterEach(() => { + jest.runAllTimers(); + }); + + it('should update the aria attribute on invalid fields', () => { + const input = document.getElementById('input'); + + expect(input.getAttribute('aria-invalid')).toBeFalsy(); + + validateCreationForm(form); + + expect(input.getAttribute('aria-invalid')).toBeTruthy(); + }); + + it('should append an error message', () => { + expect(form.querySelector('.error-message')).toBeFalsy(); + + validateCreationForm(form); + + expect(form.querySelector('.error-message').innerHTML).toEqual( + 'This field is required.', + ); + }); + + it('should clear any in progress buttons', () => { + const button = document.getElementById('button'); + + validateCreationForm(form); + + expect({ ...button.dataset }).toEqual({ + controller: 'w-progress', + wProgressLoadingValue: 'true', + }); + + jest.runAllTimers(); + + expect({ ...button.dataset }).toEqual({ + controller: 'w-progress', + }); + }); + }); +});