From 3f1e72ba58dc60398f861c8bf3396e658c6c6b7c Mon Sep 17 00:00:00 2001
From: Richard Helm <richard.helm@vonage.com>
Date: Wed, 13 Mar 2024 13:58:41 +0000
Subject: [PATCH] Add test for feedbackTemplate

---
 .../form-elements/form-elements.spec.ts       | 99 ++++++++++++++++++-
 1 file changed, 95 insertions(+), 4 deletions(-)

diff --git a/libs/components/src/shared/patterns/form-elements/form-elements.spec.ts b/libs/components/src/shared/patterns/form-elements/form-elements.spec.ts
index 7431df1cf0..d066e8805e 100644
--- a/libs/components/src/shared/patterns/form-elements/form-elements.spec.ts
+++ b/libs/components/src/shared/patterns/form-elements/form-elements.spec.ts
@@ -1,14 +1,16 @@
 import 'element-internals-polyfill';
 
-import { fixture } from '@vivid-nx/shared';
+import { elementUpdated, fixture } from '@vivid-nx/shared';
 import { customElement, FASTElement } from '@microsoft/fast-element';
-import { FormAssociated } from '@microsoft/fast-foundation';
+import { FormAssociated, FoundationElement } from '@microsoft/fast-foundation';
+import { iconRegistries, registerFactory } from '@vonage/vivid';
+import { applyMixinsWithObservables } from '../../utils/applyMixinsWithObservables.ts';
 import {
 	ErrorText,
 	errorText,
 	FormElement,
-	FormElementCharCount,
-	formElements,
+	FormElementCharCount, FormElementHelperText,
+	formElements, FormElementSuccessText, getFeedbackTemplate
 } from './form-elements';
 
 const VALIDATION_MESSAGE = 'Validation Message';
@@ -310,3 +312,92 @@ describe('Form Elements', function () {
 		});
 	});
 });
+
+describe('getFeedbackTemplate', () => {
+	@errorText
+	@formElements
+	class Feedback extends FormAssociated(FoundationElement) {
+		proxy = document.createElement('input');
+	}
+	interface Feedback extends FormElementHelperText, FormElementSuccessText, FormElement, ErrorText {}
+	applyMixinsWithObservables(Feedback, FormElementHelperText, FormElementSuccessText);
+
+	const feedbackDef = Feedback.compose({
+		baseName: 'feedback',
+		template: getFeedbackTemplate,
+	});
+	registerFactory([feedbackDef(), ...iconRegistries])('test');
+
+	let element: Feedback;
+	beforeEach(async () => {
+		element = await fixture('<test-feedback></test-feedback>') as Feedback;
+	});
+
+	const getMessage = (type: string) => {
+		const messageEl = element.shadowRoot!.querySelector(`.${type}-message.message--visible`);
+		if (!messageEl) {
+			return null;
+		}
+		const slot = messageEl.querySelector('slot') as HTMLSlotElement | null;
+		if (slot && slot.assignedNodes().length > 0) {
+			return slot.assignedNodes()[0].textContent!.trim();
+		} else {
+			return messageEl.textContent!.trim();
+		}
+	};
+
+	describe('helper text', () => {
+		it('should show helper text when property is set', async () => {
+			element.helperText = 'helper text';
+			await elementUpdated(element);
+
+			expect(getMessage('helper')).toBe('helper text');
+		});
+
+		it('should allow setting helper text via slot', async () => {
+			const helperText = document.createElement('span');
+			helperText.slot = 'helper-text';
+			helperText.textContent = 'helper text';
+			element.appendChild(helperText);
+			await elementUpdated(element);
+
+			expect(getMessage('helper')).toBe('helper text');
+		});
+	});
+
+	describe('error text', () => {
+		it('should show error text when property is set', async () => {
+			element.errorText = 'error text';
+			await elementUpdated(element);
+
+			expect(getMessage('error')).toBe('error text');
+		});
+
+		it('should hide helper text when set', async () => {
+			element.helperText = 'helper text';
+			element.errorText = 'error text';
+			await elementUpdated(element);
+
+			expect(getMessage('helper')).toBe(null);
+		});
+	});
+
+	describe('success text', () => {
+		it('should show success text when set', async () => {
+			element.successText = 'success text';
+			await elementUpdated(element);
+
+			expect(getMessage('success')).toBe('success text');
+		});
+
+		it('should hide error and helper text when set', async () => {
+			element.helperText = 'helper text';
+			element.errorText = 'error text';
+			element.successText = 'success text';
+			await elementUpdated(element);
+
+			expect(getMessage('helper')).toBe(null);
+			expect(getMessage('error')).toBe(null);
+		});
+	});
+});