tabs.e2e.ts

import { newE2EPage } from "@stencil/core/testing";
import { accessible, renders, defaults } from "../../tests/commonTests";
import { html } from "../../../support/formatting";

describe("calcite-tabs", () => {
  const tabsContent = `
    <calcite-tab-nav slot="tab-nav">
      <calcite-tab-title active>Tab 1 Title</calcite-tab-title>
      <calcite-tab-title>Tab 2 Title</calcite-tab-title>
      <calcite-tab-title>Tab 3 Title</calcite-tab-title>
      <calcite-tab-title>Tab 4 Title</calcite-tab-title>
    </calcite-tab-nav>
    <calcite-tab active>Tab 1 Content</calcite-tab>
    <calcite-tab>Tab 2 Content</calcite-tab>
    <calcite-tab>Tab 3 Content</calcite-tab>
    <calcite-tab>Tab 4 Content</calcite-tab>
  `;
  const tabsSnippet = `<calcite-tabs>${tabsContent}</calcite-tabs>`;

  it("renders", async () => renders(tabsSnippet, { display: "flex" }));

  it("has defaults", async () =>
    defaults("calcite-tabs", [
      { propertyName: "layout", defaultValue: "inline" },
      { propertyName: "position", defaultValue: "above" },
      { propertyName: "scale", defaultValue: "m" }
    ]));

  it("is accessible", async () => accessible(`<calcite-tabs>${tabsContent}</calcite-tabs>`));

  it("sets up basic aria attributes", async () => {
    const page = await newE2EPage();

    await page.setContent(`
      <calcite-tabs>
        <calcite-tab-nav slot="tab-nav">
          <calcite-tab-title id="title-1" active>Tab 1 Title</calcite-tab-title>
          <calcite-tab-title id="title-2" >Tab 2 Title</calcite-tab-title>
          <calcite-tab-title id="title-3" >Tab 3 Title</calcite-tab-title>
          <calcite-tab-title id="title-4" >Tab 4 Title</calcite-tab-title>
        </calcite-tab-nav>

        <calcite-tab id="tab-1" active>Tab 1 Content</calcite-tab>
        <calcite-tab id="tab-2">Tab 2 Content</calcite-tab>
        <calcite-tab id="tab-3">Tab 3 Content</calcite-tab>
        <calcite-tab id="tab-4">Tab 4 Content</calcite-tab>
      </calcite-tabs>
    `);

    await page.waitForChanges();

    const tabs = await page.findAll("calcite-tab");
    const titles = await page.findAll("calcite-tab-title");

    expect(tabs[0]).toEqualAttribute("aria-expanded", "true");
    expect(tabs[1]).toEqualAttribute("aria-expanded", "false");
    expect(tabs[2]).toEqualAttribute("aria-expanded", "false");
    expect(tabs[3]).toEqualAttribute("aria-expanded", "false");

    for (let index = 0; index < tabs.length; index++) {
      const tab = tabs[index];
      const title = titles[index];
      expect(title).toEqualAttribute("aria-controls", tab.id);
      expect(tab).toEqualAttribute("aria-labelledby", title.id);
    }
  });

  it("keeps aria attributes in sync across DOM mutations", async () => {
    const page = await newE2EPage();

    await page.setContent(`
      <calcite-tabs>
        <calcite-tab-nav slot="tab-nav">
          <calcite-tab-title active>Tab 1 Title</calcite-tab-title>
          <calcite-tab-title id="insert-after-title">Tab 2 Title</calcite-tab-title>
          <calcite-tab-title>Tab 3 Title</calcite-tab-title>
          <calcite-tab-title>Tab 4 Title</calcite-tab-title>
        </calcite-tab-nav>

        <calcite-tab active>Tab 1 Content</calcite-tab>
        <calcite-tab id="insert-after-tab">Tab 2 Content</calcite-tab>
        <calcite-tab>Tab 3 Content</calcite-tab>
        <calcite-tab>Tab 4 Content</calcite-tab>
      </calcite-tabs>
    `);

    await page.$eval("calcite-tabs", (element: HTMLCalciteTabsElement) => {
      element.ownerDocument
        .getElementById("insert-after-title")
        .insertAdjacentHTML("afterend", `<calcite-tab-title id="inserted-title">Test</calcite-tab-title>`);

      element.ownerDocument
        .getElementById("insert-after-tab")
        .insertAdjacentHTML("afterend", `<calcite-tab id="inserted-tab">Test</calcite-tab>`);
    });

    await page.waitForChanges();

    const tabs = await page.findAll("calcite-tab");
    const titles = await page.findAll("calcite-tab-title");

    for (let index = 0; index < tabs.length; index++) {
      const tab = tabs[index];
      const title = titles[index];
      expect(title).toEqualAttribute("aria-controls", tab.id);
      expect(tab).toEqualAttribute("aria-labelledby", title.id);
    }
  });

  describe("when no scale is provided", () => {
    it("should render itself and child tab elements with default medium scale", async () => {
      const page = await newE2EPage({
        html: `<calcite-tabs>${tabsContent}</calcite-tabs>`
      });
      expect(await page.find("calcite-tabs")).toEqualAttribute("scale", "m");
      expect(await page.find("calcite-tab-nav")).toEqualAttribute("scale", "m");
      expect(await page.find("calcite-tab-title")).toEqualAttribute("scale", "m");
      expect(await page.find("calcite-tab")).toEqualAttribute("scale", "m");
    });
  });

  describe("when scale is provided", () => {
    it("should render itself and child tab elements with corresponding scale (small)", async () => {
      const page = await newE2EPage({
        html: `<calcite-tabs scale="s">${tabsContent}</calcite-tabs>`
      });
      expect(await page.find("calcite-tabs")).toEqualAttribute("scale", "s");
      expect(await page.find("calcite-tab-nav")).toEqualAttribute("scale", "s");
      expect(await page.find("calcite-tab-title")).toEqualAttribute("scale", "s");
      expect(await page.find("calcite-tab")).toEqualAttribute("scale", "s");
    });

    it("should render itself and child tab elements with corresponding scale (medium)", async () => {
      const page = await newE2EPage({
        html: `<calcite-tabs scale="m">${tabsContent}</calcite-tabs>`
      });
      expect(await page.find("calcite-tabs")).toEqualAttribute("scale", "m");
      expect(await page.find("calcite-tab-nav")).toEqualAttribute("scale", "m");
      expect(await page.find("calcite-tab-title")).toEqualAttribute("scale", "m");
      expect(await page.find("calcite-tab")).toEqualAttribute("scale", "m");
    });

    it("should render itself and child tab elements with corresponding scale (large)", async () => {
      const page = await newE2EPage({
        html: `<calcite-tabs scale="l">${tabsContent}</calcite-tabs>`
      });
      expect(await page.find("calcite-tabs")).toEqualAttribute("scale", "l");
      expect(await page.find("calcite-tab-nav")).toEqualAttribute("scale", "l");
      expect(await page.find("calcite-tab-title")).toEqualAttribute("scale", "l");
      expect(await page.find("calcite-tab")).toEqualAttribute("scale", "l");
    });
  });

  describe("when layout is inline and bordered is true", () => {
    it("should render tabs, tab-nav, and tab-title with bordered attribute", async () => {
      const page = await newE2EPage({
        html: `<calcite-tabs bordered>${tabsContent}</calcite-tabs>`
      });
      expect(await page.find("calcite-tabs")).toEqualAttribute("bordered", "");
      expect(await page.find("calcite-tab-nav")).toEqualAttribute("bordered", "");
      expect(await page.find("calcite-tab-title")).toEqualAttribute("bordered", "");
      expect(await page.find("calcite-tab")).toEqualAttribute("bordered", null);
    });

    it("should render tab-nav's blue active indicator on top", async () => {
      const page = await newE2EPage({
        html: `
        <calcite-tabs bordered>
          <calcite-tab-nav slot="tab-nav">
            <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 1 Title</calcite-tab-title>
            <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right" >Tab 2 Title</calcite-tab-title>
          </calcite-tab-nav>
          <calcite-tab>Tab 1 Content</calcite-tab>
          <calcite-tab>Tab 2 Content</calcite-tab>
        </calcite-tabs>
        `
      });
      const indicator = await page.find("calcite-tab-nav >>> .tab-nav-active-indicator-container");
      const indicatorStyles = await indicator.getComputedStyle();
      expect(indicatorStyles.top).toEqual("0px");
      expect(indicatorStyles.bottom).not.toEqual("0px");
    });

    it("should render tab-nav's blue active indicator on bottom when position is below", async () => {
      const page = await newE2EPage({
        html: `
        <calcite-tabs bordered position="below">
          <calcite-tab-nav slot="tab-nav">
            <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 1 Title</calcite-tab-title>
            <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right" >Tab 2 Title</calcite-tab-title>
          </calcite-tab-nav>
          <calcite-tab>Tab 1 Content</calcite-tab>
          <calcite-tab>Tab 2 Content</calcite-tab>
        </calcite-tabs>
        `
      });
      const indicator = await page.find("calcite-tab-nav >>> .tab-nav-active-indicator-container");
      const indicatorStyles = await indicator.getComputedStyle();
      expect(indicatorStyles.bottom).toEqual("0px");
      expect(indicatorStyles.top).not.toEqual("0px");
    });
  });

  it("should ignore bordered attribute when layout is center", async () => {
    const page = await newE2EPage({
      html: `<calcite-tabs layout="center" bordered>${tabsContent}</calcite-tabs>`
    });
    expect(await page.find("calcite-tabs")).not.toHaveAttribute("bordered");
  });

  it("item selection should work when placed inside shadow DOM (#992)", async () => {
    const wrappedTabTemplateHTML = html`
      <calcite-tabs>
        <calcite-tab-nav slot="tab-nav">
          <calcite-tab-title id="title-1" active>Tab 1 Title</calcite-tab-title>
          <calcite-tab-title id="title-2">Tab 2 Title</calcite-tab-title>
        </calcite-tab-nav>
        <calcite-tab id="tab-1" active>Tab 1 Content</calcite-tab>
        <calcite-tab id="tab-2">Tab 2 Content</calcite-tab>
      </calcite-tabs>
    `;

    const page = await newE2EPage({
      // load page with the tab template,
      // so they're available in the browser-evaluated fn below
      html: wrappedTabTemplateHTML
    });

    await page.waitForChanges();

    const finalSelectedItem = await page.evaluate(
      async (templateHTML: string): Promise<{ titleTab: string; contentTab: string }> => {
        const wrapperName = "tab-wrapping-component";

        customElements.define(
          wrapperName,
          class extends HTMLElement {
            constructor() {
              super();
            }

            connectedCallback(): void {
              this.attachShadow({ mode: "open" }).innerHTML = templateHTML;
            }
          }
        );

        document.body.innerHTML = `<${wrapperName}></${wrapperName}>`;

        const wrapper = document.querySelector(wrapperName);
        wrapper.shadowRoot.querySelector<HTMLElement>("#title-2").click();
        await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
        await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));

        const titleTab = wrapper.shadowRoot.querySelector("calcite-tab-title[active]").id;
        const contentTab = wrapper.shadowRoot.querySelector("calcite-tab[active]").id;
        return { titleTab, contentTab };
      },
      [wrappedTabTemplateHTML]
    );
    expect(finalSelectedItem.titleTab).toBe("title-2");
    expect(finalSelectedItem.contentTab).toBe("tab-2");
  });

  it("item selection should work with nested tabs", async () => {
    const page = await newE2EPage({
      html: html`
        <calcite-tabs id="parentTabs">
          <calcite-tab-nav slot="tab-nav">
            <calcite-tab-title id="parentA">Parent 1</calcite-tab-title>
            <calcite-tab-title>Parent 2</calcite-tab-title>
          </calcite-tab-nav>
          <calcite-tab id="parentTabA">
            <calcite-tabs>
              <calcite-tab-nav slot="tab-nav">
                <calcite-tab-title>Child 1</calcite-tab-title>
                <calcite-tab-title id="kidB">Child 2</calcite-tab-title>
                <calcite-tab-title>Child 3</calcite-tab-title>
              </calcite-tab-nav>
              <calcite-tab>child content 1</calcite-tab>
              <calcite-tab id="kidBTab">child content 2</calcite-tab>
              <calcite-tab>child content 3</calcite-tab>
            </calcite-tabs>
          </calcite-tab>
          <calcite-tab>Parent content 2</calcite-tab>
        </calcite-tabs>
      `
    });

    await page.waitForChanges();

    const kidB = await page.find("#kidB");
    kidB.click();

    await page.waitForChanges();

    const parentTabA = await page.find("#parentTabA");
    const childTitle = (await parentTabA.find("calcite-tab-title[active]")).getAttribute("id");
    const childContent = (await parentTabA.find("calcite-tab[active]")).getAttribute("id");

    const parentTabs = await page.find("#parentTabs");
    const parentTitle = (await parentTabs.find("calcite-tab-title[active]")).getAttribute("id");
    const parentContent = (await parentTabs.find("calcite-tab[active]")).getAttribute("id");

    expect(childTitle).toBe("kidB");
    expect(childContent).toBe("kidBTab");
    expect(parentTitle).toBe("parentA");
    expect(parentContent).toBe("parentTabA");
  });
});