Don't add the first tab by default to the URL params in the explorer (#617)

Signed-off-by: Juan Cruz Viotti <jv@jviotti.com>

Author: jviotti

src/web/scripts/tabs.js

@@ -1,7 +1,7 @@
 const tabButtons = document.querySelectorAll("[data-sourcemeta-ui-tab-target]");
 const tabViews = document.querySelectorAll("[data-sourcemeta-ui-tab-id]");
 
-function selectTab(tab, name) {
+function selectTab(tab, name, updateURL) {
   tabButtons.forEach(element => element.classList.remove("active"));
   tab.classList.add("active");
   tabViews.forEach((panel) => {
@@ -12,25 +12,30 @@ function selectTab(tab, name) {
     }
   });
 
-  const url = new URL(window.location);
-  url.searchParams.set("tab", name);
-  window.history.replaceState({}, "", url);
+  if (updateURL) {
+    const url = new URL(window.location);
+    url.searchParams.set("tab", name);
+    window.history.replaceState({}, "", url);
+  }
 }
 
 const initialTab = new URL(window.location).searchParams.get("tab");
 if (initialTab) {
   tabButtons.forEach((element) => {
     if (element.getAttribute("data-sourcemeta-ui-tab-target") === initialTab) {
-      selectTab(element, initialTab);
+      selectTab(element, initialTab, true);
     }
   });
 } else if (tabButtons[0]) {
-  selectTab(tabButtons[0], tabButtons[0].getAttribute("data-sourcemeta-ui-tab-target"));
+  selectTab(tabButtons[0],
+    tabButtons[0].getAttribute("data-sourcemeta-ui-tab-target"),
+    // Don't update the URL for the default one to avoid some unnecessary noise
+    false);
 }
 
 tabButtons.forEach((tab) => {
   tab.addEventListener("click", () => {
     const targetId = tab.getAttribute("data-sourcemeta-ui-tab-target");
-    selectTab(tab, targetId);
+    selectTab(tab, targetId, true);
   });
 });

test/ui/schema.spec.js

@@ -0,0 +1,121 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Schema Tabs', () => {
+  test('defaults to examples tab on load without adding query parameter',
+    async ({ page }) => {
+    await page.goto('/test/schemas/string');
+
+    // The examples tab button should be active
+    const examplesTab = page.locator(
+      '[data-sourcemeta-ui-tab-target="examples"]');
+    await expect(examplesTab).toHaveClass(/active/);
+
+    // The examples panel should be visible
+    const examplesPanel = page.locator(
+      '[data-sourcemeta-ui-tab-id="examples"]');
+    await expect(examplesPanel).not.toHaveClass(/d-none/);
+
+    // Other panels should be hidden
+    const dependenciesPanel = page.locator(
+      '[data-sourcemeta-ui-tab-id="dependencies"]');
+    await expect(dependenciesPanel).toHaveClass(/d-none/);
+    const healthPanel = page.locator(
+      '[data-sourcemeta-ui-tab-id="health"]');
+    await expect(healthPanel).toHaveClass(/d-none/);
+
+    // The URL should NOT have a tab query parameter
+    expect(page.url()).not.toContain('tab=');
+  });
+
+  test('clicking a tab updates the query parameter and panel visibility',
+    async ({ page }) => {
+    await page.goto('/test/schemas/string');
+
+    // Wait for the default tab to be active
+    const examplesTab = page.locator(
+      '[data-sourcemeta-ui-tab-target="examples"]');
+    await expect(examplesTab).toHaveClass(/active/);
+
+    // Click on the dependencies tab
+    const dependenciesTab = page.locator(
+      '[data-sourcemeta-ui-tab-target="dependencies"]');
+    await dependenciesTab.click();
+
+    // Query parameter should update
+    await expect(page).toHaveURL(/tab=dependencies/);
+
+    // The dependencies tab should be active, others not
+    await expect(dependenciesTab).toHaveClass(/active/);
+    await expect(examplesTab).not.toHaveClass(/active/);
+
+    // The dependencies panel should be visible, others hidden
+    const dependenciesPanel = page.locator(
+      '[data-sourcemeta-ui-tab-id="dependencies"]');
+    await expect(dependenciesPanel).not.toHaveClass(/d-none/);
+    const examplesPanel = page.locator(
+      '[data-sourcemeta-ui-tab-id="examples"]');
+    await expect(examplesPanel).toHaveClass(/d-none/);
+
+    // Click on the health tab
+    const healthTab = page.locator(
+      '[data-sourcemeta-ui-tab-target="health"]');
+    await healthTab.click();
+
+    await expect(page).toHaveURL(/tab=health/);
+    await expect(healthTab).toHaveClass(/active/);
+    await expect(dependenciesTab).not.toHaveClass(/active/);
+    const healthPanel = page.locator(
+      '[data-sourcemeta-ui-tab-id="health"]');
+    await expect(healthPanel).not.toHaveClass(/d-none/);
+    await expect(dependenciesPanel).toHaveClass(/d-none/);
+  });
+
+  test('clicking back to the first tab also sets the query parameter',
+    async ({ page }) => {
+    await page.goto('/test/schemas/string');
+
+    const examplesTab = page.locator(
+      '[data-sourcemeta-ui-tab-target="examples"]');
+    await expect(examplesTab).toHaveClass(/active/);
+
+    // Click away from the default tab
+    const dependenciesTab = page.locator(
+      '[data-sourcemeta-ui-tab-target="dependencies"]');
+    await dependenciesTab.click();
+    await expect(page).toHaveURL(/tab=dependencies/);
+
+    // Click back to examples
+    await examplesTab.click();
+
+    // Now the query parameter should be present
+    await expect(page).toHaveURL(/tab=examples/);
+    await expect(examplesTab).toHaveClass(/active/);
+    await expect(dependenciesTab).not.toHaveClass(/active/);
+  });
+
+  test('navigating with a tab query parameter selects that tab',
+    async ({ page }) => {
+    await page.goto('/test/schemas/string?tab=health');
+
+    // The health tab should be active
+    const healthTab = page.locator(
+      '[data-sourcemeta-ui-tab-target="health"]');
+    await expect(healthTab).toHaveClass(/active/);
+
+    // The health panel should be visible
+    const healthPanel = page.locator(
+      '[data-sourcemeta-ui-tab-id="health"]');
+    await expect(healthPanel).not.toHaveClass(/d-none/);
+
+    // The URL should keep the tab parameter
+    await expect(page).toHaveURL(/tab=health/);
+
+    // Other tabs and panels should not be active/visible
+    const examplesTab = page.locator(
+      '[data-sourcemeta-ui-tab-target="examples"]');
+    await expect(examplesTab).not.toHaveClass(/active/);
+    const examplesPanel = page.locator(
+      '[data-sourcemeta-ui-tab-id="examples"]');
+    await expect(examplesPanel).toHaveClass(/d-none/);
+  });
+});