import './index';
import {
  eventPromise,
  noEventPromise,
  setUpElementUnderTest,
} from '../../../infra-sk/modules/test_util';
import { expect } from 'chai';
import { LabelOrEmpty, TriageSk } from './triage-sk';
import { Label } from '../rpc_types';

describe('triage-sk', () => {
  const newInstance = setUpElementUnderTest<TriageSk>('triage-sk');

  let triageSk: TriageSk;
  beforeEach(() => triageSk = newInstance());

  it('is untriaged by default', () => {
    expectValueAndToggledButtonToBe(triageSk, 'untriaged');
  });

  describe('"value" property setter/getter', () => {
    it('sets and gets value via property', () => {
      triageSk.value = '';
      expectValueAndToggledButtonToBe(triageSk, '');

      triageSk.value = 'positive';
      expectValueAndToggledButtonToBe(triageSk, 'positive');

      triageSk.value = 'negative';
      expectValueAndToggledButtonToBe(triageSk, 'negative');

      triageSk.value = 'untriaged';
      expectValueAndToggledButtonToBe(triageSk, 'untriaged');
    });

    it('does not emit event "change" when setting value via property',
      async () => {
        const noTriageEvent = noEventPromise('change');
        triageSk.value = 'positive';
        await noTriageEvent;
      });

    it('throws an exception upon an invalid value', () => {
      expect(() => triageSk.value = 'hello world' as LabelOrEmpty)
        .to.throw(RangeError, 'Invalid triage-sk value: "hello world".');
    });
  });

  describe('buttons', () => {
    let changeEvent: Promise<CustomEvent<LabelOrEmpty>>;
    beforeEach(() => {
      changeEvent = eventPromise<CustomEvent<LabelOrEmpty>>('change', 100);
    });

    it('sets value to positive when clicking positive button', async () => {
      clickButton(triageSk,'positive');
      expectValueAndToggledButtonToBe(triageSk, 'positive');
      expect((await changeEvent).detail).to.equal('positive');
    });

    it('sets value to negative when clicking negative button', async () => {
      clickButton(triageSk,'negative');
      expectValueAndToggledButtonToBe(triageSk, 'negative');
      expect((await changeEvent).detail).to.equal('negative');
    });

    it('sets value to untriaged when clicking untriaged button', async () => {
      triageSk.value = 'positive'; // Untriaged by default; change value first.
      clickButton(triageSk,'untriaged');
      expectValueAndToggledButtonToBe(triageSk, 'untriaged');
      expect((await changeEvent).detail).to.equal('untriaged');
    });

    it('does not emit event "change" when clicking button for current value',
      async () => {
        const noChangeEvent = noEventPromise('change');
        clickButton(triageSk,'untriaged');
        await noChangeEvent;
      });
  });
});

const clickButton = (triageSk: TriageSk, value: Label) =>
    triageSk.querySelector<HTMLButtonElement>(`button.${value}`)!.click();

const expectValueAndToggledButtonToBe = (triageSk: TriageSk, value: LabelOrEmpty) => {
  expect(triageSk.value).to.equal(value);
  if (value === '') {
    expect(triageSk.querySelectorAll('button.selected')).to.have.length(0);
  } else {
    expect(triageSk.querySelector(`button.${value}`)!.className).to.contain('selected');
  }
};