import { expect, fixture, html } from '@open-wc/testing';

import '../lion-switch.js';

describe('lion-switch', () => {
  it('should have default "input" element', async () => {
    const el = await fixture(html`
      <lion-switch></lion-switch>
    `);
    expect(el.querySelector('[slot="input"]')).not.to.be.false;
  });

  it('should sync its "disabled" state to child button', async () => {
    const el = await fixture(html`
      <lion-switch disabled></lion-switch>
    `);
    expect(el._inputNode.disabled).to.be.true;
    expect(el._inputNode.hasAttribute('disabled')).to.be.true;
    el.disabled = false;
    await el.updateComplete;
    expect(el._inputNode.disabled).to.be.false;
    expect(el._inputNode.hasAttribute('disabled')).to.be.false;
  });

  it('should sync its "checked" state to child button', async () => {
    const uncheckedEl = await fixture(html`
      <lion-switch></lion-switch>
    `);
    const checkedEl = await fixture(html`
      <lion-switch checked></lion-switch>
    `);
    expect(uncheckedEl._inputNode.checked).to.be.false;
    expect(checkedEl._inputNode.checked).to.be.true;
    uncheckedEl.checked = true;
    checkedEl.checked = false;
    await uncheckedEl.updateComplete;
    await checkedEl.updateComplete;
    expect(uncheckedEl._inputNode.checked).to.be.true;
    expect(checkedEl._inputNode.checked).to.be.false;
  });

  it('should sync "checked" state received from child button', async () => {
    const el = await fixture(html`
      <lion-switch></lion-switch>
    `);
    const button = el._inputNode;
    expect(el.checked).to.be.false;
    button.click();
    expect(el.checked).to.be.true;
    button.click();
    expect(el.checked).to.be.false;
  });

  it('synchronizes modelValue to checked state and vice versa', async () => {
    const el = await fixture(html`
      <lion-switch .choiceValue=${'foo'}></lion-switch>
    `);
    expect(el.checked).to.be.false;
    expect(el.modelValue).to.deep.equal({
      checked: false,
      value: 'foo',
    });
    el.checked = true;
    expect(el.checked).to.be.true;
    expect(el.modelValue).to.deep.equal({
      checked: true,
      value: 'foo',
    });
  });
});