// eslint-disable-next-line @typescript-eslint/triple-slash-reference
/// <reference path="../../../../test/src/custom_typings/chai.d.ts" />
/* eslint-disable no-undef */
import { ZuiSpinnerElement } from '@zywave/zui-spinner';
import { assert } from '@esm-bundle/chai';

suite('zui-spinner', () => {
  let element: ZuiSpinnerElement;

  setup(() => {
    element = document.createElement('zui-spinner') as ZuiSpinnerElement;

    document.body.appendChild(element);
  });

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

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

  test('When "active" is added/removed spinner visibility is toggled', async () => {
    await element.updateComplete;
    const getContainerDisplayVal = () =>
      window.getComputedStyle(element?.shadowRoot?.querySelector('.container'))?.display;

    assert.equal(getContainerDisplayVal(), 'none');

    element.active = true;
    await element.updateComplete;
    assert.notEqual(getContainerDisplayVal(), 'none');

    element.active = false;
    await element.updateComplete;
    assert.equal(getContainerDisplayVal(), 'none');
  });

  // The test below ensures there are no line breaks or space within the .spinner-layer HTML elements, as it will misshape the spinner circle, since the CSS has `white-space: nowrap` applied
  test('Ensure render template is correctly formatted', async () => {
    await element.updateComplete;
    const hasWhitespaceBetweenBrackets = () =>
      !!element?.shadowRoot?.querySelector('.spinner-layer')?.innerHTML.match(/>[\s]+</g);

    assert.isFalse(hasWhitespaceBetweenBrackets());
  });
});