Merge pull request #174 from centrica-engineering/fix/inputter-coverage

inputter tests

packages/library/components/inputter/src/inputter-component.js

@@ -71,18 +71,18 @@ export class Inputter extends ScopedElementsMixin(MaskMixin(ValidationMixin(Muon
     if (this.helper) {
       if (this.__isTipDetailAvailable) {
         return html`
-        <inputter-detail ${this.isHelperOpen ? 'open' : ''}>
+        <inputter-detail ?open="${this.isHelperOpen}">
           <div slot="heading">${this.helper}</div>
           <slot name="tip-details"></slot>
         </inputter-detail>`;
       } else {
         return html `
-        <div slot="heading">${this.helper}</div>
+        <div class="helper">${this.helper}</div>
         `;
       }
     }
 
-    return html``;
+    return undefined;
   }
 
   get standardTemplate() {

packages/library/index.js

@@ -15,6 +15,7 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { cache } from 'lit/directives/cache.js';
 import { AsyncDirective } from 'lit/async-directive.js';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
 import { literal, html as staticHTML } from 'lit/static-html.js';
 import { until } from 'lit/directives/until.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -37,6 +38,7 @@ export {
   ifDefined,
   cache,
   ScopedElementsMixin,
+  dedupeMixin,
   literal,
   staticHTML,
   until,

packages/library/mixins/detail-mixin.js

@@ -1,12 +1,12 @@
-import { html, classMap, ScopedElementsMixin } from '@muons/library';
+import { html, classMap, ScopedElementsMixin, dedupeMixin } from '@muons/library';
 import { Icon } from '@muons/library/components/icon';
 
 /**
  * A mixin to hold show / hide content
  * @mixin
  */
 
-export const DetailMixin = (superClass) =>
+export const DetailMixin = dedupeMixin((superClass) =>
   class DetailMixinClass extends ScopedElementsMixin(superClass) {
 
     static get properties() {
@@ -119,4 +119,5 @@ export const DetailMixin = (superClass) =>
       </div>
     `;
     }
-  };
+  }
+);

packages/library/mixins/form-element-mixin.js

@@ -1,11 +1,11 @@
-import { html, MuonElement } from '@muons/library';
+import { html, MuonElement, dedupeMixin } from '@muons/library';
 
 /**
  * A mixin to hold base setup for a form element.
  * @mixin FormElementMixin
  */
 
-export const FormElementMixin = (superClass) =>
+export const FormElementMixin = dedupeMixin((superClass) =>
   class FormElementMixinClass extends superClass {
 
     static get properties() {
@@ -263,4 +263,5 @@ export const FormElementMixin = (superClass) =>
     get standardTemplate() {
       return this._htmlFormElementTemplate;
     }
-  };
+  }
+);

packages/library/mixins/mask-mixin.js

@@ -1,5 +1,4 @@
-import { html, ifDefined } from '@muons/library';
-import { dedupeMixin } from '@open-wc/dedupe-mixin';
+import { html, ifDefined, dedupeMixin } from '@muons/library';
 import { FormElementMixin } from './form-element-mixin';
 
 /**

packages/library/mixins/validation-mixin.js

@@ -1,4 +1,4 @@
-import { html, repeat } from '@muons/library';
+import { html, repeat, dedupeMixin } from '@muons/library';
 import * as customValidation from '@muons/library/utils/validation-functions.js';
 import { FormElementMixin } from './form-element-mixin';
 
@@ -7,7 +7,7 @@ import { FormElementMixin } from './form-element-mixin';
  * @mixin
  */
 
-export const ValidationMixin = (superClass) =>
+export const ValidationMixin = dedupeMixin((superClass) =>
   class ValidationMixinClass extends FormElementMixin(superClass) {
 
     static get properties() {
@@ -277,4 +277,5 @@ export const ValidationMixin = (superClass) =>
     _validationStateTemplate(key, value) {
       return html`<p> ${value}. </p>`;
     }
-  };
+  }
+);

packages/library/tests/components/inputter/__snapshots__/inputter.test.snap.js

@@ -1,6 +1,5 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
-
 snapshots["Inputter standard default default checks"] = 
 `<div
   class="slotted-content"
@@ -16,7 +15,69 @@ snapshots["Inputter standard default default checks"] =
 `;
 /* end snapshot Inputter standard default default checks */
 
-snapshots["Inputter text input mask text default checks"] = 
+snapshots["Inputter helper default checks"] = 
+`<div
+  class="slotted-content"
+  style=""
+>
+  <slot name="label">
+  </slot>
+  <div class="helper">
+    What is this?
+  </div>
+  <div class="input-holder">
+    <slot>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot Inputter helper default checks */
+
+snapshots["Inputter helper detail default checks"] = 
+`<div
+  class="slotted-content"
+  style=""
+>
+  <slot name="label">
+  </slot>
+  <inputter-detail>
+    <div slot="heading">
+      What is this?
+    </div>
+    <slot name="tip-details">
+    </slot>
+  </inputter-detail>
+  <div class="input-holder">
+    <slot>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot Inputter helper detail default checks */
+
+snapshots["Inputter helper detail open default checks"] = 
+`<div
+  class="slotted-content"
+  style=""
+>
+  <slot name="label">
+  </slot>
+  <inputter-detail open="">
+    <div slot="heading">
+      What is this?
+    </div>
+    <slot name="tip-details">
+    </slot>
+  </inputter-detail>
+  <div class="input-holder">
+    <slot>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot Inputter helper detail open default checks */
+
+snapshots["Inputter text mask text default checks"] = 
 `<div
   class="has-mask slotted-content"
   style="--maxlength:4;"
@@ -35,9 +96,24 @@ snapshots["Inputter text input mask text default checks"] =
   </div>
 </div>
 `;
-/* end snapshot Inputter text input mask text default checks */
+/* end snapshot Inputter text mask text default checks */
+
+snapshots["Inputter text validation default checks"] = 
+`<div
+  class="slotted-content"
+  style=""
+>
+  <slot name="label">
+  </slot>
+  <div class="input-holder">
+    <slot>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot Inputter text validation default checks */
 
-snapshots["Inputter radio input standard radio default checks"] = 
+snapshots["Inputter radio standard radio default checks"] = 
 `<div
   class="slotted-content"
   style=""
@@ -51,5 +127,5 @@ snapshots["Inputter radio input standard radio default checks"] =
   </div>
 </div>
 `;
-/* end snapshot Inputter radio input standard radio default checks */
+/* end snapshot Inputter radio standard radio default checks */
 

packages/library/tests/components/inputter/inputter.test.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-undef */
 import { expect, fixture, html, defineCE, unsafeStatic } from '@open-wc/testing';
 import { Inputter } from '@muons/library/components/inputter';
-import { defaultChecks } from '../../helpers';
+import { defaultChecks, fillIn } from '../../helpers';
 
 const tagName = defineCE(Inputter);
 const tag = unsafeStatic(tagName);
@@ -24,7 +24,92 @@ describe('Inputter', () => {
       expect(inputter.id).to.not.be.null; // eslint-disable-line no-unused-expressions
     });
   });
-  describe('text input', async () => {
+
+  describe('helper', async () => {
+    let inputter;
+    let shadowRoot;
+    before(async () => {
+      inputter = await fixture(html`
+        <${tag} helper="What is this?">
+          <label slot="label">input label</label>
+          <input type="text" value=""/>
+        </${tag}>`);
+      shadowRoot = inputter.shadowRoot;
+    });
+    it('default checks', async () => {
+      await defaultChecks(inputter);
+    });
+    it('default properties', async () => {
+      expect(inputter.type).to.equal('standard', 'default type is set');
+      expect(inputter.id).to.not.be.null; // eslint-disable-line no-unused-expressions
+    });
+    it('verify helper', async () => {
+      expect(shadowRoot.querySelector('inputter-detail')).to.be.null; // eslint-disable-line no-unused-expressions
+
+      const helper = shadowRoot.querySelector('.helper');
+      expect(helper.textContent).to.equal('What is this?', 'helper text has correct value'); // eslint-disable-line no-unused-expressions
+    });
+  });
+
+  describe('helper detail', async () => {
+    let inputter;
+    let shadowRoot;
+    before(async () => {
+      inputter = await fixture(html`
+        <${tag} helper="What is this?">
+          <label slot="label">input label</label>
+          <input type="text" value=""/>
+          <p slot="tip-details">More info about the input</p>
+        </${tag}>`);
+      shadowRoot = inputter.shadowRoot;
+    });
+    it('default checks', async () => {
+      await defaultChecks(inputter);
+    });
+    it('default properties', async () => {
+      expect(inputter.type).to.equal('standard', 'default type is set');
+      expect(inputter.id).to.not.be.null; // eslint-disable-line no-unused-expressions
+    });
+    it('verify detail', async () => {
+      const inputterDetail = shadowRoot.querySelector('inputter-detail');
+      expect(inputterDetail).to.be.not.null; // eslint-disable-line no-unused-expressions
+      expect(inputterDetail.open).to.be.false; // eslint-disable-line no-unused-expressions
+      expect(inputterDetail.querySelector('[slot="heading"]').textContent).to.equal('What is this?', 'helper text has correct value');
+      expect(inputterDetail.querySelector('[name="tip-details"]').assignedNodes()[0].textContent)
+        .to.equal('More info about the input', 'tip details has correct value');
+    });
+  });
+
+  describe('helper detail open', async () => {
+    let inputter;
+    let shadowRoot;
+    before(async () => {
+      inputter = await fixture(html`
+        <${tag} helper="What is this?" isHelperOpen>
+          <label slot="label">input label</label>
+          <input type="text" value=""/>
+          <p slot="tip-details">More info about the input</p>
+        </${tag}>`);
+      shadowRoot = inputter.shadowRoot;
+    });
+    it('default checks', async () => {
+      await defaultChecks(inputter);
+    });
+    it('default properties', async () => {
+      expect(inputter.type).to.equal('standard', 'default type is set');
+      expect(inputter.id).to.not.be.null; // eslint-disable-line no-unused-expressions
+    });
+    it('verify detail', async () => {
+      const inputterDetail = shadowRoot.querySelector('inputter-detail');
+      expect(inputterDetail).to.be.not.null; // eslint-disable-line no-unused-expressions
+      expect(inputterDetail.open).to.be.true; // eslint-disable-line no-unused-expressions
+      expect(inputterDetail.querySelector('[slot="heading"]').textContent).to.equal('What is this?', 'helper text has correct value');
+      expect(inputterDetail.querySelector('[name="tip-details"]').assignedNodes()[0].textContent)
+        .to.equal('More info about the input', 'tip details has correct value');
+    });
+  });
+
+  describe('text', async() => {
     describe('mask text', async () => {
       let inputter;
       let shadowRoot;
@@ -47,9 +132,42 @@ describe('Inputter', () => {
         expect(shadowRoot.querySelector('.has-mask')).to.not.be.null; // eslint-disable-line no-unused-expressions
       });
     });
+
+    describe('validation', async () => {
+      let inputter;
+      let shadowRoot;
+      before(async () => {
+        inputter = await fixture(html`
+          <${tag} validation="[&quot;isRequired&quot;]">
+            <label slot="label">input label</label>
+            <input type="text" value=""/>
+          </${tag}>`);
+        shadowRoot = inputter.shadowRoot;
+      });
+      it('default checks', async () => {
+        await defaultChecks(inputter);
+      });
+      it('default properties', async () => {
+        expect(inputter.type).to.equal('standard', 'default type is set');
+        expect(inputter.id).to.not.be.null; // eslint-disable-line no-unused-expressions
+      });
+      it('validate icon and message', async () => {
+        const inputElement = inputter.querySelector('input');
+        await fillIn(inputElement, '');
+
+        await inputter.updateComplete;
+        const validationMessage = shadowRoot.querySelector('.validation-message');
+        expect(validationMessage).to.not.be.null; // eslint-disable-line no-unused-expressions
+        expect(validationMessage.textContent.trim()).to.equal('This field is required.', 'validation message has correct value');
+
+        const validationIcon = shadowRoot.querySelector('.validation-icon');
+        expect(validationIcon).to.not.be.null; // eslint-disable-line no-unused-expressions
+        expect(validationIcon.name).to.equal('exclamation-triangle', 'validation icon has correct value');
+      });
+    });
   });
 
-  describe('radio input', async () => {
+  describe('radio', async () => {
     describe('standard radio', async () => {
       let inputter;
       let shadowRoot;

packages/library/tests/mixins/validation.test.js

@@ -20,7 +20,6 @@ const MuonValidationElement = class extends ValidationMixin(MuonElement) {
       <div class="input-holder">
         ${super.standardTemplate}
       </div>
-
       ${this.isPristine ? html`` : this._validationMessageTemplate}
     </div>
     `;