code review feedback: update test name, add dialog test. Also fix lis…

…tener
BrightspaceUI · Sep 18, 2024 · 3c7cfd3 · 3c7cfd3
1 parent 128fbea
commit 3c7cfd3
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 3 deletions.
diff --git a/components/form/form.js b/components/form/form.js
@@ -1,5 +1,6 @@
 import { css, html, LitElement } from 'lit';
 import { findFormElements, flattenMap, getFormElementData, isCustomFormElement, isNativeFormElement } from './form-helper.js';
+import { findComposedAncestor } from '../../helpers/dom.js';
 import { FormMixin } from './form-mixin.js';
 
 /**
@@ -58,7 +59,13 @@ class Form extends FormMixin(LitElement) {
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 
-		this.addEventListener('d2l-dialog-close', () => {
+		const dialogAncestor = findComposedAncestor(
+			this,
+			(node) => { return (node?.tagName?.includes('D2L-DIALOG')); }
+		);
+		if (!dialogAncestor) return;
+
+		dialogAncestor.addEventListener('d2l-dialog-close', () => {
 			const flag = window.D2L?.LP?.Web?.UI?.Flags.Flag('GAUD-6979-dialog-close-reset-validation', true) ?? true;
 			if (!flag) return;
 			this.resetValidation();

diff --git a/components/form/test/form-element.test.js b/components/form/test/form-element.test.js
@@ -197,7 +197,7 @@ describe('form-element', () => {
 	});
 
 	describe('resetValidation', () => {
-		it('should show reset validation errors', async() => {
+		it('should reset validation errors', async() => {
 			await formElement.requestValidate();
 			expect(formElement.validationError).to.equal('Test form element is required.');
 			formElement.resetValidation();

diff --git a/components/form/test/form.test.js b/components/form/test/form.test.js
@@ -1,8 +1,9 @@
 import '../../validation/validation-custom.js';
+import '../../dialog/dialog.js';
 import '../form.js';
 import './form-element.js';
 import './nested-form.js';
-import { defineCE, expect, fixture } from '@brightspace-ui/testing';
+import { defineCE, expect, fixture, oneEvent } from '@brightspace-ui/testing';
 import { html, LitElement } from 'lit';
 
 class TestTwoForms extends LitElement {
@@ -460,4 +461,28 @@ describe('d2l-form', () => {
 
 	});
 
+	describe('dialog form', () => {
+		it('should reset validation when dialog closes', async() => {
+			const dialog = await fixture(html`
+				<d2l-dialog opened>
+					<d2l-form id="nested-form-1">
+						<input type="text" aria-label="Input 1" name="input1" required>
+					</d2l-form>
+				</d2l-dialog>
+			`);
+
+			const form = dialog.querySelector('d2l-form');
+			form.submit();
+
+			const errors = await form.validate();
+			expect(errors.size).to.equal(1);
+			expect(form._errors.size).to.equal(1);
+
+			dialog.opened = false;
+			await oneEvent(dialog, 'd2l-dialog-close');
+			expect(form._errors.size).to.equal(0);
+		});
+
+	});
+
 });