import { define } from 'elements-sk/define';
import { html } from 'lit-html';
import { assert } from 'chai';
import { ElementSk } from './ElementSk';

const container = document.createElement('div');
document.body.appendChild(container);

afterEach(() => {
  container.innerHTML = '';
});

class MyTestElementSk extends ElementSk {
  attributeCalled = false;

  constructor() {
    super((ele) => html`<p>Hello World!</p>`);
    assert.isNull(this.querySelector('p'));
  }

  connectedCallback() {
    super.connectedCallback();
    this._render();
  }

  static get observedAttributes() {
    return ['some-attribute'];
  }

  attributeChangedCallback() {
    super._render();
    assert.isFalse(this._connected);
    assert.isNull(this.querySelector('p'));
    this.attributeCalled = true;
  }
}

define('my-test-element-sk', MyTestElementSk);

describe('ElementSk', () => {
  describe('render', () => {
    it('only renders if connected', () => {
      container.innerHTML = '<my-test-element-sk some-attribute><my-test-element-sk>';
      const ele = container.firstElementChild as MyTestElementSk;
      assert.isNotNull(ele.querySelector('p'));
      assert.isTrue(ele.attributeCalled);
    });
  });
});