test: Added tests for the welcome page, b=no-bug, c=tests, glance, welcome

README.md

@@ -38,6 +38,10 @@ If you'd like to report a bug, please do so on our [GitHub Issues page](https://
 
 Zen is an open-source project, and we welcome contributions from the community! Please take a look at the [contribution guidelines](./docs/contribute.md) before getting started!
 
+#### Partners
+
+Thanks to all the partners of Zen for their support and contributions:
+
 <a href="https://blacksmith.sh">
   <img src="./docs/assets/blacksmith-yellow.png" width="350px"/>
 </a>

src/testing/profiles/mochitest/user-js.patch

@@ -1,8 +1,8 @@
 diff --git a/testing/profiles/mochitest/user.js b/testing/profiles/mochitest/user.js
-index a4068ac3f61161d014c49d54ae7a3bf886868f1b..6af5907abb46b6d3b871c159c73eec8373ee8ef5 100644
+index a4068ac3f61161d014c49d54ae7a3bf886868f1b..b9861cfaae19a4a71b75ccc73095dc602df22b12 100644
 --- a/testing/profiles/mochitest/user.js
 +++ b/testing/profiles/mochitest/user.js
-@@ -41,3 +41,10 @@ user_pref("places.history.floodingPrevention.enabled", false);
+@@ -41,3 +41,9 @@ user_pref("places.history.floodingPrevention.enabled", false);
  // permission, and we can open it and wait for the user to give permission, then
  // don't do that.
  user_pref("geo.prompt.open_system_prefs", false);
@@ -12,4 +12,3 @@ index a4068ac3f61161d014c49d54ae7a3bf886868f1b..6af5907abb46b6d3b871c159c73eec83
 +user_pref("zen.watermark.enabled", false);
 +user_pref("zen.urlbar.replace-newtab", false);
 +user_pref("zen.testing.enabled", true);
-+user_pref("dom.security.https_only_mode", false); // Dont ask why

src/testing/profiles/profileserver/user-js.patch

@@ -1,8 +1,8 @@
 diff --git a/testing/profiles/profileserver/user.js b/testing/profiles/profileserver/user.js
-index 19ff7d474f6d22d2d386764e2e6942ce6a324470..531446847039fd683af52ac7fdfd601bea3cb624 100644
+index 19ff7d474f6d22d2d386764e2e6942ce6a324470..75ec03c0d6a2f12986eb434f4b9b5350e1af37fd 100644
 --- a/testing/profiles/profileserver/user.js
 +++ b/testing/profiles/profileserver/user.js
-@@ -8,3 +8,13 @@
+@@ -8,3 +8,12 @@
  user_pref("dom.timeout.enable_budget_timer_throttling", false);
  // Turn off update
  user_pref("app.update.disabledForTesting", true);
@@ -15,4 +15,3 @@ index 19ff7d474f6d22d2d386764e2e6942ce6a324470..531446847039fd683af52ac7fdfd601b
 +user_pref("zen.urlbar.replace-newtab", false);
 +user_pref("zen.testing.enabled", true);
 +user_pref("zen.testing.profiling.enabled", true);
-+user_pref("dom.security.https_only_mode", false); // Dont ask why

src/zen/tests/glance/browser_glance_next_tab.js

@@ -4,12 +4,10 @@
 'use strict';
 
 add_task(async function test_Glance_Next_Tab() {
-  const selectedTab = gBrowser.selectedTab;
+  const tabToCheck = gBrowser.selectedTab;
   await BrowserTestUtils.openNewForegroundTab(window.gBrowser, 'https://example.com/', true, {
     skipAnimation: true,
   });
-  const tabToCheck = gBrowser.selectedTab;
-  gBrowser.selectedTab = selectedTab;
   await openGlanceOnTab(async (glanceTab) => {
     gBrowser.tabContainer.advanceSelectedTab(1);
     const nextTab = gBrowser.selectedTab;

src/zen/tests/glance/head.js

@@ -1,7 +1,6 @@
-/* Any copyright is dedicated to the Public Domain.
+/* This Source Code Form is subject to the terms of the Mozilla Public
-   https://creativecommons.org/publicdomain/zero/1.0/ */
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
-
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-'use strict';
 
 function openGlanceOnTab(callback, close = true) {
   return new Promise(async (resolve) => {

src/zen/tests/moz.build

@@ -8,5 +8,6 @@ BROWSER_CHROME_MANIFESTS += [
     "glance/browser.toml",
     "pinned/browser.toml",
     "urlbar/browser.toml",
+    "welcome/browser.toml",
     "workspaces/browser.toml",
 ]

src/zen/tests/welcome/browser.toml

@@ -0,0 +1,7 @@
+[DEFAULT]
+prefs = ["zen.welcome-screen.seen=false"]
+support-files = [
+  "head.js",
+]
+
+["browser_welcome.js"]

src/zen/tests/welcome/browser_welcome.js

@@ -0,0 +1,154 @@
+/* Any copyright is dedicated to the Public Domain.
+   https://creativecommons.org/publicdomain/zero/1.0/ */
+
+'use strict';
+
+add_task(async function test_Welcome_Steps() {
+  const selectedTab = gBrowser.selectedTab;
+  await new Promise((resolve) => {
+    setTimeout(async () => {
+      await waitForFocus();
+      await EventUtils.synthesizeMouseAtCenter(
+        document.getElementById('zen-welcome-start-button'),
+        {}
+      );
+      setTimeout(() => {
+        resolve();
+      }, 4000); // Wait for the transition to complete
+    }, 2000); // Give tons of time for the welcome start button to be clicked
+  });
+  ok(true, 'Welcome start button clicked successfully');
+
+  const welcomeContent = document.getElementById('zen-welcome-page-content');
+
+  for (const button of document.querySelectorAll('#zen-welcome-page-sidebar-buttons button')) {
+    ok(
+      getComputedStyle(button).pointerEvents !== 'none',
+      `Button with l10n-id "${button.getAttribute('data-l10n-id')}" should be clickable`
+    );
+  }
+
+  await goNextWelcomePage('zen-welcome-skip-button');
+  ok(true, 'Welcome Import Step Test Finished');
+
+  Assert.greater(
+    welcomeContent.children.length,
+    0,
+    'Welcome page content should have children after clicking next action'
+  );
+
+  for (const child of welcomeContent.children) {
+    console.log(child);
+    ok(
+      child.querySelector('img').getAttribute('src').includes('blob:'),
+      'Welcome page content should have an image with a base64 data URL'
+    );
+  }
+
+  await EventUtils.synthesizeMouseAtCenter(welcomeContent.children[1], {});
+
+  await new Promise((resolve) => {
+    setTimeout(async () => {
+      let engineName = await Services.search.getDefault();
+      const selectedLabel = welcomeContent.children[1];
+      ok(selectedLabel.querySelector('input').checked, 'The selected label should be checked');
+      Assert.equal(
+        engineName.name,
+        selectedLabel.querySelector('label').textContent.trim(),
+        'The default search engine should match the selected label'
+      );
+      resolve();
+    }, 100); // Wait for the transition to complete
+  });
+
+  await goNextWelcomePage('zen-welcome-next-action');
+  ok(true, 'Welcome Search Step Test Finished');
+
+  await new Promise((resolve) => {
+    setTimeout(async () => {
+      const essentials = welcomeContent.querySelector(
+        '#zen-welcome-initial-essentials-browser-sidebar-essentials'
+      ).children;
+      Assert.greater(
+        essentials.length,
+        3,
+        'Welcome page content should have more than 3 essentials after clicking next action'
+      );
+      await EventUtils.synthesizeMouseAtCenter(essentials[0], {});
+      await EventUtils.synthesizeMouseAtCenter(essentials[1], {});
+      await EventUtils.synthesizeMouseAtCenter(essentials[2], {});
+
+      ok(
+        essentials[0].hasAttribute('visuallyselected'),
+        'The first essential should be visually selected'
+      );
+      ok(
+        !essentials[1].hasAttribute('visuallyselected'),
+        'The second essential should be visually selected'
+      );
+      ok(
+        essentials[2].hasAttribute('visuallyselected'),
+        'The third essential should be visually selected'
+      );
+      const urlsToCheck = [
+        essentials[0].getAttribute('data-url'),
+        essentials[2].getAttribute('data-url'),
+      ];
+      for (const url of urlsToCheck) {
+        ok(url.startsWith('https://'), `The URL "${url}" should start with "https://"`);
+      }
+
+      await goNextWelcomePage('zen-welcome-next-action');
+
+      await new Promise((resolve) => {
+        setTimeout(async () => {
+          for (const url of urlsToCheck) {
+            ok(
+              await PlacesUtils.history.hasVisits(url),
+              `The URL "${url}" should have visits in history`
+            );
+          }
+          resolve();
+        }, 1000); // Wait for the transition to complete
+      });
+      resolve();
+    }, 1000); // Wait for the transition to complete
+  });
+
+  await goNextWelcomePage('zen-welcome-next-action');
+  ok(true, 'Welcome Theme Step Test Finished');
+
+  await goNextWelcomePage('zen-welcome-start-browsing');
+  ok(true, 'Welcome Finish Step Test Finished');
+
+  await new Promise((resolve) => {
+    setTimeout(async () => {
+      Assert.greater(
+        gBrowser._numZenEssentials,
+        2,
+        'There should be more than 2 Zen Essentials after the welcome process'
+      );
+      Assert.equal(
+        gBrowser.tabs.filter((tab) => tab.pinned && !tab.hasAttribute('zen-essential')).length,
+        2,
+        'There should be 2 pinned tabs after the welcome process'
+      );
+
+      gBrowser.selectedTab = selectedTab;
+      for (const tab of gBrowser.tabs) {
+        if (tab.pinned) {
+          if (!tab.hasAttribute('zen-essential')) {
+            ok(
+              tab.hasAttribute('zen-workspace-id'),
+              'Pinned tabs should have a zen-workspace-id attribute'
+            );
+          }
+          ok(tab.hasAttribute('zen-pin-id'), 'Pinned tabs should have a zen-pin-id attribute');
+          await BrowserTestUtils.removeTab(tab);
+        }
+      }
+      resolve();
+    }, 8000); // Wait for the transition to complete
+  });
+  ok(true, 'Welcome process completed successfully');
+});

src/zen/tests/welcome/head.js

@@ -0,0 +1,24 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+async function goNextWelcomePage(l10nId) {
+  await new Promise(async (resolve) => {
+    const button = document.querySelector(
+      `#zen-welcome-page-sidebar-buttons button[data-l10n-id="${l10nId}"]`
+    );
+    if (!button) {
+      throw new Error(`Button with l10n-id "${l10nId}" not found`);
+    }
+    await EventUtils.synthesizeMouseAtCenter(button, {});
+    setTimeout(() => {
+      setTimeout(() => {
+        resolve();
+      }, 0);
+    }, 3000); // Wait for the transition to complete
+  });
+}
+
+async function waitForFocus(...args) {
+  await new Promise((resolve) => SimpleTest.waitForFocus(resolve, ...args));
+}

src/zen/welcome/ZenWelcome.mjs

@@ -161,6 +161,7 @@
     async fadeInButtons(page) {
       const buttons = document.getElementById('zen-welcome-page-sidebar-buttons');
       let i = 0;
+      const insertedButtons = [];
       for (const button of page.buttons) {
         const buttonElement = document.createXULElement('button');
         document.l10n.setAttributes(buttonElement, button.l10n);
@@ -174,6 +175,8 @@
             this.next();
           }
         });
+        buttonElement.style.pointerEvents = 'none'; // Disable pointer events until animation is done
+        insertedButtons.push(buttonElement);
         buttons.appendChild(buttonElement);
       }
       await animate(
@@ -185,6 +188,9 @@
           bounce: 0.2,
         }
       );
+      for (const button of insertedButtons) {
+        button.style.pointerEvents = ''; // Enable pointer events after animation
+      }
     }
 
     async fadeInContent() {
@@ -723,17 +729,6 @@
       }
     );
     const button = document.getElementById('zen-welcome-start-button');
-    await animate(
-      button,
-      { opacity: [0, 1], y: [20, 0], filter: ['blur(2px)', 'blur(0px)'] },
-      {
-        delay: 0.1,
-        type: 'spring',
-        stiffness: 300,
-        damping: 20,
-        mass: 1.8,
-      }
-    );
     button.addEventListener('click', async () => {
       await animate(
         '#zen-welcome-title span, #zen-welcome-start-button',
@@ -747,6 +742,17 @@
       );
       new ZenWelcomePages(getWelcomePages());
     });
+    await animate(
+      button,
+      { opacity: [0, 1], y: [20, 0], filter: ['blur(2px)', 'blur(0px)'] },
+      {
+        delay: 0.1,
+        type: 'spring',
+        stiffness: 300,
+        damping: 20,
+        mass: 1.8,
+      }
+    );
   }
 
   function centerWindowOnScreen() {