import { html } from "lit";

describe("<tems-viewport>", () => {
  it("should mount", () => {
    cy.mount(html`<tems-viewport></tems-viewport>`);

    cy.get("tems-viewport").should("exist");

    cy.get("tems-viewport")
      .find("header slot[name='header']")
      .should("exist")
      .then((slot) => {
        expect(slot[0].assignedNodes()).to.have.lengthOf(0);
      });

    cy.get("tems-viewport")
      .find("div slot[name='content']")
      .should("exist")
      .then((slot) => {
        expect(slot[0].assignedNodes()).to.have.lengthOf(0);
      });
  });

  it("should render header slot", () => {
    cy.mount(
      html`<tems-viewport
        ><div slot="header">Header Content</div></tems-viewport
      >`,
    );

    cy.get("tems-viewport")
      .find("header slot[name='header']")
      .then((slot) => {
        expect(slot[0].assignedNodes()[0].textContent).to.be.equal(
          "Header Content",
        );
      });
  });

  it("should render content slot", () => {
    cy.mount(
      html`<tems-viewport
        ><div slot="content">Content Content :)</div></tems-viewport
      >`,
    );

    cy.get("tems-viewport")
      .find("div slot[name='content']")
      .then((slot) => {
        expect(slot[0].assignedNodes()[0].textContent).to.be.equal(
          "Content Content :)",
        );
      });
  });
});