test: fix expect assertPage util

Author: Varixo

starters/e2e/qwikrouter/util.ts

@@ -6,21 +6,26 @@ export async function assertPage(ctx: TestContext, test: AssertPage) {
   const page = getPage(ctx);
   const pageUrl = new URL(page.url());
   const html = page.locator("html");
-
-  expect(await html.getAttribute("q:version")).toBeDefined();
-  expect(await html.getAttribute("q:base")).toBeDefined();
-  expect(await html.getAttribute("q:id")).toBeDefined();
-
   const head = html.locator("head");
-  expect(await head.getAttribute("q:id")).toBeDefined();
 
   if (test.pathname) {
-    expect(pageUrl.pathname).toBe(test.pathname);
+    await expect(html).toHaveAttribute("q:version");
+    await expect(html).toHaveAttribute("q:base");
+
+    // Build expected URL with or without search params
+    let expectedHref = pageUrl.origin + test.pathname;
+    if (test.searchParams && test.searchParams !== "empty") {
+      const searchParams = new URLSearchParams();
+      for (const [key, value] of Object.entries(test.searchParams)) {
+        searchParams.append(key, value);
+      }
+      expectedHref += "?" + searchParams.toString();
+    }
+
+    await expect(page).toHaveURL(expectedHref);
 
     const canonical = head.locator('link[rel="canonical"]');
-    const href = await canonical.getAttribute("href");
-    const canonicalUrl = new URL(href!);
-    expect(canonicalUrl.pathname).toBe(test.pathname);
+    await expect(canonical).toHaveAttribute("href", expectedHref);
   }
 
   if (test.searchParams) {
@@ -35,52 +40,58 @@ export async function assertPage(ctx: TestContext, test: AssertPage) {
 
   if (test.title) {
     const title = head.locator("title");
-    expect(await title.innerText()).toBe(test.title);
+    await expect(title).toHaveText(test.title, {
+      useInnerText: true,
+    });
   }
 
   let parentLocator = page.locator("body");
   if (test.layoutHierarchy) {
     for (const layoutName of test.layoutHierarchy) {
       const selector = `[data-test-layout="${layoutName}"]`;
       parentLocator = parentLocator.locator(selector);
-      expect(
-        await parentLocator.isVisible(),
+      await expect(
+        parentLocator,
         `Incorrect layout hierarchy, did not find "${selector}", pathname: ${pageUrl.pathname}`,
-      ).toBe(true);
+      ).toBeVisible();
     }
 
     const noFindChildLayout = parentLocator.locator(`[data-test-layout]`);
     if (await noFindChildLayout.isVisible()) {
       const layoutName =
         await noFindChildLayout.getAttribute("data-test-layout")!;
-      expect(
-        layoutName,
+
+      await expect(
+        noFindChildLayout,
         `Should not be another nested layout, but found [data-test-layout="${layoutName}"], pathname: ${pageUrl.pathname}`,
-      ).toBe(null);
+      ).not.toHaveAttribute("data-test-layout");
     }
   }
 
   if (test.h1) {
     const h1 = parentLocator.locator("h1");
-    expect(await h1.innerText()).toBe(test.h1);
+    await expect(h1).toHaveText(test.h1, {
+      useInnerText: true,
+    });
   }
 
   const activeLink = locator(
     ctx,
     `header [data-test-header-links] a[class="active"]`,
   );
   if (typeof test.activeHeaderLink === "string") {
-    if (await activeLink.isVisible()) {
-      expect(await activeLink.innerText()).toBe(test.activeHeaderLink);
-    } else {
-      expect(true, `Header link "${test.activeHeaderLink}" not active`).toBe(
-        false,
-      );
-    }
+    await expect(
+      activeLink,
+      `Header link "${test.activeHeaderLink}" not active`,
+    ).toBeVisible();
+    await expect(activeLink).toHaveText(test.activeHeaderLink, {
+      useInnerText: true,
+    });
   } else if (test.activeHeaderLink === false) {
-    if (await activeLink.isVisible()) {
-      expect(true, `There should not be an active header link`).toBe(false);
-    }
+    await expect(
+      activeLink,
+      `There should not be an active header link`,
+    ).not.toBeVisible();
   }
 }
 
@@ -101,9 +112,7 @@ export async function linkNavigate(
   const page = getPage(ctx);
   const link = page.locator(linkSelector);
 
-  if (!(await link.isVisible())) {
-    expect(true, `Link selector ${linkSelector} not found`).toBe(false);
-  }
+  await expect(link, `Link selector ${linkSelector} not found`).toBeVisible();
 
   const href = (await link.getAttribute("href"))!;
   console.log(`   nav>    ${href}`);