@fdm-monster/client-next 2.2.2 → 2.2.4

package/screenshots/fixtures/test-fixtures.ts

@@ -0,0 +1,112 @@
+import { test as base, Page } from '@playwright/test';
+import { ApiMock } from './api-mock';
+import { mockSocketIO } from './socketio-mock';
+import { mockPrinters } from './data/printers.fixtures';
+import { mockFloors } from './data/floors.fixtures';
+import { mockCameras } from './data/cameras.fixtures';
+import { mockFiles } from './data/files.fixtures';
+import { mockJobs } from './data/jobs.fixtures';
+
+/**
+ * Custom fixtures for screenshot tests
+ * Extends Playwright's base test with additional fixtures for API mocking and authenticated pages
+ */
+type ScreenshotFixtures = {
+  apiMock: ApiMock;
+  authenticatedPage: Page;
+  mockPrinters: typeof mockPrinters;
+  mockFloors: typeof mockFloors;
+  mockCameras: typeof mockCameras;
+  mockFiles: typeof mockFiles;
+  mockJobs: typeof mockJobs;
+};
+
+/**
+ * Extended test object with custom fixtures
+ * Usage: import { test, expect } from '../fixtures/test-fixtures'
+ */
+export const test = base.extend<ScreenshotFixtures>({
+  /**
+   * Page fixture override - automatically mocks SocketIO for all pages
+   * This prevents "server disconnected" messages and injects initial data
+   */
+  page: async ({ page }, use) => {
+    // Mock SocketIO with initial data before page loads
+    await mockSocketIO(page, {
+      floors: mockFloors,
+      printers: mockPrinters,
+      socketStates: {},
+      printerEvents: {},
+      trackedUploads: { current: [] },
+    });
+
+    // Let all assets (PNG, JPG, SVG) load normally from Vite dev server
+    await use(page);
+  },
+
+  /**
+   * ApiMock fixture - provides API mocking instance
+   * Automatically cleans up routes after each test
+   */
+  apiMock: async ({ page }, use) => {
+    const mock = new ApiMock(page);
+    await use(mock);
+    await mock.unmockAll();
+  },
+
+  /**
+   * Authenticated page fixture - provides a page with mocked authentication
+   * Use this when you need to test pages that require login
+   * Note: Socket.IO data is injected via page fixture above
+   */
+  authenticatedPage: async ({ page, apiMock }, use) => {
+    // Mock authentication endpoints (no login required)
+    await apiMock.mockAuthEndpoints({ loginRequired: false });
+
+    // Navigate to the app
+    await page.goto('/');
+
+    // Set auth tokens in localStorage
+    await page.evaluate(() => {
+      localStorage.setItem(
+        'auth-token',
+        'mock-jwt-token-eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9'
+      );
+      localStorage.setItem(
+        'refresh-token',
+        'mock-refresh-token-abcd1234efgh5678ijkl9012'
+      );
+    });
+
+    await use(page);
+  },
+
+  /**
+   * Mock data fixtures - provides test data
+   * These can be imported and used in tests or modified as needed
+   */
+  mockPrinters: async ({}, use) => {
+    await use(mockPrinters);
+  },
+
+  mockFloors: async ({}, use) => {
+    await use(mockFloors);
+  },
+
+  mockCameras: async ({}, use) => {
+    await use(mockCameras);
+  },
+
+  mockFiles: async ({}, use) => {
+    await use(mockFiles);
+  },
+
+  mockJobs: async ({}, use) => {
+    await use(mockJobs);
+  },
+});
+
+/**
+ * Re-export expect from Playwright for convenience
+ */
+export { expect } from '@playwright/test';

package/screenshots/helpers/dialog.helper.ts

@@ -0,0 +1,196 @@
+import { Page, Locator } from '@playwright/test';
+
+/**
+ * Helper utilities for interacting with Vuetify dialogs and modals
+ */
+
+export class DialogHelper {
+  constructor(private page: Page) {}
+
+  /**
+   * Wait for a dialog to appear
+   * @param selector Optional specific dialog selector, defaults to active Vuetify dialog
+   * @param timeout Maximum time to wait in milliseconds
+   */
+  async waitForDialog(selector?: string, timeout = 5000): Promise<Locator> {
+    if (selector) {
+      await this.page.waitForSelector(selector, {
+        state: 'visible',
+        timeout,
+      });
+      return this.page.locator(selector).first();
+    }
+
+    // For Vuetify 3, try multiple selectors
+    const selectors = [
+      '.v-overlay--active .v-card',
+      '.v-dialog .v-card',
+      '[role="dialog"]',
+      '.v-dialog--active',
+    ];
+
+    for (const sel of selectors) {
+      const visible = await this.page.locator(sel).isVisible().catch(() => false);
+      if (visible) {
+        return this.page.locator(sel).first();
+      }
+    }
+
+    // Wait for any of the selectors
+    await this.page.waitForSelector('.v-overlay--active .v-card, .v-dialog .v-card, [role="dialog"]', {
+      state: 'visible',
+      timeout,
+    });
+
+    return this.page.locator('.v-overlay--active .v-card, .v-dialog .v-card').first();
+  }
+
+  /**
+   * Wait for dialog to disappear
+   * @param selector Optional specific dialog selector
+   * @param timeout Maximum time to wait in milliseconds
+   */
+  async waitForDialogToClose(selector?: string, timeout = 5000): Promise<void> {
+    const dialogSelector = selector || '.v-dialog--active';
+    await this.page.waitForSelector(dialogSelector, {
+      state: 'hidden',
+      timeout,
+    });
+  }
+
+  /**
+   * Click the close button in the dialog (usually the X button)
+   */
+  async closeDialog(): Promise<void> {
+    // Try multiple common close button selectors
+    const closeSelectors = [
+      '[data-testid="dialog-close"]',
+      '[data-testid="close-dialog"]',
+      '.v-dialog button[aria-label="Close"]',
+      '.v-dialog .v-btn--icon',
+    ];
+
+    for (const selector of closeSelectors) {
+      const button = this.page.locator(selector).first();
+      if (await button.isVisible({ timeout: 1000 }).catch(() => false)) {
+        await button.click();
+        return;
+      }
+    }
+
+    // Fallback: press Escape key
+    await this.page.keyboard.press('Escape');
+  }
+
+  /**
+   * Click the submit/confirm button in the dialog
+   * @param buttonText Optional specific button text, defaults to common submit button selectors
+   */
+  async submitDialog(buttonText?: string): Promise<void> {
+    if (buttonText) {
+      const button = this.page
+        .locator('.v-dialog button')
+        .filter({ hasText: buttonText })
+        .first();
+      await button.click();
+      return;
+    }
+
+    // Try common submit button selectors
+    const submitSelectors = [
+      '[data-testid="dialog-submit"]',
+      '[data-testid="dialog-confirm"]',
+      '[data-testid="submit-dialog"]',
+      '.v-dialog button[type="submit"]',
+    ];
+
+    for (const selector of submitSelectors) {
+      const button = this.page.locator(selector).first();
+      if (await button.isVisible({ timeout: 1000 }).catch(() => false)) {
+        await button.click();
+        return;
+      }
+    }
+
+    // Fallback: look for primary button
+    const primaryButton = this.page
+      .locator('.v-dialog .v-btn--variant-elevated')
+      .last();
+    if (await primaryButton.isVisible()) {
+      await primaryButton.click();
+    }
+  }
+
+  /**
+   * Click the cancel button in the dialog
+   */
+  async cancelDialog(): Promise<void> {
+    const cancelSelectors = [
+      '[data-testid="dialog-cancel"]',
+      '[data-testid="cancel-dialog"]',
+      '.v-dialog button:has-text("Cancel")',
+    ];
+
+    for (const selector of cancelSelectors) {
+      const button = this.page.locator(selector).first();
+      if (await button.isVisible({ timeout: 1000 }).catch(() => false)) {
+        await button.click();
+        return;
+      }
+    }
+  }
+
+  /**
+   * Get dialog title text
+   */
+  async getDialogTitle(): Promise<string> {
+    const titleSelectors = [
+      '.v-dialog .v-card-title',
+      '.v-dialog .v-toolbar-title',
+      '.v-dialog h2',
+      '.v-dialog h3',
+    ];
+
+    for (const selector of titleSelectors) {
+      const title = this.page.locator(selector).first();
+      if (await title.isVisible({ timeout: 1000 }).catch(() => false)) {
+        return await title.textContent() || '';
+      }
+    }
+
+    return '';
+  }
+
+  /**
+   * Check if dialog is currently open
+   */
+  async isDialogOpen(selector?: string): Promise<boolean> {
+    const dialogSelector = selector || '.v-dialog--active';
+    return await this.page
+      .locator(dialogSelector)
+      .isVisible()
+      .catch(() => false);
+  }
+
+  /**
+   * Wait for dialog content to be fully loaded
+   * Waits for network idle and any loading spinners to disappear
+   */
+  async waitForDialogContentReady(timeout = 5000): Promise<void> {
+    // Wait for any loading spinners to disappear
+    await this.page
+      .locator('.v-dialog .v-progress-circular')
+      .waitFor({ state: 'hidden', timeout })
+      .catch(() => {});
+
+    // Wait a bit for animations
+    await this.page.waitForTimeout(300);
+  }
+}
+
+/**
+ * Create a dialog helper instance for a page
+ */
+export function createDialogHelper(page: Page): DialogHelper {
+  return new DialogHelper(page);
+}

package/screenshots/helpers/form.helper.ts

@@ -0,0 +1,207 @@
+import { Page, Locator } from '@playwright/test';
+
+/**
+ * Helper utilities for filling forms
+ * Provides methods to fill common form fields used in FDM Monster
+ */
+
+export class FormHelper {
+  constructor(private page: Page) {}
+
+  /**
+   * Fill a text input field
+   * @param selector Field selector or label text
+   * @param value Value to fill
+   */
+  async fillTextField(selector: string, value: string): Promise<void> {
+    const input = this.page.locator(selector).first();
+    await input.clear();
+    await input.fill(value);
+  }
+
+  /**
+   * Fill printer form fields
+   */
+  async fillPrinterForm(data: {
+    name?: string;
+    printerURL?: string;
+    apiKey?: string;
+    printerType?: number;
+    username?: string;
+    password?: string;
+  }): Promise<void> {
+    if (data.name !== undefined) {
+      await this.fillTextField('[name="name"]', data.name);
+    }
+    if (data.printerURL !== undefined) {
+      await this.fillTextField('[name="printerURL"]', data.printerURL);
+    }
+    if (data.apiKey !== undefined) {
+      await this.fillTextField('[name="apiKey"]', data.apiKey);
+    }
+    if (data.username !== undefined) {
+      await this.fillTextField('[name="username"]', data.username);
+    }
+    if (data.password !== undefined) {
+      await this.fillTextField('[name="password"]', data.password);
+    }
+    if (data.printerType !== undefined) {
+      await this.selectDropdownOption('[name="printerType"]', data.printerType.toString());
+    }
+  }
+
+  /**
+   * Fill floor form fields
+   */
+  async fillFloorForm(data: { name?: string; order?: string }): Promise<void> {
+    if (data.name !== undefined) {
+      await this.fillTextField('[name="name"]', data.name);
+    }
+    if (data.order !== undefined) {
+      await this.fillTextField('[name="order"]', data.order);
+    }
+  }
+
+  /**
+   * Fill camera form fields
+   */
+  async fillCameraForm(data: {
+    name?: string;
+    streamURL?: string;
+    printerId?: number;
+  }): Promise<void> {
+    if (data.name !== undefined) {
+      await this.fillTextField('[name="name"]', data.name);
+    }
+    if (data.streamURL !== undefined) {
+      await this.fillTextField('[name="streamURL"]', data.streamURL);
+    }
+    if (data.printerId !== undefined) {
+      await this.selectDropdownOption('[name="printerId"]', data.printerId.toString());
+    }
+  }
+
+  /**
+   * Fill login form
+   */
+  async fillLoginForm(username: string, password: string): Promise<void> {
+    await this.fillTextField('[name="username"]', username);
+    await this.fillTextField('[name="password"]', password);
+  }
+
+  /**
+   * Fill registration form
+   */
+  async fillRegistrationForm(
+    username: string,
+    password: string,
+    confirmPassword?: string
+  ): Promise<void> {
+    await this.fillTextField('[name="username"]', username);
+    await this.fillTextField('[name="password"]', password);
+    if (confirmPassword !== undefined) {
+      await this.fillTextField('[name="confirmPassword"]', confirmPassword);
+    }
+  }
+
+  /**
+   * Select option from dropdown (Vuetify select)
+   * @param selector Select field selector
+   * @param value Value or visible text to select
+   */
+  async selectDropdownOption(selector: string, value: string): Promise<void> {
+    // Click to open the select
+    const select = this.page.locator(selector).first();
+    await select.click();
+
+    // Wait for menu to appear
+    await this.page.waitForSelector('.v-menu--active', { state: 'visible' });
+
+    // Try to click by value or text
+    const option = this.page
+      .locator('.v-menu--active .v-list-item')
+      .filter({ hasText: value })
+      .first();
+
+    if (await option.isVisible()) {
+      await option.click();
+    } else {
+      // Fallback: click first option if no match found
+      await this.page.locator('.v-menu--active .v-list-item').first().click();
+    }
+  }
+
+  /**
+   * Toggle a checkbox
+   * @param selector Checkbox selector
+   * @param checked Desired state (true for checked, false for unchecked)
+   */
+  async toggleCheckbox(selector: string, checked: boolean): Promise<void> {
+    const checkbox = this.page.locator(selector).first();
+    const isChecked = await checkbox.isChecked();
+
+    if (isChecked !== checked) {
+      await checkbox.click();
+    }
+  }
+
+  /**
+   * Toggle a switch (Vuetify switch)
+   * @param selector Switch selector
+   * @param enabled Desired state (true for on, false for off)
+   */
+  async toggleSwitch(selector: string, enabled: boolean): Promise<void> {
+    const switchElement = this.page.locator(selector).first();
+    const isEnabled = await switchElement.getAttribute('aria-checked');
+
+    if ((isEnabled === 'true') !== enabled) {
+      await switchElement.click();
+    }
+  }
+
+  /**
+   * Wait for form validation to complete
+   * Waits for error messages to appear or disappear
+   */
+  async waitForValidation(timeout = 2000): Promise<void> {
+    await this.page.waitForTimeout(500);
+    // Wait for any validation messages to settle
+    await this.page
+      .locator('.v-messages__message')
+      .first()
+      .waitFor({ state: 'visible', timeout })
+      .catch(() => {});
+  }
+
+  /**
+   * Get validation error message for a field
+   * @param fieldSelector Field selector
+   */
+  async getFieldError(fieldSelector: string): Promise<string | null> {
+    const field = this.page.locator(fieldSelector).first();
+    const errorMessage = field
+      .locator('.. >> .v-messages__message')
+      .first();
+
+    if (await errorMessage.isVisible().catch(() => false)) {
+      return await errorMessage.textContent();
+    }
+
+    return null;
+  }
+
+  /**
+   * Check if form has any validation errors
+   */
+  async hasValidationErrors(): Promise<boolean> {
+    const errorMessages = this.page.locator('.v-messages__message.error--text');
+    return (await errorMessages.count()) > 0;
+  }
+}
+
+/**
+ * Create a form helper instance for a page
+ */
+export function createFormHelper(page: Page): FormHelper {
+  return new FormHelper(page);
+}

package/screenshots/helpers/navigation.helper.ts

@@ -0,0 +1,191 @@
+import { Page } from '@playwright/test';
+
+/**
+ * Helper utilities for navigation and routing
+ */
+
+export class NavigationHelper {
+  constructor(private page: Page) {}
+
+  /**
+   * Navigate to a specific route
+   * @param path Route path (e.g., '/dashboard', '/printer-grid')
+   */
+  async navigateTo(path: string): Promise<void> {
+    await this.page.goto(path);
+    await this.page.waitForLoadState('networkidle');
+  }
+
+  /**
+   * Navigate to dashboard
+   */
+  async goToDashboard(): Promise<void> {
+    await this.navigateTo('/dashboard');
+  }
+
+  /**
+   * Navigate to printer grid
+   */
+  async goToPrinterGrid(): Promise<void> {
+    await this.navigateTo('/printer-grid');
+  }
+
+  /**
+   * Navigate to printer list
+   */
+  async goToPrinterList(): Promise<void> {
+    await this.navigateTo('/printer-list');
+  }
+
+  /**
+   * Navigate to camera grid
+   */
+  async goToCameras(): Promise<void> {
+    await this.navigateTo('/cameras');
+  }
+
+  /**
+   * Navigate to print jobs
+   */
+  async goToPrintJobs(): Promise<void> {
+    await this.navigateTo('/print-jobs');
+  }
+
+  /**
+   * Navigate to print queue
+   */
+  async goToPrintQueue(): Promise<void> {
+    await this.navigateTo('/queue');
+  }
+
+  /**
+   * Navigate to files
+   */
+  async goToFiles(): Promise<void> {
+    await this.navigateTo('/files');
+  }
+
+  /**
+   * Navigate to settings
+   * @param subsection Optional settings subsection (e.g., 'server', 'users', 'floors')
+   */
+  async goToSettings(subsection?: string): Promise<void> {
+    if (subsection) {
+      await this.navigateTo(`/settings/${subsection}`);
+    } else {
+      await this.navigateTo('/settings');
+    }
+  }
+
+  /**
+   * Navigate to login page
+   */
+  async goToLogin(): Promise<void> {
+    await this.navigateTo('/login');
+  }
+
+  /**
+   * Navigate to registration page
+   */
+  async goToRegister(): Promise<void> {
+    await this.navigateTo('/registration');
+  }
+
+  /**
+   * Navigate to first time setup
+   */
+  async goToFirstTimeSetup(): Promise<void> {
+    await this.navigateTo('/first-time-setup');
+  }
+
+  /**
+   * Open sidebar/navigation drawer (if collapsed on mobile/tablet)
+   */
+  async openSidebar(): Promise<void> {
+    const sidebarToggle = this.page.locator('[data-testid="sidebar-toggle"]');
+    const navigationDrawer = this.page.locator('.v-navigation-drawer');
+
+    // Check if sidebar is hidden (mobile view)
+    const isHidden = await navigationDrawer.isHidden().catch(() => true);
+
+    if (isHidden && (await sidebarToggle.isVisible())) {
+      await sidebarToggle.click();
+      await this.page.waitForSelector('.v-navigation-drawer', {
+        state: 'visible',
+      });
+    }
+  }
+
+  /**
+   * Click a navigation link in the sidebar
+   * @param linkText Text of the navigation link
+   */
+  async clickSidebarLink(linkText: string): Promise<void> {
+    await this.openSidebar();
+
+    const link = this.page
+      .locator('.v-navigation-drawer a, .v-navigation-drawer .v-list-item')
+      .filter({ hasText: linkText })
+      .first();
+
+    await link.click();
+    await this.page.waitForLoadState('networkidle');
+  }
+
+  /**
+   * Wait for page to be fully loaded
+   * Waits for network idle and any loading indicators to disappear
+   */
+  async waitForPageLoad(timeout = 5000): Promise<void> {
+    await this.page.waitForLoadState('networkidle');
+
+    // Wait for any loading spinners to disappear
+    await this.page
+      .locator('.v-progress-circular, .v-progress-linear')
+      .first()
+      .waitFor({ state: 'hidden', timeout })
+      .catch(() => {});
+
+    // Small delay for animations
+    await this.page.waitForTimeout(300);
+  }
+
+  /**
+   * Get current route path
+   */
+  async getCurrentPath(): Promise<string> {
+    return await this.page.evaluate(() => window.location.pathname);
+  }
+
+  /**
+   * Check if currently on a specific route
+   * @param path Route path to check
+   */
+  async isOnRoute(path: string): Promise<boolean> {
+    const currentPath = await this.getCurrentPath();
+    return currentPath === path;
+  }
+
+  /**
+   * Go back to previous page
+   */
+  async goBack(): Promise<void> {
+    await this.page.goBack();
+    await this.waitForPageLoad();
+  }
+
+  /**
+   * Refresh current page
+   */
+  async refresh(): Promise<void> {
+    await this.page.reload();
+    await this.waitForPageLoad();
+  }
+}
+
+/**
+ * Create a navigation helper instance for a page
+ */
+export function createNavigationHelper(page: Page): NavigationHelper {
+  return new NavigationHelper(page);
+}