<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Open Tabs Tests</title>
  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
  <link rel="localization" href="browser/firefoxView.ftl">
  <link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
  <script type="module" src="chrome://browser/content/firefoxview/opentabs.mjs"></script>
  <script type="module" src="chrome://browser/content/firefoxview/overview.mjs"></script>
</head>
<body>
<p id="display"></p>
<div id="content">
  <view-opentabs></view-opentabs>
</div>
<pre id="test">
<script class="testbody" type="application/javascript">
  const { BrowserTestUtils } = ChromeUtils.import(
    "resource://testing-common/BrowserTestUtils.jsm"
  );
  const { TestUtils } = ChromeUtils.import(
    "resource://testing-common/TestUtils.jsm"
  );

  const TEST_URL = "about:robots";
  const ROW_URL_ID = "fxview-tab-row-url";
  const ROW_DATE_ID = "fxview-tab-row-date";

  const openTabs = document.querySelector("view-opentabs");

  function getCards() {
    return openTabs.shadowRoot.querySelectorAll("view-opentabs-card");
  }

  function getRowsForCard(card) {
    return card.shadowRoot.querySelector("fxview-tab-list").rowEls;
  }

  add_setup(async function () {
    openTabs.enter();
    await openTabs.getUpdateComplete();
  });

  add_task(async function open_tab_same_window() {
    await BrowserTestUtils.withNewTab(TEST_URL, async browser => {
      await openTabs.getUpdateComplete();
      const cards = getCards();
      is(cards.length, 1, "There is one window.");
      let tabs = getRowsForCard(cards[0]);
      is(tabs.length, 2, "There are two tabs.");
      is(tabs[1].url, TEST_URL, "The new tab appears last.");
      const [originalTab, newTab] = browser.ownerGlobal.gBrowser.tabs;
      tabs[0].mainEl.click();
      await BrowserTestUtils.waitForCondition(
        () => originalTab.selected,
        "The original tab is selected."
      );
      tabs[1].mainEl.click();
      await BrowserTestUtils.waitForCondition(
        () => newTab.selected,
        "The new tab is selected."
      );
      info("Bring the new tab to the front.");
      browser.ownerGlobal.gBrowser.moveTabTo(newTab, 0);
      await BrowserTestUtils.waitForMutationCondition(
        cards[0].shadowRoot,
        { childList: true, subtree: true },
        () => {
          tabs = getRowsForCard(cards[0]);
          return tabs[0].url === TEST_URL;
        }
      );
    });

    await openTabs.getUpdateComplete();
    const [card] = getCards();
    await TestUtils.waitForCondition(
      () => getRowsForCard(card).length === 1,
      "There is one tab left after closing the new one."
    );
    const [row] = getRowsForCard(card);
    ok(
      !row.shadowRoot.getElementById("fxview-tab-row-url").hidden,
      "The URL is displayed, since we have one window."
    );
    ok(
      !row.shadowRoot.getElementById("fxview-tab-row-date").hidden,
      "The date is displayed, since we have one window."
    );
  });

  add_task(async function open_tab_new_window() {
    const win = await BrowserTestUtils.openNewBrowserWindow();
    await BrowserTestUtils.withNewTab(
      { gBrowser: win.gBrowser, opening: TEST_URL },
      async () => {
        await openTabs.getUpdateComplete();
        const cards = getCards();
        is(cards.length, 2, "There are two windows.");
        const [originalWinRows, newWinRows] =
          Array.from(cards).map(getRowsForCard);
        is(
          originalWinRows.length,
          1,
          "There is one tab in the original window."
        );
        is(newWinRows.length, 2, "There are two tabs in the new window.");
        is(newWinRows[1].url, TEST_URL, "The new tab appears last.");
        const [row] = originalWinRows;
        ok(
          row.shadowRoot.getElementById("fxview-tab-row-url").hidden,
          "The URL is hidden, since we have two windows."
        );
        ok(
          row.shadowRoot.getElementById("fxview-tab-row-date").hidden,
          "The date is hidden, since we have two windows."
        );

        info("Select a tab from the original window.");
        let winFocused = BrowserTestUtils.waitForEvent(window, "focus", true);
        originalWinRows[0].mainEl.click();
        await winFocused;

        info("Select a tab from the new window.");
        winFocused = BrowserTestUtils.waitForEvent(win, "focus", true);
        newWinRows[0].mainEl.click();
        await winFocused;
      }
    );
    await BrowserTestUtils.closeWindow(win);
  });

  add_task(async function open_tab_new_private_window() {
    const win = await BrowserTestUtils.openNewBrowserWindow({ private: true });
    await openTabs.getUpdateComplete();
    const cards = getCards();
    is(cards.length, 1, "The private window is not displayed.");
    await BrowserTestUtils.closeWindow(win);
  });

  add_task(async function styling_for_multiple_windows() {
    await openTabs.getUpdateComplete();
    ok(
      openTabs.shadowRoot.querySelector(".one-column"),
      "The container shows one column when one window is open."
    );
    const win = await BrowserTestUtils.openNewBrowserWindow();
    await openTabs.getUpdateComplete();
    ok(
      openTabs.shadowRoot.querySelector(".two-columns"),
      "The container shows two columns when two windows are open."
    );
    const otherWin = await BrowserTestUtils.openNewBrowserWindow();
    await openTabs.getUpdateComplete();
    ok(
      openTabs.shadowRoot.querySelector(".three-columns"),
      "The container shows three columns when three windows are open."
    );
    await BrowserTestUtils.closeWindow(win);
    await BrowserTestUtils.closeWindow(otherWin);
  });

  add_task(async function toggle_show_more_link() {
    const NUMBER_OF_WINDOWS = 4;
    const NUMBER_OF_TABS = 42;
    const windows = [];
    for (let i = 0; i < NUMBER_OF_WINDOWS - 1; i++) {
      windows.push(await BrowserTestUtils.openNewBrowserWindow());
    }
    await openTabs.getUpdateComplete();
    const cards = getCards();
    is(cards.length, NUMBER_OF_WINDOWS, "There are four windows.");
    const lastCard = cards[NUMBER_OF_WINDOWS - 1];
    const lastWindow = windows[NUMBER_OF_WINDOWS - 2];
    for (let i = 0; i < NUMBER_OF_TABS - 1; i++) {
      await BrowserTestUtils.openNewForegroundTab(lastWindow.gBrowser);
    }
    await openTabs.getUpdateComplete();
    ok(
      getRowsForCard(lastCard).length < NUMBER_OF_TABS,
      "Not all tabs are shown yet."
    );
    info("Toggle the Show More link.");
    lastCard.shadowRoot.querySelector("div[slot=footer]").click();
    await BrowserTestUtils.waitForMutationCondition(
      lastCard.shadowRoot,
      { childList: true, subtree: true },
      () => getRowsForCard(lastCard).length === NUMBER_OF_TABS
    );
    for (let win of windows) {
      await BrowserTestUtils.closeWindow(win);
    }
  });
</script>
</pre>
</body>
</html>
