Add E2E page objects and specs (navigation, dashboard, settings)

Author: Mohammod Al Amin Ashik

tests/e2e/pages/DashboardPage.ts

@@ -0,0 +1,54 @@
+import { Page, Locator, expect } from '@playwright/test';
+import { BasePage } from './BasePage';
+
+/**
+ * Dashboard/Home page object
+ */
+export class DashboardPage extends BasePage {
+  readonly heading: Locator;
+  readonly gatewayStatus: Locator;
+  readonly gatewayToggleButton: Locator;
+  readonly serverCountCard: Locator;
+  readonly featureSetsCard: Locator;
+  readonly clientsCard: Locator;
+  readonly activeSpaceCard: Locator;
+  readonly configCopyButton: Locator;
+
+  constructor(page: Page) {
+    super(page);
+    this.heading = page.getByRole('heading', { name: 'Dashboard' });
+    this.gatewayStatus = page.locator('text=Gateway:').first();
+    this.gatewayToggleButton = page.getByRole('button', { name: /Start|Stop/ });
+    this.serverCountCard = page.locator('text=Servers').first();
+    this.featureSetsCard = page.locator('text=FeatureSets').first();
+    this.clientsCard = page.locator('text=Clients').first();
+    this.activeSpaceCard = page.locator('text=Active Space').first();
+    this.configCopyButton = page.getByRole('button', { name: /Copy/ });
+  }
+
+  async navigate() {
+    await this.goto('/');
+    await this.waitForLoad();
+  }
+
+  async isGatewayRunning(): Promise<boolean> {
+    const text = await this.gatewayStatus.textContent();
+    return text?.includes('Running') ?? false;
+  }
+
+  async toggleGateway() {
+    await this.gatewayToggleButton.click();
+    // Wait for status to change
+    await this.page.waitForTimeout(500);
+  }
+
+  async getServerCount(): Promise<string> {
+    const card = this.page.locator('text=Connected / Installed').locator('..');
+    const countText = await card.locator('.text-3xl').textContent();
+    return countText || '0/0';
+  }
+
+  async copyConfig() {
+    await this.configCopyButton.click();
+  }
+}

tests/e2e/pages/SettingsPage.ts

@@ -0,0 +1,49 @@
+import { Page, Locator } from '@playwright/test';
+import { BasePage } from './BasePage';
+
+/**
+ * Settings page object
+ */
+export class SettingsPage extends BasePage {
+  readonly heading: Locator;
+  readonly lightThemeButton: Locator;
+  readonly darkThemeButton: Locator;
+  readonly systemThemeButton: Locator;
+  readonly openLogsButton: Locator;
+  readonly logsPath: Locator;
+
+  constructor(page: Page) {
+    super(page);
+    this.heading = page.getByRole('heading', { name: 'Settings' });
+    this.lightThemeButton = page.getByRole('button', { name: 'Light' });
+    this.darkThemeButton = page.getByRole('button', { name: 'Dark' });
+    this.systemThemeButton = page.getByRole('button', { name: 'System' });
+    this.openLogsButton = page.getByRole('button', { name: /Open Logs/i });
+    this.logsPath = page.locator('.font-mono').filter({ hasText: /logs|mcpmux/i });
+  }
+
+  async selectTheme(theme: 'light' | 'dark' | 'system') {
+    switch (theme) {
+      case 'light':
+        await this.lightThemeButton.click();
+        break;
+      case 'dark':
+        await this.darkThemeButton.click();
+        break;
+      case 'system':
+        await this.systemThemeButton.click();
+        break;
+    }
+  }
+
+  async getActiveTheme(): Promise<string> {
+    // Check which button has the primary variant
+    if (await this.lightThemeButton.getAttribute('class').then(c => c?.includes('primary'))) {
+      return 'light';
+    }
+    if (await this.darkThemeButton.getAttribute('class').then(c => c?.includes('primary'))) {
+      return 'dark';
+    }
+    return 'system';
+  }
+}

tests/e2e/pages/SidebarNav.ts

@@ -0,0 +1,62 @@
+import { Page, Locator } from '@playwright/test';
+
+/**
+ * Sidebar navigation component
+ */
+export class SidebarNav {
+  readonly page: Page;
+  readonly dashboard: Locator;
+  readonly myServers: Locator;
+  readonly discover: Locator;
+  readonly spaces: Locator;
+  readonly featureSets: Locator;
+  readonly clients: Locator;
+  readonly settings: Locator;
+  readonly spaceSwitcher: Locator;
+  readonly themeToggle: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.dashboard = page.getByRole('button', { name: 'Dashboard' });
+    this.myServers = page.getByRole('button', { name: 'My Servers' });
+    this.discover = page.getByRole('button', { name: 'Discover' });
+    this.spaces = page.getByRole('button', { name: 'Spaces' });
+    this.featureSets = page.getByRole('button', { name: 'FeatureSets' });
+    this.clients = page.getByRole('button', { name: 'Clients' });
+    this.settings = page.getByRole('button', { name: 'Settings' });
+    this.spaceSwitcher = page.locator('[data-testid="space-switcher"]');
+    this.themeToggle = page.locator('button[title*="mode"]');
+  }
+
+  async goToDashboard() {
+    await this.dashboard.click();
+  }
+
+  async goToMyServers() {
+    await this.myServers.click();
+  }
+
+  async goToDiscover() {
+    await this.discover.click();
+  }
+
+  async goToSpaces() {
+    await this.spaces.click();
+  }
+
+  async goToFeatureSets() {
+    await this.featureSets.click();
+  }
+
+  async goToClients() {
+    await this.clients.click();
+  }
+
+  async goToSettings() {
+    await this.settings.click();
+  }
+
+  async toggleTheme() {
+    await this.themeToggle.click();
+  }
+}

tests/e2e/pages/SpacesPage.ts

@@ -0,0 +1,45 @@
+import { Page, Locator } from '@playwright/test';
+import { BasePage } from './BasePage';
+
+/**
+ * Spaces management page object
+ */
+export class SpacesPage extends BasePage {
+  readonly heading: Locator;
+  readonly createSpaceButton: Locator;
+  readonly spaceList: Locator;
+  readonly spaceCards: Locator;
+
+  constructor(page: Page) {
+    super(page);
+    this.heading = page.getByRole('heading', { name: 'Spaces' });
+    this.createSpaceButton = page.getByRole('button', { name: /Create|New Space/i });
+    this.spaceList = page.locator('[data-testid="space-list"]');
+    this.spaceCards = page.locator('[data-testid="space-card"]');
+  }
+
+  async getSpaceCount(): Promise<number> {
+    // Count space cards or list items
+    const cards = this.page.locator('.space-card, [data-testid="space-card"]');
+    return await cards.count();
+  }
+
+  async getSpaceByName(name: string): Locator {
+    return this.page.locator(`text="${name}"`).first();
+  }
+
+  async createSpace(name: string) {
+    await this.createSpaceButton.click();
+    // Fill in the space name in the modal/form
+    const nameInput = this.page.getByPlaceholder(/name/i);
+    await nameInput.fill(name);
+    await this.page.getByRole('button', { name: /Create|Save/i }).click();
+  }
+
+  async deleteSpace(name: string) {
+    const spaceRow = this.page.locator(`text="${name}"`).first().locator('..');
+    await spaceRow.getByRole('button', { name: /Delete/i }).click();
+    // Confirm deletion
+    await this.page.getByRole('button', { name: /Confirm|Yes/i }).click();
+  }
+}

tests/e2e/pages/index.ts

@@ -1 +1,5 @@
 export { BasePage } from './BasePage';
+export { DashboardPage } from './DashboardPage';
+export { SidebarNav } from './SidebarNav';
+export { SpacesPage } from './SpacesPage';
+export { SettingsPage } from './SettingsPage';

tests/e2e/specs/dashboard.spec.ts

@@ -0,0 +1,46 @@
+import { test, expect } from '@playwright/test';
+import { DashboardPage } from '../pages';
+
+test.describe('Dashboard', () => {
+  test('should display gateway status', async ({ page }) => {
+    const dashboard = new DashboardPage(page);
+    await dashboard.navigate();
+
+    // Gateway status should be visible
+    await expect(dashboard.gatewayStatus).toBeVisible();
+    await expect(dashboard.gatewayToggleButton).toBeVisible();
+  });
+
+  test('should display stats cards', async ({ page }) => {
+    const dashboard = new DashboardPage(page);
+    await dashboard.navigate();
+
+    // All stat cards should be visible
+    await expect(dashboard.serverCountCard).toBeVisible();
+    await expect(dashboard.featureSetsCard).toBeVisible();
+    await expect(dashboard.clientsCard).toBeVisible();
+    await expect(dashboard.activeSpaceCard).toBeVisible();
+  });
+
+  test('should display client config section', async ({ page }) => {
+    const dashboard = new DashboardPage(page);
+    await dashboard.navigate();
+
+    // Config section should be visible
+    await expect(page.locator('text=Connect Your Client')).toBeVisible();
+    await expect(dashboard.configCopyButton).toBeVisible();
+  });
+
+  test('should copy config to clipboard', async ({ page, context }) => {
+    // Grant clipboard permissions
+    await context.grantPermissions(['clipboard-read', 'clipboard-write']);
+
+    const dashboard = new DashboardPage(page);
+    await dashboard.navigate();
+
+    await dashboard.copyConfig();
+
+    // Check for success message
+    await expect(page.locator('text=copied')).toBeVisible({ timeout: 2000 });
+  });
+});

tests/e2e/specs/navigation.spec.ts

@@ -0,0 +1,50 @@
+import { test, expect } from '@playwright/test';
+import { DashboardPage, SidebarNav, SettingsPage } from '../pages';
+
+test.describe('Navigation', () => {
+  test('should load the dashboard on startup', async ({ page }) => {
+    const dashboard = new DashboardPage(page);
+    await dashboard.navigate();
+
+    await expect(dashboard.heading).toBeVisible();
+    await expect(page.locator('text=Welcome to McpMux')).toBeVisible();
+  });
+
+  test('should navigate to settings page', async ({ page }) => {
+    const dashboard = new DashboardPage(page);
+    const sidebar = new SidebarNav(page);
+    const settings = new SettingsPage(page);
+
+    await dashboard.navigate();
+    await sidebar.goToSettings();
+
+    await expect(settings.heading).toBeVisible();
+    await expect(page.locator('text=Configure McpMux')).toBeVisible();
+  });
+
+  test('should navigate to all main pages', async ({ page }) => {
+    const dashboard = new DashboardPage(page);
+    const sidebar = new SidebarNav(page);
+
+    await dashboard.navigate();
+
+    // Navigate to each page and verify heading
+    await sidebar.goToMyServers();
+    await expect(page.getByRole('heading', { name: /Servers|My Servers/i })).toBeVisible();
+
+    await sidebar.goToDiscover();
+    await expect(page.getByRole('heading', { name: /Discover|Registry/i })).toBeVisible();
+
+    await sidebar.goToSpaces();
+    await expect(page.getByRole('heading', { name: 'Spaces' })).toBeVisible();
+
+    await sidebar.goToFeatureSets();
+    await expect(page.getByRole('heading', { name: /FeatureSets|Feature Sets/i })).toBeVisible();
+
+    await sidebar.goToClients();
+    await expect(page.getByRole('heading', { name: 'Clients' })).toBeVisible();
+
+    await sidebar.goToDashboard();
+    await expect(dashboard.heading).toBeVisible();
+  });
+});

tests/e2e/specs/settings.spec.ts

@@ -0,0 +1,41 @@
+import { test, expect } from '@playwright/test';
+import { DashboardPage, SidebarNav, SettingsPage } from '../pages';
+
+test.describe('Settings', () => {
+  test.beforeEach(async ({ page }) => {
+    const dashboard = new DashboardPage(page);
+    const sidebar = new SidebarNav(page);
+
+    await dashboard.navigate();
+    await sidebar.goToSettings();
+  });
+
+  test('should display appearance settings', async ({ page }) => {
+    const settings = new SettingsPage(page);
+
+    await expect(page.locator('text=Appearance')).toBeVisible();
+    await expect(settings.lightThemeButton).toBeVisible();
+    await expect(settings.darkThemeButton).toBeVisible();
+    await expect(settings.systemThemeButton).toBeVisible();
+  });
+
+  test('should display logs section', async ({ page }) => {
+    const settings = new SettingsPage(page);
+
+    await expect(page.locator('text=Logs')).toBeVisible();
+    await expect(settings.openLogsButton).toBeVisible();
+  });
+
+  test('should switch between themes', async ({ page }) => {
+    const settings = new SettingsPage(page);
+
+    // Switch to light theme
+    await settings.selectTheme('light');
+    // The HTML element should have light theme class
+    await expect(page.locator('html')).not.toHaveClass(/dark/);
+
+    // Switch to dark theme
+    await settings.selectTheme('dark');
+    await expect(page.locator('html')).toHaveClass(/dark/);
+  });
+});