@muonic/muon 0.0.2-beta.0

package/tests/README.md

@@ -0,0 +1,3 @@
+# Writing tests
+
+https://open-wc.org/docs/testing/helpers/

package/tests/components/card/__snapshots__/card.test.snap.js

@@ -0,0 +1,70 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["card default"] = 
+`<div class="card">
+  <div class="body">
+    <div class="header">
+      <slot name="header">
+      </slot>
+    </div>
+    <div class="content">
+      <slot>
+      </slot>
+    </div>
+    <div class="footer">
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+</div>
+`;
+/* end snapshot card default */
+
+snapshots["card standard"] = 
+`<div class="card">
+  <div class="body">
+    <div class="header">
+      <slot name="header">
+      </slot>
+    </div>
+    <div class="content">
+      <slot>
+      </slot>
+    </div>
+    <div class="footer">
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+</div>
+`;
+/* end snapshot card standard */
+
+snapshots["card standard with image"] = 
+`<div class="card">
+  <div class="media">
+    <card-image
+      alt="image alt"
+      src="tests/components/image/images/150.png"
+    >
+    </card-image>
+  </div>
+  <div class="body">
+    <div class="header">
+      <slot name="header">
+      </slot>
+    </div>
+    <div class="content">
+      <slot>
+      </slot>
+    </div>
+    <div class="footer">
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+</div>
+`;
+/* end snapshot card standard with image */
+

package/tests/components/card/card.test.js

@@ -0,0 +1,81 @@
+/* eslint-disable no-undef */
+import { expect, fixture, html, defineCE, unsafeStatic } from '@open-wc/testing';
+import { defaultChecks } from '../../helpers';
+import { Card } from '@muonic/muon/components/card';
+
+const tag = unsafeStatic(defineCE(Card));
+
+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>
+        <div slot="footer">Footnote</div>
+      </${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 footer = footerSelector.querySelector('slot[name="footer"]');
+    expect(footer.assignedElements()[0].textContent).to.equal('Footnote', 'Footer slot value matches');
+
+    expect(shadowRoot.querySelector('.media')).to.be.null; // eslint-disable-line no-unused-expressions
+  });
+
+  it('standard with image', async () => {
+    const cardElement = await fixture(html`
+      <${tag} image="tests/components/image/images/150.png" alt="image alt">
+        <h2 slot="header">Heating services</h2>
+        <p>Product and services we offer for energy in your home</p>
+        <div slot="footer">Footnote</div>
+      </${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 footer = footerSelector.querySelector('slot[name="footer"]');
+    expect(footer.assignedElements()[0].textContent).to.equal('Footnote', 'Footer slot value matches');
+
+    const media = shadowRoot.querySelector('.media');
+    expect(media).to.not.be.null; // eslint-disable-line no-unused-expressions
+    const image = media.querySelector('card-image');
+    expect(image.src).to.include('tests/components/image/images/150.png', 'card image has correct value');
+    expect(image.alt).to.equal('image alt', 'card image alt has correct value');
+  });
+});

package/tests/components/cta/__snapshots__/cta.test.snap.js

@@ -0,0 +1,246 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["cta implements standard self"] = 
+`<div
+  aria-label="Buy a doughnut"
+  class="cta standard"
+>
+  <span class="label-holder">
+    <slot>
+    </slot>
+  </span>
+  <cta-icon
+    class="icon"
+    name="arrow-right"
+  >
+  </cta-icon>
+</div>
+`;
+/* end snapshot cta implements standard self */
+
+snapshots["cta no icon"] = 
+`<div
+  aria-label="Click me please"
+  class="cta standard"
+>
+  <span class="label-holder">
+    <slot>
+    </slot>
+  </span>
+</div>
+`;
+/* end snapshot cta no icon */
+
+snapshots["cta implements with no icon"] = 
+`<div
+  aria-label="Click me please"
+  class="cta standard"
+>
+  <span class="label-holder">
+    <slot>
+    </slot>
+  </span>
+</div>
+`;
+/* end snapshot cta implements with no icon */
+
+snapshots["cta implements with loading"] = 
+`<span
+  aria-live="assertive"
+  class="sr-only"
+  role="alert"
+>
+  Loading...
+</span>
+<div
+  aria-label="This is a button"
+  class="cta loading standard"
+>
+  <span class="label-holder">
+    Loading...
+  </span>
+  <cta-icon
+    class="icon"
+    name="spinner"
+  >
+  </cta-icon>
+</div>
+`;
+/* end snapshot cta implements with loading */
+
+snapshots["cta implements with icon at start"] = 
+`<div
+  aria-label="Something something...danger zone"
+  class="cta standard"
+>
+  <cta-icon
+    class="icon"
+    name="arrow-right"
+  >
+  </cta-icon>
+  <span class="label-holder">
+    <slot>
+    </slot>
+  </span>
+</div>
+`;
+/* end snapshot cta implements with icon at start */
+
+snapshots["cta implements with a href"] = 
+`<a
+  aria-label="This is a button"
+  class="cta standard"
+  href="https://example.com"
+  tabindex="0"
+>
+  <span class="label-holder">
+    <slot>
+    </slot>
+  </span>
+  <cta-icon
+    class="icon"
+    name="arrow-right"
+  >
+  </cta-icon>
+</a>
+`;
+/* end snapshot cta implements with a href */
+
+snapshots["cta implements cta within an anchor element"] = 
+`<div
+  aria-label="This is a button"
+  class="cta standard"
+  tabindex="-1"
+>
+  <span class="label-holder">
+    <slot>
+    </slot>
+  </span>
+  <cta-icon
+    class="icon"
+    name="arrow-right"
+  >
+  </cta-icon>
+</div>
+`;
+/* end snapshot cta implements cta within an anchor element */
+
+snapshots["cta implements within a form"] = 
+`<button
+  aria-label="This is a button"
+  class="cta standard"
+  tabindex="0"
+>
+  <span class="label-holder">
+    <slot>
+    </slot>
+  </span>
+  <cta-icon
+    class="icon"
+    name="arrow-right"
+  >
+  </cta-icon>
+</button>
+`;
+/* end snapshot cta implements within a form */
+
+snapshots["cta implements with triggering button"] = 
+`<button
+  aria-label="This is a button"
+  class="cta standard"
+  tabindex="0"
+>
+  <span class="label-holder">
+    <slot>
+    </slot>
+  </span>
+  <cta-icon
+    class="icon"
+    name="arrow-right"
+  >
+  </cta-icon>
+</button>
+`;
+/* end snapshot cta implements with triggering button */
+
+snapshots["cta implements loading as a button"] = 
+`<span
+  aria-live="assertive"
+  class="sr-only"
+  role="alert"
+>
+  Loading...
+</span>
+<button
+  aria-label="This is a button"
+  class="cta loading standard"
+  disabled=""
+  tabindex="0"
+>
+  <span class="label-holder">
+    Loading...
+  </span>
+  <cta-icon
+    class="icon"
+    name="spinner"
+  >
+  </cta-icon>
+</button>
+`;
+/* end snapshot cta implements loading as a button */
+
+snapshots["cta implements with disabled"] = 
+`<div
+  aria-label="This is a button"
+  class="cta disabled standard"
+>
+  <span class="label-holder">
+    <slot>
+    </slot>
+  </span>
+  <cta-icon
+    class="icon"
+    name="arrow-right"
+  >
+  </cta-icon>
+</div>
+`;
+/* end snapshot cta implements with disabled */
+
+snapshots["cta implements template `submit`"] = 
+`<div
+  aria-label="This is a button"
+  class="cta submit"
+>
+  <span class="label-holder">
+    <slot>
+    </slot>
+  </span>
+  <cta-icon
+    class="icon"
+    name="arrow-right"
+  >
+  </cta-icon>
+</div>
+`;
+/* end snapshot cta implements template `submit` */
+
+snapshots["cta implements template `reset`"] = 
+`<div
+  aria-label="This is a button"
+  class="cta reset"
+>
+  <span class="label-holder">
+    <slot>
+    </slot>
+  </span>
+  <cta-icon
+    class="icon"
+    name="arrow-right"
+  >
+  </cta-icon>
+</div>
+`;
+/* end snapshot cta implements template `reset` */
+

package/tests/components/cta/cta.test.js

@@ -0,0 +1,212 @@
+/* eslint-disable no-undef */
+import { expect, fixture, html, defineCE, unsafeStatic } from '@open-wc/testing';
+import { defaultChecks } from '../../helpers';
+import { Cta } from '@muonic/muon/components/cta';
+
+const tagName = defineCE(Cta);
+const tag = unsafeStatic(tagName);
+
+describe('cta', () => {
+  it('implements standard self', async () => {
+    const el = await fixture(html`<${tag}>Buy a doughnut</${tag}>`);
+
+    await defaultChecks(el);
+
+    const shadowRoot = el.shadowRoot;
+    const cta = shadowRoot.querySelector('.cta');
+    const icon = cta.querySelector('.icon');
+    const label = cta.querySelector('.label-holder');
+
+    expect(el.type).to.equal('standard', '`type` property has default value `standard`');
+    expect(el.icon).to.equal('arrow-right', '`icon` property has default value `arrow-right`');
+    expect(el.loading).to.equal(false, '`loading` property has default value `false`');
+    expect(el.loadingMessage).to.equal('Loading...', '`loadingMessage` property has default value `Loading...`');
+    expect(el.href).to.equal(undefined, '`href` attribute has no default value');
+    expect(el._iconPosition).to.equal('end', '`_iconPosition` attribute has default value `end`');
+    expect(el._isButton).to.equal(undefined, '`_isButton` attribute has no default value');
+    expect(el.getAttribute('role')).to.equal('button', 'has the role of button');
+    expect(el.getAttribute('tabindex')).to.equal('0', 'has a tab index');
+    expect(el.getAttribute('aria-disabled')).to.equal(null, '`disabled aria` has not been set');
+    expect(cta.nodeName).to.equal('DIV', 'parent element inside shadow should be `div`');
+    expect(cta.getAttribute('aria-label')).to.equal('Buy a doughnut', '`aria-label` has same value as anonymous slot');
+    expect(cta.getAttribute('tabindex')).to.equal(null, 'has no tab index');
+    expect(cta.getAttribute('disabled')).to.equal(null, 'cta is not disabled');
+    expect(cta.children[0].nodeName).to.equal('SPAN', 'first element within cta is span');
+    expect(cta.children[1].nodeName).to.equal('CTA-ICON', 'second element within cta is icon');
+    expect(icon.nodeName).to.equal('CTA-ICON', 'Scoped CTA component');
+    expect(icon.name).to.equal('arrow-right', 'Scoped icon has name value `arrow-right`');
+    expect(label.nodeName).to.equal('SPAN', 'span label holder exists');
+  });
+
+  it('implements with no icon', async () => {
+    const el = await fixture(html`<${tag} icon="">Click me please</${tag}>`);
+
+    await defaultChecks(el);
+
+    const shadowRoot = el.shadowRoot;
+    const cta = shadowRoot.querySelector('.cta');
+    const icon = cta.querySelector('.icon');
+
+    expect(el.type).to.equal('standard', '`type` property has default value `standard`');
+    expect(el.icon).to.equal('', '`icon` property has no value');
+    expect(icon).to.equal(null, 'no icon added');
+  });
+
+  it('implements with loading', async () => {
+    const el = await fixture(html`<${tag} loading>This is a button</${tag}>`);
+
+    await defaultChecks(el);
+
+    const shadowRoot = el.shadowRoot;
+    const cta = shadowRoot.querySelector('.cta');
+    const icon = cta.querySelector('.icon');
+    const srLoading = shadowRoot.querySelector('[role="alert"]');
+
+    expect(el.type).to.equal('standard', '`type` property has default value `standard`');
+    expect(el.icon).to.equal('arrow-right', '`icon` has default property value');
+    expect(icon.name).to.equal('spinner', 'icon has loading icon of `spinner`');
+    expect(srLoading.innerText).to.equal('Loading...', 'Screen reader only message for loading');
+    expect(cta.getAttribute('disabled')).to.equal(null, 'cta is not disabled');
+  });
+
+  it('implements with disabled', async () => {
+    const el = await fixture(html`<${tag} disabled>This is a button</${tag}>`);
+
+    await defaultChecks(el);
+
+    const shadowRoot = el.shadowRoot;
+    const cta = shadowRoot.querySelector('.cta');
+
+    expect(el.type).to.equal('standard', '`type` property has default value `standard`');
+    expect(el.icon).to.equal('arrow-right', '`icon` has default property value');
+    expect(el.disabled).to.equal(true, '`disabled` has been set to true');
+    expect(el.getAttribute('aria-disabled')).to.equal('true', '`disabled aria` has been set to true');
+    expect(cta.getAttribute('disabled')).to.equal(null, 'cta is not disabled');
+  });
+
+  it('implements with icon at start', async () => {
+    const el = await fixture(html`<${tag}>Something something...danger zone</${tag}>`);
+
+    el._iconPosition = 'start';
+
+    await defaultChecks(el);
+
+    const shadowRoot = el.shadowRoot;
+    const cta = shadowRoot.querySelector('.cta');
+
+    expect(el.type).to.equal('standard', '`type` property has default value `standard`');
+    expect(cta.children[0].nodeName).to.equal('CTA-ICON', 'first element within cta is icon');
+    expect(cta.children[1].nodeName).to.equal('SPAN', 'second element within cta is span');
+  });
+
+  it('implements with a href', async () => {
+    const el = await fixture(html`<${tag} href="https://example.com">This is a button</${tag}>`);
+
+    await defaultChecks(el);
+
+    const shadowRoot = el.shadowRoot;
+    const cta = shadowRoot.querySelector('.cta');
+
+    expect(el.type).to.equal('standard', '`type` property has default value `standard`');
+    expect(cta.nodeName).to.equal('A', 'cta is an anchor element');
+    expect(cta.href).to.equal('https://example.com/', 'cta has the href');
+    expect(cta.getAttribute('tabindex')).to.equal('0', 'has tab index');
+    expect(cta.getAttribute('disabled')).to.equal(null, 'cta is not disabled');
+  });
+
+  it('implements cta within an anchor element', async () => {
+    const parentTemplate = await fixture(html`<a href="https://example.com"><${tag}>This is a button</${tag}></a>`);
+    const el = parentTemplate.querySelector('test-0'); // @TODO: Find a way to get this from the tag
+
+    await defaultChecks(el);
+
+    const shadowRoot = el.shadowRoot;
+    const cta = shadowRoot.querySelector('.cta');
+
+    expect(el.type).to.equal('standard', '`type` property has default value `standard`');
+    expect(cta.nodeName).to.equal('DIV', 'cta is a `div` element');
+    expect(cta.href).to.equal(false, 'cta has NO href');
+    expect(cta.getAttribute('tabindex')).to.equal('-1', 'has tab index');
+    expect(cta.getAttribute('disabled')).to.equal(null, 'cta is not disabled');
+  });
+
+  it('implements within a form', async () => {
+    const parentTemplate = await fixture(html`<form><${tag}>This is a button</${tag}></form>`);
+    const el = parentTemplate.querySelector('test-0'); // @TODO: Find a way to get this from the tag
+
+    await defaultChecks(el);
+
+    const shadowRoot = el.shadowRoot;
+    const cta = shadowRoot.querySelector('.cta');
+
+    expect(el.type).to.equal('standard', '`type` property has default value `standard`');
+    expect(el.getAttribute('role')).to.not.exist; // eslint-disable-line no-unused-expressions
+    expect(el.getAttribute('tabindex')).to.not.exist; // eslint-disable-line no-unused-expressions
+    expect(cta.nodeName).to.equal('BUTTON', 'cta is a `div` element');
+    expect(cta.href).to.equal(false, 'cta has NO href');
+    expect(cta.getAttribute('tabindex')).to.equal('0', 'has tab index');
+    expect(cta.getAttribute('disabled')).to.equal(null, 'cta is not disabled');
+  });
+
+  it('implements with triggering button', async () => {
+    // this is to force it to act like it is in a form (aka you need a native button element)
+    const el = await fixture(html`<${tag}>This is a button</${tag}>`);
+    el._isButton = true;
+    await defaultChecks(el);
+
+    const shadowRoot = el.shadowRoot;
+    const cta = shadowRoot.querySelector('.cta');
+
+    expect(el.type).to.equal('standard', '`type` property has default value `standard`');
+    expect(el.getAttribute('role')).to.not.exist; // eslint-disable-line no-unused-expressions
+    expect(el.getAttribute('tabindex')).to.not.exist; // eslint-disable-line no-unused-expressions
+    expect(cta.nodeName).to.equal('BUTTON', 'cta is a `div` element');
+    expect(cta.href).to.equal(false, 'cta has NO href');
+    expect(cta.getAttribute('tabindex')).to.equal('0', 'has tab index');
+    expect(cta.getAttribute('disabled')).to.equal(null, 'cta is not disabled');
+  });
+
+  it('implements loading as a button', async () => {
+    // this is to force it to act like it is in a form (aka you need a native button element)
+    const el = await fixture(html`<${tag} loading>This is a button</${tag}>`);
+    el._isButton = true;
+    await defaultChecks(el);
+
+    const shadowRoot = el.shadowRoot;
+    const cta = shadowRoot.querySelector('.cta');
+
+    expect(el.type).to.equal('standard', '`type` property has default value `standard`');
+    expect(el.getAttribute('role')).to.not.exist; // eslint-disable-line no-unused-expressions
+    expect(el.getAttribute('tabindex')).to.not.exist; // eslint-disable-line no-unused-expressions
+    expect(cta.nodeName).to.equal('BUTTON', 'cta is a `button` element');
+    expect(cta.href).to.equal(false, 'cta has NO href');
+    expect(cta.getAttribute('tabindex')).to.equal('0', 'has tab index');
+    expect(cta.getAttribute('disabled')).to.equal('', 'cta is disabled');
+  });
+
+  it('implements template `submit`', async () => {
+    // this is to force it to act like it is in a form (aka you need a native button element)
+    const el = await fixture(html`<${tag} type="submit">This is a button</${tag}>`);
+    await defaultChecks(el);
+
+    const shadowRoot = el.shadowRoot;
+    const cta = shadowRoot.querySelector('.cta');
+
+    expect(el.type).to.equal('submit', '`type` property has default value `submit`');
+    expect(cta.href).to.equal(false, 'cta has NO href');
+    expect(cta.getAttribute('disabled')).to.equal(null, 'cta is disabled');
+  });
+
+  it('implements template `reset`', async () => {
+    // this is to force it to act like it is in a form (aka you need a native button element)
+    const el = await fixture(html`<${tag} type="reset">This is a button</${tag}>`);
+    await defaultChecks(el);
+
+    const shadowRoot = el.shadowRoot;
+    const cta = shadowRoot.querySelector('.cta');
+
+    expect(el.type).to.equal('reset', '`type` property has default value `reset`');
+    expect(cta.href).to.equal(false, 'cta has NO href');
+    expect(cta.getAttribute('disabled')).to.equal(null, 'cta is disabled');
+  });
+});