import { html } from "lit";

describe("TemsCardService", () => {
  it("should renders correctly with minimal props", () => {
    cy.mount(
      html`<tems-card-service
        header="Test Header"
        content="Test Content"
      ></tems-card-service>`,
    );
    cy.contains("Test Header").should("be.visible");
    cy.contains("Test Content").should("be.visible");
  });

  it("should renders correctly with full props", () => {
    cy.mount(html`<tems-card-service
      header="Test Header"
      content="Test Content"
      img-left="https://placehold.co/420x500"
      img-right="https://placehold.co/420x500"
    ></tems-card-service>`);
    cy.contains("Test Header");
    cy.contains("Test Content");
    cy.get(".imgLeft").should(
      "have.css",
      "background-image",
      'url("https://placehold.co/420x500")',
    );
    cy.get(".imgRight").should(
      "have.css",
      "background-image",
      'url("https://placehold.co/420x500")',
    );
  });

  it("should not render images when not provided", () => {
    cy.mount(
      html`<tems-card-service
        header="Test Header"
        content="Test Content"
      ></tems-card-service>`,
    );
    cy.get(".imgLeft").should("not.exist");
    cy.get(".imgRight").should("not.exist");
  });
});