@12-apps/ui 1.5.0 → 1.5.2

package/src/components/form/Button/Button.test.stories.tsx

@@ -1,607 +0,0 @@
-import Delete from '@mui/icons-material/Delete';
-import Save from '@mui/icons-material/Save';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, fn,userEvent, waitFor, within } from 'storybook/test';
-
-import { Button } from './Button';
-
-const meta: Meta<typeof Button> = {
-  title: 'Form/Button/Tests',
-  component: Button,
-  parameters: {
-    layout: 'centered',
-    chromatic: { disableSnapshot: false },
-  },
-  tags: ['autodocs', 'test', 'component:Button'],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================================================
-// INTERACTION TESTS
-// ============================================================================
-
-export const BasicInteraction: Story = {
-  name: '🧪 Basic Interaction Test',
-  args: {
-    children: 'Click Me',
-    onClick: fn(),
-    onFocus: fn(),
-    onBlur: fn(),
-    onMouseEnter: fn(),
-    onMouseLeave: fn(),
-    'data-testid': 'basic-button',
-  },
-  play: async ({ canvasElement, step, args }) => {
-    const canvas = within(canvasElement);
-
-    await step('Initial render verification', async () => {
-      const button = canvas.getByTestId('basic-button');
-      await expect(button).toBeInTheDocument();
-      await expect(button).toHaveTextContent('Click Me');
-    });
-
-    await step('Click interaction', async () => {
-      const button = canvas.getByTestId('basic-button');
-      await userEvent.click(button);
-      await expect(args.onClick).toHaveBeenCalledTimes(1);
-    });
-
-    await step('Hover interaction', async () => {
-      const button = canvas.getByTestId('basic-button');
-      await userEvent.hover(button);
-      // Verify hover effects are applied (transform/shadow)
-      const computedStyle = window.getComputedStyle(button);
-      await expect(computedStyle.transform).toBeTruthy();
-    });
-  },
-};
-
-export const VariantSwitching: Story = {
-  name: '🔄 Variant Switching Test',
-  args: {
-    children: 'Dynamic Button',
-    'data-testid': 'variant-button',
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const button = canvas.getByTestId('variant-button');
-
-    await step('Verify solid variant (default)', async () => {
-      await expect(button).toBeInTheDocument();
-      // Check for solid button characteristics
-      const computedStyle = window.getComputedStyle(button);
-      await expect(computedStyle.backgroundColor).toBeTruthy();
-    });
-  },
-};
-
-export const LoadingStateTest: Story = {
-  name: '⏳ Loading State Test',
-  args: {
-    children: 'Loading Button',
-    loading: true,
-    'data-testid': 'loading-button',
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify loading state', async () => {
-      const button = canvas.getByTestId('loading-button');
-      await expect(button).toBeDisabled();
-
-      // Check for loading spinner
-      const spinner = canvas.getByRole('progressbar');
-      await expect(spinner).toBeInTheDocument();
-    });
-
-    await step('Verify text is replaced by spinner', async () => {
-      const button = canvas.getByTestId('loading-button');
-      // Text should not be visible when loading
-      await expect(button).not.toHaveTextContent('Loading Button');
-    });
-  },
-};
-
-// ============================================================================
-// ACCESSIBILITY TESTS
-// ============================================================================
-
-export const KeyboardNavigation: Story = {
-  name: '⌨️ Keyboard Navigation Test',
-  args: {
-    children: 'Accessible Button',
-    onClick: fn(),
-    onFocus: fn(),
-    onBlur: fn(),
-    onKeyDown: fn(),
-    'data-testid': 'keyboard-button',
-  },
-  parameters: {
-    a11y: {
-      element: '#storybook-root',
-      config: {
-        rules: [
-          { id: 'color-contrast', enabled: true },
-          { id: 'button-name', enabled: true },
-          { id: 'focusable-element', enabled: true },
-        ],
-      },
-    },
-  },
-  play: async ({ canvasElement, step, args }) => {
-    const canvas = within(canvasElement);
-
-    // The story renders this single button, so one tab reaches it. Focus then
-    // stays put across the activation steps — pressing Enter or Space on a
-    // button does not move it — which is what makes this one keyboard journey
-    // rather than three re-focused fragments.
-    await step('Focus via Tab navigation', async () => {
-      const button = canvas.getByTestId('keyboard-button');
-      await userEvent.tab();
-      await waitFor(() => expect(button).toHaveFocus());
-    });
-
-    await step('Enter key activation', async () => {
-      const button = canvas.getByTestId('keyboard-button');
-      await waitFor(() => expect(button).toHaveFocus());
-      await userEvent.keyboard('{Enter}');
-      await expect(args.onClick).toHaveBeenCalled();
-    });
-
-    await step('Space key activation', async () => {
-      const button = canvas.getByTestId('keyboard-button');
-      await waitFor(() => expect(button).toHaveFocus());
-      await userEvent.keyboard(' ');
-      await expect(args.onClick).toHaveBeenCalled();
-    });
-  },
-};
-
-export const ScreenReaderTest: Story = {
-  name: '🔊 Screen Reader Test',
-  args: {
-    children: 'Screen Reader Button',
-    'aria-label': 'Custom accessible label',
-    'aria-describedby': 'button-description',
-    'data-testid': 'sr-button',
-  },
-  render: (args) => (
-    <>
-      <Button {...args} />
-      <div id="button-description" data-testid="description">
-        This button performs an important action
-      </div>
-    </>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify ARIA labels', async () => {
-      const button = canvas.getByTestId('sr-button');
-      await expect(button).toHaveAttribute('aria-label', 'Custom accessible label');
-    });
-
-    await step('Verify ARIA descriptions', async () => {
-      const button = canvas.getByTestId('sr-button');
-      await expect(button).toHaveAttribute('aria-describedby', 'button-description');
-
-      const description = canvas.getByTestId('description');
-      await expect(description).toBeInTheDocument();
-    });
-
-    await step('Verify role attributes', async () => {
-      const button = canvas.getByTestId('sr-button');
-      await expect(button).toHaveAttribute('type', 'button');
-    });
-  },
-};
-
-export const DisabledAccessibility: Story = {
-  name: '🚫 Disabled Accessibility Test',
-  args: {
-    children: 'Disabled Button',
-    disabled: true,
-    onClick: fn(),
-    onFocus: fn(),
-    onBlur: fn(),
-    onKeyDown: fn(),
-    'data-testid': 'disabled-button',
-  },
-  play: async ({ canvasElement, step, args }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify disabled state', async () => {
-      const button = canvas.getByTestId('disabled-button');
-      await expect(button).toBeDisabled();
-    });
-
-    await step('Verify click is prevented', async () => {
-      const button = canvas.getByTestId('disabled-button');
-      // Disabled button has pointer-events: none, so we use pointer options to bypass
-      try {
-        await userEvent.click(button, { pointerEventsCheck: 0 });
-      } catch {
-        // Expected - disabled button should prevent interactions
-      }
-      // In any case, onClick should not have been called
-      await expect(args.onClick).not.toHaveBeenCalled();
-    });
-
-    await step('Verify keyboard interaction is prevented', async () => {
-      // A disabled button is not tabbable and cannot take focus, so keyboard
-      // input never reaches it. The previous version called .focus() on it,
-      // which is a no-op on a disabled element — the step passed for the wrong
-      // reason. Sending the keys with focus left on the body is the real check.
-      await userEvent.keyboard('{Enter}');
-      await userEvent.keyboard(' ');
-      await expect(args.onClick).not.toHaveBeenCalled();
-    });
-  },
-};
-
-// ============================================================================
-// VISUAL TESTS
-// ============================================================================
-
-export const VisualStates: Story = {
-  name: '👁️ Visual States Test',
-  args: {
-    children: 'Visual Test Button',
-    variant: 'solid', // Explicitly set to solid to ensure hover transform works
-    'data-testid': 'visual-button',
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Default state', async () => {
-      const button = canvas.getByTestId('visual-button');
-      const computedStyle = window.getComputedStyle(button);
-      await expect(computedStyle.opacity).toBe('1');
-    });
-
-    await step('Hover state', async () => {
-      const button = canvas.getByTestId('visual-button');
-
-      // Test hover interaction - simplified approach
-      await userEvent.hover(button);
-
-      // Wait for transition to complete and just verify hover works
-      await waitFor(() => {
-        const computedStyle = window.getComputedStyle(button);
-        // Just verify that the button can be hovered and styles are applied
-        // Check for any style changes that indicate hover state
-        expect(computedStyle.cursor).toBe('pointer');
-      });
-    });
-  },
-};
-
-export const SpecialEffectsTest: Story = {
-  name: '✨ Special Effects Test',
-  render: () => (
-    <div style={{ display: 'flex', gap: '1rem', flexDirection: 'column' }}>
-      <Button glow data-testid="glow-button">
-        Glow Effect
-      </Button>
-      <Button pulse data-testid="pulse-button">
-        Pulse Animation
-      </Button>
-      <Button glow pulse data-testid="combined-button">
-        Combined Effects
-      </Button>
-    </div>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify glow effect', async () => {
-      const glowButton = canvas.getByTestId('glow-button');
-      const computedStyle = window.getComputedStyle(glowButton);
-      await expect(computedStyle.boxShadow).toBeTruthy();
-      await expect(computedStyle.filter).toContain('brightness');
-    });
-
-    await step('Verify pulse animation', async () => {
-      const pulseButton = canvas.getByTestId('pulse-button');
-      // Pulse effect creates pseudo-element with animation
-      await expect(pulseButton).toBeInTheDocument();
-      // Verify button has pulse styling (position: relative for pseudo-element)
-      const computedStyle = window.getComputedStyle(pulseButton);
-      await expect(computedStyle.position).toBe('relative');
-      await expect(computedStyle.overflow).toBe('visible');
-    });
-
-    await step('Verify combined effects', async () => {
-      const combinedButton = canvas.getByTestId('combined-button');
-      const computedStyle = window.getComputedStyle(combinedButton);
-      await expect(computedStyle.boxShadow).toBeTruthy();
-      await expect(computedStyle.filter).toContain('brightness');
-    });
-  },
-};
-
-export const ResponsiveDesign: Story = {
-  name: '📱 Responsive Design Test',
-  args: {
-    children: 'Responsive Button',
-    'data-testid': 'responsive-button',
-  },
-  parameters: {
-    viewport: {
-      viewports: {
-        mobile: {
-          name: 'Mobile',
-          styles: { width: '375px', height: '667px' },
-          type: 'mobile',
-        },
-        tablet: {
-          name: 'Tablet',
-          styles: { width: '768px', height: '1024px' },
-          type: 'tablet',
-        },
-        desktop: {
-          name: 'Desktop',
-          styles: { width: '1920px', height: '1080px' },
-          type: 'desktop',
-        },
-      },
-      defaultViewport: 'mobile',
-    },
-    chromatic: {
-      viewports: [375, 768, 1920],
-      delay: 300,
-    },
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify button renders on mobile', async () => {
-      const button = canvas.getByTestId('responsive-button');
-      await expect(button).toBeInTheDocument();
-
-      const computedStyle = window.getComputedStyle(button);
-      await expect(computedStyle.display).toBe('inline-flex');
-    });
-  },
-};
-
-// ============================================================================
-// EDGE CASES TESTS
-// ============================================================================
-
-export const EdgeCases: Story = {
-  name: '🔧 Edge Cases Test',
-  render: () => (
-    <div style={{ display: 'flex', gap: '1rem', flexDirection: 'column', maxWidth: '200px' }}>
-      <Button data-testid="empty-button"></Button>
-      <Button data-testid="long-text-button">
-        This is a very long button text that should handle overflow gracefully without breaking the
-        layout
-      </Button>
-      <Button size="xs" data-testid="tiny-button">
-        Tiny
-      </Button>
-      <Button size="xl" data-testid="huge-button">
-        Huge Button
-      </Button>
-    </div>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Empty content handling', async () => {
-      const emptyButton = canvas.getByTestId('empty-button');
-      await expect(emptyButton).toBeInTheDocument();
-      // Button should still be clickable even without text
-      const computedStyle = window.getComputedStyle(emptyButton);
-      await expect(computedStyle.minHeight).toBeTruthy();
-    });
-
-    await step('Long text handling', async () => {
-      const longTextButton = canvas.getByTestId('long-text-button');
-      // Button should handle long text without breaking
-      await expect(longTextButton).toBeInTheDocument();
-      // Verify text doesn't overflow
-      const computedStyle = window.getComputedStyle(longTextButton);
-      await expect(computedStyle.overflow).not.toBe('visible');
-    });
-
-    await step('Size extremes', async () => {
-      const tinyButton = canvas.getByTestId('tiny-button');
-      const hugeButton = canvas.getByTestId('huge-button');
-
-      await expect(tinyButton).toBeInTheDocument();
-      await expect(hugeButton).toBeInTheDocument();
-
-      // Verify size differences
-      const tinyStyle = window.getComputedStyle(tinyButton);
-      const hugeStyle = window.getComputedStyle(hugeButton);
-
-      const tinyFontSize = parseFloat(tinyStyle.fontSize);
-      const hugeFontSize = parseFloat(hugeStyle.fontSize);
-
-      await expect(hugeFontSize).toBeGreaterThan(tinyFontSize);
-    });
-  },
-};
-
-// ============================================================================
-// PERFORMANCE TESTS
-// ============================================================================
-
-export const PerformanceTest: Story = {
-  name: '⚡ Performance Test',
-  render: () => (
-    <div
-      data-testid="button-container"
-      style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}
-    >
-      {Array.from({ length: 50 }, (_, i) => (
-        <Button key={i} data-testid={`perf-button-${i}`} size="sm">
-          Button {i + 1}
-        </Button>
-      ))}
-    </div>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('All buttons rendered', async () => {
-      // The timing assertion that used to live here bracketed getAllByTestId,
-      // which queries DOM that is already rendered — it measured query time, not
-      // render time, and a 100ms wall-clock budget is exactly what a loaded CI
-      // runner blows through. The count is the part that actually held.
-      const buttons = canvas.getAllByTestId(/perf-button-/);
-      await expect(buttons.length).toBe(50);
-    });
-
-    await step('Test rapid interactions', async () => {
-      const buttons = canvas.getAllByTestId(/perf-button-/);
-      const sampleButton = buttons[0];
-
-      // Simulate rapid hover/unhover
-      for (let i = 0; i < 5; i++) {
-        await userEvent.hover(sampleButton);
-        await userEvent.unhover(sampleButton);
-      }
-
-      // Button should still be responsive
-      await expect(sampleButton).toBeInTheDocument();
-    });
-  },
-};
-
-// ============================================================================
-// INTEGRATION TESTS
-// ============================================================================
-
-export const IconIntegration: Story = {
-  name: '🔗 Icon Integration Test',
-  args: {
-    children: 'Save Document',
-    icon: <Save data-testid="save-icon" />,
-    onClick: fn(),
-    onFocus: fn(),
-    onBlur: fn(),
-    'data-testid': 'icon-button',
-  },
-  play: async ({ canvasElement, step, args }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify icon and text render together', async () => {
-      const button = canvas.getByTestId('icon-button');
-      const icon = canvas.getByTestId('save-icon');
-
-      await expect(button).toBeInTheDocument();
-      await expect(icon).toBeInTheDocument();
-      await expect(button).toHaveTextContent('Save Document');
-    });
-
-    await step('Verify button functionality with icon', async () => {
-      const button = canvas.getByTestId('icon-button');
-      await userEvent.click(button);
-      await expect(args.onClick).toHaveBeenCalled();
-    });
-  },
-};
-
-export const LoadingWithIcon: Story = {
-  name: '⏳ Loading With Icon Integration',
-  args: {
-    children: 'Processing...',
-    icon: <Delete data-testid="delete-icon" />,
-    loading: true,
-    'data-testid': 'loading-icon-button',
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify icon is hidden during loading', async () => {
-      const button = canvas.getByTestId('loading-icon-button');
-      await expect(button).toBeInTheDocument();
-
-      // Assert the positive condition first: the spinner being present is what
-      // establishes that the loading state actually rendered. Without it the
-      // absence check below would also pass on a button that rendered nothing.
-      const spinner = canvas.getByRole('progressbar');
-      await expect(spinner).toBeInTheDocument();
-
-      // Icon should not be visible when loading
-      await waitFor(() => expect(canvas.queryByTestId('delete-icon')).not.toBeInTheDocument());
-    });
-  },
-};
-
-export const ComplexVariantTest: Story = {
-  name: '🎨 Complex Variant Combinations',
-  render: () => (
-    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '1rem' }}>
-      <Button variant="solid" color="primary" size="lg" data-testid="solid-primary-lg">
-        Solid Primary Large
-      </Button>
-      <Button
-        variant="outline"
-        color="secondary"
-        size="sm"
-        glow
-        data-testid="outline-secondary-sm-glow"
-      >
-        Outline Secondary Small Glow
-      </Button>
-      <Button variant="glass" color="success" pulse data-testid="glass-success-pulse">
-        Glass Success Pulse
-      </Button>
-      <Button variant="gradient" color="warning" size="xl" data-testid="gradient-warning-xl">
-        Gradient Warning XL
-      </Button>
-      <Button variant="ghost" color="danger" loading data-testid="ghost-danger-loading">
-        Ghost Danger Loading
-      </Button>
-      <Button variant="solid" color="neutral" disabled data-testid="solid-neutral-disabled">
-        Solid Neutral Disabled
-      </Button>
-    </div>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify all complex variants render', async () => {
-      const buttons = [
-        'solid-primary-lg',
-        'outline-secondary-sm-glow',
-        'glass-success-pulse',
-        'gradient-warning-xl',
-        'ghost-danger-loading',
-        'solid-neutral-disabled',
-      ];
-
-      for (const buttonId of buttons) {
-        const button = canvas.getByTestId(buttonId);
-        await expect(button).toBeInTheDocument();
-      }
-    });
-
-    await step('Verify disabled and loading states', async () => {
-      const loadingButton = canvas.getByTestId('ghost-danger-loading');
-      const disabledButton = canvas.getByTestId('solid-neutral-disabled');
-
-      await expect(loadingButton).toBeDisabled();
-      await expect(disabledButton).toBeDisabled();
-    });
-
-    await step('Verify special effects are applied', async () => {
-      const glowButton = canvas.getByTestId('outline-secondary-sm-glow');
-      const pulseButton = canvas.getByTestId('glass-success-pulse');
-
-      const glowStyle = window.getComputedStyle(glowButton);
-
-      await expect(glowStyle.boxShadow).toBeTruthy();
-      await expect(pulseButton).toBeInTheDocument(); // Pulse creates pseudo-element
-      // Verify pulse button has pulse styling (position: relative for pseudo-element)
-      const pulseStyle = window.getComputedStyle(pulseButton);
-      await expect(pulseStyle.position).toBe('relative');
-    });
-  },
-};