@nospt/plugin-dev-ai-hub 0.1.0 → 0.2.0

package/tests/e2e/asset-installation.spec.ts

@@ -0,0 +1,74 @@
+import { test, expect } from './fixtures/base';
+import { DEV_ASSETS } from './fixtures/mock-api';
+
+const PAGE_URL = '/dev-ai-hub';
+
+// First mock asset: TypeScript Best Practices (claude-code + github-copilot)
+const ASSET = DEV_ASSETS[0];
+
+test.describe('Asset Install Dialog', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(PAGE_URL);
+    await expect(page.getByText(ASSET.name)).toBeVisible();
+    await page.getByRole('button', { name: 'Install in editor' }).first().click();
+  });
+
+  test('sets installId query param in the URL', async ({ page }) => {
+    await expect(page).toHaveURL(/installId=/);
+  });
+
+  test('dialog header shows "Install: <asset-name>"', async ({ page }) => {
+    // AssetInstallDialog renders "Install: {asset.name}" in DialogHeader
+    await expect(page.getByText(`Install: ${ASSET.name}`)).toBeVisible();
+  });
+
+  test('subtitle explains the workflow', async ({ page }) => {
+    await expect(
+      page.getByText('Copy the content and place the file at the path shown for your tool.'),
+    ).toBeVisible();
+  });
+
+  test('shows a section for each compatible tool', async ({ page }) => {
+    // ASSET.tools = ['claude-code', 'github-copilot'] — scope to dialog to avoid filter button ambiguity
+    const dialog = page.getByRole('dialog');
+    await expect(dialog.getByText('Claude Code', { exact: true })).toBeVisible();
+    await expect(dialog.getByText('GitHub Copilot', { exact: true })).toBeVisible();
+  });
+
+  test('each tool section shows an "Install path" label', async ({ page }) => {
+    const labels = page.getByText('Install path');
+    await expect(labels.first()).toBeVisible();
+  });
+
+  test('"Copy Content" button is present', async ({ page }) => {
+    await expect(page.getByRole('button', { name: 'Copy Content' }).first()).toBeVisible();
+  });
+
+  test('"Download" button is present', async ({ page }) => {
+    await expect(page.getByRole('button', { name: 'Download' }).first()).toBeVisible();
+  });
+
+  test('"Copy Content" button label changes to "Copied!" after click', async ({ page }) => {
+    await page.getByRole('button', { name: 'Copy Content' }).first().click();
+    await expect(page.getByRole('button', { name: 'Copied!' }).first()).toBeVisible();
+  });
+
+  test('"Close" button dismisses the dialog and clears installId', async ({ page }) => {
+    // Dialog has an X icon button (aria-label="Close") and a footer "Close" text button — use last()
+    await page.getByRole('button', { name: 'Close' }).last().click();
+    await expect(page).not.toHaveURL(/installId=/);
+  });
+
+  // ── Skill asset (tools: all) — verify universal install paths appear ──────
+
+  test('skill asset (tools: all) shows install path for Claude Code', async ({ page }) => {
+    // Close this dialog and open Git Commit (skill, tools: ['all'])
+    await page.getByRole('button', { name: 'Close' }).last().click();
+
+    // Git Commit is the 3rd card (index 2) in the mock data order
+    await page.getByRole('button', { name: 'Install in editor' }).nth(2).click();
+
+    await expect(page.getByText('Install: Git Commit')).toBeVisible();
+    await expect(page.getByRole('dialog').getByText('Claude Code', { exact: true })).toBeVisible();
+  });
+});

package/tests/e2e/dev-ai-hub-page.spec.ts

@@ -0,0 +1,89 @@
+import { test, expect } from './fixtures/base';
+import { DEV_ASSETS, DEV_STATS } from './fixtures/mock-api';
+
+const PAGE_URL = '/dev-ai-hub';
+
+test.describe('Dev AI Hub — main page', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(PAGE_URL);
+    // Wait for the asset grid to finish loading
+    await expect(page.getByText(DEV_ASSETS[0].name)).toBeVisible();
+  });
+
+  test('renders the four stats cards', async ({ page }) => {
+    for (const label of ['Instructions', 'Agents', 'Skills', 'Workflows']) {
+      await expect(page.getByText(label).first()).toBeVisible();
+    }
+  });
+
+  test('stats cards display correct counts from mock data', async ({ page }) => {
+    // The mock has 2 instructions, 2 agents, 1 skill, 1 workflow
+    const byType = DEV_STATS.byType;
+    await expect(page.getByText(String(byType.instruction)).first()).toBeVisible();
+    await expect(page.getByText(String(byType.agent)).first()).toBeVisible();
+    await expect(page.getByText(String(byType.skill)).first()).toBeVisible();
+    await expect(page.getByText(String(byType.workflow)).first()).toBeVisible();
+  });
+
+  test('clicking a stats card filters assets by type', async ({ page }) => {
+    // Stats cards are plain div[role="button"] (not ToggleButton); they come first in DOM order
+    await page.getByRole('button', { name: /Skills/i }).first().click();
+    await expect(page.getByText('1 asset found')).toBeVisible();
+    await expect(page.getByText('Git Commit', { exact: true })).toBeVisible();
+  });
+
+  test('clicking an active stats card removes the type filter', async ({ page }) => {
+    await page.getByRole('button', { name: /Skills/i }).first().click();
+    await expect(page.getByText('1 asset found')).toBeVisible();
+
+    // Click it again to deselect
+    await page.getByRole('button', { name: /Skills/i }).first().click();
+    await expect(page.getByText(`${DEV_STATS.total} assets found`)).toBeVisible();
+  });
+
+  test('renders all mock assets', async ({ page }) => {
+    for (const asset of DEV_ASSETS) {
+      await expect(page.getByText(asset.name, { exact: true })).toBeVisible();
+    }
+  });
+
+  test('cards display type labels', async ({ page }) => {
+    await expect(page.getByText('Instruction').first()).toBeVisible();
+    await expect(page.getByText('Agent').first()).toBeVisible();
+    await expect(page.getByText('Skill').first()).toBeVisible();
+    await expect(page.getByText('Workflow').first()).toBeVisible();
+  });
+
+  test('popular assets (≥5 installs) show 🔥 icon', async ({ page }) => {
+    // TypeScript Best Practices (14), Code Review Agent (8), Git Commit (22), Feature Development Workflow (5) are popular
+    const fireEmojis = page.getByText('🔥');
+    await expect(fireEmojis.first()).toBeVisible();
+  });
+
+  test('assets with 0 installs do not show an install count', async ({ page }) => {
+    // Product Manager has installCount: 0 — the count row is entirely omitted
+    const card = page.locator('text=Product Manager').locator('..');
+    await expect(card).not.toContainText('0');
+  });
+
+  test('"View details" button updates the URL with assetId', async ({ page }) => {
+    await page.getByRole('button', { name: 'View details' }).first().click();
+    await expect(page).toHaveURL(/assetId=/);
+  });
+
+  test('"Install in editor" button updates the URL with installId', async ({ page }) => {
+    await page.getByRole('button', { name: 'Install in editor' }).first().click();
+    await expect(page).toHaveURL(/installId=/);
+  });
+
+  test('shows empty state when no assets match the search', async ({ page }) => {
+    await page.getByRole('searchbox', { name: 'Search assets' }).fill('zzznoresultszzz');
+    await expect(page.getByText('No assets found')).toBeVisible();
+    await expect(page.getByText('Try adjusting your filters or search terms.')).toBeVisible();
+  });
+
+  test('pagination is hidden when all assets fit one page (PAGE_SIZE=24)', async ({ page }) => {
+    // 6 mock assets vs PAGE_SIZE=24 — TablePagination is not rendered
+    await expect(page.getByRole('button', { name: /next/i })).not.toBeVisible();
+  });
+});

package/tests/e2e/fixtures/base.ts

@@ -0,0 +1,61 @@
+/**
+ * Pre-seed Backstage's guest-auth localStorage keys so every page load
+ * auto-signs in as Guest (legacy token path) without a running auth backend.
+ *
+ * Keys come from @backstage/core-components SignInPage/providers internals:
+ *   PROVIDER_STORAGE_KEY  → '@backstage/core:SignInPage:provider'
+ *   enableLegacyGuestToken (guestProvider.tsx)
+ *
+ * API calls to the backend are intercepted via page.route() and served with
+ * the canonical mock data from mock-api.ts, keeping tests predictable and
+ * independent of a running backend.
+ */
+import { test as base, expect } from '@playwright/test';
+import {
+  MOCK_ASSETS_FULL,
+  MOCK_PROVIDER,
+  MOCK_STATS,
+  buildListResponse,
+} from './mock-api';
+
+export const test = base.extend<object>({
+  page: async ({ page }, use) => {
+    await page.addInitScript(() => {
+      localStorage.setItem('@backstage/core:SignInPage:provider', 'guest');
+      localStorage.setItem('enableLegacyGuestToken', 'true');
+      // Mock clipboard so Copy buttons work without browser permissions
+      Object.defineProperty(navigator, 'clipboard', {
+        value: { writeText: async () => {} },
+        configurable: true,
+      });
+    });
+
+    await page.route('**/api/dev-ai-hub/**', async route => {
+      const url = new URL(route.request().url());
+      const path = url.pathname.replace(/^.*\/api\/dev-ai-hub/, '');
+      const method = route.request().method();
+
+      if (method === 'GET' && path === '/assets') {
+        await route.fulfill({ json: buildListResponse(url.searchParams) });
+      } else if (method === 'GET' && /^\/assets\/[^/]+$/.test(path)) {
+        const id = decodeURIComponent(path.split('/')[2]);
+        const asset = MOCK_ASSETS_FULL.find(a => a.id === id);
+        if (asset) await route.fulfill({ json: asset });
+        else await route.fulfill({ status: 404, json: { error: 'Not found' } });
+      } else if (method === 'GET' && path === '/stats') {
+        await route.fulfill({ json: MOCK_STATS });
+      } else if (method === 'GET' && path === '/providers') {
+        await route.fulfill({ json: [MOCK_PROVIDER] });
+      } else if (method === 'POST' && path.endsWith('/track-install')) {
+        await route.fulfill({ status: 204, body: '' });
+      } else {
+        await route.continue();
+      }
+    });
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    await use(page);
+  },
+});
+
+export { expect };

package/tests/e2e/fixtures/mock-api.ts

@@ -0,0 +1,221 @@
+/**
+ * Canonical mock data for e2e tests.
+ *
+ * DEV_ASSETS / DEV_STATS are used directly in test assertions.
+ * MOCK_ASSETS_FULL / buildListResponse / MOCK_PROVIDER / MOCK_STATS are used
+ * by the base fixture to intercept real API calls with predictable responses.
+ */
+import type {
+  AiAsset,
+  AiAssetListResponse,
+  AiHubProvider,
+  AiHubStats,
+} from '@nospt/plugin-dev-ai-hub-common';
+
+// ── Summary data used in test assertions ──────────────────────────────────────
+
+export const DEV_ASSETS = [
+  { id: 'mock-1', name: 'TypeScript Best Practices', type: 'instruction', installCount: 14, tools: ['claude-code', 'github-copilot'] },
+  { id: 'mock-2', name: 'Code Review Agent',         type: 'agent',       installCount: 8,  tools: ['claude-code'] },
+  { id: 'mock-3', name: 'Git Commit',                type: 'skill',       installCount: 22, tools: ['all'] },
+  { id: 'mock-4', name: 'Feature Development Workflow', type: 'workflow',  installCount: 5,  tools: ['github-copilot', 'cursor'] },
+  { id: 'mock-5', name: 'Security Guidelines',       type: 'instruction', installCount: 3,  tools: ['google-gemini', 'claude-code'] },
+  { id: 'mock-6', name: 'Product Manager',           type: 'agent',       installCount: 0,  tools: ['github-copilot'] },
+] as const;
+
+export const DEV_STATS = {
+  total: DEV_ASSETS.length,
+  byType: { instruction: 2, agent: 2, skill: 1, workflow: 1 },
+};
+
+export const FIRST_ASSET = DEV_ASSETS[0].name;
+
+// ── Full asset data for API route interception ────────────────────────────────
+
+export const MOCK_ASSETS_FULL: AiAsset[] = [
+  {
+    id: 'mock-1',
+    providerId: 'mock-provider',
+    name: 'TypeScript Best Practices',
+    description: 'Coding standards and best practices for TypeScript projects.',
+    type: 'instruction',
+    tools: ['claude-code', 'github-copilot'],
+    tags: ['typescript', 'best-practices'],
+    author: 'Platform Team',
+    version: '1.0.0',
+    content: '# TypeScript Best Practices\n\nAlways use strict mode. Prefer `interface` over `type` for object shapes. Use explicit return types on public functions.',
+    yamlRaw: 'name: TypeScript Best Practices\ntype: instruction',
+    yamlPath: 'instructions/typescript-best-practices.yaml',
+    mdPath: 'instructions/typescript-best-practices.md',
+    repoUrl: 'https://github.com/example/ai-assets',
+    branch: 'main',
+    installCount: 14,
+    syncedAt: new Date(Date.now() - 5 * 60 * 1000).toISOString(),
+    createdAt: '2026-03-10T10:00:00Z',
+    updatedAt: '2026-03-10T12:00:00Z',
+  },
+  {
+    id: 'mock-2',
+    providerId: 'mock-provider',
+    name: 'Code Review Agent',
+    description: 'Specialized agent for performing thorough and constructive code reviews.',
+    type: 'agent',
+    tools: ['claude-code'],
+    tags: ['code-review', 'quality'],
+    author: 'Platform Team',
+    version: '1.2.0',
+    content: '# Code Review Agent\n\nYou are an expert code reviewer. Focus on correctness, performance, security, and maintainability.',
+    yamlRaw: 'name: Code Review Agent\ntype: agent',
+    yamlPath: 'agents/code-review.yaml',
+    mdPath: 'agents/code-review.md',
+    repoUrl: 'https://github.com/example/ai-assets',
+    branch: 'main',
+    installCount: 8,
+    syncedAt: new Date(Date.now() - 5 * 60 * 1000).toISOString(),
+    createdAt: '2024-02-01T10:00:00Z',
+    updatedAt: '2024-03-10T09:00:00Z',
+  },
+  {
+    id: 'mock-3',
+    providerId: 'mock-provider',
+    name: 'Git Commit',
+    description: 'Skill for creating well-structured, conventional git commit messages.',
+    type: 'skill',
+    tools: ['all'],
+    tags: ['git', 'commits', 'conventional-commits'],
+    author: 'Platform Team',
+    version: '1.0.0',
+    content: '# Git Commit Skill\n\nCreate commit messages following the Conventional Commits specification.',
+    yamlRaw: 'name: Git Commit\ntype: skill',
+    yamlPath: 'skills/git-commit/skill.yaml',
+    mdPath: 'skills/git-commit/SKILL.md',
+    repoUrl: 'https://github.com/example/ai-assets',
+    branch: 'main',
+    installCount: 22,
+    syncedAt: new Date(Date.now() - 5 * 60 * 1000).toISOString(),
+    createdAt: '2024-01-20T10:00:00Z',
+    updatedAt: '2024-02-15T14:00:00Z',
+  },
+  {
+    id: 'mock-4',
+    providerId: 'mock-provider',
+    name: 'Feature Development Workflow',
+    description: 'Step-by-step workflow for planning, implementing and shipping a new feature.',
+    type: 'workflow',
+    tools: ['github-copilot', 'cursor'],
+    tags: ['workflow', 'feature', 'development'],
+    author: 'Platform Team',
+    version: '2.0.0',
+    content: '# Feature Development Workflow\n\n## Step 1: Planning\n\n## Step 2: Implementation\n\n## Step 3: Testing\n\n## Step 4: Review',
+    yamlRaw: 'name: Feature Development Workflow\ntype: workflow',
+    yamlPath: 'workflows/feature-development.yaml',
+    mdPath: 'workflows/feature-development.md',
+    repoUrl: 'https://github.com/example/ai-assets',
+    branch: 'main',
+    installCount: 5,
+    syncedAt: new Date(Date.now() - 5 * 60 * 1000).toISOString(),
+    createdAt: '2024-03-01T10:00:00Z',
+    updatedAt: '2024-03-20T16:00:00Z',
+  },
+  {
+    id: 'mock-5',
+    providerId: 'mock-provider',
+    name: 'Security Guidelines',
+    description: 'Security best practices and guidelines for backend development.',
+    type: 'instruction',
+    tools: ['google-gemini', 'claude-code'],
+    tags: ['security', 'backend', 'best-practices'],
+    author: 'Security Team',
+    version: '1.1.0',
+    content: '# Security Guidelines\n\nNever store secrets in code. Always validate user input. Use parameterized queries.',
+    yamlRaw: 'name: Security Guidelines\ntype: instruction',
+    yamlPath: 'instructions/security-guidelines.yaml',
+    mdPath: 'instructions/security-guidelines.md',
+    repoUrl: 'https://github.com/example/ai-assets',
+    branch: 'main',
+    installCount: 3,
+    syncedAt: new Date(Date.now() - 5 * 60 * 1000).toISOString(),
+    createdAt: '2024-02-10T10:00:00Z',
+    updatedAt: '2024-03-05T11:00:00Z',
+  },
+  {
+    id: 'mock-6',
+    providerId: 'mock-provider',
+    name: 'Product Manager',
+    description: 'Data-driven product decision assistant for roadmap and prioritization.',
+    type: 'agent',
+    tools: ['github-copilot'],
+    tags: ['product', 'roadmap', 'prioritization'],
+    author: 'Product Team',
+    version: '1.0.0',
+    content: '# Product Manager Agent\n\nYou are a data-driven product manager. Help prioritize features using impact/effort frameworks.',
+    yamlRaw: 'name: Product Manager\ntype: agent',
+    yamlPath: 'agents/product-manager.yaml',
+    mdPath: 'agents/product-manager.md',
+    repoUrl: 'https://github.com/example/ai-assets',
+    branch: 'main',
+    installCount: 0,
+    syncedAt: new Date(Date.now() - 5 * 60 * 1000).toISOString(),
+    createdAt: '2024-03-15T10:00:00Z',
+    updatedAt: '2024-03-15T10:00:00Z',
+  },
+];
+
+export const MOCK_PROVIDER: AiHubProvider = {
+  id: 'mock-provider',
+  type: 'github',
+  target: 'https://github.com/example/ai-assets.git',
+  branch: 'main',
+  lastSync: new Date(Date.now() - 5 * 60 * 1000).toISOString(),
+  status: 'idle',
+  assetCount: MOCK_ASSETS_FULL.length,
+};
+
+export const MOCK_STATS: AiHubStats = {
+  totalAssets: MOCK_ASSETS_FULL.length,
+  byType: { instruction: 2, agent: 2, skill: 1, workflow: 1 },
+  byTool: {
+    'claude-code': MOCK_ASSETS_FULL.filter(a => a.tools.includes('claude-code') || a.tools.includes('all')).length,
+    'github-copilot': MOCK_ASSETS_FULL.filter(a => a.tools.includes('github-copilot') || a.tools.includes('all')).length,
+    'google-gemini': MOCK_ASSETS_FULL.filter(a => a.tools.includes('google-gemini') || a.tools.includes('all')).length,
+    'cursor': MOCK_ASSETS_FULL.filter(a => a.tools.includes('cursor') || a.tools.includes('all')).length,
+  },
+  byProvider: { 'mock-provider': MOCK_ASSETS_FULL.length },
+  lastSync: MOCK_PROVIDER.lastSync,
+};
+
+/** Applies the same filter logic the backend uses, for use in page.route() handlers. */
+export function buildListResponse(params: URLSearchParams): AiAssetListResponse {
+  let items = [...MOCK_ASSETS_FULL];
+
+  const type = params.get('type');
+  const tool = params.get('tool');
+  const search = params.get('search');
+  const tags = params.get('tags')?.split(',').filter(Boolean);
+  const provider = params.get('provider');
+  const page = Number(params.get('page') ?? '1');
+  const pageSize = Number(params.get('pageSize') ?? '24');
+
+  if (type) items = items.filter(a => a.type === type);
+  if (tool) items = items.filter(a => a.tools.includes(tool as any) || a.tools.includes('all'));
+  if (search) {
+    const q = search.toLowerCase();
+    items = items.filter(a =>
+      a.name.toLowerCase().includes(q) ||
+      a.description.toLowerCase().includes(q) ||
+      a.tags.some(t => t.toLowerCase().includes(q)),
+    );
+  }
+  if (tags?.length) items = items.filter(a => tags.every(t => a.tags.includes(t)));
+  if (provider) items = items.filter(a => a.providerId === provider);
+
+  const totalCount = items.length;
+  const start = (page - 1) * pageSize;
+
+  return {
+    items: items.slice(start, start + pageSize) as any,
+    totalCount,
+    page,
+    pageSize,
+  };
+}

package/tests/e2e/mcp-config.spec.ts

@@ -0,0 +1,88 @@
+import { test, expect } from './fixtures/base';
+
+// McpConfigPage is registered at /mcp-config in dev/index.tsx
+const PAGE_URL = '/mcp-config';
+
+test.describe('MCP Configuration Page', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(PAGE_URL);
+    await expect(page.getByText('Configure MCP Server')).toBeVisible();
+  });
+
+  test('renders the page heading', async ({ page }) => {
+    await expect(page.getByText('Configure MCP Server')).toBeVisible();
+  });
+
+  test('renders the subtitle', async ({ page }) => {
+    await expect(
+      page.getByText('Connect your AI tool to the Dev AI Hub via Model Context Protocol.'),
+    ).toBeVisible();
+  });
+
+  test('shows tabs for all three supported tools', async ({ page }) => {
+    // TOOL_CONFIGS defines Claude Code, GitHub Copilot, Google Gemini
+    await expect(page.getByRole('tab', { name: /Claude Code/i })).toBeVisible();
+    await expect(page.getByRole('tab', { name: /GitHub Copilot/i })).toBeVisible();
+    await expect(page.getByRole('tab', { name: /Google Gemini/i })).toBeVisible();
+  });
+
+  test('"Claude Code" tab is selected by default', async ({ page }) => {
+    await expect(page.getByRole('tab', { name: /Claude Code/i })).toHaveAttribute('aria-selected', 'true');
+  });
+
+  test('Claude Code panel shows .mcp.json config snippet', async ({ page }) => {
+    await expect(page.getByText('.mcp.json', { exact: true })).toBeVisible();
+  });
+
+  test('switching to GitHub Copilot tab shows .vscode/settings.json snippet', async ({ page }) => {
+    await page.getByRole('tab', { name: /GitHub Copilot/i }).click();
+    await expect(page.getByText('.vscode/settings.json', { exact: true })).toBeVisible();
+  });
+
+  test('switching to Google Gemini tab shows gemini-config.json snippet', async ({ page }) => {
+    await page.getByRole('tab', { name: /Google Gemini/i }).click();
+    await expect(page.getByText('gemini-config.json')).toBeVisible();
+  });
+
+  test('shows the "MCP Endpoint" section', async ({ page }) => {
+    await expect(page.getByText('MCP Endpoint')).toBeVisible();
+  });
+
+  test('"Copy URL" button is present', async ({ page }) => {
+    await expect(page.getByRole('button', { name: 'Copy URL' })).toBeVisible();
+  });
+
+  test('"Copy config" button is present', async ({ page }) => {
+    await expect(page.getByRole('button', { name: 'Copy config' })).toBeVisible();
+  });
+
+  test('proactive suggestions switch is unchecked by default', async ({ page }) => {
+    const toggle = page.getByRole('switch', { name: 'Proactive suggestions' });
+    await expect(toggle).toBeVisible();
+    await expect(toggle).not.toBeChecked();
+  });
+
+  test('enabling proactive toggle appends ?proactive=true to the MCP URL', async ({ page }) => {
+    await page.getByRole('switch', { name: 'Proactive suggestions' }).click({ force: true });
+    await expect(page.getByText(/proactive=true/).first()).toBeVisible();
+  });
+
+  test('switching tabs updates the tool param in the MCP URL', async ({ page }) => {
+    const urlBefore = await page.getByText(/\/mcp\?/).first().textContent();
+    expect(urlBefore).toContain('tool=claude-code');
+
+    await page.getByRole('tab', { name: /GitHub Copilot/i }).click();
+    const urlAfter = await page.getByText(/\/mcp\?/).first().textContent();
+    expect(urlAfter).toContain('tool=github-copilot');
+  });
+
+  test('hint text references ?tool= and suggest_assets', async ({ page }) => {
+    await expect(page.getByText(/Omit \?tool=/)).toBeVisible();
+    await expect(page.getByText(/suggest_assets/)).toBeVisible();
+  });
+
+  test('"Copy URL" button label changes to "Copied!" after click', async ({ page }) => {
+    await page.getByRole('button', { name: 'Copy URL' }).click();
+    await expect(page.getByRole('button', { name: 'Copied!' })).toBeVisible();
+  });
+});