@muonic/muon 0.0.2-beta.0

package/tests/mixins/__snapshots__/validation.test.snap.js

@@ -0,0 +1,297 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["form-element standard"] = 
+`<div class="slotted-content">
+  <slot name="label">
+  </slot>
+  <div class="input-holder">
+    <slot>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot form-element standard */
+
+snapshots["form-element standard onchange validation"] = 
+`<div class="slotted-content">
+  <slot name="label">
+  </slot>
+  <div class="input-holder">
+    <slot>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot form-element standard onchange validation */
+
+snapshots["form-element text onchange validation"] = 
+`<div class="slotted-content">
+  <slot name="label">
+  </slot>
+  <div class="input-holder">
+    <slot>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot form-element text onchange validation */
+
+snapshots["form-element radio onchange validation"] = 
+`<div class="slotted-content">
+  <span class="input-heading">
+    What is your heating source?
+  </span>
+  <div class="input-holder">
+    <slot>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot form-element radio onchange validation */
+
+snapshots["form-element checkbox onblur validation"] = 
+`<div class="slotted-content">
+  <span class="input-heading">
+    What is your heating source?
+  </span>
+  <div class="input-holder">
+    <slot>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot form-element checkbox onblur validation */
+
+snapshots["form-element text validation"] = 
+`<div class="slotted-content">
+  <slot name="label">
+  </slot>
+  <div class="input-holder">
+    <slot>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot form-element text validation */
+
+snapshots["form-element radio validation"] = 
+`<div class="slotted-content">
+  <span class="input-heading">
+    What is your heating source?
+  </span>
+  <div class="input-holder">
+    <slot>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot form-element radio validation */
+
+snapshots["form-element checkbox validation"] = 
+`<div class="slotted-content">
+  <span class="input-heading">
+    What is your heating source?
+  </span>
+  <div class="input-holder">
+    <slot>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot form-element checkbox validation */
+
+snapshots["form-element select validation"] = 
+`<div class="slotted-content">
+  <slot name="label">
+  </slot>
+  <div class="input-holder">
+    <slot>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot form-element select validation */
+
+snapshots["form-element text extended validation"] = 
+`<div class="slotted-content">
+  <slot name="label">
+  </slot>
+  <div class="input-holder">
+    <slot>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot form-element text extended validation */
+
+snapshots["form-element text native validation"] = 
+`<div class="slotted-content">
+  <slot name="label">
+  </slot>
+  <div class="input-holder">
+    <slot>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot form-element text native validation */
+
+snapshots["form-element text list validation"] = 
+`<div class="slotted-content">
+  <slot name="label">
+  </slot>
+  <div class="input-holder">
+    <slot>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot form-element text list validation */
+
+snapshots["form-element text custom type validation"] = 
+`<div class="slotted-content">
+  <slot name="label">
+  </slot>
+  <div class="input-holder">
+    <slot>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot form-element text custom type validation */
+
+snapshots["form-element-validation standard"] = 
+`<div class="slotted-content">
+  <slot name="label">
+  </slot>
+  <div class="input-holder">
+    <slot>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot form-element-validation standard */
+
+snapshots["form-element-validation text validation"] = 
+`<div class="slotted-content">
+  <slot name="label">
+  </slot>
+  <div class="input-holder">
+    <slot>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot form-element-validation text validation */
+
+snapshots["form-element-validation text extended validation"] = 
+`<div class="slotted-content">
+  <slot name="label">
+  </slot>
+  <div class="input-holder">
+    <slot>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot form-element-validation text extended validation */
+
+snapshots["form-element-validation text native validation"] = 
+`<div class="slotted-content">
+  <slot name="label">
+  </slot>
+  <div class="input-holder">
+    <slot>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot form-element-validation text native validation */
+
+snapshots["form-element-validation text custom type validation"] = 
+`<div class="slotted-content">
+  <slot name="label">
+  </slot>
+  <div class="input-holder">
+    <slot>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot form-element-validation text custom type validation */
+
+snapshots["form-element-validation radio validation"] = 
+`<div class="slotted-content">
+  <span class="input-heading">
+    What is your heating source?
+  </span>
+  <div class="input-holder">
+    <slot>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot form-element-validation radio validation */
+
+snapshots["form-element-validation checkbox validation"] = 
+`<div class="slotted-content">
+  <span class="input-heading">
+    What is your heating source?
+  </span>
+  <div class="input-holder">
+    <slot>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot form-element-validation checkbox validation */
+
+snapshots["form-element-validation select validation"] = 
+`<div class="slotted-content">
+  <slot name="label">
+  </slot>
+  <div class="input-holder">
+    <slot>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot form-element-validation select validation */
+
+snapshots["form-element-validation date validation"] = 
+`<div class="slotted-content">
+  <slot name="label">
+  </slot>
+  <div class="input-holder">
+    <slot>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot form-element-validation date validation */
+
+snapshots["form-element-validation tel native validation"] = 
+`<div class="slotted-content">
+  <slot name="label">
+  </slot>
+  <div class="input-holder">
+    <slot>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot form-element-validation tel native validation */
+
+snapshots["form-element-validation text validation on input"] = 
+`<div class="slotted-content">
+  <slot name="label">
+  </slot>
+  <div class="input-holder">
+    <slot>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot form-element-validation text validation on input */
+

package/tests/mixins/card.test.js

@@ -0,0 +1,63 @@
+/* eslint-disable no-undef */
+import { expect, fixture, html, defineCE, unsafeStatic } from '@open-wc/testing';
+import { MuonElement } from '@muonic/muon';
+import { defaultChecks } from '../helpers';
+import { CardMixin } from '@muonic/muon/mixins/card-mixin';
+import { Cta } from '@muonic/muon/components/cta';
+
+const CardMixinElement = class extends CardMixin(MuonElement) {
+
+  get standardTemplate() {
+    return html`
+      ${this._addHeader}
+      ${this._addContent}
+      ${this._addFooter}
+    `;
+  }
+};
+
+const tagName = defineCE(CardMixinElement);
+const tag = unsafeStatic(tagName);
+
+const ctaTag = unsafeStatic(defineCE(Cta));
+
+describe('card', async () => {
+  it('default', async () => {
+    const cardElement = await fixture(html`<${tag}></${tag}>`);
+    await defaultChecks(cardElement);
+
+    const shadowRoot = cardElement.shadowRoot;
+
+    expect(shadowRoot.querySelector('.header')).to.not.be.null; // eslint-disable-line no-unused-expressions
+    expect(shadowRoot.querySelector('.content')).to.not.be.null; // eslint-disable-line no-unused-expressions
+    expect(shadowRoot.querySelector('.footer')).to.not.be.null; // eslint-disable-line no-unused-expressions
+  });
+
+  it('standard', async () => {
+    const cardElement = await fixture(html`
+      <${tag}>
+        <h2 slot="header">Heating services</h2>
+        <p>Product and services we offer for energy in your home</p>
+        <${ctaTag} slot="footer">Click Here</${ctaTag}>
+      </${tag}>`);
+    await defaultChecks(cardElement);
+
+    const shadowRoot = cardElement.shadowRoot;
+
+    const headerSelector = shadowRoot.querySelector('.header');
+    expect(headerSelector).to.not.be.null; // eslint-disable-line no-unused-expressions
+    const header = headerSelector.querySelector('slot[name="header"]');
+    expect(header.assignedElements()[0].textContent).to.equal('Heating services', 'Heading slot value matches');
+
+    const content = shadowRoot.querySelector('.content');
+    expect(shadowRoot.querySelector('.content')).to.not.be.null; // eslint-disable-line no-unused-expressions
+    const paragraph = content.querySelector('slot');
+    expect(paragraph.assignedElements()[0].textContent).to.equal('Product and services we offer for energy in your home', 'Content slot value matches');
+
+    const footerSelector = shadowRoot.querySelector('.footer');
+    expect(footerSelector).to.not.be.null; // eslint-disable-line no-unused-expressions
+    const cta = footerSelector.querySelector('slot[name="footer"]');
+    expect(cta.assignedElements()[0].textContent).to.equal('Click Here', 'Action slot has Cta component');
+
+  });
+});

package/tests/mixins/detail.test.js

@@ -0,0 +1,223 @@
+/* eslint-disable no-undef */
+import { expect, fixture, html, defineCE, unsafeStatic, waitUntil } from '@open-wc/testing';
+import { MuonElement } from '@muonic/muon';
+import sinon from 'sinon';
+import { defaultChecks } from '../helpers';
+import { DetailMixin } from '@muonic/muon/mixins/detail-mixin';
+import { Detail } from '@muonic/muon/components/detail';
+
+const MuonDetailElement = class extends DetailMixin(MuonElement) {};
+
+const TestDetailElement = class extends DetailMixin(MuonElement) {
+  constructor() {
+    super();
+
+    this._toggleOpen = 'chevron-circle-down';
+    this._toggleClose = 'chevron-circle-up';
+    this._togglePosition = 'start';
+  }
+};
+
+const tagName = defineCE(MuonDetailElement);
+const tag = unsafeStatic(tagName);
+const withIconTagName = defineCE(TestDetailElement);
+const withIconTag = unsafeStatic(withIconTagName);
+
+describe('detail', () => {
+  afterEach(() => {
+    sinon.restore();
+  });
+
+  it('standard', async () => {
+    const detailElement = await fixture(html`<${tag}></${tag}>`);
+    await defaultChecks(detailElement);
+
+    expect(detailElement.type).to.equal('standard', '`type` property has default value `standard`');
+    expect(detailElement.open).to.equal(false, '`open` property has default value `false`');
+    const shadowRoot = detailElement.shadowRoot;
+    const detail = shadowRoot.querySelector('details');
+
+    expect(detail).to.not.be.null; // eslint-disable-line no-unused-expressions
+    expect(detail.open).to.equal(false, '`open` attribute has correct value `false`');
+  });
+
+  it('standard open', async () => {
+    const detailElement = await fixture(html`<${tag} open></${tag}>`);
+    await defaultChecks(detailElement);
+
+    expect(detailElement.type).to.equal('standard', '`type` property has default value `standard`');
+    expect(detailElement.open).to.equal(true, '`open` property has default value `true`');
+    const shadowRoot = detailElement.shadowRoot;
+    const detail = shadowRoot.querySelector('details');
+
+    expect(detail).to.not.be.null; // eslint-disable-line no-unused-expressions
+    expect(detail.open).to.equal(true, '`open` property has correct value `true`');
+  });
+
+  it('standard icon', async () => {
+    const detailElement = await fixture(html`<${tag} icon="dot-circle"></${tag}>`);
+    await defaultChecks(detailElement);
+
+    expect(detailElement.type).to.equal('standard', '`type` property has default value `standard`');
+    const shadowRoot = detailElement.shadowRoot;
+    const detail = shadowRoot.querySelector('details');
+
+    expect(detail).to.not.be.null; // eslint-disable-line no-unused-expressions
+    const icon = detail.querySelector('.icon');
+    expect(icon).to.not.be.null; // eslint-disable-line no-unused-expressions
+    expect(icon.name).to.equal('dot-circle', '`icon` property has correct value');
+  });
+
+  it('standard slotted content', async () => {
+    const detailElement = await fixture(html`
+    <${tag}>
+      <h3 slot="heading">Where can I buy an ice cream?</h3>
+      <p>
+        fjkbdkf dfnbkdf udbkfgdkjf
+      </p>
+    </${tag}>`);
+    await defaultChecks(detailElement);
+
+    expect(detailElement.type).to.equal('standard', '`type` property has default value `standard`');
+    expect(detailElement.open).to.equal(false, '`open` property has default value `false`');
+    const shadowRoot = detailElement.shadowRoot;
+    const detail = shadowRoot.querySelector('details');
+
+    expect(detail).to.not.be.null; // eslint-disable-line no-unused-expressions
+    expect(detail.open).to.equal(false, '`open` property has correct value `false`');
+
+    const toggleEventSpy = sinon.spy();
+    detailElement.addEventListener('toggle', toggleEventSpy);
+
+    const summary = detail.querySelector('.heading');
+    const heading = summary.querySelector('slot[name="heading"]');
+
+    expect(heading).to.not.be.null; // eslint-disable-line no-unused-expressions
+    expect(heading.assignedElements()[0].textContent).to.equal('Where can I buy an ice cream?', '`heading` slot has value `What is your heating source?`');
+
+    const content = detail.querySelector('.content > slot');
+    expect(content).to.not.be.null; // eslint-disable-line no-unused-expressions
+    expect(content.assignedElements()[0].textContent.trim()).to.equal('fjkbdkf dfnbkdf udbkfgdkjf', '`heading` slot has value `What is your heating source?`');
+  });
+
+  it('standard toggle event true', async () => {
+    const detailElement = await fixture(html`
+    <${tag}>
+      <h3 slot="heading">Where can I buy an ice cream?</h3>
+      <p>
+        fjkbdkf dfnbkdf udbkfgdkjf
+      </p>
+    </${tag}>`);
+    await defaultChecks(detailElement);
+
+    expect(detailElement.type).to.equal('standard', '`type` property has default value `standard`');
+    expect(detailElement.open).to.equal(false, '`open` property has default value `false`');
+    const shadowRoot = detailElement.shadowRoot;
+    const detail = shadowRoot.querySelector('details');
+
+    expect(detail).to.not.be.null; // eslint-disable-line no-unused-expressions
+    expect(detail.open).to.equal(false, '`open` property has correct value `false`');
+
+    const toggleEventSpy = sinon.spy();
+    detailElement.addEventListener('detail-toggle', toggleEventSpy);
+
+    const summary = detail.querySelector('.heading');
+    const heading = summary.querySelector('slot[name="heading"]');
+
+    expect(heading).to.not.be.null; // eslint-disable-line no-unused-expressions
+
+    summary.click();
+
+    await waitUntil(() => detailElement.open);
+    expect(detailElement.open).to.equal(true, '`open` property has default value `true`');
+    expect(detail.open).to.equal(true, '`open` property has correct value `true`');
+    expect(toggleEventSpy.callCount).to.equal(1, '`toggle` event fired');
+    expect(toggleEventSpy.lastCall.args[0].detail.open).to.equal(true, '`toggle` event has isOpen `true`');
+  });
+
+  it('standard toggle event false', async () => {
+    const detailElement = await fixture(html`
+    <${withIconTag} open>
+      <h3 slot="heading">Where can I buy an ice cream?</h3>
+      <p>
+        fjkbdkf dfnbkdf udbkfgdkjf
+      </p>
+    </${withIconTag}>`);
+    await defaultChecks(detailElement);
+
+    expect(detailElement.type).to.equal('standard', '`type` property has default value `standard`');
+    expect(detailElement.open).to.equal(true, '`open` property has default value `true`');
+    const shadowRoot = detailElement.shadowRoot;
+    const detail = shadowRoot.querySelector('details');
+
+    expect(detail).to.not.be.null; // eslint-disable-line no-unused-expressions
+    expect(detail.open).to.equal(true, '`open` property has correct value `true`');
+
+    const toggleEventSpy = sinon.spy();
+    detailElement.addEventListener('detail-toggle', toggleEventSpy);
+
+    const summary = detail.querySelector('.heading');
+    const heading = summary.querySelector('slot[name="heading"]');
+
+    expect(heading).to.not.be.null; // eslint-disable-line no-unused-expressions
+
+    summary.click();
+
+    await waitUntil(() => !detailElement.open);
+
+    expect(detail.open).to.equal(false, '`open` property has correct value `false`');
+    expect(toggleEventSpy.callCount).to.equal(1, '`toggle` event fired');
+    expect(toggleEventSpy.lastCall.args[0].detail.open).to.equal(false, '`toggle` event has open `false`');
+    expect(detailElement.open).to.equal(false, '`open` property has default value `false`');
+  });
+
+  it('standard toggle', async () => {
+    const detailElement = await fixture(html`<${withIconTag}></${withIconTag}>`);
+    await defaultChecks(detailElement);
+
+    expect(detailElement.type).to.equal('standard', '`type` property has default value `standard`');
+    expect(detailElement.open).to.equal(false, '`open` property has default value `false`');
+    const shadowRoot = detailElement.shadowRoot;
+    const detail = shadowRoot.querySelector('.details.toggle-start');
+
+    expect(detail).to.not.be.null; // eslint-disable-line no-unused-expressions
+    expect(detail.open).to.equal(false, '`open` attribute has correct value `false`');
+
+    const toggleIcon = detail.querySelector('.toggle');
+    expect(toggleIcon).to.not.be.null; // eslint-disable-line no-unused-expressions
+    expect(toggleIcon.name).to.equal('chevron-circle-down', '`toggleIcon` has correct value `chevron-circle-down`');
+    expect(toggleIcon.nextElementSibling.name).to.equal('heading');
+
+    const summary = detail.querySelector('.heading');
+    summary.click();
+
+    await waitUntil(() => detailElement.open);
+    expect(toggleIcon.name).to.equal('chevron-circle-up', '`toggleIcon` has correct value `chevron-circle-up`');
+  });
+
+  it('standard toggle end', async () => {
+    const tagName = defineCE(Detail);
+    const tag = unsafeStatic(tagName);
+    const detailElement = await fixture(html`<${tag}></${tag}>`);
+    await defaultChecks(detailElement);
+
+    expect(detailElement.type).to.equal('standard', '`type` property has default value `standard`');
+    expect(detailElement.open).to.equal(false, '`open` property has default value `false`');
+    const shadowRoot = detailElement.shadowRoot;
+    const detail = shadowRoot.querySelector('.details.toggle-end');
+
+    expect(detail).to.not.be.null; // eslint-disable-line no-unused-expressions
+    expect(detail.open).to.equal(false, '`open` attribute has correct value `false`');
+
+    const toggleIcon = detail.querySelector('.toggle');
+    expect(toggleIcon).to.not.be.null; // eslint-disable-line no-unused-expressions
+    expect(toggleIcon.name).to.equal('chevron-circle-down', '`toggleIcon` has correct value `chevron-circle-down`');
+    expect(toggleIcon.previousElementSibling.name).to.equal('heading');
+
+    const summary = detail.querySelector('.heading');
+    summary.click();
+
+    await waitUntil(() => detailElement.open);
+    expect(toggleIcon.name).to.equal('chevron-circle-up', '`toggleIcon` has correct value `chevron-circle-up`');
+  });
+});