diff --git a/CHANGELOG.md b/CHANGELOG.md index ebe70ecb..beb9eb9d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,8 @@ - The modal component accepts `close_label` as another name for `close`, which is a reserved word on SQL Server. ([#1070](https://github.com/sqlpage/SQLPage/issues/1070)) +- Each item of the tracking component accepts a `link`. ([#900](https://github.com/sqlpage/SQLPage/issues/900)) + ## v0.47.0 (2026-10-15) - Redesigned the official website homepage with live SQLPage examples, an interactive database sculpture, flowing section transitions, responsive layouts, and direct links to documentation and deployment guides. - For sites that store their pages in a database, checking for page updates no longer makes other pages wait when the database is busy. In a test, another page loaded in under 1 ms instead of about 250 ms. diff --git a/examples/official-site/sqlpage/migrations/28_tracking_component.sql b/examples/official-site/sqlpage/migrations/28_tracking_component.sql index 00a97486..e873f5bf 100644 --- a/examples/official-site/sqlpage/migrations/28_tracking_component.sql +++ b/examples/official-site/sqlpage/migrations/28_tracking_component.sql @@ -78,6 +78,14 @@ VALUES ( FALSE, FALSE ), + ( + 'tracking', + 'link', + 'A URL to open when the user clicks on the tracked item.', + 'URL', + FALSE, + TRUE + ), ( 'tracking', 'center', diff --git a/sqlpage/templates/tracking.handlebars b/sqlpage/templates/tracking.handlebars index 8e1fb2d5..e0612227 100644 --- a/sqlpage/templates/tracking.handlebars +++ b/sqlpage/templates/tracking.handlebars @@ -18,7 +18,11 @@
diff --git a/tests/end-to-end/fixtures/tracking/day.sql b/tests/end-to-end/fixtures/tracking/day.sql new file mode 100644 index 00000000..feb1b9c3 --- /dev/null +++ b/tests/end-to-end/fixtures/tracking/day.sql @@ -0,0 +1 @@ +SELECT 'text' AS component, 'Details for ' || $day AS contents; diff --git a/tests/end-to-end/fixtures/tracking/index.sql b/tests/end-to-end/fixtures/tracking/index.sql new file mode 100644 index 00000000..d942d262 --- /dev/null +++ b/tests/end-to-end/fixtures/tracking/index.sql @@ -0,0 +1,3 @@ +SELECT 'tracking' AS component, 'Server uptime' AS title; +SELECT 'Monday: up' AS title, 'success' AS color, 'day.sql?day=Monday' AS link; +SELECT 'Tuesday: down' AS title, 'danger' AS color; diff --git a/tests/end-to-end/fixtures/tracking/test.ts b/tests/end-to-end/fixtures/tracking/test.ts new file mode 100644 index 00000000..af24c952 --- /dev/null +++ b/tests/end-to-end/fixtures/tracking/test.ts @@ -0,0 +1,26 @@ +import { expect, test } from "../../fixture.ts"; + +test("tracking block with a link opens it", async ({ page }) => { + await page.locator(".tracking-block").first().click(); + await expect(page).toHaveURL(/\/tracking\/day\.sql\?day=Monday$/); + await expect(page.getByText("Details for Monday")).toBeVisible(); +}); + +test("tracking block without a link is not a link", async ({ page }) => { + await expect(page.locator(".tracking-block").nth(1)).not.toHaveAttribute( + "href", + ); +}); + +test("tracking block with a link looks like one without", async ({ page }) => { + const blocks = page.locator(".tracking-block"); + const linked = await blocks.nth(0).boundingBox(); + const plain = await blocks.nth(1).boundingBox(); + expect(linked?.width).toBe(plain?.width); + expect(linked?.height).toBe(plain?.height); +}); + +test("tracking block with a link keeps its tooltip", async ({ page }) => { + await page.locator(".tracking-block").first().hover(); + await expect(page.getByRole("tooltip")).toHaveText("Monday: up"); +});