Merge pull request #403 from ing-bank/fix/clear-success

fix: make success message disappear

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');
     }
   }

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`
+        <lion-validation-feedback></lion-validation-feedback>
+      `,
+    );
+
+    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`
+        <lion-validation-feedback></lion-validation-feedback>
+      `,
+    );
+
+    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();
+  });
 });