import { LitElement, css, html } from "lit";
import { customElement, property } from "lit/decorators.js";

@customElement("primitive-accordion")
export class PrimitiveAccordion extends LitElement {
  static styles = css`
    :host {
      color: blue;
    }
  `;

  @property({ reflect: true })
  name: string;

  constructor() {
    super();
    this.name = "World";
  }

  // Render the UI as a function of component state
  render() {
    return html`<div>
      <h1>Hello, ${this.name}!</h1>
    </div>`;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "primitive-accordion": PrimitiveAccordion;
  }
}

import { afterEach, beforeEach, describe, it } from "vitest";
import "../lib/accordion";
import { expect, fixture, html } from "@open-wc/testing";

describe("given a single accordion", async () => {
  let root: HTMLDivElement;

  beforeEach(() => {
    root = document.createElement("div");
    document.body.appendChild(root);
  });

  afterEach(() => {
    root?.remove();
  });

  it("should have no accessibility violations in default state", async () => {
    const el = await fixture(
      html` <primitive-accordion name="Testing"></primitive-accordion> `
    );
    console.log(el.shadowRoot?.innerHTML);
    await expect(el).to.be.accessible();
  });
});