@nice2dev/testing 1.0.10

package/dist/index.d.ts

@@ -0,0 +1,1618 @@
+import { BrowserContext } from '@playwright/test';
+import { default as default_2 } from 'react';
+import { expect } from 'vitest';
+import * as fc from 'fast-check';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { Page } from '@playwright/test';
+import * as React_2 from 'react';
+import { ReactElement } from 'react';
+import { ReactNode } from 'react';
+import { StorybookConfig } from '@storybook/react-vite';
+
+export declare interface A11yAuditResult {
+    passes: number;
+    violations: A11yViolation[];
+    incomplete: number;
+    inapplicable: number;
+    /** WCAG compliance score (%) */
+    complianceScore: number;
+}
+
+export declare interface A11yViolation {
+    ruleId: string;
+    impact: 'critical' | 'serious' | 'moderate' | 'minor';
+    description: string;
+    helpUrl: string;
+    nodes: Array<{
+        selector: string;
+        html: string;
+        failureSummary: string;
+    }>;
+}
+
+export declare interface AccessibilityAuditConfig {
+    /** WCAG level */
+    level: WcagLevel;
+    /** Rules to include/exclude */
+    includeRules?: string[];
+    excludeRules?: string[];
+    /** Components to audit */
+    componentSelectors: string[];
+    /** Axe-core configuration */
+    axeConfig?: Record<string, unknown>;
+}
+
+export declare const arbitraries: {
+    /** Non-empty string */
+    nonEmptyString: () => fc.Arbitrary<string>;
+    /** Non-empty array */
+    nonEmptyArray: <T>(arb: fc.Arbitrary<T>) => fc.Arbitrary<T[]>;
+    /** Unique array (no duplicates) */
+    uniqueArray: <T>(arb: fc.Arbitrary<T>) => fc.Arbitrary<T[]>;
+    /** Valid CSS color hex (#RGB or #RRGGBB) */
+    hexColor: () => fc.Arbitrary<string>;
+    /** RGB color */
+    rgbColor: () => fc.Arbitrary<{
+        r: number;
+        g: number;
+        b: number;
+    }>;
+    /** HSL color */
+    hslColor: () => fc.Arbitrary<{
+        h: number;
+        s: number;
+        l: number;
+    }>;
+    /** CSS size value (e.g., '10px', '2rem') */
+    cssSize: () => fc.Arbitrary<string>;
+    /** CSS spacing (positive values only) */
+    cssSpacing: () => fc.Arbitrary<string>;
+    /** CSS border-radius */
+    borderRadius: () => fc.Arbitrary<string>;
+    /** CSS z-index */
+    zIndex: () => fc.Arbitrary<number>;
+    /** Viewport dimensions */
+    viewport: () => fc.Arbitrary<{
+        width: number;
+        height: number;
+    }>;
+    /** Grid columns (1-12) */
+    gridColumns: () => fc.Arbitrary<number>;
+    /** Flex direction */
+    flexDirection: () => fc.Arbitrary<string>;
+    /** Flex justify content */
+    justifyContent: () => fc.Arbitrary<string>;
+    /** Flex align items */
+    alignItems: () => fc.Arbitrary<string>;
+    /** Valid HTML element tag */
+    htmlTag: () => fc.Arbitrary<string>;
+    /** Valid ARIA role */
+    ariaRole: () => fc.Arbitrary<string>;
+    /** Event handler name */
+    eventHandler: () => fc.Arbitrary<string>;
+    /** Email address */
+    email: () => fc.Arbitrary<string>;
+    /** UUID */
+    uuid: () => fc.Arbitrary<string>;
+    /** URL */
+    url: () => fc.Arbitrary<string>;
+    /** ISO date string */
+    isoDate: () => fc.Arbitrary<string>;
+    /** Timestamp (milliseconds) */
+    timestamp: () => fc.Arbitrary<number>;
+    /** Phone number (simple format) */
+    phone: () => fc.Arbitrary<string>;
+    /** Form field value (string, number, or boolean) */
+    fieldValue: () => fc.Arbitrary<string | number | boolean>;
+    /** Form validation state */
+    validationState: () => fc.Arbitrary<{
+        valid: boolean;
+        error: string | undefined;
+        touched: boolean;
+        dirty: boolean;
+    }>;
+    /** Table row */
+    tableRow: <T extends Record<string, fc.Arbitrary<unknown>>>(schema: T) => fc.Arbitrary<{
+        [x: string]: unknown;
+        id: string;
+    }>;
+    /** Table data */
+    tableData: <T extends Record<string, unknown>>(rowArb: fc.Arbitrary<T>, size?: {
+        minLength?: number;
+        maxLength?: number;
+    }) => fc.Arbitrary<T[]>;
+    /** Animation duration (ms) */
+    duration: () => fc.Arbitrary<number>;
+    /** Animation easing */
+    easing: () => fc.Arbitrary<string>;
+    /** Animation delay (ms) */
+    delay: () => fc.Arbitrary<number>;
+};
+
+/**
+ * Run axe-core accessibility check
+ *
+ * @example
+ * ```ts
+ * test('accessibility', async ({ page }) => {
+ *   await page.goto('/');
+ *   const results = await axeCheck(page);
+ *   expect(results.violations).toHaveLength(0);
+ * });
+ * ```
+ */
+export declare function axeCheck(page: Page, options?: {
+    include?: string[];
+    exclude?: string[];
+    rules?: Record<string, {
+        enabled: boolean;
+    }>;
+    tags?: string[];
+}): Promise<{
+    violations: AxeViolation[];
+    passes: number;
+    incomplete: number;
+}>;
+
+export declare interface AxeViolation {
+    id: string;
+    impact: string;
+    description: string;
+    help: string;
+    helpUrl: string;
+    nodes: Array<{
+        html: string;
+        target: string[];
+        failureSummary: string;
+    }>;
+}
+
+export declare interface BenchmarkResult {
+    component: string;
+    metric: string;
+    mean: number;
+    median: number;
+    p95: number;
+    p99: number;
+    min: number;
+    max: number;
+    stdDev: number;
+    regressionDetected: boolean;
+}
+
+/**
+ * Browser configurations for cross-browser testing
+ */
+export declare const BROWSER_CONFIGS: {
+    readonly chromium: {
+        readonly name: "chromium";
+        readonly channel: undefined;
+    };
+    readonly chrome: {
+        readonly name: "chromium";
+        readonly channel: "chrome";
+    };
+    readonly firefox: {
+        readonly name: "firefox";
+    };
+    readonly webkit: {
+        readonly name: "webkit";
+    };
+    readonly edge: {
+        readonly name: "chromium";
+        readonly channel: "msedge";
+    };
+};
+
+/**
+ * Check if element has proper ARIA attributes for a11y compliance.
+ * Returns an array of violations (empty = passed).
+ */
+export declare function checkAriaCompliance(element: HTMLElement): string[];
+
+/**
+ * Run property test and collect statistics
+ */
+export declare function checkWithStats<T extends unknown[]>(arbitraries: {
+    [K in keyof T]: fc.Arbitrary<T[K]>;
+}, predicate: (...args: T) => void, config?: PropertyTestConfig): fc.RunDetails<T>;
+
+/**
+ * Chromatic CI script configuration
+ */
+export declare const chromaticCIConfig: {
+    projectToken: string | undefined;
+    buildScriptName: string;
+    exitZeroOnChanges: boolean;
+    exitOnceUploaded: boolean;
+    onlyChanged: boolean;
+    externals: string[];
+    skip: string;
+    traceChanged: string;
+    modes: {
+        light: {
+            theme: string;
+        };
+        dark: {
+            theme: string;
+        };
+    };
+};
+
+/**
+ * Default Chromatic parameters for stories
+ */
+export declare const chromaticDefaults: {
+    viewports: number[];
+    diffThreshold: number;
+    delay: number;
+    pauseAnimationAtEnd: boolean;
+};
+
+/**
+ * Chromatic modes configuration for Storybook
+ * Add this to .storybook/preview.tsx
+ *
+ * @example
+ * ```tsx
+ * // .storybook/preview.tsx
+ * import { chromaticModes } from '@nice2dev/testing';
+ *
+ * export const parameters = {
+ *   chromatic: {
+ *     modes: chromaticModes,
+ *   },
+ * };
+ * ```
+ */
+export declare const chromaticModes: {
+    mobile: {
+        viewport: {
+            width: number;
+            height: number;
+        };
+    };
+    tablet: {
+        viewport: {
+            width: number;
+            height: number;
+        };
+    };
+    desktop: {
+        viewport: {
+            width: number;
+            height: number;
+        };
+    };
+    wide: {
+        viewport: {
+            width: number;
+            height: number;
+        };
+    };
+    light: {
+        theme: string;
+        backgrounds: {
+            value: string;
+        };
+    };
+    dark: {
+        theme: string;
+        backgrounds: {
+            value: string;
+        };
+    };
+    highContrast: {
+        theme: string;
+        backgrounds: {
+            value: string;
+        };
+    };
+    rtl: {
+        globals: {
+            direction: string;
+        };
+    };
+};
+
+/**
+ * Clean up HTML for snapshot testing by removing dynamic attributes.
+ */
+export declare function cleanHtmlForSnapshot(html: string): string;
+
+/**
+ * Command type for model-based testing
+ */
+export declare interface Command<Model, Real> {
+    check(model: Readonly<Model>): boolean;
+    run(model: Model, real: Real): void | Promise<void>;
+    toString(): string;
+}
+
+export declare interface CrashReportingConfig {
+    /** DSN / endpoint */
+    dsn: string;
+    /** Environment */
+    environment: 'development' | 'staging' | 'production';
+    /** Release tag */
+    release: string;
+    /** Source maps */
+    enableSourceMaps: boolean;
+    /** Breadcrumbs */
+    maxBreadcrumbs: number;
+    /** User context */
+    includeUserContext: boolean;
+    /** Attachments (screenshots, logs) */
+    includeScreenshot: boolean;
+}
+
+/**
+ * Create a mock data source for testing data-bound components.
+ *
+ * @example
+ * const ds = createMockDataSource({
+ *   data: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }],
+ * });
+ * render(<NiceDataGrid dataSource={ds} columns={[...]} />);
+ */
+export declare function createMockDataSource<T extends Record<string, unknown>>(options: MockDataSourceOptions<T>): MockDataSource<T>;
+
+/**
+ * RTL decorator for Storybook
+ */
+export declare function createRTLDecorator(): (Story: React_2.ComponentType, context: {
+    globals: {
+        direction?: string;
+    };
+}) => JSX_2.Element;
+
+/**
+ * Create test context with common utilities
+ */
+export declare function createTestContext(page: Page, context: BrowserContext): {
+    page: Page;
+    context: BrowserContext;
+    helpers: NiceTestHelpers;
+    axe: () => Promise<{
+        violations: AxeViolation[];
+        passes: number;
+        incomplete: number;
+    }>;
+    mockAPI: (mocks: Parameters<typeof mockAPI>[1]) => Promise<void>;
+    mockGraphQL: (endpoint: string, mocks: Record<string, unknown>) => Promise<void>;
+    performance: () => Promise<{
+        fcp: number;
+        lcp: number;
+        cls: number;
+        ttfb: number;
+        tti: number;
+    }>;
+};
+
+/**
+ * Theme decorator for Storybook
+ * Apply themes via globals
+ */
+export declare function createThemeDecorator(): (Story: React_2.ComponentType, context: {
+    globals: {
+        theme?: string;
+    };
+}) => JSX_2.Element;
+
+/**
+ * Helper to create .storybook/preview.ts content
+ */
+export declare function createVisualPreviewConfig(): string;
+
+/**
+ * Combined decorator for visual testing
+ */
+export declare function createVisualTestDecorator(): (Story: React_2.ComponentType, context: {
+    globals: {
+        theme?: string;
+        direction?: string;
+        reducedMotion?: boolean;
+    };
+}) => JSX_2.Element;
+
+export declare const DEFAULT_BREAKPOINTS: [string, number][];
+
+/**
+ * Default CSS properties to capture in style snapshots
+ */
+export declare const DEFAULT_STYLE_PROPERTIES: string[];
+
+/**
+ * Device configurations for mobile testing
+ */
+export declare const DEVICE_CONFIGS: {
+    readonly 'iPhone 13': {
+        readonly viewport: {
+            readonly width: 390;
+            readonly height: 844;
+        };
+        readonly userAgent: "Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1";
+        readonly deviceScaleFactor: 3;
+        readonly isMobile: true;
+        readonly hasTouch: true;
+    };
+    readonly 'iPhone 14 Pro Max': {
+        readonly viewport: {
+            readonly width: 430;
+            readonly height: 932;
+        };
+        readonly userAgent: "Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1";
+        readonly deviceScaleFactor: 3;
+        readonly isMobile: true;
+        readonly hasTouch: true;
+    };
+    readonly 'iPad Pro': {
+        readonly viewport: {
+            readonly width: 1024;
+            readonly height: 1366;
+        };
+        readonly userAgent: "Mozilla/5.0 (iPad; CPU OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1";
+        readonly deviceScaleFactor: 2;
+        readonly isMobile: true;
+        readonly hasTouch: true;
+    };
+    readonly 'Pixel 7': {
+        readonly viewport: {
+            readonly width: 412;
+            readonly height: 915;
+        };
+        readonly userAgent: "Mozilla/5.0 (Linux; Android 13; Pixel 7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Mobile Safari/537.36";
+        readonly deviceScaleFactor: 2.625;
+        readonly isMobile: true;
+        readonly hasTouch: true;
+    };
+    readonly 'Samsung Galaxy S23': {
+        readonly viewport: {
+            readonly width: 360;
+            readonly height: 780;
+        };
+        readonly userAgent: "Mozilla/5.0 (Linux; Android 13; SM-S911B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Mobile Safari/537.36";
+        readonly deviceScaleFactor: 3;
+        readonly isMobile: true;
+        readonly hasTouch: true;
+    };
+};
+
+/**
+ * Quality & Reliability types (PRO-6.1)
+ *
+ * E2E tests, visual regression, performance benchmarks, a11y audit,
+ * i18n, error boundaries, telemetry, crash reporting, stress/fuzz/load
+ * testing, and security scanning configurations.
+ *
+ * @module @nice2dev/testing/quality
+ */
+export declare interface E2eTestConfig {
+    /** Test runner */
+    runner: 'playwright' | 'cypress' | 'puppeteer';
+    /** Base URL */
+    baseUrl: string;
+    /** Browsers to test */
+    browsers: Array<'chromium' | 'firefox' | 'webkit'>;
+    /** Coverage target (%) */
+    coverageTarget: number;
+    /** Parallel workers */
+    workers: number;
+    /** Timeout per test (ms) */
+    testTimeout: number;
+    /** Retry count on failure */
+    retries: number;
+    /** Output directory */
+    outputDir: string;
+    /** Sharding */
+    sharding?: {
+        total: number;
+        current: number;
+    };
+}
+
+export declare interface E2eTestResult {
+    suiteName: string;
+    passed: number;
+    failed: number;
+    skipped: number;
+    duration: number;
+    coveragePercent: number;
+    failures: Array<{
+        testName: string;
+        error: string;
+        screenshot?: string;
+        trace?: string;
+    }>;
+}
+
+export declare interface ErrorBoundaryConfig {
+    /** Fallback UI component key */
+    fallbackComponent: string;
+    /** Enable recovery */
+    enableRecovery: boolean;
+    /** Max retries */
+    maxRetries: number;
+    /** Error reporting endpoint */
+    reportingEndpoint?: string;
+    /** Ignored errors */
+    ignoredErrors: string[];
+    /** Scope: per-component or per-page */
+    scope: 'component' | 'page' | 'application';
+}
+
+export { expect }
+
+/**
+ * Assert no accessibility violations
+ */
+export declare function expectNoA11yViolations(page: Page): Promise<void>;
+
+export { fc }
+
+/**
+ * Assert that a property holds for all values
+ */
+export declare function forAll<T extends unknown[]>(arbitraries: {
+    [K in keyof T]: fc.Arbitrary<T[K]>;
+}, predicate: (...args: T) => boolean, config?: PropertyTestConfig): void;
+
+export declare interface FuzzTestConfig {
+    /** Target component */
+    component: string;
+    /** Props to fuzz */
+    propsToFuzz: string[];
+    /** Iterations */
+    iterations: number;
+    /** Seed for reproducibility */
+    seed?: number;
+    /** Input generators */
+    generators: Record<string, 'string' | 'number' | 'boolean' | 'array' | 'object' | 'null'>;
+}
+
+export declare interface FuzzTestResult {
+    component: string;
+    iterations: number;
+    crashes: Array<{
+        input: Record<string, unknown>;
+        error: string;
+        seed: number;
+    }>;
+    passed: boolean;
+}
+
+/**
+ * Generate chromatic command for CI
+ */
+export declare function getChromaticCommand(options?: {
+    onlyChanged?: boolean;
+    exitZeroOnChanges?: boolean;
+}): string;
+
+/**
+ * Get all focusable elements within a container.
+ */
+export declare function getFocusableElements(container: HTMLElement): HTMLElement[];
+
+/**
+ * Get computed styles as object for inline snapshot
+ */
+export declare function getStylesSnapshot(element: ReactElement, properties?: string[], options?: SnapshotOptions): Record<string, string>;
+
+export declare interface I18nTestConfig {
+    /** Locales to test */
+    locales: string[];
+    /** RTL locales */
+    rtlLocales: string[];
+    /** Check for missing translation keys */
+    checkMissingKeys: boolean;
+    /** Check for hardcoded strings */
+    checkHardcodedStrings: boolean;
+    /** Pseudo-localization mode */
+    pseudoLocalization: boolean;
+    /** Max string expansion (%) for layout testing */
+    maxExpansion: number;
+}
+
+export declare interface I18nTestResult {
+    locale: string;
+    missingKeys: string[];
+    hardcodedStrings: Array<{
+        file: string;
+        line: number;
+        text: string;
+    }>;
+    layoutOverflows: Array<{
+        component: string;
+        text: string;
+    }>;
+    rtlIssues: string[];
+}
+
+/**
+ * Check if a checkbox/toggle is checked.
+ */
+export declare function isChecked(element: HTMLElement): boolean;
+
+/**
+ * Check if a component is disabled.
+ */
+export declare function isDisabled(element: HTMLElement): boolean;
+
+/**
+ * Check if a component is expanded.
+ */
+export declare function isExpanded(element: HTMLElement): boolean;
+
+/**
+ * Assert that an element is focusable.
+ */
+export declare function isFocusable(element: HTMLElement): boolean;
+
+/**
+ * Check if a component is in loading state.
+ */
+export declare function isLoading(element: HTMLElement): boolean;
+
+export declare interface LoadTestConfig {
+    /** Concurrent users */
+    concurrentUsers: number;
+    /** Ramp-up time (s) */
+    rampUpSeconds: number;
+    /** Duration (s) */
+    durationSeconds: number;
+    /** Target endpoint / component */
+    target: string;
+    /** Acceptable response time (ms) */
+    maxResponseTime: number;
+    /** Error rate threshold (%) */
+    maxErrorRate: number;
+}
+
+export declare interface LoadTestResult {
+    totalRequests: number;
+    successful: number;
+    failed: number;
+    avgResponseTime: number;
+    p95ResponseTime: number;
+    p99ResponseTime: number;
+    requestsPerSecond: number;
+    errorRate: number;
+    passed: boolean;
+}
+
+/**
+ * Measure page performance metrics
+ */
+export declare function measurePerformance(page: Page): Promise<{
+    fcp: number;
+    lcp: number;
+    cls: number;
+    ttfb: number;
+    tti: number;
+}>;
+
+/**
+ * Mock REST API endpoints
+ */
+export declare function mockAPI(page: Page, mocks: Array<{
+    url: string | RegExp;
+    method?: string;
+    status?: number;
+    body?: unknown;
+    delay?: number;
+}>): Promise<void>;
+
+export declare interface MockDataSource<T> {
+    key: string;
+    load: () => Promise<{
+        data: T[];
+        totalCount: number;
+    }>;
+    insert: (item: T) => Promise<T>;
+    update: (key: unknown, values: Partial<T>) => Promise<void>;
+    remove: (key: unknown) => Promise<void>;
+    getData: () => T[];
+    reset: () => void;
+}
+
+export declare interface MockDataSourceOptions<T> {
+    data: T[];
+    delay?: number;
+    keyField?: string;
+}
+
+/**
+ * Mock GraphQL operations
+ */
+export declare function mockGraphQL(page: Page, endpoint: string, mocks: Record<string, unknown>): Promise<void>;
+
+/**
+ * Mock SignalR connection
+ */
+export declare function mockSignalR(page: Page, hubUrl: string, handlers: Record<string, (...args: unknown[]) => void>): Promise<{
+    send: (method: string, ...args: unknown[]) => Promise<void>;
+}>;
+
+/**
+ * Selectors for querying Nice2Dev components in tests.
+ * Every nice component renders a data-testid by convention.
+ *
+ * @example
+ * import { niceSelectors } from '@nice2dev/testing';
+ * const btn = screen.getByTestId(niceSelectors.button('submit'));
+ * const grid = screen.getByTestId(niceSelectors.dataGrid());
+ */
+export declare const niceSelectors: {
+    button: (id?: string) => string;
+    textInput: (id?: string) => string;
+    numberInput: (id?: string) => string;
+    select: (id?: string) => string;
+    checkbox: (id?: string) => string;
+    toggle: (id?: string) => string;
+    datePicker: (id?: string) => string;
+    dataGrid: (id?: string) => string;
+    table: (id?: string) => string;
+    list: (id?: string) => string;
+    treeView: (id?: string) => string;
+    modal: (id?: string) => string;
+    drawer: (id?: string) => string;
+    form: (id?: string) => string;
+    tabs: (id?: string) => string;
+    menu: (id?: string) => string;
+    chart: (id?: string) => string;
+    scheduler: (id?: string) => string;
+    gantt: (id?: string) => string;
+    diagram: (id?: string) => string;
+    toast: (id?: string) => string;
+    alert: (id?: string) => string;
+    badge: (id?: string) => string;
+    avatar: (id?: string) => string;
+    progress: (id?: string) => string;
+    skeleton: (id?: string) => string;
+    spinner: (id?: string) => string;
+    card: (id?: string) => string;
+    accordion: (id?: string) => string;
+    breadcrumb: (id?: string) => string;
+    pagination: (id?: string) => string;
+    toolbar: (id?: string) => string;
+};
+
+/**
+ * Helper class for testing Nice2Dev components
+ */
+export declare class NiceTestHelpers {
+    private page;
+    constructor(page: Page);
+    dataGrid: {
+        /**
+         * Wait for DataGrid to fully load
+         */
+        waitForLoad: (selector?: string) => Promise<void>;
+        /**
+         * Select a row by index
+         */
+        selectRow: (index: number, selector?: string) => Promise<void>;
+        /**
+         * Sort by column
+         */
+        sortByColumn: (columnId: string, selector?: string) => Promise<void>;
+        /**
+         * Filter by column
+         */
+        filterColumn: (columnId: string, value: string, selector?: string) => Promise<void>;
+        /**
+         * Get row count
+         */
+        getRowCount: (selector?: string) => Promise<number>;
+        /**
+         * Get cell value
+         */
+        getCellValue: (rowIndex: number, columnId: string, selector?: string) => Promise<string | null>;
+    };
+    form: {
+        /**
+         * Fill form field
+         */
+        fillField: (fieldName: string, value: string) => Promise<void>;
+        /**
+         * Submit form
+         */
+        submit: (selector?: string) => Promise<void>;
+        /**
+         * Check validation errors
+         */
+        getErrors: (selector?: string) => Promise<string[]>;
+        /**
+         * Wait for form to be ready
+         */
+        waitForReady: (selector?: string) => Promise<void>;
+    };
+    modal: {
+        /**
+         * Wait for modal to open
+         */
+        waitForOpen: (selector?: string) => Promise<void>;
+        /**
+         * Wait for modal to close
+         */
+        waitForClose: (selector?: string) => Promise<void>;
+        /**
+         * Close modal
+         */
+        close: (selector?: string) => Promise<void>;
+        /**
+         * Click modal action button
+         */
+        clickAction: (action: "confirm" | "cancel", selector?: string) => Promise<void>;
+    };
+    navigation: {
+        /**
+         * Navigate via sidebar
+         */
+        navigateToRoute: (route: string) => Promise<void>;
+        /**
+         * Open navigation menu (mobile)
+         */
+        openMenu: () => Promise<void>;
+        /**
+         * Check active route
+         */
+        getActiveRoute: () => Promise<string | null>;
+    };
+    keyboard: {
+        /**
+         * Tab through focusable elements
+         */
+        tabThrough: (count: number) => Promise<void>;
+        /**
+         * Shift+Tab through focusable elements
+         */
+        shiftTabThrough: (count: number) => Promise<void>;
+        /**
+         * Press Enter on focused element
+         */
+        activate: () => Promise<void>;
+        /**
+         * Press Escape
+         */
+        escape: () => Promise<void>;
+        /**
+         * Navigate with arrow keys
+         */
+        arrow: (direction: "Up" | "Down" | "Left" | "Right") => Promise<void>;
+    };
+}
+
+/**
+ * Wraps components with all necessary providers for testing.
+ * Creates a clean environment with i18n, theme, and a11y contexts.
+ *
+ * @example
+ * render(<NiceButton>Click</NiceButton>, { wrapper: NiceTestWrapper });
+ *
+ * // Or with options:
+ * const Wrapper = ({ children }) => (
+ *   <NiceTestWrapper direction="rtl">{children}</NiceTestWrapper>
+ * );
+ * render(<NiceButton>Click</NiceButton>, { wrapper: Wrapper });
+ */
+export declare const NiceTestWrapper: default_2.FC<NiceTestWrapperProps>;
+
+export declare interface NiceTestWrapperProps {
+    children: default_2.ReactNode;
+    /** Optional theme to apply */
+    theme?: Record<string, unknown>;
+    /** Direction for RTL testing */
+    direction?: 'ltr' | 'rtl';
+    /** Custom translation function */
+    t?: (key: string, defaultValue: string) => string;
+}
+
+/**
+ * Percy configuration for CI
+ * Use with @percy/cli
+ *
+ * @example
+ * ```yaml
+ * # .percy.yml
+ * version: 2
+ * snapshot:
+ *   widths: [375, 768, 1280, 1920]
+ *   min-height: 1024
+ * ```
+ */
+export declare const percyConfig: {
+    version: number;
+    snapshot: {
+        widths: number[];
+        minHeight: number;
+        percyCSS: string;
+    };
+    discovery: {
+        networkIdleTimeout: number;
+        allowedHostnames: string[];
+    };
+};
+
+/**
+ * Percy snapshot helper
+ */
+export declare function percySnapshot(name: string, options?: {
+    widths?: number[];
+    minHeight?: number;
+    scope?: string;
+    enableJavaScript?: boolean;
+}): {
+    widths?: number[];
+    minHeight?: number;
+    scope?: string;
+    enableJavaScript?: boolean;
+    name: string;
+};
+
+export declare interface PerformanceBenchmarkConfig {
+    /** Components to benchmark */
+    components: string[];
+    /** Metrics to track */
+    metrics: Array<'render-time' | 'rerender-time' | 'memory' | 'layout-shift' | 'interaction-delay'>;
+    /** Iterations per benchmark */
+    iterations: number;
+    /** Warm-up runs */
+    warmUp: number;
+    /** Threshold for regression (%) */
+    regressionThreshold: number;
+    /** Budget (ms) */
+    budgets: Record<string, number>;
+}
+
+export declare interface PropertyTestConfig {
+    /** Number of test runs (default: 100) */
+    numRuns?: number;
+    /** Seed for reproducibility */
+    seed?: number;
+    /** Timeout per run in ms */
+    timeout?: number;
+    /** Enable verbose logging */
+    verbose?: boolean;
+    /** Example values to always test */
+    examples?: unknown[][];
+}
+
+/**
+ * Render component and return serialized HTML for inline snapshot
+ */
+export declare function renderToSnapshot(element: ReactElement, options?: SnapshotOptions): string;
+
+export declare interface ResponsiveSnapshotOptions extends SnapshotOptions {
+    /** Breakpoints to test [name, width] */
+    breakpoints?: [string, number][];
+}
+
+export declare type ScanType = 'sast' | 'dast' | 'sca' | 'secret-scan';
+
+export declare interface SecurityFinding {
+    id: string;
+    type: ScanType;
+    severity: 'critical' | 'high' | 'medium' | 'low' | 'info';
+    title: string;
+    description: string;
+    file?: string;
+    line?: number;
+    cve?: string;
+    cwe?: string;
+    recommendation: string;
+}
+
+export declare interface SecurityScanConfig {
+    /** Scan type */
+    scanType: ScanType;
+    /** Target path / URL */
+    target: string;
+    /** Severity threshold */
+    failOnSeverity: 'critical' | 'high' | 'medium' | 'low';
+    /** Ignored CVEs */
+    ignoredCves: string[];
+    /** Report format */
+    reportFormat: 'sarif' | 'json' | 'html';
+}
+
+export declare interface SecurityScanResult {
+    scanType: ScanType;
+    target: string;
+    findings: SecurityFinding[];
+    passed: boolean;
+    scanDuration: number;
+}
+
+/**
+ * Simulate a click with optional modifier keys.
+ */
+export declare function simulateClick(element: HTMLElement, options?: {
+    ctrlKey?: boolean;
+    shiftKey?: boolean;
+    altKey?: boolean;
+    metaKey?: boolean;
+}): void;
+
+/**
+ * Simulate keyboard events for testing keyboard navigation.
+ *
+ * @example
+ * const el = screen.getByTestId('nice-select');
+ * simulateKeyboard(el, 'ArrowDown');
+ * simulateKeyboard(el, 'Enter');
+ */
+export declare function simulateKeyboard(element: HTMLElement, key: string, options?: Partial<KeyboardEventInit>): void;
+
+/**
+ * Simulate typing into an input element.
+ * Dispatches input and change events as @testing-library would.
+ */
+export declare function simulateType(element: HTMLInputElement | HTMLTextAreaElement, text: string): void;
+
+/**
+ * Create a snapshot of accessibility-relevant attributes
+ */
+export declare function snapshotA11y(element: ReactElement, options?: SnapshotOptions): void;
+
+/**
+ * Create a snapshot test for a component's rendered structure
+ *
+ * @example
+ * ```tsx
+ * describe('Button', () => {
+ *   snapshotComponent(<Button variant="primary">Click</Button>);
+ *   snapshotComponent(<Button variant="secondary">Click</Button>);
+ *   snapshotComponent(<Button disabled>Disabled</Button>);
+ * });
+ * ```
+ */
+export declare function snapshotComponent(element: ReactElement, options?: SnapshotOptions): void;
+
+export declare interface SnapshotOptions {
+    /** Test description name */
+    name?: string;
+    /** Wrapper component (e.g., ThemeProvider) */
+    wrapper?: React.ComponentType<{
+        children: ReactNode;
+    }>;
+    /** Additional props to apply to wrapper */
+    wrapperProps?: Record<string, unknown>;
+}
+
+/**
+ * Create snapshots at different viewport sizes
+ *
+ * @example
+ * ```tsx
+ * snapshotResponsive(<Navigation />, {
+ *   breakpoints: [
+ *     ['mobile', 375],
+ *     ['tablet', 768],
+ *     ['desktop', 1024],
+ *   ],
+ * });
+ * ```
+ */
+export declare function snapshotResponsive(element: ReactElement, options?: ResponsiveSnapshotOptions): void;
+
+/**
+ * Create snapshots for styles in different states
+ *
+ * @example
+ * ```tsx
+ * snapshotStateStyles(
+ *   <Button>Click</Button>,
+ *   {
+ *     default: {},
+ *     hover: { pseudo: ':hover' },
+ *     focus: { pseudo: ':focus' },
+ *     disabled: { props: { disabled: true } },
+ *   }
+ * );
+ * ```
+ */
+export declare function snapshotStateStyles(Component: React.ComponentType<Record<string, unknown>>, baseProps: Record<string, unknown>, states: Record<string, {
+    props?: Record<string, unknown>;
+    pseudo?: string;
+}>, options?: StyleSnapshotOptions): void;
+
+/**
+ * Create a snapshot of computed styles
+ *
+ * @example
+ * ```tsx
+ * snapshotStyles(<Button>Click</Button>, ['background-color', 'color', 'padding']);
+ * ```
+ */
+export declare function snapshotStyles(element: ReactElement, options?: StyleSnapshotOptions): void;
+
+/**
+ * Create snapshots for different themes
+ *
+ * @example
+ * ```tsx
+ * snapshotThemes(
+ *   <Button>Click</Button>,
+ *   ThemeProvider,
+ *   [
+ *     { name: 'light', theme: lightTheme },
+ *     { name: 'dark', theme: darkTheme },
+ *   ]
+ * );
+ * ```
+ */
+export declare function snapshotThemes<T>(element: ReactElement, ThemeProvider: React.ComponentType<{
+    theme: T;
+    children: ReactNode;
+}>, themes: Array<{
+    name: string;
+    theme: T;
+}>, options?: StyleSnapshotOptions): void;
+
+/**
+ * Create multiple snapshot tests for different variants
+ *
+ * @example
+ * ```tsx
+ * snapshotVariants(
+ *   Button,
+ *   { children: 'Click me' },
+ *   { variant: ['primary', 'secondary', 'ghost'] }
+ * );
+ * ```
+ */
+export declare function snapshotVariants<P extends Record<string, unknown>>(Component: React.ComponentType<P>, baseProps: Partial<P>, variants: Partial<{
+    [K in keyof P]: P[K][];
+}>, options?: SnapshotOptions): void;
+
+export declare interface StressTestConfig {
+    /** Test type */
+    type: 'large-file' | 'large-dataset' | 'deep-tree' | 'many-components';
+    /** Scale factor */
+    itemCount: number;
+    /** Duration (ms) */
+    duration: number;
+    /** Memory limit (MB) */
+    memoryLimit: number;
+    /** Acceptable frame drops (%) */
+    maxFrameDropPercent: number;
+}
+
+export declare interface StressTestResult {
+    type: string;
+    itemCount: number;
+    duration: number;
+    peakMemoryMb: number;
+    averageFps: number;
+    frameDropPercent: number;
+    passed: boolean;
+    errors: string[];
+}
+
+export declare interface StyleSnapshotOptions extends SnapshotOptions {
+    /** CSS properties to capture */
+    properties?: string[];
+    /** Pseudo-element to capture (e.g., '::before') */
+    pseudo?: string;
+}
+
+export declare interface TelemetryConfig {
+    /** Opt-in required */
+    optInRequired: boolean;
+    /** Endpoint */
+    endpoint: string;
+    /** Events to track */
+    events: Array<'click' | 'navigation' | 'error' | 'performance' | 'custom'>;
+    /** Sampling rate (0-1) */
+    samplingRate: number;
+    /** Session recording */
+    sessionRecording: boolean;
+    /** PII masking */
+    piiMasking: boolean;
+    /** Batch size */
+    batchSize: number;
+    /** Flush interval (ms) */
+    flushInterval: number;
+}
+
+/**
+ * Generate consistent data-testid attributes.
+ *
+ * @example
+ * testId('nice-button', 'submit') // 'nice-button-submit'
+ * testId('nice-datagrid', 'row', 3) // 'nice-datagrid-row-3'
+ */
+export declare function testId(...parts: (string | number)[]): string;
+
+/**
+ * Create a model-based test
+ *
+ * @example
+ * ```ts
+ * const counterCommands = fc.commands([
+ *   fc.constant({ check: () => true, run: (m, r) => { m.value++; r.increment(); }, toString: () => 'increment' }),
+ *   fc.constant({ check: (m) => m.value > 0, run: (m, r) => { m.value--; r.decrement(); }, toString: () => 'decrement' }),
+ * ]);
+ *
+ * testModel('Counter', { value: 0 }, () => new Counter(), counterCommands);
+ * ```
+ */
+export declare function testModel<Model extends object, Real>(name: string, initialModel: () => Model, initialReal: () => Real, commands: fc.Arbitrary<fc.Command<Model, Real>[]>, config?: PropertyTestConfig): void;
+
+/**
+ * Run a property-based test with Vitest integration
+ *
+ * @example
+ * ```ts
+ * testProperty(
+ *   'sorting is idempotent',
+ *   [fc.array(fc.integer())],
+ *   (arr) => {
+ *     const sorted = arr.sort((a, b) => a - b);
+ *     const sortedAgain = [...sorted].sort((a, b) => a - b);
+ *     expect(sorted).toEqual(sortedAgain);
+ *   }
+ * );
+ * ```
+ */
+export declare function testProperty<T extends unknown[]>(name: string, arbitraries: {
+    [K in keyof T]: fc.Arbitrary<T[K]>;
+}, predicate: (...args: T) => void | Promise<void>, config?: PropertyTestConfig): void;
+
+/**
+ * Run a synchronous property-based test
+ */
+export declare function testPropertySync<T extends unknown[]>(name: string, arbitraries: {
+    [K in keyof T]: fc.Arbitrary<T[K]>;
+}, predicate: (...args: T) => void, config?: PropertyTestConfig): void;
+
+/**
+ * Standard breakpoints for responsive visual testing
+ */
+export declare const VISUAL_BREAKPOINTS: {
+    readonly mobile: {
+        readonly width: 375;
+        readonly height: 667;
+    };
+    readonly mobileLarge: {
+        readonly width: 414;
+        readonly height: 896;
+    };
+    readonly tablet: {
+        readonly width: 768;
+        readonly height: 1024;
+    };
+    readonly tabletLandscape: {
+        readonly width: 1024;
+        readonly height: 768;
+    };
+    readonly desktop: {
+        readonly width: 1280;
+        readonly height: 800;
+    };
+    readonly desktopLarge: {
+        readonly width: 1440;
+        readonly height: 900;
+    };
+    readonly ultrawide: {
+        readonly width: 1920;
+        readonly height: 1080;
+    };
+};
+
+/**
+ * Theme configurations for visual testing
+ */
+export declare const VISUAL_THEMES: {
+    readonly light: {
+        readonly name: "light";
+        readonly className: "theme-light";
+        readonly background: "#ffffff";
+    };
+    readonly dark: {
+        readonly name: "dark";
+        readonly className: "theme-dark";
+        readonly background: "#1a1a1a";
+    };
+    readonly highContrast: {
+        readonly name: "high-contrast";
+        readonly className: "theme-high-contrast";
+        readonly background: "#000000";
+    };
+};
+
+export declare interface VisualDiffResult {
+    componentName: string;
+    viewport: string;
+    matchPercentage: number;
+    passed: boolean;
+    baselineImage: string;
+    currentImage: string;
+    diffImage?: string;
+}
+
+export declare interface VisualRegressionConfig {
+    /** Screenshot directory */
+    snapshotDir: string;
+    /** Diff threshold (0-1) */
+    diffThreshold: number;
+    /** Update baseline on pass */
+    updateBaseline: boolean;
+    /** Viewports */
+    viewports: Array<{
+        width: number;
+        height: number;
+        name: string;
+    }>;
+    /** CSS animations disabled */
+    disableAnimations: boolean;
+    /** Mask dynamic regions */
+    maskSelectors: string[];
+}
+
+export declare interface VisualSnapshot {
+    name: string;
+    viewport: {
+        width: number;
+        height: number;
+    };
+    theme: string;
+    direction: 'ltr' | 'rtl';
+    story?: string;
+}
+
+export declare interface VisualTestConfig {
+    /** Component name for screenshot naming */
+    component: string;
+    /** Story names to test */
+    stories?: string[];
+    /** Breakpoints to test */
+    breakpoints?: (keyof typeof VISUAL_BREAKPOINTS)[];
+    /** Themes to test */
+    themes?: (keyof typeof VISUAL_THEMES)[];
+    /** Test RTL layout */
+    rtl?: boolean;
+    /** Custom viewport sizes */
+    customViewports?: Array<{
+        name: string;
+        width: number;
+        height: number;
+    }>;
+    /** Wait time before screenshot (ms) */
+    waitTime?: number;
+    /** Tolerance for pixel differences (0-1) */
+    tolerance?: number;
+}
+
+/**
+ * Storybook preset with visual testing addons
+ */
+export declare const visualTestingAddons: string[];
+
+/**
+ * Global types for Storybook toolbar
+ * Add to .storybook/preview.tsx
+ *
+ * @example
+ * ```tsx
+ * export const globalTypes = {
+ *   ...visualTestingGlobalTypes,
+ * };
+ * ```
+ */
+export declare const visualTestingGlobalTypes: {
+    theme: {
+        name: string;
+        description: string;
+        defaultValue: string;
+        toolbar: {
+            icon: string;
+            items: {
+                value: string;
+                title: string;
+            }[];
+            showName: boolean;
+        };
+    };
+    direction: {
+        name: string;
+        description: string;
+        defaultValue: string;
+        toolbar: {
+            icon: string;
+            items: {
+                value: string;
+                title: string;
+            }[];
+            showName: boolean;
+        };
+    };
+    reducedMotion: {
+        name: string;
+        description: string;
+        defaultValue: boolean;
+        toolbar: {
+            icon: string;
+            items: {
+                value: boolean;
+                title: string;
+            }[];
+            showName: boolean;
+        };
+    };
+};
+
+/**
+ * Parameters for visual testing
+ */
+export declare const visualTestingParameters: {
+    viewport: {
+        viewports: {
+            mobile: {
+                name: string;
+                styles: {
+                    width: string;
+                    height: string;
+                };
+                type: "mobile";
+            };
+            mobileLarge: {
+                name: string;
+                styles: {
+                    width: string;
+                    height: string;
+                };
+                type: "mobile";
+            };
+            tablet: {
+                name: string;
+                styles: {
+                    width: string;
+                    height: string;
+                };
+                type: "tablet";
+            };
+            desktop: {
+                name: string;
+                styles: {
+                    width: string;
+                    height: string;
+                };
+                type: "desktop";
+            };
+            desktopLarge: {
+                name: string;
+                styles: {
+                    width: string;
+                    height: string;
+                };
+                type: "desktop";
+            };
+            ultrawide: {
+                name: string;
+                styles: {
+                    width: string;
+                    height: string;
+                };
+                type: "desktop";
+            };
+        };
+        defaultViewport: string;
+    };
+    chromatic: {
+        viewports: number[];
+        diffThreshold: number;
+        pauseAnimationAtEnd: boolean;
+        delay: number;
+    };
+    a11y: {
+        element: string;
+        config: {};
+        options: {};
+        manual: boolean;
+    };
+    layout: string;
+};
+
+/**
+ * Base Storybook configuration with visual testing
+ */
+export declare const visualTestingPreset: Partial<StorybookConfig>;
+
+/**
+ * Viewport configuration for Storybook
+ */
+export declare const visualTestingViewports: {
+    mobile: {
+        name: string;
+        styles: {
+            width: string;
+            height: string;
+        };
+        type: "mobile";
+    };
+    mobileLarge: {
+        name: string;
+        styles: {
+            width: string;
+            height: string;
+        };
+        type: "mobile";
+    };
+    tablet: {
+        name: string;
+        styles: {
+            width: string;
+            height: string;
+        };
+        type: "tablet";
+    };
+    desktop: {
+        name: string;
+        styles: {
+            width: string;
+            height: string;
+        };
+        type: "desktop";
+    };
+    desktopLarge: {
+        name: string;
+        styles: {
+            width: string;
+            height: string;
+        };
+        type: "desktop";
+    };
+    ultrawide: {
+        name: string;
+        styles: {
+            width: string;
+            height: string;
+        };
+        type: "desktop";
+    };
+};
+
+/**
+ * Wait for a condition to be true.
+ */
+export declare function waitFor(condition: () => boolean | Promise<boolean>, timeout?: number): Promise<void>;
+
+/**
+ * Wait for an element to appear in the DOM.
+ */
+export declare function waitForElement(selector: string, container?: HTMLElement, timeout?: number): Promise<HTMLElement | null>;
+
+export declare type WcagLevel = 'A' | 'AA' | 'AAA';
+
+/**
+ * Full visual test configuration
+ */
+export declare function withFullVisualTesting<T extends Record<string, unknown>>(story: T, options?: {
+    viewports?: (keyof typeof VISUAL_BREAKPOINTS)[];
+    themes?: (keyof typeof VISUAL_THEMES)[];
+    rtl?: boolean;
+}): T;
+
+/**
+ * Configure story for RTL visual testing
+ */
+export declare function withRTLTesting<T extends Record<string, unknown>>(story: T): T;
+
+/**
+ * Configure story for visual testing with themes
+ */
+export declare function withVisualThemes<T extends Record<string, unknown>>(story: T, themes?: (keyof typeof VISUAL_THEMES)[]): T;
+
+/**
+ * Configure story for visual testing with all viewports
+ */
+export declare function withVisualViewports<T extends Record<string, unknown>>(story: T, viewports?: (keyof typeof VISUAL_BREAKPOINTS)[]): T & {
+    parameters: {
+        chromatic: typeof chromaticDefaults;
+    };
+};
+
+export { }