@fdm-monster/client-next 2.2.2 → 2.2.3

package/screenshots/suites/05-camera-grid.screenshots.spec.ts

@@ -0,0 +1,127 @@
+import { test, expect } from '../fixtures/test-fixtures';
+import { captureFullPage } from '../utils';
+import { createNavigationHelper } from '../helpers/navigation.helper';
+import { createDialogHelper } from '../helpers/dialog.helper';
+
+/**
+ * Camera Grid Screenshots
+ * Captures: Camera grid, creating camera
+ */
+test.describe('Camera Grid Screenshots', () => {
+  test.beforeEach(async ({ apiMock }) => {
+    await apiMock.mockAllEndpoints({ loginRequired: false });
+  });
+
+  test('01-camera-grid-view', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToCameras();
+
+    // Wait for camera grid to load
+    await authenticatedPage.waitForSelector(
+      '[data-testid="camera-grid"], .camera-grid, main',
+      { timeout: 5000 }
+    ).catch(() => {});
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    await captureFullPage(authenticatedPage, 'camera-grid-view.png', 'cameras');
+  });
+
+  test('02-camera-grid-empty', async ({ authenticatedPage, apiMock }) => {
+    // Mock with empty data
+    await apiMock.mockAllEndpoints({ loginRequired: false, emptyData: true });
+
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToCameras();
+
+    await authenticatedPage.waitForSelector(
+      '[data-testid="empty-state"], .empty-state, main',
+      { timeout: 5000 }
+    ).catch(() => {});
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    await captureFullPage(authenticatedPage, 'camera-grid-empty.png', 'cameras');
+  });
+
+  test('03-create-camera-dialog', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToCameras();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Click add/create camera button
+    const addBtn = authenticatedPage.locator('button').filter({ hasText: /add|create|new/i }).first();
+    await addBtn.click().catch(() => {});
+
+    // Wait for dialog
+    const dialog = createDialogHelper(authenticatedPage);
+    await dialog.waitForDialog();
+
+    await authenticatedPage.waitForTimeout(500);
+
+    await captureFullPage(authenticatedPage, 'create-camera-dialog.png', 'cameras');
+  });
+
+  test('04-create-camera-dialog-filled', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToCameras();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Click add camera button
+    const addBtn = authenticatedPage.locator('button').filter({ hasText: /add|create|new/i }).first();
+    await addBtn.click().catch(() => {});
+
+    // Wait for dialog
+    const dialog = createDialogHelper(authenticatedPage);
+    await dialog.waitForDialog();
+
+    await authenticatedPage.waitForTimeout(500);
+
+    // Fill form fields
+    const inputs = authenticatedPage.locator('.v-dialog input[type="text"], .v-dialog input[type="url"]');
+    if (await inputs.count() > 0) {
+      await inputs.nth(0).fill('Main Workshop Camera');
+      if (await inputs.count() > 1) {
+        await inputs.nth(1).fill('http://192.168.1.100/webcam/?action=stream');
+      }
+    }
+
+    await authenticatedPage.waitForTimeout(500);
+
+    await captureFullPage(authenticatedPage, 'create-camera-dialog-filled.png', 'cameras');
+  });
+
+  test('05-camera-card-with-stream', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToCameras();
+
+    await authenticatedPage.waitForTimeout(1500);
+
+    // Focus on a single camera card if visible
+    const cameraCard = authenticatedPage.locator('.camera-card, [data-testid="camera-card"]').first();
+    if (await cameraCard.isVisible().catch(() => false)) {
+      await cameraCard.hover();
+      await authenticatedPage.waitForTimeout(500);
+    }
+
+    await captureFullPage(authenticatedPage, 'camera-card-with-stream.png', 'cameras');
+  });
+
+  test('06-camera-fullscreen-view', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToCameras();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Click on a camera to open fullscreen/expanded view
+    const cameraCard = authenticatedPage.locator('.camera-card, [data-testid="camera-card"]').first();
+    if (await cameraCard.isVisible().catch(() => false)) {
+      await cameraCard.click();
+      await authenticatedPage.waitForTimeout(1000);
+    }
+
+    await captureFullPage(authenticatedPage, 'camera-fullscreen-view.png', 'cameras');
+  });
+});

package/screenshots/suites/06-print-jobs.screenshots.spec.ts

@@ -0,0 +1,139 @@
+import { test, expect } from '../fixtures/test-fixtures';
+import { captureFullPage } from '../utils';
+import { createNavigationHelper } from '../helpers/navigation.helper';
+import { createDialogHelper } from '../helpers/dialog.helper';
+
+/**
+ * Print Jobs Screenshots
+ * Captures: Jobs list, job dialog with details
+ */
+test.describe('Print Jobs Screenshots', () => {
+  test.beforeEach(async ({ apiMock }) => {
+    await apiMock.mockAllEndpoints({ loginRequired: false });
+  });
+
+  test('01-print-jobs-list', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToJobs();
+
+    // Wait for jobs list to load
+    await authenticatedPage.waitForSelector(
+      '[data-testid="jobs-list"], .jobs-list, table, .v-data-table',
+      { timeout: 5000 }
+    ).catch(() => {});
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    await captureFullPage(authenticatedPage, 'print-jobs-list.png', 'jobs');
+  });
+
+  test('02-print-jobs-empty', async ({ authenticatedPage, apiMock }) => {
+    // Mock with empty data
+    await apiMock.mockAllEndpoints({ loginRequired: false, emptyData: true });
+
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToJobs();
+
+    await authenticatedPage.waitForSelector(
+      '[data-testid="empty-state"], .empty-state, main',
+      { timeout: 5000 }
+    ).catch(() => {});
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    await captureFullPage(authenticatedPage, 'print-jobs-empty.png', 'jobs');
+  });
+
+  test('03-job-details-dialog', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToJobs();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Click on first job row to open details
+    const jobRow = authenticatedPage.locator('tr, .v-list-item, .job-item').first();
+    if (await jobRow.isVisible().catch(() => false)) {
+      await jobRow.click();
+      await authenticatedPage.waitForTimeout(1000);
+    }
+
+    await captureFullPage(authenticatedPage, 'job-details-dialog.png', 'jobs');
+  });
+
+  test('04-job-details-with-statistics', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToJobs();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Click on a completed job to see full statistics
+    const completedJob = authenticatedPage.locator('tr, .job-item').filter({ hasText: /completed/i }).first();
+    if (await completedJob.isVisible().catch(() => false)) {
+      await completedJob.click();
+      await authenticatedPage.waitForTimeout(1000);
+    } else {
+      // Fallback to first job
+      const jobRow = authenticatedPage.locator('tr, .job-item').first();
+      await jobRow.click().catch(() => {});
+      await authenticatedPage.waitForTimeout(1000);
+    }
+
+    await captureFullPage(authenticatedPage, 'job-details-with-statistics.png', 'jobs');
+  });
+
+  test('05-jobs-filter-panel', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToJobs();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Look for filter button or panel
+    const filterBtn = authenticatedPage.locator('button').filter({ hasText: /filter/i }).first();
+    if (await filterBtn.isVisible().catch(() => false)) {
+      await filterBtn.click();
+      await authenticatedPage.waitForTimeout(500);
+    }
+
+    await captureFullPage(authenticatedPage, 'jobs-filter-panel.png', 'jobs');
+  });
+
+  test('06-jobs-by-status-completed', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToJobs();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Try to filter by completed status
+    const statusFilter = authenticatedPage.locator('select, .v-select').filter({ hasText: /status/i }).first();
+    if (await statusFilter.isVisible().catch(() => false)) {
+      await statusFilter.click();
+      await authenticatedPage.waitForTimeout(300);
+
+      const completedOption = authenticatedPage.locator('.v-list-item').filter({ hasText: /completed/i }).first();
+      await completedOption.click().catch(() => {});
+      await authenticatedPage.waitForTimeout(500);
+    }
+
+    await captureFullPage(authenticatedPage, 'jobs-by-status-completed.png', 'jobs');
+  });
+
+  test('07-jobs-by-status-failed', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToJobs();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Try to filter by failed status
+    const statusFilter = authenticatedPage.locator('select, .v-select').filter({ hasText: /status/i }).first();
+    if (await statusFilter.isVisible().catch(() => false)) {
+      await statusFilter.click();
+      await authenticatedPage.waitForTimeout(300);
+
+      const failedOption = authenticatedPage.locator('.v-list-item').filter({ hasText: /failed/i }).first();
+      await failedOption.click().catch(() => {});
+      await authenticatedPage.waitForTimeout(500);
+    }
+
+    await captureFullPage(authenticatedPage, 'jobs-by-status-failed.png', 'jobs');
+  });
+});

package/screenshots/suites/07-queue.screenshots.spec.ts

@@ -0,0 +1,86 @@
+import { test, expect } from '../fixtures/test-fixtures';
+import { captureFullPage } from '../utils';
+import { createNavigationHelper } from '../helpers/navigation.helper';
+
+/**
+ * Queue Screenshots
+ * Captures: Queue view with pending jobs
+ */
+test.describe('Queue Screenshots', () => {
+  test.beforeEach(async ({ apiMock }) => {
+    await apiMock.mockAllEndpoints({ loginRequired: false });
+  });
+
+  test('01-queue-view', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToQueue();
+
+    // Wait for queue to load
+    await authenticatedPage.waitForSelector(
+      '[data-testid="queue"], .queue, main',
+      { timeout: 5000 }
+    ).catch(() => {});
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    await captureFullPage(authenticatedPage, 'queue-view.png', 'queue');
+  });
+
+  test('02-queue-empty', async ({ authenticatedPage, apiMock }) => {
+    // Mock with empty data
+    await apiMock.mockAllEndpoints({ loginRequired: false, emptyData: true });
+
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToQueue();
+
+    await authenticatedPage.waitForSelector(
+      '[data-testid="empty-state"], .empty-state, main',
+      { timeout: 5000 }
+    ).catch(() => {});
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    await captureFullPage(authenticatedPage, 'queue-empty.png', 'queue');
+  });
+
+  test('03-queue-with-jobs', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToQueue();
+
+    await authenticatedPage.waitForTimeout(1500);
+
+    await captureFullPage(authenticatedPage, 'queue-with-jobs.png', 'queue');
+  });
+
+  test('04-queue-job-context-menu', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToQueue();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Right-click on a queue item
+    const queueItem = authenticatedPage.locator('.queue-item, [data-testid="queue-item"], tr').first();
+    if (await queueItem.isVisible().catch(() => false)) {
+      await queueItem.click({ button: 'right' });
+      await authenticatedPage.waitForTimeout(500);
+    }
+
+    await captureFullPage(authenticatedPage, 'queue-job-context-menu.png', 'queue');
+  });
+
+  test('05-queue-reorder-drag', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToQueue();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Hover over a queue item to show drag handle
+    const queueItem = authenticatedPage.locator('.queue-item, [data-testid="queue-item"]').first();
+    if (await queueItem.isVisible().catch(() => false)) {
+      await queueItem.hover();
+      await authenticatedPage.waitForTimeout(500);
+    }
+
+    await captureFullPage(authenticatedPage, 'queue-reorder-drag.png', 'queue');
+  });
+});

package/screenshots/suites/08-files.screenshots.spec.ts

@@ -0,0 +1,142 @@
+import { test, expect } from '../fixtures/test-fixtures';
+import { captureFullPage } from '../utils';
+import { createNavigationHelper } from '../helpers/navigation.helper';
+import { createDialogHelper } from '../helpers/dialog.helper';
+
+/**
+ * Files Screenshots
+ * Captures: File browser, file operations
+ */
+test.describe('Files Screenshots', () => {
+  test.beforeEach(async ({ apiMock }) => {
+    await apiMock.mockAllEndpoints({ loginRequired: false });
+  });
+
+  test('01-files-browser', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToFiles();
+
+    // Wait for file browser to load
+    await authenticatedPage.waitForSelector(
+      '[data-testid="files-browser"], .files-browser, main',
+      { timeout: 5000 }
+    ).catch(() => {});
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    await captureFullPage(authenticatedPage, 'files-browser.png', 'files');
+  });
+
+  test('02-files-empty', async ({ authenticatedPage, apiMock }) => {
+    // Mock with empty data
+    await apiMock.mockAllEndpoints({ loginRequired: false, emptyData: true });
+
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToFiles();
+
+    await authenticatedPage.waitForSelector(
+      '[data-testid="empty-state"], .empty-state, main',
+      { timeout: 5000 }
+    ).catch(() => {});
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    await captureFullPage(authenticatedPage, 'files-empty.png', 'files');
+  });
+
+  test('03-file-upload-dialog', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToFiles();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Click upload button
+    const uploadBtn = authenticatedPage.locator('button').filter({ hasText: /upload/i }).first();
+    if (await uploadBtn.isVisible().catch(() => false)) {
+      await uploadBtn.click();
+      await authenticatedPage.waitForTimeout(500);
+    }
+
+    await captureFullPage(authenticatedPage, 'file-upload-dialog.png', 'files');
+  });
+
+  test('04-file-context-menu', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToFiles();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Right-click on a file
+    const fileItem = authenticatedPage.locator('.file-item, [data-testid="file-item"], tr').filter({ hasText: /\.gcode|\.stl/i }).first();
+    if (await fileItem.isVisible().catch(() => false)) {
+      await fileItem.click({ button: 'right' });
+      await authenticatedPage.waitForTimeout(500);
+    }
+
+    await captureFullPage(authenticatedPage, 'file-context-menu.png', 'files');
+  });
+
+  test('05-file-details-dialog', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToFiles();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Click on a file to open details
+    const fileItem = authenticatedPage.locator('.file-item, [data-testid="file-item"], tr').first();
+    if (await fileItem.isVisible().catch(() => false)) {
+      await fileItem.click();
+      await authenticatedPage.waitForTimeout(1000);
+    }
+
+    await captureFullPage(authenticatedPage, 'file-details-dialog.png', 'files');
+  });
+
+  test('06-files-grid-view', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToFiles();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Try to switch to grid view
+    const gridViewBtn = authenticatedPage.locator('button[aria-label*="grid" i], .view-toggle').first();
+    if (await gridViewBtn.isVisible().catch(() => false)) {
+      await gridViewBtn.click();
+      await authenticatedPage.waitForTimeout(500);
+    }
+
+    await captureFullPage(authenticatedPage, 'files-grid-view.png', 'files');
+  });
+
+  test('07-files-list-view', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToFiles();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Try to switch to list view (may already be in list view)
+    const listViewBtn = authenticatedPage.locator('button[aria-label*="list" i], .view-toggle').first();
+    if (await listViewBtn.isVisible().catch(() => false)) {
+      await listViewBtn.click();
+      await authenticatedPage.waitForTimeout(500);
+    }
+
+    await captureFullPage(authenticatedPage, 'files-list-view.png', 'files');
+  });
+
+  test('08-file-print-dialog', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToFiles();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Click print action on a file
+    const printBtn = authenticatedPage.locator('button').filter({ hasText: /print/i }).first();
+    if (await printBtn.isVisible().catch(() => false)) {
+      await printBtn.click();
+      await authenticatedPage.waitForTimeout(1000);
+    }
+
+    await captureFullPage(authenticatedPage, 'file-print-dialog.png', 'files');
+  });
+});

package/screenshots/suites/09-settings.screenshots.spec.ts

@@ -0,0 +1,130 @@
+import { test, expect } from '../fixtures/test-fixtures';
+import { captureFullPage } from '../utils';
+import { createNavigationHelper } from '../helpers/navigation.helper';
+
+/**
+ * Settings Screenshots
+ * Captures: All settings pages based on actual routes from setting.constants.ts
+ */
+test.describe('Settings Screenshots', () => {
+  test.beforeEach(async ({ apiMock }) => {
+    await apiMock.mockAllEndpoints({ loginRequired: false });
+  });
+
+  test('01-settings-overview', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToSettings();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    await captureFullPage(authenticatedPage, 'settings-overview.png', 'settings');
+  });
+
+  test('02-settings-floors', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToSettings('floors');
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    await captureFullPage(authenticatedPage, 'settings-floors.png', 'settings');
+  });
+
+  test('03-settings-printer', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToSettings('printer');
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    await captureFullPage(authenticatedPage, 'settings-printer.png', 'settings');
+  });
+
+  test('04-settings-emergency-commands', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToSettings('emergency-commands');
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    await captureFullPage(authenticatedPage, 'settings-emergency-commands.png', 'settings');
+  });
+
+  test('05-settings-server-protection', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToSettings('server-protection');
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    await captureFullPage(authenticatedPage, 'settings-server-protection.png', 'settings');
+  });
+
+  test('06-settings-user-management', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToSettings('user-management');
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    await captureFullPage(authenticatedPage, 'settings-user-management.png', 'settings');
+  });
+
+  test('07-settings-account', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToSettings('account');
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    await captureFullPage(authenticatedPage, 'settings-account.png', 'settings');
+  });
+
+  test('08-settings-software-upgrade', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToSettings('software-upgrade');
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    await captureFullPage(authenticatedPage, 'settings-software-upgrade.png', 'settings');
+  });
+
+  test('09-settings-diagnostics', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToSettings('diagnostics');
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    await captureFullPage(authenticatedPage, 'settings-diagnostics.png', 'settings');
+  });
+
+  test('10-settings-experimental', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToSettings('experimental');
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    await captureFullPage(authenticatedPage, 'settings-experimental.png', 'settings');
+  });
+
+  test('11-settings-slicer', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToSettings('slicer');
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    await captureFullPage(authenticatedPage, 'settings-slicer.png', 'settings');
+  });
+
+  test('12-settings-debug-socket', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToSettings('debug-socket');
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    await captureFullPage(authenticatedPage, 'settings-debug-socket.png', 'settings');
+  });
+
+  test('13-settings-about', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToSettings('about');
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    await captureFullPage(authenticatedPage, 'settings-about.png', 'settings');
+  });
+});