import {PlutoniumAccountPanel} from '../plutonium-account-panel.js';
import {fixture, html} from '@open-wc/testing';

const assert = chai.assert;

suite('plutonium-account-panel', () => {
  test('is defined', () => {
    const el = document.createElement('plutonium-account-panel');
    assert.instanceOf(el, PlutoniumAccountPanel);
  });

  test('renders with default values', async () => {
    const el = await fixture(html`<plutonium-account-panel></plutonium-account-panel>`);
    assert.shadowDom.equal(
      el,
      `
      <h1>Hello, World!</h1>
      <button part="button">Click Count: 0</button>
      <slot></slot>
    `
    );
  });

  test('renders with a set name', async () => {
    const el = await fixture(html`<plutonium-account-panel name="Test"></plutonium-account-panel>`);
    assert.shadowDom.equal(
      el,
      `
      <h1>Hello, Test!</h1>
      <button part="button">Click Count: 0</button>
      <slot></slot>
    `
    );
  });

  test('handles a click', async () => {
    const el = (await fixture(html`<plutonium-account-panel></plutonium-account-panel>`)) as PlutoniumAccountPanel;
    const button = el.shadowRoot!.querySelector('button')!;
    button.click();
    await el.updateComplete;
    assert.shadowDom.equal(
      el,
      `
      <h1>Hello, World!</h1>
      <button part="button">Click Count: 1</button>
      <slot></slot>
    `
    );
  });
});