<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>MozPageHeader Tests</title>
    <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
    <link
      rel="stylesheet"
      href="chrome://mochikit/content/tests/SimpleTest/test.css"
    />
    <link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
    <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
    <script
      type="module"
      src="chrome://global/content/elements/moz-page-header.mjs"
    ></script>
    <script src="lit-test-helpers.js"></script>
    <script>
      let html;
      let testHelpers = new LitTestHelpers();

      add_setup(async function setup() {
        ({ html } = await testHelpers.setupLit());
        const templateFn = attrs => html`
          <moz-page-header ${attrs}></moz-page-header>
        `;
        testHelpers.setupTests({ templateFn });
      });

      add_task(async function testMozPageHeaderProperties() {
        const HEADING = "Page Heading";
        const DESCRIPTION = "Some description of this page.";
        const ICON_SRC = "chrome://global/skin/icons/info.svg";

        let template = testHelpers.templateFn({
          heading: HEADING,
          description: DESCRIPTION,
          iconsrc: ICON_SRC,
        });
        let renderTarget = await testHelpers.renderTemplate(template);
        let header = renderTarget.firstElementChild;

        ok(header, "The page header renders.");

        let headingEl = header.shadowRoot.querySelector("#heading");
        is(headingEl?.localName, "h2", "Heading defaults to <h2>.");
        is(
          headingEl?.textContent.trim(),
          HEADING,
          "Heading element renders with the expected text."
        );

        let descriptionEl = header.shadowRoot.querySelector(".description");
        is(
          descriptionEl?.textContent.trim(),
          DESCRIPTION,
          "Description element renders with the expected text."
        );

        let iconEl = header.shadowRoot.querySelector(".icon");
        ok(iconEl, "Icon element is rendered when iconSrc is set.");
        is(iconEl.getAttribute("src"), ICON_SRC, "Icon has the expected src.");

        let backButton = header.shadowRoot.querySelector(".back-button");
        ok(!backButton, "Back button is not rendered by default.");

        header.backButton = true;
        await header.updateComplete;

        backButton = header.shadowRoot.querySelector(".back-button");
        ok(backButton, "Back button appears when backButton is true.");

        header.backButton = false;
        await header.updateComplete;

        backButton = header.shadowRoot.querySelector(".back-button");
        ok(
          !backButton,
          "Back button is removed when backButton is set back to false."
        );
      });

      add_task(async function testMozPageHeaderBackButtonEvent() {
        let template = testHelpers.templateFn({
          heading: "With back button",
          backbutton: "",
        });
        let renderTarget = await testHelpers.renderTemplate(template);
        let header = renderTarget.firstElementChild;

        let backButton = header.shadowRoot.querySelector(".back-button");
        ok(backButton, "Back button is present for click test.");

        let eventPromise = new Promise(resolve => {
          header.addEventListener("navigate-back", resolve, { once: true });
        });

        backButton.click();
        let event = await eventPromise;

        ok(event instanceof Event, "Clicking back button dispatches an Event.");
        is(
          event.type,
          "navigate-back",
          "The event type is a 'navigate-back' event."
        );
      });

      add_task(async function testMozPageHeaderBreadcrumbSlot() {
        const template = html`
          <moz-page-header
            heading="With Breadcrumbs"
            icon-src="chrome://global/skin/icons/info.svg"
          >
            <moz-breadcrumb-group slot="breadcrumbs">
              <moz-breadcrumb href="about#first" label="First"></moz-breadcrumb>
              <moz-breadcrumb
                href="about#current"
                label="Current"
              ></moz-breadcrumb>
            </moz-breadcrumb-group>
          </moz-page-header>
        `;
        const renderTarget = await testHelpers.renderTemplate(template);
        const header = renderTarget.firstElementChild;

        const slot = header.shadowRoot.querySelector(
          'slot[name="breadcrumbs"]'
        );
        ok(slot, "Page header renders a slot for breadcrumbs.");

        const assigned = slot.assignedElements();
        is(
          assigned.length,
          1,
          "One element is assigned into the breadcrumbs slot."
        );
        const group = assigned[0];
        is(
          group.localName,
          "moz-breadcrumb-group",
          "moz-breadcrumb-group is slotted in the breadcrumbs slot."
        );
      });

      add_task(async function testMozPageHeaderBadge() {
        let template = testHelpers.templateFn({
          heading: "With Badge",
          badge: "beta",
        });
        let renderTarget = await testHelpers.renderTemplate(template);
        let header = renderTarget.firstElementChild;

        let badge = header.shadowRoot.querySelector("moz-badge");
        ok(badge, "moz-badge is rendered when badge is 'beta'.");
        is(badge.getAttribute("type"), "beta", "moz-badge has type 'beta'.");

        header.badge = undefined;
        await header.updateComplete;

        badge = header.shadowRoot.querySelector("moz-badge");
        ok(!badge, "moz-badge is removed when badge is undefined.");

        header.badge = "new";
        await header.updateComplete;

        badge = header.shadowRoot.querySelector("moz-badge");
        ok(badge, "moz-badge is rendered when badge is 'new'.");
        is(badge.getAttribute("type"), "new", "moz-badge has type 'new'.");
      });

      add_task(async function testMozPageHeaderHeadingLevel() {
        const HEADING = "Demotable Heading";
        let template = testHelpers.templateFn({ heading: HEADING });
        let renderTarget = await testHelpers.renderTemplate(template);
        let header = renderTarget.firstElementChild;

        let headingEl = header.shadowRoot.querySelector("#heading");
        is(
          headingEl?.localName,
          "h2",
          "Heading defaults to <h2> when headingLevel is not set."
        );

        for (let level of [1, 3, 4, 5, 6]) {
          header.headingLevel = level;
          await header.updateComplete;
          headingEl = header.shadowRoot.querySelector("#heading");
          is(
            headingEl?.localName,
            `h${level}`,
            `Heading renders as <h${level}> when headingLevel is ${level}.`
          );
          is(
            headingEl?.textContent.trim(),
            HEADING,
            `Heading text is preserved at level ${level}.`
          );
        }

        header.headingLevel = 2;
        await header.updateComplete;
        headingEl = header.shadowRoot.querySelector("#heading");
        is(
          headingEl?.localName,
          "h2",
          "Heading returns to <h2> when headingLevel is set back to 2."
        );
      });

      add_task(async function testMozPageHeaderSupportPage() {
        let supportPageTemplate = testHelpers.templateFn({
          label: "Testing support-page",
          "support-page": "test",
        });
        let renderTarget =
          await testHelpers.renderTemplate(supportPageTemplate);
        let header = renderTarget.firstElementChild;

        let supportLink = header.shadowRoot.querySelector(".support-link");
        ok(
          supportLink,
          "moz-page-header renders a support link when supportPage is provided."
        );

        let adjacentEl = supportLink.previousElementSibling;
        is(
          adjacentEl.id,
          "heading",
          "support link is placed next to the heading when no description is provided."
        );

        header.description = "now we have a description.";
        await header.updateComplete;

        supportLink = header.shadowRoot.querySelector(".support-link");
        adjacentEl = supportLink.previousElementSibling;
        is(
          adjacentEl.id,
          "description",
          "support link is placed next to the description when provided."
        );
      });
    </script>
  </head>
  <body>
    <p id="display"></p>
    <div id="content" style="display: none"></div>
    <pre id="test"></pre>
  </body>
</html>