@fdm-monster/client-next 2.2.2 → 2.2.3

package/screenshots/suites/10-panels-dialogs.screenshots.spec.ts

@@ -0,0 +1,245 @@
+import { test, expect } from '../fixtures/test-fixtures';
+import { captureFullPage } from '../utils';
+import { createNavigationHelper } from '../helpers/navigation.helper';
+import { createDialogHelper } from '../helpers/dialog.helper';
+
+/**
+ * Panels and Dialogs Screenshots
+ * Captures: YAML import/export, OctoFarm import, menus, various dialogs
+ */
+test.describe('Panels and Dialogs Screenshots', () => {
+  test.beforeEach(async ({ apiMock }) => {
+    await apiMock.mockAllEndpoints({ loginRequired: false });
+  });
+
+  test('01-yaml-export-panel', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToSettings();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Look for YAML export button
+    const exportBtn = authenticatedPage.locator('button').filter({ hasText: /yaml.*export|export.*yaml/i }).first();
+    if (await exportBtn.isVisible().catch(() => false)) {
+      await exportBtn.click();
+      await authenticatedPage.waitForTimeout(1000);
+    }
+
+    await captureFullPage(authenticatedPage, 'yaml-export-panel.png', 'dialogs');
+  });
+
+  test('02-yaml-import-panel', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToSettings();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Look for YAML import button
+    const importBtn = authenticatedPage.locator('button').filter({ hasText: /yaml.*import|import.*yaml/i }).first();
+    if (await importBtn.isVisible().catch(() => false)) {
+      await importBtn.click();
+      await authenticatedPage.waitForTimeout(1000);
+    }
+
+    await captureFullPage(authenticatedPage, 'yaml-import-panel.png', 'dialogs');
+  });
+
+  test('03-octofarm-import-panel', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToSettings();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Look for OctoFarm import button
+    const importBtn = authenticatedPage.locator('button').filter({ hasText: /octofarm.*import|import.*octofarm/i }).first();
+    if (await importBtn.isVisible().catch(() => false)) {
+      await importBtn.click();
+      await authenticatedPage.waitForTimeout(1000);
+    }
+
+    await captureFullPage(authenticatedPage, 'octofarm-import-panel.png', 'dialogs');
+  });
+
+  test('04-jobs-menu', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToJobs();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Open jobs menu
+    const menuBtn = authenticatedPage.locator('button[aria-label*="menu" i], .menu-btn').first();
+    if (await menuBtn.isVisible().catch(() => false)) {
+      await menuBtn.click();
+      await authenticatedPage.waitForTimeout(500);
+    }
+
+    await captureFullPage(authenticatedPage, 'jobs-menu.png', 'dialogs');
+  });
+
+  test('05-printer-status-menu', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToPrinterGrid();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Click on a printer to open status menu
+    const printerCard = authenticatedPage.locator('.printer-card, [data-testid="printer-card"]').first();
+    if (await printerCard.isVisible().catch(() => false)) {
+      // Look for menu button on printer card
+      const menuBtn = printerCard.locator('button[aria-label*="menu" i], .menu-btn').first();
+      if (await menuBtn.isVisible().catch(() => false)) {
+        await menuBtn.click();
+        await authenticatedPage.waitForTimeout(500);
+      }
+    }
+
+    await captureFullPage(authenticatedPage, 'printer-status-menu.png', 'dialogs');
+  });
+
+  test('06-printer-dialog-create', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToPrinters();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    const addBtn = authenticatedPage.locator('button').filter({ hasText: /add|create|new/i }).first();
+    await addBtn.click().catch(() => {});
+
+    const dialog = createDialogHelper(authenticatedPage);
+    await dialog.waitForDialog();
+
+    await authenticatedPage.waitForTimeout(500);
+
+    await captureFullPage(authenticatedPage, 'printer-dialog-create.png', 'dialogs');
+  });
+
+  test('07-printer-dialog-update', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToPrinters();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Click edit on first printer
+    const editBtn = authenticatedPage.locator('button').filter({ hasText: /edit/i }).first();
+    if (await editBtn.isVisible().catch(() => false)) {
+      await editBtn.click();
+      await authenticatedPage.waitForTimeout(1000);
+    }
+
+    await captureFullPage(authenticatedPage, 'printer-dialog-update.png', 'dialogs');
+  });
+
+  test('08-printer-dialog-duplicate', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToPrinters();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Look for duplicate button
+    const duplicateBtn = authenticatedPage.locator('button').filter({ hasText: /duplicate/i }).first();
+    if (await duplicateBtn.isVisible().catch(() => false)) {
+      await duplicateBtn.click();
+      await authenticatedPage.waitForTimeout(1000);
+    }
+
+    await captureFullPage(authenticatedPage, 'printer-dialog-duplicate.png', 'dialogs');
+  });
+
+  test('09-printer-test-connection-dialog', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToPrinters();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Look for test connection button
+    const testBtn = authenticatedPage.locator('button').filter({ hasText: /test.*connection|connection.*test/i }).first();
+    if (await testBtn.isVisible().catch(() => false)) {
+      await testBtn.click();
+      await authenticatedPage.waitForTimeout(1500);
+    }
+
+    await captureFullPage(authenticatedPage, 'printer-test-connection-dialog.png', 'dialogs');
+  });
+
+  test('10-printer-type-dropdown', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToPrinters();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Open create printer dialog
+    const addBtn = authenticatedPage.locator('button').filter({ hasText: /add|create/i }).first();
+    await addBtn.click().catch(() => {});
+
+    const dialog = createDialogHelper(authenticatedPage);
+    await dialog.waitForDialog();
+
+    await authenticatedPage.waitForTimeout(500);
+
+    // Click on printer type dropdown
+    const typeSelect = authenticatedPage.locator('.v-dialog select, .v-dialog .v-select').filter({ hasText: /type/i }).first();
+    if (await typeSelect.isVisible().catch(() => false)) {
+      await typeSelect.click();
+      await authenticatedPage.waitForTimeout(500);
+    }
+
+    await captureFullPage(authenticatedPage, 'printer-type-dropdown.png', 'dialogs');
+  });
+
+  test('11-printer-force-save-warning', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToPrinters();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Open create printer dialog and try to save without required fields
+    const addBtn = authenticatedPage.locator('button').filter({ hasText: /add|create/i }).first();
+    await addBtn.click().catch(() => {});
+
+    const dialog = createDialogHelper(authenticatedPage);
+    await dialog.waitForDialog();
+
+    await authenticatedPage.waitForTimeout(500);
+
+    // Try to save (should show validation or force save option)
+    const saveBtn = authenticatedPage.locator('.v-dialog button').filter({ hasText: /save|create/i }).first();
+    if (await saveBtn.isVisible().catch(() => false)) {
+      await saveBtn.click();
+      await authenticatedPage.waitForTimeout(1000);
+    }
+
+    await captureFullPage(authenticatedPage, 'printer-force-save-warning.png', 'dialogs');
+  });
+
+  test('12-edit-floor-panel', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToSettings('floors');
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Click on first floor to edit
+    const floorItem = authenticatedPage.locator('.floor-item, [data-testid="floor-item"], tr').first();
+    if (await floorItem.isVisible().catch(() => false)) {
+      await floorItem.click();
+      await authenticatedPage.waitForTimeout(1000);
+    }
+
+    await captureFullPage(authenticatedPage, 'edit-floor-panel.png', 'dialogs');
+  });
+
+  test('13-delete-confirmation-dialog', async ({ authenticatedPage }) => {
+    const nav = createNavigationHelper(authenticatedPage);
+    await nav.goToPrinters();
+
+    await authenticatedPage.waitForTimeout(1000);
+
+    // Look for delete button
+    const deleteBtn = authenticatedPage.locator('button').filter({ hasText: /delete|remove/i }).first();
+    if (await deleteBtn.isVisible().catch(() => false)) {
+      await deleteBtn.click();
+      await authenticatedPage.waitForTimeout(500);
+    }
+
+    await captureFullPage(authenticatedPage, 'delete-confirmation-dialog.png', 'dialogs');
+  });
+});

package/screenshots/utils.ts

@@ -0,0 +1,216 @@
+import { Page } from '@playwright/test';
+import * as path from 'node:path';
+import * as fs from 'node:fs';
+
+/**
+ * Utility functions for taking documentation screenshots
+ */
+
+/**
+ * Ensure a directory exists, create it if not
+ */
+export function ensureDir(dirPath: string): void {
+  if (!fs.existsSync(dirPath)) {
+    fs.mkdirSync(dirPath, { recursive: true });
+  }
+}
+
+/**
+ * Get screenshot output path
+ */
+export function getScreenshotPath(filename: string, subdir?: string): string {
+  const baseDir = path.join(__dirname, 'output');
+  const targetDir = subdir ? path.join(baseDir, subdir) : baseDir;
+  ensureDir(targetDir);
+  return path.join(targetDir, filename);
+}
+
+/**
+ * Wait for page to be fully loaded and animations to complete
+ */
+export async function waitForPageReady(page: Page, timeout = 1000): Promise<void> {
+  await page.waitForLoadState('networkidle');
+  await page.waitForTimeout(timeout); // Allow animations to complete
+}
+
+/**
+ * Capture a full page screenshot with consistent settings
+ */
+export async function captureFullPage(
+  page: Page,
+  filename: string,
+  subdir?: string
+): Promise<void> {
+  await waitForPageReady(page);
+  await page.screenshot({
+    path: getScreenshotPath(filename, subdir),
+    fullPage: true,
+  });
+}
+
+/**
+ * Capture viewport screenshot with consistent settings
+ */
+export async function captureViewport(
+  page: Page,
+  filename: string,
+  subdir?: string
+): Promise<void> {
+  await waitForPageReady(page);
+  await page.screenshot({
+    path: getScreenshotPath(filename, subdir),
+    fullPage: false,
+  });
+}
+
+/**
+ * Capture element screenshot
+ */
+export async function captureElement(
+  page: Page,
+  selector: string,
+  filename: string,
+  subdir?: string
+): Promise<void> {
+  await waitForPageReady(page);
+  const element = page.locator(selector).first();
+
+  if (await element.count() === 0) {
+    console.warn(`Element not found: ${selector}`);
+    return;
+  }
+
+  await element.screenshot({
+    path: getScreenshotPath(filename, subdir),
+  });
+}
+
+/**
+ * Set up authentication (example - adjust based on your auth implementation)
+ */
+export async function setupAuth(page: Page, token?: string): Promise<void> {
+  if (token) {
+    await page.goto('/');
+    await page.evaluate((authToken) => {
+      localStorage.setItem('auth-token', authToken);
+    }, token);
+  } else {
+    // Default login flow
+    await page.goto('/login');
+    // Add your login logic here
+  }
+}
+
+/**
+ * Capture screenshots at multiple viewport sizes
+ */
+export async function captureResponsive(
+  page: Page,
+  route: string,
+  baseFilename: string,
+  viewports: Array<{ width: number; height: number; name: string }>,
+  subdir?: string
+): Promise<void> {
+  for (const viewport of viewports) {
+    await page.setViewportSize({ width: viewport.width, height: viewport.height });
+    await page.goto(route);
+    await waitForPageReady(page);
+
+    const filename = `${baseFilename}-${viewport.name}.png`;
+    await page.screenshot({
+      path: getScreenshotPath(filename, subdir),
+      fullPage: false,
+    });
+  }
+}
+
+/**
+ * Common viewport presets
+ */
+export const VIEWPORTS = {
+  DESKTOP_FHD: { width: 1920, height: 1080, name: 'desktop-1920x1080' },
+  DESKTOP_HD: { width: 1366, height: 768, name: 'desktop-1366x768' },
+  DESKTOP_LAPTOP: { width: 1280, height: 720, name: 'laptop-1280x720' },
+  TABLET_PORTRAIT: { width: 768, height: 1024, name: 'tablet-portrait' },
+  TABLET_LANDSCAPE: { width: 1024, height: 768, name: 'tablet-landscape' },
+  MOBILE_IPHONE_SE: { width: 375, height: 667, name: 'mobile-iphone-se' },
+  MOBILE_IPHONE_12: { width: 390, height: 844, name: 'mobile-iphone-12' },
+  MOBILE_PIXEL_5: { width: 393, height: 851, name: 'mobile-pixel-5' },
+};
+
+/**
+ * Capture both light and dark theme screenshots
+ */
+export async function captureBothThemes(
+  page: Page,
+  route: string,
+  baseFilename: string,
+  themeToggleSelector: string,
+  subdir?: string
+): Promise<void> {
+  await page.goto(route);
+  await waitForPageReady(page);
+
+  // Capture light theme
+  await page.screenshot({
+    path: getScreenshotPath(`${baseFilename}-light.png`, subdir),
+    fullPage: false,
+  });
+
+  // Toggle to dark theme
+  const themeToggle = page.locator(themeToggleSelector);
+  if (await themeToggle.count() > 0) {
+    await themeToggle.click();
+    await page.waitForTimeout(500); // Wait for theme transition
+
+    // Capture dark theme
+    await page.screenshot({
+      path: getScreenshotPath(`${baseFilename}-dark.png`, subdir),
+      fullPage: false,
+    });
+  }
+}
+
+/**
+ * Hide elements before taking screenshot (useful for hiding dynamic content)
+ */
+export async function hideElements(page: Page, selectors: string[]): Promise<void> {
+  for (const selector of selectors) {
+    await page.locator(selector).evaluateAll((elements) => {
+      elements.forEach((el: HTMLElement) => {
+        el.style.visibility = 'hidden';
+      });
+    });
+  }
+}
+
+/**
+ * Mask sensitive data in screenshots
+ */
+export async function maskElements(page: Page, selectors: string[]): Promise<void> {
+  for (const selector of selectors) {
+    await page.locator(selector).evaluateAll((elements) => {
+      elements.forEach((el: HTMLElement) => {
+        el.style.filter = 'blur(10px)';
+      });
+    });
+  }
+}
+
+/**
+ * Wait for specific element to be visible
+ */
+export async function waitForElement(
+  page: Page,
+  selector: string,
+  timeout = 5000
+): Promise<boolean> {
+  try {
+    await page.waitForSelector(selector, { timeout, state: 'visible' });
+    return true;
+  } catch {
+    console.warn(`Element not visible within timeout: ${selector}`);
+    return false;
+  }
+}
+

package/vitest.config.ts

@@ -6,6 +6,14 @@ export default mergeConfig(viteConfig, defineConfig({
     globals: true,
     setupFiles: ['./test/setup-axios-mock.ts'],
     environment: 'jsdom',
+    exclude: [
+      '**/node_modules/**',
+      '**/dist/**',
+      '**/cypress/**',
+      '**/.{idea,git,cache,output,temp}/**',
+      '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*',
+      '**/screenshots/**', // Exclude Playwright screenshot tests
+    ],
     server: {
       deps: {
         inline: ['vuetify'],