test: increase coverage with other listing types

Author: mcanouil

tests/docs/playwright/listings/external-links/grid.qmd

@@ -0,0 +1,16 @@
+---
+title: "External Links Test - Grid"
+listing:
+  id: grid-listing
+  contents:
+    - path: https://example.com/external-article
+      title: "External Article"
+      description: "An external article that should open in new window."
+    - path: local-post.qmd
+      title: "Local Post"
+      description: "A local post that should NOT open in new window."
+  type: grid
+---
+
+::: {#grid-listing}
+:::

tests/docs/playwright/listings/external-links/table.qmd

@@ -0,0 +1,17 @@
+---
+title: "External Links Test - Table"
+listing:
+  id: table-listing
+  contents:
+    - path: https://example.com/external-article
+      title: "External Article"
+      description: "An external article that should open in new window."
+    - path: local-post.qmd
+      title: "Local Post"
+      description: "A local post that should NOT open in new window."
+  type: table
+  fields: [title, description]
+---
+
+::: {#table-listing}
+:::

tests/integration/playwright/tests/html-listing-external-links.spec.ts

@@ -1,43 +1,77 @@
 import { test, expect } from "@playwright/test";
 
-test.describe("External links in default listing", () => {
-  test("External listing item has target=_blank attribute", async ({ page }) => {
-    await page.goto("./listings/external-links/_site/index.html");
+const listingTypes = [
+  {
+    name: "default",
+    page: "index.html",
+    containerSelector: ".quarto-listing-default",
+    externalLinkSelector:
+      '.quarto-listing-default a[href="https://example.com/external-article"]',
+  },
+  {
+    name: "grid",
+    page: "grid.html",
+    containerSelector: ".quarto-listing-container-grid",
+    externalLinkSelector:
+      '.quarto-listing-container-grid a[href="https://example.com/external-article"]',
+  },
+  {
+    name: "table",
+    page: "table.html",
+    containerSelector: ".quarto-listing-table",
+    externalLinkSelector:
+      '.quarto-listing-table a[href="https://example.com/external-article"]',
+  },
+];
 
-    // Find the link to the external article in the default listing
-    const externalLink = page.locator(
-      '.quarto-listing-default a[href="https://example.com/external-article"]'
-    );
+listingTypes.forEach(({ name, page, containerSelector, externalLinkSelector }) => {
+  test.describe(`External links in ${name} listing`, () => {
+    test("External listing item has target=_blank attribute", async ({
+      page: browserPage,
+    }) => {
+      await browserPage.goto(`./listings/external-links/_site/${page}`);
 
-    await expect(externalLink.first()).toHaveAttribute("target", "_blank");
-  });
+      // Wait for the listing to be visible
+      await browserPage.waitForSelector(containerSelector);
 
-  test("External listing item has rel=noopener attribute", async ({ page }) => {
-    await page.goto("./listings/external-links/_site/index.html");
+      // Find the link to the external article
+      const externalLink = browserPage.locator(externalLinkSelector);
 
-    // Find the link to the external article in the default listing
-    const externalLink = page.locator(
-      '.quarto-listing-default a[href="https://example.com/external-article"]'
-    );
+      await expect(externalLink.first()).toHaveAttribute("target", "_blank");
+    });
 
-    await expect(externalLink.first()).toHaveAttribute("rel", "noopener");
-  });
+    test("External listing item has rel=noopener attribute", async ({
+      page: browserPage,
+    }) => {
+      await browserPage.goto(`./listings/external-links/_site/${page}`);
+
+      // Wait for the listing to be visible
+      await browserPage.waitForSelector(containerSelector);
+
+      // Find the link to the external article
+      const externalLink = browserPage.locator(externalLinkSelector);
+
+      await expect(externalLink.first()).toHaveAttribute("rel", "noopener");
+    });
 
-  test("Internal listing item does NOT have target=_blank attribute", async ({
-    page,
-  }) => {
-    await page.goto("./listings/external-links/_site/index.html");
+    test("Internal listing item does NOT have target=_blank attribute", async ({
+      page: browserPage,
+    }) => {
+      await browserPage.goto(`./listings/external-links/_site/${page}`);
 
-    // Wait for the listing to be visible
-    await page.waitForSelector(".quarto-listing-default");
+      // Wait for the listing to be visible
+      await browserPage.waitForSelector(containerSelector);
 
-    // Find the link to the local post by its text content
-    const internalLink = page.getByRole("link", { name: "Local Post" }).first();
+      // Find the link to the local post by its text content
+      const internalLink = browserPage
+        .getByRole("link", { name: "Local Post" })
+        .first();
 
-    // Verify the link exists
-    await expect(internalLink).toBeVisible();
+      // Verify the link exists
+      await expect(internalLink).toBeVisible();
 
-    // Internal links should not have target="_blank"
-    await expect(internalLink).not.toHaveAttribute("target", "_blank");
+      // Internal links should not have target="_blank"
+      await expect(internalLink).not.toHaveAttribute("target", "_blank");
+    });
   });
 });