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

package/src/testing/test-utils.tsx

@@ -0,0 +1,367 @@
+/**
+ * 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';