// eslint-disable-next-line @typescript-eslint/triple-slash-reference
/// <reference path="../../../../test/src/custom_typings/chai.d.ts" />
/* eslint-disable no-undef */
import { ZuiSlider } from '@zywave/zui-slider';
import { assert } from '@esm-bundle/chai';
import { buildForm } from '../../../../test/src/util/form-helpers';
import { randString, randNumber } from '../../../../test/src/util/helpers';
import { faceTests } from '../../../../test/src/util/face-tests';

suite('zui-slider', () => {
  let element: ZuiSlider;
  let form: HTMLFormElement;

  setup(() => {
    element = document.createElement('zui-slider') as ZuiSlider;

    form = buildForm({
      enableSubmit: false,
      appendChildren: [element],
    });
  });

  teardown(() => {
    document.body.removeChild(form);
  });

  test('initializes as a ZuiSlider', () => {
    assert.instanceOf(element, ZuiSlider);
  });

  test('initializes defaults', () => {
    assert.equal(element.value, '50');
    assert.equal(element.min, 0);
    assert.equal(element.max, 100);
    assert.equal(element.step, 0);
    assert.equal(element.disabled, false);
  });

  test('init slider associates with form properly', () => {
    const value = randNumber(50);
    const name = randString();
    element.setAttribute('name', name);
    element.setAttribute('value', value.toString());
    const formData = new FormData(form);
    const formVal = formData.get(name);
    assert.exists(formVal);
    assert.equal(formVal, value.toString());
  });

  test('init slider with max and value overrides associates with form properly', () => {
    const max = randNumber();
    const val = max + 1;
    const name = randString();
    element.setAttribute('name', name);
    element.setAttribute('max', max.toString());
    element.setAttribute('value', val.toString());

    const formData = new FormData(form);
    const formVal = formData.get(name);
    assert.exists(formVal);
    assert.equal(formVal, max.toString());
  });
});

faceTests<ZuiSlider>('zui-slider', {
  value: '75',
  valueAccessor(element) {
    return element.value;
  },
  defaultValue: '75',
});