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

suite('zui-tag', () => {
  let element: ZuiTagElement;
  //const shadowTag = () => element.shadowRoot!.querySelector('.tag') as Element;
  //const shadowTagStyles = () => window.getComputedStyle(shadowTag());
  const colors: TagColor[] = ['blue', 'green', 'aqua', 'purple', 'rose', 'red', 'orange', 'yellow', 'gray'];

  setup(() => {
    element = document.createElement('zui-tag') as ZuiTagElement;
    document.body.appendChild(element);
  });

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

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

  for (const color of colors) {
    test(`tag text of ${color} contents properly render`, async () => {
      const tagText = 'Tag';
      element.innerText = tagText;
      await element.updateComplete;
      const slotNode = element.shadowRoot!.querySelector('slot');
      const slotText = slotNode.assignedNodes()[0];
      assert.equal(slotText.textContent.trim(), tagText);
    });
  }
});