1 files changed, 76 insertions, 0 deletions
diff --git a/browser/components/newtab/test/browser/browser_newtab_header.js b/browser/components/newtab/test/browser/browser_newtab_header.js
new file mode 100644
index 0000000000..adfecbe71f
--- /dev/null
+++ b/browser/components/newtab/test/browser/browser_newtab_header.js
@@ -0,0 +1,76 @@
+"use strict";
+
+// Tests that:
+// 1. Top sites header is hidden and the topsites section is not collapsed on load.
+// 2. Pocket header and section are visible and not collapsed on load.
+// 3. Recent activity section and header are visible and not collapsed on load.
+test_newtab({
+  test: async function test_render_customizeMenu() {
+    // Top sites section
+    await ContentTaskUtils.waitForCondition(
+      () => content.document.querySelector(".top-sites"),
+      "Wait for the top sites section to load"
+    );
+
+    let topSitesSection = content.document.querySelector(".top-sites");
+    let titleContainer = topSitesSection.querySelector(
+      ".section-title-container"
+    );
+    ok(
+      titleContainer && titleContainer.style.visibility === "hidden",
+      "Top sites header should  not be visible"
+    );
+
+    let isTopSitesCollapsed = topSitesSection.className.includes("collapsed");
+    ok(!isTopSitesCollapsed, "Top sites should not be collapsed on load");
+
+    // Pocket section
+    await ContentTaskUtils.waitForCondition(
+      () =>
+        content.document.querySelector("section[data-section-id='topstories']"),
+      "Wait for the pocket section to load"
+    );
+
+    let pocketSection = content.document.querySelector(
+      "section[data-section-id='topstories']"
+    );
+    let isPocketSectionCollapsed =
+      pocketSection.className.includes("collapsed");
+    ok(
+      !isPocketSectionCollapsed,
+      "Pocket section should not be collapsed on load"
+    );
+
+    let pocketHeader = content.document.querySelector(
+      "section[data-section-id='topstories'] .section-title"
+    );
+    ok(
+      pocketHeader && !pocketHeader.style.visibility,
+      "Pocket header should be visible"
+    );
+
+    // Highlights (Recent activity) section.
+    await ContentTaskUtils.waitForCondition(
+      () =>
+        content.document.querySelector("section[data-section-id='highlights']"),
+      "Wait for the highlights section to load"
+    );
+    let highlightsSection = content.document.querySelector(
+      "section[data-section-id='topstories']"
+    );
+    let isHighlightsSectionCollapsed =
+      highlightsSection.className.includes("collapsed");
+    ok(
+      !isHighlightsSectionCollapsed,
+      "Highlights section should not be collapsed on load"
+    );
+
+    let highlightsHeader = content.document.querySelector(
+      "section[data-section-id='highlights'] .section-title"
+    );
+    ok(
+      highlightsHeader && !highlightsHeader.style.visibility,
+      "Highlights header should be visible"
+    );
+  },
+});