@decidables/decidables-elements 0.0.1

package/test/decidables-element.test.js

@@ -0,0 +1,10 @@
+import {expect} from '@open-wc/testing';
+
+import DecidablesElement from '../src/decidables-element';
+
+describe('decidables-element', () => {
+  it('can provide a uniqueId', async () => {
+    const uniqueId = DecidablesElement.uniqueId; // eslint-disable-line prefer-destructuring
+    expect(uniqueId).to.equal(1);
+  });
+});

package/test/slider.test.js

@@ -0,0 +1,64 @@
+import {expect, fixture, html} from '@open-wc/testing';
+
+import '../src/slider';
+
+describe('decidables-slider', () => {
+  it('has a shadowDom', async () => {
+    const el = await fixture(html` <decidables-slider>Slide</decidables-slider> `);
+
+    expect(el).shadowDom.to.equal(`
+      <label for="decidables-1-slider">
+        <slot></slot>
+      </label>
+      <div class="range">
+        <input type="range" id="decidables-1-slider">
+      </div>
+      <decidables-spinner></decidables-spinner>
+    `);
+  });
+
+  it('has a lightDom', async () => {
+    const el = await fixture(html` <decidables-slider>Slide</decidables-slider> `);
+
+    expect(el).lightDom.to.equal(`
+      Slide
+    `);
+  });
+
+  it.skip('can be disabled', async () => {
+    const el = await fixture(html` <decidables-slider disabled>Slide</decidables-slider> `);
+
+    expect(el.shadowRoot).to.have.descendant('input').that.has.attribute('disabled');
+    expect(el.shadowRoot)
+      .to.have.descendant('decidables-spinner').that.has.attribute('disabled');
+  });
+
+  it('can have an upper limit', async () => {
+    const el = await fixture(html` <decidables-slider max="20">Slide</decidables-slider> `);
+
+    expect(el.shadowRoot).to.have.descendant('input').that.has.attribute('max', '20');
+    expect(el.shadowRoot).to.have.descendant('decidables-spinner').that.has.attribute('max', '20');
+  });
+
+  it('can have a lower limit', async () => {
+    const el = await fixture(html` <decidables-slider min="10">Slide</decidables-slider> `);
+
+    expect(el.shadowRoot).to.have.descendant('input').that.has.attribute('min', '10');
+    expect(el.shadowRoot).to.have.descendant('decidables-spinner').that.has.attribute('min', '10');
+  });
+
+  it('can have a step size', async () => {
+    const el = await fixture(html` <decidables-slider step="2">Slide</decidables-slider> `);
+
+    expect(el.shadowRoot).to.have.descendant('input').that.has.attribute('step', '2');
+    expect(el.shadowRoot).to.have.descendant('decidables-spinner').that.has.attribute('step', '2');
+  });
+
+  it('can have an initial value', async () => {
+    const el = await fixture(html` <decidables-slider value="17">Slide</decidables-slider> `);
+
+    expect(el).to.have.value(17);
+    expect(el.shadowRoot).to.have.descendant('input').that.has.value('17');
+    expect(el.shadowRoot).to.have.descendant('decidables-spinner').has.value(17);
+  });
+});

package/test/spinner.test.js

@@ -0,0 +1,55 @@
+import {expect, fixture, html} from '@open-wc/testing';
+
+import '../src/spinner';
+
+describe('decidables-spinner', () => {
+  it('has a shadowDom', async () => {
+    const el = await fixture(html` <decidables-spinner>Adjust</decidables-spinner> `);
+
+    expect(el).shadowDom.to.equal(`
+      <label>
+        <slot></slot>
+        <input type="number">
+      </label>
+    `);
+  });
+
+  it('has a lightDom', async () => {
+    const el = await fixture(html` <decidables-spinner>Adjust</decidables-spinner> `);
+
+    expect(el).lightDom.to.equal(`
+      Adjust
+    `);
+  });
+
+  it('can be disabled', async () => {
+    const el = await fixture(html` <decidables-spinner disabled>Adjust</decidables-spinner> `);
+
+    expect(el.shadowRoot).to.have.descendant('input').that.has.attribute('disabled');
+  });
+
+  it('can have an upper limit', async () => {
+    const el = await fixture(html` <decidables-spinner max="20">Adjust</decidables-spinner> `);
+
+    expect(el.shadowRoot).to.have.descendant('input').that.has.attribute('max', '20');
+  });
+
+  it('can have a lower limit', async () => {
+    const el = await fixture(html` <decidables-spinner min="10">Adjust</decidables-spinner> `);
+
+    expect(el.shadowRoot).to.have.descendant('input').that.has.attribute('min', '10');
+  });
+
+  it('can have a step size', async () => {
+    const el = await fixture(html` <decidables-spinner step="2">Adjust</decidables-spinner> `);
+
+    expect(el.shadowRoot).to.have.descendant('input').that.has.attribute('step', '2');
+  });
+
+  it('can have an initial value', async () => {
+    const el = await fixture(html` <decidables-spinner value="17">Slide</decidables-spinner> `);
+
+    expect(el).to.have.value(17);
+    expect(el.shadowRoot).to.have.descendant('input').that.has.value('17');
+  });
+});

package/test/switch.test.js

@@ -0,0 +1,71 @@
+import {expect, fixture, html} from '@open-wc/testing';
+
+import '../src/switch';
+
+describe('decidables-switch', () => {
+  it('has a shadowDom', async () => {
+    const el = await fixture(html`
+      <decidables-switch>
+        <span>On</span>
+        <span slot="off-label">Off</span>
+      </decidables-switch>
+    `);
+
+    expect(el).shadowDom.to.equal(`
+      <input type="checkbox" id="decidables-1-checkbox">
+      <label for="decidables-1-checkbox">
+        <slot name="off-label"></slot>
+      </label>
+      <label for="decidables-1-checkbox">
+        <slot></slot>
+      </label>
+    `);
+  });
+
+  it('has a lightDom', async () => {
+    const el = await fixture(html`
+      <decidables-switch>
+        <span>On</span>
+        <span slot="off-label">Off</span>
+      </decidables-switch>
+    `);
+
+    expect(el).lightDom.to.equal(`
+      <span>On</span>
+      <span slot="off-label">Off</span>
+    `);
+  });
+
+  it('can be disabled', async () => {
+    const el = await fixture(html`
+      <decidables-switch disabled>
+        <span>On</span>
+        <span slot="off-label">Off</span>
+      </decidables-switch>
+    `);
+
+    expect(el.shadowRoot).to.have.descendant('input').that.has.attribute('disabled');
+  });
+
+  it('can be switched off', async () => {
+    const el = await fixture(html`
+      <decidables-switch>
+        <span>On</span>
+        <span slot="off-label">Off</span>
+      </decidables-switch>
+    `);
+
+    expect(el.shadowRoot).to.have.descendant('input').that.does.not.have.attribute('checked');
+  });
+
+  it('can be switched on', async () => {
+    const el = await fixture(html`
+      <decidables-switch checked>
+        <span>On</span>
+        <span slot="off-label">Off</span>
+      </decidables-switch>
+    `);
+
+    expect(el.shadowRoot).to.have.descendant('input').that.has.attribute('checked');
+  });
+});

package/test/toggle-option.test.js

@@ -0,0 +1,62 @@
+import {expect, fixture, html} from '@open-wc/testing';
+
+import '../src/toggle-option';
+
+describe('decidables-toggle-option', () => {
+  it('has a shadowDom', async () => {
+    const el = await fixture(html`
+      <decidables-toggle-option name="test" value="possibly">
+        Possibly
+      </decidables-toggle-option>
+    `);
+
+    expect(el).shadowDom.to.equal(`
+      <input type="radio" id="decidables-1-radio" name="test" value="possibly">
+      <label for="decidables-1-radio">
+        <slot></slot>
+      </label>
+    `);
+  });
+
+  it('has a lightDom', async () => {
+    const el = await fixture(html`
+      <decidables-toggle-option name="test" value="possibly">
+        Possibly
+      </decidables-toggle-option>
+    `);
+
+    expect(el).lightDom.to.equal(`
+      Possibly
+    `);
+  });
+
+  it.skip('can be disabled', async () => {
+    const el = await fixture(html`
+      <decidables-toggle-option name="test" value="possibly" disabled>
+        Possibly
+      </decidables-toggle-option>
+    `);
+
+    expect(el.shadowRoot).to.have.descendant('input').that.has.attribute('disabled');
+  });
+
+  it('can be toggled off', async () => {
+    const el = await fixture(html`
+      <decidables-toggle-option name="test" value="possibly">
+        Possibly
+      </decidables-toggle-option>
+    `);
+
+    expect(el.shadowRoot).to.have.descendant('input').that.has.property('checked', false);
+  });
+
+  it('can be toggled on', async () => {
+    const el = await fixture(html`
+      <decidables-toggle-option name="test" value="possibly" checked>
+        Possibly
+      </decidables-toggle-option>
+    `);
+
+    expect(el.shadowRoot).to.have.descendant('input').that.has.property('checked', true);
+  });
+});

package/test/toggle.test.js

@@ -0,0 +1,98 @@
+import {expect, fixture, html} from '@open-wc/testing';
+
+import '../src/toggle';
+
+describe('decidables-toggle', () => {
+  it('has a shadowDom', async () => {
+    const el = await fixture(html`
+      <decidables-toggle>
+        <span slot="label">Choose</span>
+        <decidables-toggle-option name="test" value="possibly">
+          Possibly
+        </decidables-toggle-option>
+        <decidables-toggle-option name="test" value="maybe">
+          Maybe
+        </decidables-toggle-option>
+        <decidables-toggle-option name="test" value="perhaps">
+          Perhaps
+        </decidables-toggle-option>
+      </decidables-toggle>
+    `);
+
+    expect(el).shadowDom.to.equal(`
+      <fieldset>
+        <legend><slot name="label"></slot></legend>
+        <slot></slot>
+      </fieldset>
+    `);
+  });
+
+  it('has a lightDom', async () => {
+    const el = await fixture(html`
+      <decidables-toggle>
+        <span slot="label">Choose</span>
+        <decidables-toggle-option name="test" value="possibly">
+          Possibly
+        </decidables-toggle-option>
+        <decidables-toggle-option name="test" value="maybe">
+          Maybe
+        </decidables-toggle-option>
+        <decidables-toggle-option name="test" value="perhaps">
+          Perhaps
+        </decidables-toggle-option>
+      </decidables-toggle>
+    `);
+
+    expect(el).lightDom.to.equal(`
+      <span slot="label">Choose</span>
+      <decidables-toggle-option name="test" value="possibly">
+        Possibly
+      </decidables-toggle-option>
+      <decidables-toggle-option name="test" value="maybe">
+        Maybe
+      </decidables-toggle-option>
+      <decidables-toggle-option name="test" value="perhaps">
+        Perhaps
+      </decidables-toggle-option>
+    `);
+  });
+
+  it('can be disabled', async () => {
+    const el = await fixture(html`
+      <decidables-toggle disabled>
+        <span slot="label">Choose</span>
+        <decidables-toggle-option name="test" value="possibly">
+          Possibly
+        </decidables-toggle-option>
+        <decidables-toggle-option name="test" value="maybe">
+          Maybe
+        </decidables-toggle-option>
+        <decidables-toggle-option name="test" value="perhaps">
+          Perhaps
+        </decidables-toggle-option>
+      </decidables-toggle>
+    `);
+
+    expect(el.shadowRoot).to.have.descendant('fieldset').that.has.attribute('disabled');
+  });
+
+  it('can have an option selected', async () => {
+    const el = await fixture(html`
+      <decidables-toggle disabled>
+        <span slot="label">Choose</span>
+        <decidables-toggle-option name="test" value="possibly">
+          Possibly
+        </decidables-toggle-option>
+        <decidables-toggle-option name="test" value="maybe" checked>
+          Maybe
+        </decidables-toggle-option>
+        <decidables-toggle-option name="test" value="perhaps">
+          Perhaps
+        </decidables-toggle-option>
+      </decidables-toggle>
+    `);
+
+    expect(el).to.have.descendants('decidables-toggle-option[checked]').with.length(1);
+    expect(el).to.have.descendants('decidables-toggle-option:not([checked])').with.length(2);
+  });
+});