<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>History Tests</title>
  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
  <link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
  <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
  <link rel="stylesheet" href="chrome://browser/content/firefoxview/firefoxview-next.css"/>
  <link rel="localization" href="browser/firefoxView.ftl"/>
  <script type="module" src="chrome://browser/content/firefoxview/history.mjs"></script>
  <script type="module" src="chrome://browser/content/firefoxview/overview.mjs"></script>
</head>
<body>
  <style>
  </style>
<p id="display"></p>
<div id="content">
  <view-history></view-history>
</div>
<pre id="test">
<script class="testbody" type="application/javascript">
   const { PlacesQuery } = ChromeUtils.importESModule(
    "resource://gre/modules/PlacesQuery.sys.mjs"
  );
  const { PromiseUtils } = ChromeUtils.importESModule(
    "resource://gre/modules/PromiseUtils.sys.mjs"
  );
  const { PlacesUtils } = ChromeUtils.importESModule(
    "resource://gre/modules/PlacesUtils.sys.mjs"
  );
  const { TestUtils } = ChromeUtils.import(
    "resource://testing-common/TestUtils.jsm"
  );

  const historyComponent = document.querySelector("view-history");
  const URLs = [
    "http://mochi.test:8888/browser/",
    "https://www.example.com/",
    "https://example.net/",
    "https://example.org/",
    "https://www.mozilla.org/"
  ];

  async function addHistoryItems(dateAdded) {
    await PlacesUtils.history.insert({
      url: URLs[0],
      title: "Example Domain 1",
      visits: [{ date: dateAdded }],
    });
    await PlacesUtils.history.insert({
      url: URLs[1],
      title: "Example Domain 2",
      visits: [{ date: dateAdded }],
    });
    await PlacesUtils.history.insert({
      url: URLs[2],
      title: "Example Domain 3",
      visits: [{ date: dateAdded }],
    });
    await PlacesUtils.history.insert({
      url: URLs[3],
      title: "Example Domain 4",
      visits: [{ date: dateAdded }],
    });
  }

  const DAY_MS = 24 * 60 * 60 * 1000;
  const today = new Date();
  const yesterday = new Date(Date.now() - DAY_MS);
  const twoDaysAgo = new Date(Date.now() - DAY_MS * 2);
  const threeDaysAgo = new Date(Date.now() - DAY_MS * 3);
  const fourDaysAgo = new Date(Date.now() - DAY_MS * 4);
  const oneMonthAgo = new Date(today);
  oneMonthAgo.setMonth(oneMonthAgo.getMonth() === 0 ? 11 : oneMonthAgo.getMonth() - 1);
  // Total number of cards should be 6 if today's date is at least the 5th
  let expectedNumOfCards = today.getDate() < 5 ? 6 - (5 - today.getDate()) : 6;

  add_setup(async function setup() {
    await PlacesUtils.history.clear();
    await addHistoryItems(today);
    await addHistoryItems(yesterday);
    await addHistoryItems(twoDaysAgo);
    await addHistoryItems(threeDaysAgo);
    await addHistoryItems(fourDaysAgo);
    await addHistoryItems(oneMonthAgo);
    historyComponent.enter();
    await historyComponent.getUpdateComplete();
    await TestUtils.waitForCondition(async () => {
      let history = await historyComponent.allHistoryItems;
      return history.length === 24;
    });
  });

  /**
  * Tests that history data is grouped by date or site
  */
  add_task(async function test_history_grouping() {
     // Ensure all expected cards are rendered before beginning tests
    await TestUtils.waitForCondition(() => {
      return historyComponent.cards.length === expectedNumOfCards;
    });
    let cards = historyComponent.cards;
    let actualNumOfCards = cards.length;

    is(
      expectedNumOfCards,
      actualNumOfCards,
      `Total number of cards should be ${expectedNumOfCards}`
    )

    let firstCard = cards[0];

    ok(
      firstCard.querySelector("[slot=header]").textContent.includes("Today"),
      "The first card has a header for 'Today'."
    );

    // Test number of cards when sorted by site/domain
    historyComponent.sortOption = "site";
    await historyComponent.updateHistoryData();
    await historyComponent.getUpdateComplete();

    expectedNumOfCards = 4;
    actualNumOfCards = historyComponent.shadowRoot.querySelectorAll("card-container").length;

    is(
      expectedNumOfCards,
      actualNumOfCards,
      `Total number of cards should be ${expectedNumOfCards}`
    )

    await PlacesUtils.history.clear();
  });
</script>
</pre>
</body>
</html>
