From d551b576957a8ef71207363d06dee5637983426d Mon Sep 17 00:00:00 2001 From: MekalaNagarajan-Centrica Date: Wed, 19 Jan 2022 13:54:53 +0000 Subject: [PATCH 1/5] fix: add inputter test --- .../inputter/src/inputter-component.js | 6 +- .../components/inputter/inputter.test.js | 164 ++++++++++++++++++ 2 files changed, 167 insertions(+), 3 deletions(-) create mode 100644 packages/library/tests/components/inputter/inputter.test.js diff --git a/packages/library/components/inputter/src/inputter-component.js b/packages/library/components/inputter/src/inputter-component.js index f061852b..5c56b8d5 100644 --- a/packages/library/components/inputter/src/inputter-component.js +++ b/packages/library/components/inputter/src/inputter-component.js @@ -77,18 +77,18 @@ export class Inputter extends ScopedElementsMixin(ValidationMixin(MuonElement)) if (this.helper) { if (this.__isTipDetailAvailable) { return html` - +
${this.helper}
`; } else { return html ` -
${this.helper}
+
${this.helper}
`; } } - return html``; + return undefined; } get standardTemplate() { diff --git a/packages/library/tests/components/inputter/inputter.test.js b/packages/library/tests/components/inputter/inputter.test.js new file mode 100644 index 00000000..13ac6b87 --- /dev/null +++ b/packages/library/tests/components/inputter/inputter.test.js @@ -0,0 +1,164 @@ +/* eslint-disable no-undef */ +import { expect, fixture, html, defineCE, unsafeStatic } from '@open-wc/testing'; +import { Inputter } from '@muons/library/components/inputter'; +import { defaultChecks, fillIn } from '../../helpers'; + +const tagName = defineCE(Inputter); +const tag = unsafeStatic(tagName); + +describe('Inputter', () => { + describe('helper', async () => { + let inputter; + let shadowRoot; + before(async () => { + inputter = await fixture(html` + <${tag} helper="What is this?"> + + + `); + 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?"> + + +

More info about the input

+ `); + 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> + + +

More info about the input

+ `); + 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('validation', async () => { + let inputter; + let shadowRoot; + before(async () => { + inputter = await fixture(html` + <${tag} validation="["isRequired"]"> + + + `); + 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', async () => { + describe('validation', async () => { + let inputter; + let shadowRoot; + before(async () => { + inputter = await fixture(html` + <${tag} heading="What is your heating source?" validation="["isRequired"]"> + + + + + `); + shadowRoot = inputter.shadowRoot; + }); + it('default checks', async () => { + await defaultChecks(inputter); + 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 inputElement.focus(); + await inputElement.blur(); + + await inputter.updateComplete; + console.log(shadowRoot); + 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'); + }); + }); + }); +}); From 6f48488e2fb3468e341ea5d6ecb57cbf4b341344 Mon Sep 17 00:00:00 2001 From: MekalaNagarajan-Centrica Date: Wed, 19 Jan 2022 14:57:24 +0000 Subject: [PATCH 2/5] fix: add inputter snapshot --- .../__snapshots__/inputter.test.snap.js | 67 +++++++++++++++++++ .../components/inputter/inputter.test.js | 36 ---------- .../library/tests/mixins/validation.test.js | 3 +- 3 files changed, 68 insertions(+), 38 deletions(-) create mode 100644 packages/library/tests/components/inputter/__snapshots__/inputter.test.snap.js diff --git a/packages/library/tests/components/inputter/__snapshots__/inputter.test.snap.js b/packages/library/tests/components/inputter/__snapshots__/inputter.test.snap.js new file mode 100644 index 00000000..4804731f --- /dev/null +++ b/packages/library/tests/components/inputter/__snapshots__/inputter.test.snap.js @@ -0,0 +1,67 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["Inputter helper default checks"] = +`
+ + +
+ What is this? +
+
+ + +
+
+`; +/* end snapshot Inputter helper default checks */ + +snapshots["Inputter helper detail default checks"] = +`
+ + + +
+ What is this? +
+ + + +
+ + +
+
+`; +/* end snapshot Inputter helper detail default checks */ + +snapshots["Inputter helper detail open default checks"] = +`
+ + + +
+ What is this? +
+ + + +
+ + +
+
+`; +/* end snapshot Inputter helper detail open default checks */ + +snapshots["Inputter text validation default checks"] = +`
+ + +
+ + +
+
+`; +/* end snapshot Inputter text validation default checks */ diff --git a/packages/library/tests/components/inputter/inputter.test.js b/packages/library/tests/components/inputter/inputter.test.js index 13ac6b87..69b4cd3a 100644 --- a/packages/library/tests/components/inputter/inputter.test.js +++ b/packages/library/tests/components/inputter/inputter.test.js @@ -119,42 +119,6 @@ describe('Inputter', () => { 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', async () => { - describe('validation', async () => { - let inputter; - let shadowRoot; - before(async () => { - inputter = await fixture(html` - <${tag} heading="What is your heating source?" validation="["isRequired"]"> - - - - - `); - shadowRoot = inputter.shadowRoot; - }); - it('default checks', async () => { - await defaultChecks(inputter); - 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 inputElement.focus(); - await inputElement.blur(); - - await inputter.updateComplete; - console.log(shadowRoot); - 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'); diff --git a/packages/library/tests/mixins/validation.test.js b/packages/library/tests/mixins/validation.test.js index 4266cf1a..54ee349c 100644 --- a/packages/library/tests/mixins/validation.test.js +++ b/packages/library/tests/mixins/validation.test.js @@ -20,8 +20,7 @@ const MuonValidationElement = class extends ValidationMixin(MuonElement) {
${super.standardTemplate}
- - ${this.isPristine ? html`` : this._validationMessageTemplate} + ${this._validationMessageTemplate} `; } From f2039bec5c2aa0d36f6f8e433aacce085519fdc9 Mon Sep 17 00:00:00 2001 From: MekalaNagarajan-Centrica Date: Tue, 25 Jan 2022 15:24:42 +0000 Subject: [PATCH 3/5] test: inputter snapshots --- .../__snapshots__/inputter.test.snap.js | 20 +++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/packages/library/tests/components/inputter/__snapshots__/inputter.test.snap.js b/packages/library/tests/components/inputter/__snapshots__/inputter.test.snap.js index 97bb96e9..40c61252 100644 --- a/packages/library/tests/components/inputter/__snapshots__/inputter.test.snap.js +++ b/packages/library/tests/components/inputter/__snapshots__/inputter.test.snap.js @@ -16,7 +16,10 @@ snapshots["Inputter standard default default checks"] = /* end snapshot Inputter standard default default checks */ snapshots["Inputter helper default checks"] = -`
+`
@@ -31,7 +34,10 @@ snapshots["Inputter helper default checks"] = /* end snapshot Inputter helper default checks */ snapshots["Inputter helper detail default checks"] = -`
+`
@@ -50,7 +56,10 @@ snapshots["Inputter helper detail default checks"] = /* end snapshot Inputter helper detail default checks */ snapshots["Inputter helper detail open default checks"] = -`
+`
@@ -90,7 +99,10 @@ snapshots["Inputter text mask text default checks"] = /* end snapshot Inputter text mask text default checks */ snapshots["Inputter text validation default checks"] = -`
+`
From 149e93e669edf330f97256fd9b9a7902d85fb560 Mon Sep 17 00:00:00 2001 From: MekalaNagarajan-Centrica Date: Tue, 25 Jan 2022 22:28:29 +0000 Subject: [PATCH 4/5] fix: dedupeMixin for FormElementMixin --- packages/library/mixins/detail-mixin.js | 6 ++++-- packages/library/mixins/form-element-mixin.js | 6 ++++-- packages/library/mixins/validation-mixin.js | 6 ++++-- .../components/inputter/__snapshots__/inputter.test.snap.js | 1 + packages/library/tests/mixins/validation.test.js | 2 +- 5 files changed, 14 insertions(+), 7 deletions(-) diff --git a/packages/library/mixins/detail-mixin.js b/packages/library/mixins/detail-mixin.js index abc810e9..9acde694 100644 --- a/packages/library/mixins/detail-mixin.js +++ b/packages/library/mixins/detail-mixin.js @@ -1,12 +1,13 @@ import { html, classMap, ScopedElementsMixin } from '@muons/library'; import { Icon } from '@muons/library/components/icon'; +import { dedupeMixin } from '@open-wc/dedupe-mixin'; /** * 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 +120,5 @@ export const DetailMixin = (superClass) =>
`; } - }; + } +); diff --git a/packages/library/mixins/form-element-mixin.js b/packages/library/mixins/form-element-mixin.js index 420d6c75..7724eee0 100644 --- a/packages/library/mixins/form-element-mixin.js +++ b/packages/library/mixins/form-element-mixin.js @@ -1,11 +1,12 @@ import { html, MuonElement } from '@muons/library'; +import { dedupeMixin } from '@open-wc/dedupe-mixin'; /** * 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 +264,5 @@ export const FormElementMixin = (superClass) => get standardTemplate() { return this._htmlFormElementTemplate; } - }; + } +); diff --git a/packages/library/mixins/validation-mixin.js b/packages/library/mixins/validation-mixin.js index fb55f641..f53c1858 100644 --- a/packages/library/mixins/validation-mixin.js +++ b/packages/library/mixins/validation-mixin.js @@ -1,5 +1,6 @@ import { html, repeat } from '@muons/library'; import * as customValidation from '@muons/library/utils/validation-functions.js'; +import { dedupeMixin } from '@open-wc/dedupe-mixin'; import { FormElementMixin } from './form-element-mixin'; /** @@ -7,7 +8,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 +278,5 @@ export const ValidationMixin = (superClass) => _validationStateTemplate(key, value) { return html`

${value}.

`; } - }; + } +); diff --git a/packages/library/tests/components/inputter/__snapshots__/inputter.test.snap.js b/packages/library/tests/components/inputter/__snapshots__/inputter.test.snap.js index 40c61252..aaf824ab 100644 --- a/packages/library/tests/components/inputter/__snapshots__/inputter.test.snap.js +++ b/packages/library/tests/components/inputter/__snapshots__/inputter.test.snap.js @@ -128,3 +128,4 @@ snapshots["Inputter radio standard radio default checks"] =
`; /* end snapshot Inputter radio standard radio default checks */ + diff --git a/packages/library/tests/mixins/validation.test.js b/packages/library/tests/mixins/validation.test.js index 198a58d8..49033deb 100644 --- a/packages/library/tests/mixins/validation.test.js +++ b/packages/library/tests/mixins/validation.test.js @@ -20,7 +20,7 @@ const MuonValidationElement = class extends ValidationMixin(MuonElement) {
${super.standardTemplate}
- ${this._validationMessageTemplate} + ${this.isPristine ? html`` : this._validationMessageTemplate}
`; } From 5db4475d2f7a3003b6abd71d67aca52432bde8e1 Mon Sep 17 00:00:00 2001 From: MekalaNagarajan-Centrica Date: Wed, 26 Jan 2022 11:38:20 +0000 Subject: [PATCH 5/5] refactor: move dedupeMixin to muon library --- packages/library/index.js | 2 ++ packages/library/mixins/detail-mixin.js | 3 +-- packages/library/mixins/form-element-mixin.js | 3 +-- packages/library/mixins/mask-mixin.js | 3 +-- packages/library/mixins/validation-mixin.js | 3 +-- 5 files changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/library/index.js b/packages/library/index.js index e8e947c3..3d067a0c 100644 --- a/packages/library/index.js +++ b/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, diff --git a/packages/library/mixins/detail-mixin.js b/packages/library/mixins/detail-mixin.js index 9acde694..a1f5ae5f 100644 --- a/packages/library/mixins/detail-mixin.js +++ b/packages/library/mixins/detail-mixin.js @@ -1,6 +1,5 @@ -import { html, classMap, ScopedElementsMixin } from '@muons/library'; +import { html, classMap, ScopedElementsMixin, dedupeMixin } from '@muons/library'; import { Icon } from '@muons/library/components/icon'; -import { dedupeMixin } from '@open-wc/dedupe-mixin'; /** * A mixin to hold show / hide content diff --git a/packages/library/mixins/form-element-mixin.js b/packages/library/mixins/form-element-mixin.js index 7724eee0..1c1d0775 100644 --- a/packages/library/mixins/form-element-mixin.js +++ b/packages/library/mixins/form-element-mixin.js @@ -1,5 +1,4 @@ -import { html, MuonElement } from '@muons/library'; -import { dedupeMixin } from '@open-wc/dedupe-mixin'; +import { html, MuonElement, dedupeMixin } from '@muons/library'; /** * A mixin to hold base setup for a form element. diff --git a/packages/library/mixins/mask-mixin.js b/packages/library/mixins/mask-mixin.js index 00fee662..8510f829 100644 --- a/packages/library/mixins/mask-mixin.js +++ b/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'; /** diff --git a/packages/library/mixins/validation-mixin.js b/packages/library/mixins/validation-mixin.js index f53c1858..aa7d5f37 100644 --- a/packages/library/mixins/validation-mixin.js +++ b/packages/library/mixins/validation-mixin.js @@ -1,6 +1,5 @@ -import { html, repeat } from '@muons/library'; +import { html, repeat, dedupeMixin } from '@muons/library'; import * as customValidation from '@muons/library/utils/validation-functions.js'; -import { dedupeMixin } from '@open-wc/dedupe-mixin'; import { FormElementMixin } from './form-element-mixin'; /**