diff --git a/packages/validate/src/LionValidationFeedback.js b/packages/validate/src/LionValidationFeedback.js index 993911e0f..ea175630a 100644 --- a/packages/validate/src/LionValidationFeedback.js +++ b/packages/validate/src/LionValidationFeedback.js @@ -26,7 +26,15 @@ export class LionValidationFeedback extends LitElement { super.updated(); if (this.feedbackData && this.feedbackData[0]) { this.setAttribute('type', this.feedbackData[0].type); - } else { + this.currentType = this.feedbackData[0].type; + window.clearTimeout(this.removeMessage); + if (this.currentType === 'success') { + this.removeMessage = window.setTimeout(() => { + this.removeAttribute('type'); + this.feedbackData = ''; + }, 3000); + } + } else if (this.currentType !== 'success') { this.removeAttribute('type'); } } diff --git a/packages/validate/test/lion-validation-feedback.test.js b/packages/validate/test/lion-validation-feedback.test.js index 8b59713bd..46374359c 100644 --- a/packages/validate/test/lion-validation-feedback.test.js +++ b/packages/validate/test/lion-validation-feedback.test.js @@ -1,7 +1,8 @@ /* eslint-disable no-unused-vars, no-param-reassign */ +import sinon from 'sinon'; import { fixture, html, expect } from '@open-wc/testing'; import '../lion-validation-feedback.js'; -import { AlwaysInvalid } from '../test-helpers.js'; +import { AlwaysInvalid, AlwaysValid } from '../test-helpers.js'; describe('lion-validation-feedback', () => { it('renders a validation message', async () => { @@ -30,4 +31,49 @@ describe('lion-validation-feedback', () => { await el.updateComplete; expect(el.getAttribute('type')).to.equal('warning'); }); + + it('success message clears after 3s', async () => { + const el = await fixture( + html` + + `, + ); + + const clock = sinon.useFakeTimers(); + + el.feedbackData = [{ message: 'hello', type: 'success', validator: new AlwaysValid() }]; + await el.updateComplete; + expect(el.getAttribute('type')).to.equal('success'); + + clock.tick(2900); + + expect(el.getAttribute('type')).to.equal('success'); + + clock.tick(200); + + expect(el).to.not.have.attribute('type'); + + clock.restore(); + }); + + it('does not clear error messages', async () => { + const el = await fixture( + html` + + `, + ); + + const clock = sinon.useFakeTimers(); + + el.feedbackData = [{ message: 'hello', type: 'success', validator: new AlwaysValid() }]; + await el.updateComplete; + expect(el.getAttribute('type')).to.equal('success'); + + el.feedbackData = [{ message: 'hello', type: 'error', validator: new AlwaysInvalid() }]; + await el.updateComplete; + clock.tick(3100); + expect(el.getAttribute('type')).to.equal('error'); + + clock.restore(); + }); });