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

class TestBaseElement extends ZuiBaseElement {}
window.customElements.define('test-base', TestBaseElement);

suite('zui-base', () => {
  test('initializes as a TestBaseElement, which is a subclass of ZuiBaseElement', () => {
    const element = document.createElement('test-base') as TestBaseElement;
    document.body.appendChild(element);
    assert.instanceOf(element, TestBaseElement);
    assert.isTrue(element instanceof ZuiBaseElement);
    document.body.removeChild(element);
  });

  test('zui color vars are defined at root', () => {
    const zuiBlue = getComputedStyle(document.body).getPropertyValue('--zui-blue-500');

    assert.isNotNull(zuiBlue);
    assert.isDefined(zuiBlue);
  });
});