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

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

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

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

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

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

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

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

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

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