From a599fb85e0dbd59e3879468d89695d6a808ad158 Mon Sep 17 00:00:00 2001 From: Richard Helm Date: Wed, 13 Mar 2024 14:40:31 +0000 Subject: [PATCH] Refactor tests --- .../src/lib/checkbox/checkbox.spec.ts | 49 +---- .../src/lib/file-picker/file-picker.spec.ts | 37 ---- .../src/lib/number-field/number-field.spec.ts | 123 ------------ libs/components/src/lib/select/select.spec.ts | 55 +----- .../src/lib/text-area/text-area.spec.ts | 186 ------------------ .../src/lib/text-field/text-field.spec.ts | 150 -------------- .../form-elements/form-elements.spec.ts | 23 ++- 7 files changed, 26 insertions(+), 597 deletions(-) diff --git a/libs/components/src/lib/checkbox/checkbox.spec.ts b/libs/components/src/lib/checkbox/checkbox.spec.ts index b4f9d86f6f..f077778009 100644 --- a/libs/components/src/lib/checkbox/checkbox.spec.ts +++ b/libs/components/src/lib/checkbox/checkbox.spec.ts @@ -127,63 +127,20 @@ describe('vwc-checkbox', () => { }); }); - describe('helper text', function () { - it('should render the helper text when attribute is set on checkbox', async function () { - const helperTextElementWithoutText = element.shadowRoot?.querySelector('.helper-text'); - const helperText = 'Helper Text'; - element.helperText = helperText; - await elementUpdated(element); - expect(helperTextElementWithoutText) - .toBeNull(); - expect(element.shadowRoot?.querySelector('.helper-message') - ?.textContent - ?.trim()) - .toEqual(helperText); - }); - }); - describe('success Text', () => { it('should add success class to base when successText is set', async function () { - (element as any).successText = 'success'; + element.successText = 'success'; await elementUpdated(element); expect(getBaseElement(element).classList.contains('success')).toBeTruthy(); }); - - it('should show success text when successText is set', async function () { - (element as any).successText = 'success'; - await elementUpdated(element); - expect(element.shadowRoot?.querySelector('.success-message')?.textContent?.trim()).toEqual('success'); - }); - - it('should remove success text when undefined', async function () { - (element as any).successText = 'success'; - await elementUpdated(element); - (element as any).successText = undefined; - await elementUpdated(element); - expect(element.shadowRoot?.querySelector('.success-message')).toBeNull(); - }); }); describe('error Text', () => { it('should add error class to base when errorText is set', async function () { - (element as any).errorText = 'error'; + element.errorText = 'error'; await elementUpdated(element); expect(getBaseElement(element).classList.contains('error')).toBeTruthy(); }); - - it('should show error text when errorText is set', async function () { - (element as any).errorText = 'error'; - await elementUpdated(element); - expect(element.shadowRoot?.querySelector('.error-message')?.textContent?.trim()).toEqual('error'); - }); - - it('should remove error text when undefined', async function () { - (element as any).errorText = 'error'; - await elementUpdated(element); - (element as any).errorText = undefined; - await elementUpdated(element); - expect(element.shadowRoot?.querySelector('.error-message')).toBeNull(); - }); }); describe.each(['input', 'change'])('%s event', (eventName) => { @@ -318,4 +275,4 @@ describe('vwc-checkbox', () => { }); }); -}); \ No newline at end of file +}); diff --git a/libs/components/src/lib/file-picker/file-picker.spec.ts b/libs/components/src/lib/file-picker/file-picker.spec.ts index 4accac9222..a29b2e36c6 100644 --- a/libs/components/src/lib/file-picker/file-picker.spec.ts +++ b/libs/components/src/lib/file-picker/file-picker.spec.ts @@ -98,43 +98,6 @@ describe('vwc-file-picker', () => { }); }); - describe('helper text', function () { - it('should render the helper text when attribute is set on file picker', async function () { - const helperTextElementWithoutText = element.shadowRoot?.querySelector('.helper-message'); - const helperText = 'Helper Text'; - element.helperText = helperText; - await elementUpdated(element); - expect(helperTextElementWithoutText) - .toBeNull(); - expect(element.shadowRoot?.querySelector('.helper-message') - ?.textContent - ?.trim()) - .toEqual(helperText); - }); - }); - - describe('error text', function () { - it('should render the error text when attribute is set', async function () { - const errorTextElementWithoutAttribute = element.shadowRoot?.querySelector('.error-message'); - element.errorText = 'Error Text'; - await elementUpdated(element); - expect(errorTextElementWithoutAttribute) - .toBeNull(); - expect(element.shadowRoot?.querySelector('.error-message') - ?.textContent - ?.trim()) - .toEqual('Error Text'); - }); - - it('should hide helper text if error text is set', async function () { - element.helperText = 'Helper Text'; - element.errorText = 'Error Text'; - await elementUpdated(element); - expect(element.shadowRoot?.querySelector('.helper-message')).toBe(null); - expect(element.shadowRoot?.querySelector('.error-message')).not.toBe(null); - }); - }); - describe('value', function () { it('should be set to a fake path when a file is added', async function () { addFiles([await generateFile('london.png', 1)]); diff --git a/libs/components/src/lib/number-field/number-field.spec.ts b/libs/components/src/lib/number-field/number-field.spec.ts index 4d6b303a83..c643ea2963 100644 --- a/libs/components/src/lib/number-field/number-field.spec.ts +++ b/libs/components/src/lib/number-field/number-field.spec.ts @@ -19,15 +19,10 @@ function getRootElement(element: NumberField) { } describe('vwc-number-field', () => { - function setToBlurred() { element.dispatchEvent(new Event('blur')); } - function setToFocused() { - element.dispatchEvent(new Event('focus')); - } - function setValidityToError(errorMessage = 'error') { element.setValidity({badInput: true}, errorMessage); element.validate(); @@ -302,23 +297,7 @@ describe('vwc-number-field', () => { }); }); - describe('helper text', function () { - it('should render the helper text when attribute is set', async function () { - const helperTextElementWithoutText = element.shadowRoot?.querySelector('.helper-message'); - const helperText = 'Helper Text'; - element.helperText = helperText; - await elementUpdated(element); - expect(helperTextElementWithoutText) - .toBeNull(); - expect(element.shadowRoot?.querySelector('.helper-message') - ?.textContent - ?.trim()) - .toEqual(helperText); - }); - }); - describe('error message', function () { - it('should add class error to base if not valid', async function () { element.dirtyValue = true; setToBlurred(); @@ -330,84 +309,6 @@ describe('vwc-number-field', () => { .contains('error')) .toEqual(true); }); - - it('should render the error message when not valid', async function () { - const errorElementWithoutText = element.shadowRoot?.querySelector('.error-message'); - const errorMessage = 'Error Text'; - - element.dirtyValue = true; - setToBlurred(); - setValidityToError(errorMessage); - await elementUpdated(element); - - expect(errorElementWithoutText) - .toBeNull(); - expect(element.shadowRoot?.querySelector('.error-message') - ?.textContent - ?.trim()) - .toEqual(errorMessage); - }); - - it('should render the error message only after a blur', async function() { - const errorMessage = 'Error Text'; - element.dirtyValue = true; - setValidityToError(errorMessage); - await elementUpdated(element); - expect(element.shadowRoot?.querySelector('.error-message')).toBeNull(); - }); - - it('should replace helper text', async function () { - element.helperText = 'helper text'; - element.dirtyValue = true; - setToBlurred(); - setValidityToError(); - await elementUpdated(element); - expect(element.shadowRoot?.querySelector('.helper-text')) - .toBeNull(); - }); - - it('should set error message to empty string when pristine', async function () { - setValidityToError(); - await elementUpdated(element); - expect(element.errorValidationMessage) - .toEqual(''); - }); - - it('should validate after a blur', async function () { - const errorMessage = 'Error Text'; - element.dirtyValue = true; - setValidityToError(errorMessage); - setToBlurred(); - await elementUpdated(element); - expect(element.shadowRoot?.querySelector('.error-message')?. - textContent?.trim()).toEqual(errorMessage); - }); - - it('should update error message when blurred', async function() { - setToBlurred(); - const errorMessage = 'Error Text'; - const errorMessageTwo = 'Error Text 2'; - element.dirtyValue = true; - setValidityToError(errorMessage); - await elementUpdated(element); - - setValidityToError(errorMessageTwo); - await elementUpdated(element); - - expect(element.shadowRoot?.querySelector('.error-message')?. - textContent?.trim()).toEqual(errorMessageTwo); - }); - - it('should change the error message only when already not valid', async function() { - setToBlurred(); - setToFocused(); - const errorMessage = 'Error Text'; - element.dirtyValue = true; - setValidityToError(errorMessage); - await elementUpdated(element); - - expect(element.shadowRoot?.querySelector('.error-message')).toBeNull(); - }); }); describe('successText', function () { @@ -420,30 +321,6 @@ describe('vwc-number-field', () => { .contains('success')) .toEqual(true); }); - - it('should not show helper text when success is shown', async function () { - element.helperText = 'help'; - element.successText = 'success'; - await elementUpdated(element); - expect(element.shadowRoot?.querySelector('.helper-text')) - .toBeNull(); - }); - - it('should not show error message when success is shown', async function () { - element.dirtyValue = true; - setToBlurred(); - setValidityToError('blah'); - element.successText = 'success'; - await elementUpdated(element); - expect(element.shadowRoot?.querySelector('.error-message')) - .toBeNull(); - }); - - it('should show success message if set', async function() { - element.successText = 'success'; - await elementUpdated(element); - expect(element.shadowRoot?.querySelector('.success-message')?.textContent?.trim()).toEqual('success'); - }); }); describe('disabled', function () { diff --git a/libs/components/src/lib/select/select.spec.ts b/libs/components/src/lib/select/select.spec.ts index 1f8584bda0..61d2f68586 100644 --- a/libs/components/src/lib/select/select.spec.ts +++ b/libs/components/src/lib/select/select.spec.ts @@ -131,65 +131,20 @@ describe('vwc-select', () => { }); }); - describe('helper text', function () { - it('should render the helper text when attribute is set on select', async function () { - const helperTextElementWithoutText = element.shadowRoot?.querySelector('.helper-text'); - const helperText = 'Helper Text'; - element.helperText = helperText; - await elementUpdated(element); - expect(helperTextElementWithoutText) - .toBeNull(); - expect(element.shadowRoot?.querySelector('.helper-message') - ?.textContent - ?.trim()) - .toEqual(helperText); - }); - }); - - describe('success Text', () => { + describe('success text', () => { it('should add success class to base when successText is set', async function () { - (element as any).successText = 'success'; + element.successText = 'success'; await elementUpdated(element); expect(getControlElement(element).classList.contains('success')).toBeTruthy(); }); - - it('should show success text when successText is set', async function () { - (element as any).successText = 'success'; - await elementUpdated(element); - expect(element.shadowRoot?.querySelector('.success-message')?.textContent?.trim()).toEqual('success'); - }); - - it('should remove success text when undefined', async function () { - (element as any).successText = 'success'; - await elementUpdated(element); - (element as any).successText = undefined; - await elementUpdated(element); - expect(element.shadowRoot?.querySelector('.success-message')).toBeNull(); - }); - }); - describe('error Text', () => { + describe('error text', () => { it('should add error class to base when errorText is set', async function () { - (element as any).errorText = 'error'; + element.errorText = 'error'; await elementUpdated(element); expect(getControlElement(element).classList.contains('error')).toBeTruthy(); }); - - it('should show error text when errorText is set', async function () { - (element as any).errorText = 'error'; - await elementUpdated(element); - expect(element.shadowRoot?.querySelector('.error-message')?.textContent?.trim()).toEqual('error'); - }); - - it('should remove error text when undefined', async function () { - (element as any).errorText = 'error'; - await elementUpdated(element); - (element as any).errorText = undefined; - await elementUpdated(element); - expect(element.shadowRoot?.querySelector('.error-message')).toBeNull(); - }); - }); describe('disabled', function () { @@ -568,7 +523,7 @@ describe('vwc-select', () => { await elementUpdated(element); expect(getControlElement(element).querySelector('.selected-value')?.textContent?.trim()).toEqual('placeholder'); - + element.selectedIndex = 2; await elementUpdated(element); expect(getControlElement(element).querySelector('.selected-value')?.textContent?.trim()).toEqual('3'); diff --git a/libs/components/src/lib/text-area/text-area.spec.ts b/libs/components/src/lib/text-area/text-area.spec.ts index 2ff73782f4..aa10800362 100644 --- a/libs/components/src/lib/text-area/text-area.spec.ts +++ b/libs/components/src/lib/text-area/text-area.spec.ts @@ -17,15 +17,10 @@ function getTextareaElement(element: TextArea) { } describe('vwc-text-area', () => { - function setToBlurred() { element.dispatchEvent(new Event('blur')); } - function setToFocused() { - element.dispatchEvent(new Event('focus')); - } - function setValidityToError(errorMessage = 'error') { element.setValidity({badInput: true}, errorMessage); element.validate(); @@ -346,23 +341,7 @@ describe('vwc-text-area', () => { }); }); - describe('helper text', function () { - it('should render the helper text when attribute is set', async function () { - const helperTextElementWithoutText = element.shadowRoot?.querySelector('.helper-message'); - const helperText = 'Helper Text'; - element.helperText = helperText; - await elementUpdated(element); - expect(helperTextElementWithoutText) - .toBeNull(); - expect(element.shadowRoot?.querySelector('.helper-message') - ?.textContent - ?.trim()) - .toEqual(helperText); - }); - }); - describe('error message', function () { - it('should add class error to base if not valid', async function () { element.dirtyValue = true; setToBlurred(); @@ -374,101 +353,6 @@ describe('vwc-text-area', () => { .contains('error')) .toEqual(true); }); - - it('should set required message if submitted', async function () { - - element.required = true; - await elementUpdated(element); - element.dispatchEvent(new Event('invalid')); - await elementUpdated(element); - const errorElement = element.shadowRoot?.querySelector('.error-message'); - - expect(getBaseElement(element) - .classList - .contains('error')) - .toEqual(true); - - expect(errorElement !== null).toBeTruthy(); - }); - - it('should render the error message when not valid', async function () { - const errorElementWithoutText = element.shadowRoot?.querySelector('.error-message'); - const errorMessage = 'Error Text'; - - element.dirtyValue = true; - setToBlurred(); - setValidityToError(errorMessage); - await elementUpdated(element); - - expect(errorElementWithoutText) - .toBeNull(); - expect(element.shadowRoot?.querySelector('.error-message') - ?.textContent - ?.trim()) - .toEqual(errorMessage); - }); - - it('should render the error message only after a blur', async function() { - const errorMessage = 'Error Text'; - element.dirtyValue = true; - setValidityToError(errorMessage); - await elementUpdated(element); - expect(element.shadowRoot?.querySelector('.error-message')).toBeNull(); - }); - - it('should replace helper text', async function () { - element.helperText = 'helper text'; - element.dirtyValue = true; - setToBlurred(); - setValidityToError(); - await elementUpdated(element); - expect(element.shadowRoot?.querySelector('.helper-text')) - .toBeNull(); - }); - - it('should set error message to empty string when pristine', async function () { - setValidityToError(); - await elementUpdated(element); - expect(element.errorValidationMessage) - .toEqual(''); - }); - - it('should validate after a blur', async function () { - const errorMessage = 'Error Text'; - element.dirtyValue = true; - setValidityToError(errorMessage); - setToBlurred(); - await elementUpdated(element); - expect(element.shadowRoot?.querySelector('.error-message')?. - textContent?.trim()).toEqual(errorMessage); - }); - - it('should update error message when blurred', async function() { - setToBlurred(); - const errorMessage = 'Error Text'; - const errorMessageTwo = 'Error Text 2'; - element.dirtyValue = true; - setValidityToError(errorMessage); - await elementUpdated(element); - - setValidityToError(errorMessageTwo); - await elementUpdated(element); - - expect(element.shadowRoot?.querySelector('.error-message')?. - textContent?.trim()).toEqual(errorMessageTwo); - }); - - it('should change the error message only when already not valid', async function() { - setToBlurred(); - setToFocused(); - const errorMessage = 'Error Text'; - element.dirtyValue = true; - setValidityToError(errorMessage); - await elementUpdated(element); - - expect(element.shadowRoot?.querySelector('.error-message')).toBeNull(); - }); - }); describe('successText', function () { @@ -481,76 +365,6 @@ describe('vwc-text-area', () => { .contains('success')) .toEqual(true); }); - - it('should not show helper text when success is shown', async function () { - element.helperText = 'help'; - element.successText = 'success'; - await elementUpdated(element); - expect(element.shadowRoot?.querySelector('.helper-text')) - .toBeNull(); - }); - - it('should not show error message when success is shown', async function () { - element.dirtyValue = true; - setToBlurred(); - setValidityToError('blah'); - element.successText = 'success'; - await elementUpdated(element); - expect(element.shadowRoot?.querySelector('.error-message')) - .toBeNull(); - }); - - it('should show success message if set', async function() { - element.successText = 'success'; - await elementUpdated(element); - expect(element.shadowRoot?.querySelector('.success-message')?.textContent?.trim()).toEqual('success'); - }); - }); - - describe('forced error', function () { - const forcedErrorMessage = 'BAD!'; - - it('should force the input in custom error mode', async function () { - element.errorText = forcedErrorMessage; - await elementUpdated(element); - expect(element.validationMessage).toBe(forcedErrorMessage); - expect(element.validity.valid).toBeFalsy(); - }); - - it('should add the error class', async function () { - element.errorText = forcedErrorMessage; - await elementUpdated(element); - expect(getBaseElement(element) - .classList - .contains('error')) - .toEqual(true); - }); - - it('should display the given error message', async function () { - element.errorText = forcedErrorMessage; - await elementUpdated(element); - const errorElement = element.shadowRoot?.querySelector('.error-message'); - expect(errorElement !== null).toBeTruthy(); - }); - - it('should replace the current error state when set', async function () { - element.required = true; - setToBlurred(); - element.errorText = forcedErrorMessage; - await elementUpdated(element); - expect(element.validationMessage).toBe(forcedErrorMessage); - }); - - it('should restore the current error state when removed', async function () { - element.required = true; - setToBlurred(); - await elementUpdated(element); - const initialErrorMessage = element.validationMessage; - element.errorText = forcedErrorMessage; - await elementUpdated(element); - element.errorText = ''; - expect(element.validationMessage).toBe(initialErrorMessage); - }); }); describe('rows, cols and wrap', function () { diff --git a/libs/components/src/lib/text-field/text-field.spec.ts b/libs/components/src/lib/text-field/text-field.spec.ts index 8f20cd5754..32bf6f46d2 100644 --- a/libs/components/src/lib/text-field/text-field.spec.ts +++ b/libs/components/src/lib/text-field/text-field.spec.ts @@ -18,10 +18,6 @@ describe('vwc-text-field', () => { element.dispatchEvent(new Event('blur')); } - function setToFocused() { - element.dispatchEvent(new Event('focus')); - } - function setValidityToError(errorMessage = 'error') { element.setValidity({badInput: true}, errorMessage); element.validate(); @@ -345,23 +341,7 @@ describe('vwc-text-field', () => { }); }); - describe('helper text', function () { - it('should render the helper text when attribute is set', async function () { - const helperTextElementWithoutText = element.shadowRoot?.querySelector('.helper-text'); - const helperText = 'Helper Text'; - element.helperText = helperText; - await elementUpdated(element); - expect(helperTextElementWithoutText) - .toBeNull(); - expect(element.shadowRoot?.querySelector('.helper-message') - ?.textContent - ?.trim()) - .toEqual(helperText); - }); - }); - describe('error message', function () { - it('should add class error to base if not valid', async function () { element.dirtyValue = true; setToBlurred(); @@ -373,100 +353,6 @@ describe('vwc-text-field', () => { .contains('error')) .toEqual(true); }); - - it('should set required message if submitted', async function () { - - element.required = true; - await elementUpdated(element); - element.dispatchEvent(new Event('invalid')); - await elementUpdated(element); - const errorElement = element.shadowRoot?.querySelector('.error-message'); - - expect(getBaseElement(element) - .classList - .contains('error')) - .toEqual(true); - - expect(errorElement !== null).toBeTruthy(); - }); - - it('should render the error message when not valid', async function () { - const errorElementWithoutText = element.shadowRoot?.querySelector('.error-message'); - const errorMessage = 'Error Text'; - - element.dirtyValue = true; - setToBlurred(); - setValidityToError(errorMessage); - await elementUpdated(element); - - expect(errorElementWithoutText) - .toBeNull(); - expect(element.shadowRoot?.querySelector('.error-message') - ?.textContent - ?.trim()) - .toEqual(errorMessage); - }); - - it('should render the error message only after a blur', async function() { - const errorMessage = 'Error Text'; - element.dirtyValue = true; - setValidityToError(errorMessage); - await elementUpdated(element); - expect(element.shadowRoot?.querySelector('.error-message')).toBeNull(); - }); - - it('should replace helper text', async function () { - element.helperText = 'helper text'; - element.dirtyValue = true; - setToBlurred(); - setValidityToError(); - await elementUpdated(element); - expect(element.shadowRoot?.querySelector('.helper-text')) - .toBeNull(); - }); - - it('should set error message to empty string when pristine', async function () { - setValidityToError(); - await elementUpdated(element); - expect(element.errorValidationMessage) - .toEqual(''); - }); - - it('should validate after a blur', async function () { - const errorMessage = 'Error Text'; - element.dirtyValue = true; - setValidityToError(errorMessage); - setToBlurred(); - await elementUpdated(element); - expect(element.shadowRoot?.querySelector('.error-message')?. - textContent?.trim()).toEqual(errorMessage); - }); - - it('should update error message when blurred', async function() { - setToBlurred(); - const errorMessage = 'Error Text'; - const errorMessageTwo = 'Error Text 2'; - element.dirtyValue = true; - setValidityToError(errorMessage); - await elementUpdated(element); - - setValidityToError(errorMessageTwo); - await elementUpdated(element); - - expect(element.shadowRoot?.querySelector('.error-message')?. - textContent?.trim()).toEqual(errorMessageTwo); - }); - - it('should change the error message only when already not valid', async function() { - setToBlurred(); - setToFocused(); - const errorMessage = 'Error Text'; - element.dirtyValue = true; - setValidityToError(errorMessage); - await elementUpdated(element); - - expect(element.shadowRoot?.querySelector('.error-message')).toBeNull(); - }); }); describe('successText', function () { @@ -479,42 +365,6 @@ describe('vwc-text-field', () => { .contains('success')) .toEqual(true); }); - - it('should not show helper text when success is shown', async function () { - element.helperText = 'help'; - element.successText = 'success'; - await elementUpdated(element); - expect(element.shadowRoot?.querySelector('.helper-text')) - .toBeNull(); - }); - - it('should not show error message when success is shown', async function () { - element.dirtyValue = true; - setToBlurred(); - setValidityToError('blah'); - element.successText = 'success'; - await elementUpdated(element); - expect(element.shadowRoot?.querySelector('.error-message')) - .toBeNull(); - }); - - it('should take precedence over errorText', async function () { - element.successText = 'success'; - element.errorText = 'error'; - await elementUpdated(element); - expect(element.shadowRoot?.querySelector('.error-message')).toBeNull(); - expect( - element.shadowRoot - ?.querySelector('.success-message') - ?.textContent?.trim() - ).toEqual('success'); - }); - - it('should show success message if set', async function() { - element.successText = 'success'; - await elementUpdated(element); - expect(element.shadowRoot?.querySelector('.success-message')?.textContent?.trim()).toEqual('success'); - }); }); describe('disabled', function () { 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 d066e8805e..e5fd7ccb93 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 @@ -3,14 +3,17 @@ import 'element-internals-polyfill'; import { elementUpdated, fixture } from '@vivid-nx/shared'; import { customElement, FASTElement } from '@microsoft/fast-element'; import { FormAssociated, FoundationElement } from '@microsoft/fast-foundation'; -import { iconRegistries, registerFactory } from '@vonage/vivid'; +import { registerFactory } from '@vonage/vivid'; import { applyMixinsWithObservables } from '../../utils/applyMixinsWithObservables.ts'; import { ErrorText, errorText, FormElement, - FormElementCharCount, FormElementHelperText, - formElements, FormElementSuccessText, getFeedbackTemplate + FormElementCharCount, + FormElementHelperText, + formElements, + FormElementSuccessText, + getFeedbackTemplate, } from './form-elements'; const VALIDATION_MESSAGE = 'Validation Message'; @@ -319,14 +322,14 @@ describe('getFeedbackTemplate', () => { class Feedback extends FormAssociated(FoundationElement) { proxy = document.createElement('input'); } - interface Feedback extends FormElementHelperText, FormElementSuccessText, FormElement, ErrorText {} + interface Feedback extends FormElementHelperText, FormElementSuccessText, FormElement, ErrorText, FormAssociated {} applyMixinsWithObservables(Feedback, FormElementHelperText, FormElementSuccessText); const feedbackDef = Feedback.compose({ baseName: 'feedback', template: getFeedbackTemplate, }); - registerFactory([feedbackDef(), ...iconRegistries])('test'); + registerFactory([feedbackDef()])('test'); let element: Feedback; beforeEach(async () => { @@ -366,6 +369,16 @@ describe('getFeedbackTemplate', () => { }); describe('error text', () => { + it('should show validation error when the field is invalid', async () => { + element.dirtyValue = true; + element.dispatchEvent(new Event('blur')); + element.proxy.setCustomValidity('error text'); + element.validate(); + await elementUpdated(element); + + expect(getMessage('error')).toBe('error text'); + }); + it('should show error text when property is set', async () => { element.errorText = 'error text'; await elementUpdated(element);