test new modal component + changelog

Author: lovasoa

CHANGELOG.md

@@ -9,6 +9,7 @@
    ❯ ./sqlpage create-migration my_new_table
     Migration file created: sqlpage/migrations/20250627095944_my_new_table.sql
    ```  
+ - New [modal](https://sql-page.com/component.sql?component=modal) component
 
 ## v0.35.2
  - Fix a bug with zero values being displayed with a non-zero height in stacked bar charts.

examples/official-site/sqlpage/migrations/63_modal.sql

@@ -26,7 +26,7 @@ INSERT INTO example(component, description, properties) VALUES
         {"component": "modal","id": "my_modal","title": "A modal box","close": "Close"},
         {"contents":"I''m a modal window, and I allow you to display additional information or help for the user."},
         {"component": "button"},
-        {"title":"Open","modal":"my_modal"}
+        {"title":"Open a simple modal","modal":"my_modal"}
         ]')
     ),
     ('modal',
@@ -40,7 +40,7 @@ INSERT INTO example(component, description, properties) VALUES
             "embed":"/examples/form.sql?_sqlpage_embed"
         },
         {"component": "button"},
-        {"title":"Open","modal":"my_embed_form_modal"}
+        {"title":"Open a modal with a form","modal":"my_embed_form_modal"}
         ]')
     ),
     ('modal',
@@ -54,7 +54,7 @@ INSERT INTO example(component, description, properties) VALUES
             "embed":"/examples/chart.sql?_sqlpage_embed"
         },
         {"component": "button"},
-        {"title":"Open","modal":"my_embed_chart_modal"}
+        {"title":"Open a modal with a chart","modal":"my_embed_chart_modal"}
         ]')
     ),
     ('modal',
@@ -71,7 +71,7 @@ INSERT INTO example(component, description, properties) VALUES
             "height":"350"
         },
         {"component": "button"},
-        {"title":"Open","modal":"my_embed_video_modal"}
+        {"title":"Open a modal with a video","modal":"my_embed_video_modal"}
         ]')
     );
 

tests/end-to-end/official-site.spec.ts

@@ -194,3 +194,22 @@ test("form component documentation", async ({ page }) => {
     page.getByRole("heading", { name: /chart/i, level: 1 }),
   ).toBeVisible();
 });
+
+test("modal", async ({ page }) => {
+  await page.goto(`${BASE}/documentation.sql?component=modal#component`);
+  // get the button that opens the modal
+  const openButton = page.getByRole("button", { name: "Open a simple modal" });
+  await openButton.click();
+
+  const modal = page.getByRole("dialog", { label: "A modal box" });
+  await expect(modal).toBeVisible();
+
+  // close the modal
+  await page.keyboard.press("Escape");
+  await expect(modal).not.toBeVisible();
+
+  await openButton.click();
+  await expect(modal).toBeVisible();
+  await modal.getByRole("button", { label: "Close" }).first().click();
+  await expect(modal).not.toBeVisible();
+});

tests/end-to-end/package-lock.json

@@ -4,7 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "playwright test"
+    "test": "playwright test --reporter=line",
+    "gui": "playwright test --ui"
   },
   "keywords": [],
   "author": "",