@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.7 → 0.1.8

package/src/testing/test-utils.tsx

@@ -1,367 +0,0 @@
-/**
- * Testing Utilities for Component Testing Framework
- * Provides comprehensive testing helpers for visual regression, theme switching,
- * state testing, responsive testing, and accessibility testing
- */
-
-import React from 'react';
-import { render, RenderOptions, RenderResult } from '@testing-library/react';
-import { ThemeProvider } from '../themes/ThemeProvider';
-// Note: Components are imported in tests where needed
-
-// Theme names available for testing
-export type ThemeName = 'default' | 'stan-design' | 'harvey';
-
-// Extended render options for comprehensive testing
-interface ExtendedRenderOptions extends Omit<RenderOptions, 'wrapper'> {
-  theme?: ThemeName;
-  wrapper?: React.ComponentType<{ children: React.ReactNode }>;
-}
-
-/**
- * Custom render function with theme provider wrapper
- */
-export function renderWithTheme(
-  ui: React.ReactElement,
-  options: ExtendedRenderOptions = {}
-): RenderResult {
-  const { theme, wrapper: Wrapper, ...renderOptions } = options;
-
-  function ThemeWrapper({ children }: { children: React.ReactNode }) {
-    const content = theme ? (
-      <ThemeProvider defaultTheme={theme}>{children}</ThemeProvider>
-    ) : (
-      children
-    );
-
-    return Wrapper ? <Wrapper>{content}</Wrapper> : <>{content}</>;
-  }
-
-  return render(ui, { wrapper: ThemeWrapper, ...renderOptions });
-}
-
-/**
- * Test all theme variants of a component
- */
-export function testAllThemes(
-  component: React.ReactElement,
-  testFn: (theme: ThemeName, result: RenderResult) => void
-) {
-  const themes: ThemeName[] = ['default', 'stan-design', 'harvey'];
-
-  themes.forEach((theme) => {
-    describe(`with ${theme} theme`, () => {
-      const result = renderWithTheme(component, { theme });
-      testFn(theme, result);
-    });
-  });
-}
-
-/**
- * Viewport sizes for responsive testing
- */
-export const viewports = {
-  mobile: { width: 375, height: 667 },
-  tablet: { width: 768, height: 1024 },
-  desktop: { width: 1024, height: 768 },
-  wide: { width: 1440, height: 900 },
-  ultrawide: { width: 1920, height: 1080 },
-} as const;
-
-/**
- * Set viewport size for responsive testing
- */
-export function setViewport(size: keyof typeof viewports) {
-  const { width, height } = viewports[size];
-
-  // Mock window dimensions
-  Object.defineProperty(window, 'innerWidth', {
-    writable: true,
-    configurable: true,
-    value: width,
-  });
-
-  Object.defineProperty(window, 'innerHeight', {
-    writable: true,
-    configurable: true,
-    value: height,
-  });
-
-  // Trigger resize event
-  window.dispatchEvent(new Event('resize'));
-}
-
-/**
- * Test component across all viewport sizes
- */
-export function testAllViewports(
-  component: React.ReactElement,
-  testFn: (viewport: keyof typeof viewports, result: RenderResult) => void
-) {
-  Object.keys(viewports).forEach((viewport) => {
-    const viewportKey = viewport as keyof typeof viewports;
-
-    describe(`at ${viewport} viewport`, () => {
-      beforeEach(() => {
-        setViewport(viewportKey);
-      });
-
-      const result = render(component);
-      testFn(viewportKey, result);
-    });
-  });
-}
-
-/**
- * Component states for state testing
- */
-export const componentStates = [
-  'default',
-  'hover',
-  'focus',
-  'active',
-  'disabled',
-  'loading',
-  'error',
-] as const;
-
-export type ComponentState = typeof componentStates[number];
-
-/**
- * Apply state to an element for testing
- */
-export function applyState(element: HTMLElement, state: ComponentState) {
-  switch (state) {
-    case 'hover':
-      element.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
-      break;
-    case 'focus':
-      element.focus();
-      break;
-    case 'active':
-      element.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
-      break;
-    case 'disabled':
-      if ('disabled' in element) {
-        (element as any).disabled = true;
-      } else {
-        element.setAttribute('aria-disabled', 'true');
-      }
-      break;
-    case 'loading':
-      element.setAttribute('aria-busy', 'true');
-      break;
-    case 'error':
-      element.setAttribute('aria-invalid', 'true');
-      break;
-    default:
-      // Default state - no modifications needed
-      break;
-  }
-}
-
-/**
- * Test all component states
- */
-export function testAllStates(
-  getElement: () => HTMLElement,
-  testFn: (state: ComponentState, element: HTMLElement) => void
-) {
-  componentStates.forEach((state) => {
-    describe(`in ${state} state`, () => {
-      const element = getElement();
-      applyState(element, state);
-      testFn(state, element);
-    });
-  });
-}
-
-/**
- * Mock CSS media queries for responsive testing
- */
-export function mockMediaQuery(query: string, matches: boolean = true) {
-  const mockMediaQuery = {
-    matches,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(),
-    removeListener: jest.fn(),
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
-  };
-
-  Object.defineProperty(window, 'matchMedia', {
-    writable: true,
-    value: jest.fn().mockImplementation(() => mockMediaQuery),
-  });
-
-  return mockMediaQuery;
-}
-
-/**
- * Performance testing utilities
- */
-export const performanceUtils = {
-  /**
-   * Measure component render time
-   */
-  measureRenderTime: (renderFn: () => RenderResult): number => {
-    const start = performance.now();
-    renderFn();
-    const end = performance.now();
-    return end - start;
-  },
-
-  /**
-   * Test render performance across multiple runs
-   */
-  testRenderPerformance: (
-    renderFn: () => RenderResult,
-    iterations: number = 10,
-    maxTime: number = 50 // ms
-  ): { average: number; max: number; passed: boolean } => {
-    const times: number[] = [];
-
-    for (let i = 0; i < iterations; i++) {
-      const time = performanceUtils.measureRenderTime(renderFn);
-      times.push(time);
-    }
-
-    const average = times.reduce((sum, time) => sum + time, 0) / times.length;
-    const max = Math.max(...times);
-    const passed = max <= maxTime;
-
-    return { average, max, passed };
-  },
-};
-
-/**
- * Accessibility testing utilities
- */
-export const a11yUtils = {
-  /**
-   * Check if element has proper ARIA labels
-   */
-  hasAriaLabel: (element: HTMLElement): boolean => {
-    return Boolean(
-      element.getAttribute('aria-label') ||
-      element.getAttribute('aria-labelledby') ||
-      element.getAttribute('aria-describedby')
-    );
-  },
-
-  /**
-   * Check if element is keyboard accessible
-   */
-  isKeyboardAccessible: (element: HTMLElement): boolean => {
-    const tabIndex = element.getAttribute('tabindex');
-    const isInteractive = ['button', 'input', 'select', 'textarea', 'a'].includes(
-      element.tagName.toLowerCase()
-    );
-
-    return (
-      isInteractive ||
-      (tabIndex !== null && parseInt(tabIndex) >= 0) ||
-      element.hasAttribute('role')
-    );
-  },
-
-  /**
-   * Check if element has sufficient color contrast
-   * Note: This is a simplified check - full contrast checking requires advanced algorithms
-   */
-  hasSufficientContrast: (element: HTMLElement): boolean => {
-    const styles = window.getComputedStyle(element);
-    const color = styles.color;
-    const backgroundColor = styles.backgroundColor;
-
-    // This is a simplified check - in a real implementation,
-    // you would use a proper contrast ratio calculation
-    return color !== backgroundColor;
-  },
-};
-
-/**
- * Visual regression testing utilities
- */
-export const visualRegressionUtils = {
-  /**
-   * Create a snapshot test for visual regression
-   */
-  expectComponentSnapshot: (component: React.ReactElement, name?: string) => {
-    const { container } = renderWithTheme(component, { theme: 'default' });
-    expect(container.firstChild).toMatchSnapshot(name);
-  },
-
-  /**
-   * Test component visual consistency across themes
-   */
-  expectThemeConsistency: (component: React.ReactElement) => {
-    const themes: ThemeName[] = ['default', 'stan-design', 'harvey'];
-
-    themes.forEach((theme) => {
-      const { container } = renderWithTheme(component, { theme });
-      expect(container.firstChild).toMatchSnapshot(`theme-${theme}`);
-    });
-  },
-
-  /**
-   * Test component visual consistency across states
-   */
-  expectStateConsistency: (
-    getComponent: (state: ComponentState) => React.ReactElement
-  ) => {
-    componentStates.forEach((state) => {
-      const component = getComponent(state);
-      const { container } = render(component);
-      expect(container.firstChild).toMatchSnapshot(`state-${state}`);
-    });
-  },
-};
-
-/**
- * Cross-browser testing utilities
- */
-export const crossBrowserUtils = {
-  /**
-   * Mock different user agents for browser testing
-   */
-  mockUserAgent: (userAgent: string) => {
-    Object.defineProperty(navigator, 'userAgent', {
-      writable: true,
-      value: userAgent,
-    });
-  },
-
-  /**
-   * Test component across different browsers
-   */
-  testAcrossBrowsers: (
-    component: React.ReactElement,
-    testFn: (browser: string, result: RenderResult) => void
-  ) => {
-    const browsers = {
-      chrome: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36',
-      firefox: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0',
-      safari: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.1 Safari/605.1.15',
-      edge: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 Edg/91.0.864.59',
-    };
-
-    Object.entries(browsers).forEach(([browser, userAgent]) => {
-      describe(`in ${browser}`, () => {
-        beforeEach(() => {
-          crossBrowserUtils.mockUserAgent(userAgent);
-        });
-
-        const result = render(component);
-        testFn(browser, result);
-      });
-    });
-  },
-};
-
-// Re-export testing library utilities
-export * from '@testing-library/react';
-export * from '@testing-library/user-event';
-export { default as userEvent } from '@testing-library/user-event';