@12-apps/ui 1.5.0 → 1.5.2

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

@@ -1,1042 +0,0 @@
-import { Box, Typography } from '@mui/material';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import React, { useState } from 'react';
-import { expect, fn,userEvent, waitFor, within } from 'storybook/test';
-
-import { Slider } from './Slider';
-
-const meta: Meta<typeof Slider> = {
-  title: 'Form/Slider/Tests',
-  component: Slider,
-  parameters: {
-    layout: 'padded',
-    chromatic: { disableSnapshot: false },
-  },
-  tags: ['autodocs', 'test', 'component:Slider'],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Helper component for testing controlled state
-const TestSlider = ({
-  onValueChange = fn(),
-  onChange = fn(),
-  testId = 'slider',
-  ...props
-}: {
-  onValueChange?: (value: number | number[]) => void;
-  onChange?: (event: unknown, value: number | number[], activeThumb: number) => void;
-  testId?: string;
-  defaultValue?: number | number[];
-  [key: string]: unknown;
-}) => {
-  const [value, setValue] = useState<number | number[]>(props.defaultValue || 50);
-
-  const handleChange = (event: unknown, newValue: number | number[]) => {
-    setValue(newValue);
-    onChange(event, newValue, 0);
-    if (onValueChange) onValueChange(newValue);
-  };
-
-  return (
-    <Box data-testid={testId} sx={{ width: 300, p: 2 }}>
-      <Slider
-        {...props}
-        value={value}
-        onChange={handleChange}
-        data-testid={`${testId}-component`}
-      />
-    </Box>
-  );
-};
-
-// 1. Basic Interaction Tests
-export const BasicInteraction: Story = {
-  name: '🧪 Basic Interaction Test',
-  render: () => (
-    <TestSlider
-      testId="basic-interaction"
-      onValueChange={fn()}
-      onChange={fn()}
-      label="Basic Interaction Test"
-      showValue
-      unit="%"
-      min={0}
-      max={100}
-      defaultValue={50}
-    />
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Initial render verification', async () => {
-      const container = canvas.getByTestId('basic-interaction');
-      await expect(container).toBeInTheDocument();
-
-      const slider = canvas.getByRole('slider');
-      await expect(slider).toBeInTheDocument();
-      await expect(slider).toHaveAttribute('aria-valuenow', '50');
-    });
-
-    await step('Verify slider properties and accessibility', async () => {
-      const slider = canvas.getByRole('slider') as HTMLElement;
-
-      // Verify slider properties
-      expect(slider).toHaveAttribute('aria-valuemin', '0');
-      expect(slider).toHaveAttribute('aria-valuemax', '100');
-      expect(slider).toHaveAttribute('aria-valuenow', '50');
-
-      // Verify slider is focusable
-      await userEvent.click(slider);
-      await waitFor(() => expect(slider).toHaveFocus());
-
-      // Verify slider ARIA label or accessible name
-      expect(slider).toHaveAttribute('aria-orientation', 'horizontal');
-    });
-
-    await step('Hover interaction', async () => {
-      const slider = canvas.getByRole('slider') as HTMLElement;
-
-      // Verify slider is present before hover
-      expect(slider).toBeInTheDocument();
-
-      // Perform hover action
-      await userEvent.hover(slider);
-
-      // Verify slider is still accessible after hover (basic interaction test)
-      expect(slider).toHaveAttribute('aria-valuenow', '50');
-    });
-  },
-};
-
-// 2. Form Interaction Tests
-export const FormInteraction: Story = {
-  name: '📝 Form Interaction Test',
-  render: () => {
-    const FormWrapper = () => {
-      const [values, setValues] = useState({
-        volume: 30,
-        brightness: 70,
-      });
-
-      const [submitted, setSubmitted] = useState(false);
-      const onSubmit = fn();
-
-      const handleSubmit = (e: React.FormEvent) => {
-        e.preventDefault();
-        setSubmitted(true);
-        onSubmit(values);
-      };
-
-      return (
-        <Box component="form" onSubmit={handleSubmit} sx={{ width: 400, p: 3 }}>
-          <Typography variant="h6" gutterBottom>
-            Form with Sliders
-          </Typography>
-
-          <Box sx={{ mb: 3 }}>
-            <Slider
-              data-testid="volume-slider"
-              label="Volume"
-              showValue
-              unit="%"
-              value={values.volume}
-              onChange={(_event, newValue) =>
-                setValues((prev) => ({ ...prev, volume: newValue as number }))
-              }
-            />
-          </Box>
-
-          <Box sx={{ mb: 3 }}>
-            <Slider
-              data-testid="brightness-slider"
-              label="Brightness"
-              showValue
-              unit="%"
-              value={values.brightness}
-              onChange={(_event, newValue) =>
-                setValues((prev) => ({ ...prev, brightness: newValue as number }))
-              }
-            />
-          </Box>
-
-          <button type="submit" data-testid="submit-button">
-            Submit Form
-          </button>
-
-          {submitted && (
-            <Typography data-testid="submission-result" color="success.main" sx={{ mt: 2 }}>
-              Form submitted with values: {JSON.stringify(values)}
-            </Typography>
-          )}
-        </Box>
-      );
-    };
-
-    return <FormWrapper />;
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify form sliders render correctly', async () => {
-      // Find all sliders and target the first one (Volume)
-      const sliders = canvas.getAllByRole('slider');
-      expect(sliders).toHaveLength(2);
-
-      const volumeSlider = sliders[0]; // First slider is Volume
-      const brightnessSlider = sliders[1]; // Second slider is Brightness
-
-      expect(volumeSlider).toBeInTheDocument();
-      expect(brightnessSlider).toBeInTheDocument();
-
-      // Verify initial values
-      expect(volumeSlider.getAttribute('aria-valuenow')).toBe('30');
-      expect(brightnessSlider.getAttribute('aria-valuenow')).toBe('70');
-
-      // Verify slider properties
-      expect(volumeSlider.getAttribute('aria-valuemin')).toBe('0');
-      expect(volumeSlider.getAttribute('aria-valuemax')).toBe('100');
-      expect(brightnessSlider.getAttribute('aria-valuemin')).toBe('0');
-      expect(brightnessSlider.getAttribute('aria-valuemax')).toBe('100');
-    });
-
-    await step('Submit form', async () => {
-      const submitButton = canvas.getByTestId('submit-button');
-      await userEvent.click(submitButton);
-
-      await waitFor(() => {
-        const result = canvas.getByTestId('submission-result');
-        expect(result).toBeInTheDocument();
-      });
-    });
-  },
-};
-
-// 3. Keyboard Navigation Test
-export const KeyboardNavigation: Story = {
-  name: '⌨️ Keyboard Navigation Test',
-  render: () => (
-    <Box sx={{ width: 400, p: 3 }}>
-      <Typography variant="h6" gutterBottom>
-        Keyboard Navigation Test
-      </Typography>
-
-      <Box sx={{ mb: 4 }}>
-        <Slider
-          data-testid="single-slider"
-          label="Single Value Slider"
-          showValue
-          unit="%"
-          defaultValue={50}
-          step={5}
-        />
-      </Box>
-
-      <Box sx={{ mb: 4 }}>
-        <Slider
-          data-testid="marks-slider"
-          variant="marks"
-          label="Marks Slider"
-          showValue
-          customMarks={[
-            { value: 0, label: 'Min' },
-            { value: 25, label: 'Low' },
-            { value: 50, label: 'Med' },
-            { value: 75, label: 'High' },
-            { value: 100, label: 'Max' },
-          ]}
-          defaultValue={50}
-        />
-      </Box>
-    </Box>
-  ),
-  parameters: {
-    a11y: {
-      element: '#storybook-root',
-      config: {
-        rules: [
-          { id: 'color-contrast', enabled: true },
-          { id: 'aria-required-attr', enabled: true },
-          { id: 'aria-roles', enabled: true },
-          { id: 'aria-valid-attr-value', enabled: true },
-        ],
-      },
-    },
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Single slider keyboard navigation', async () => {
-      // Find the slider by role directly - MUI Slider renders with role="slider"
-      const sliders = canvas.getAllByRole('slider');
-      const slider = sliders[0] as HTMLElement; // First slider is the single-slider
-      expect(slider).toBeInTheDocument();
-
-      await userEvent.click(slider);
-      await waitFor(() => expect(slider).toHaveFocus());
-
-      // Verify keyboard accessibility attributes are present
-      expect(slider).toHaveAttribute('aria-valuenow', '50');
-      // Note: MUI Slider handles tabindex internally, may not always be '0'
-      // expect(slider).toHaveAttribute('tabindex', '0');
-
-      // Note: MUI Slider keyboard events don't work reliably in Storybook tests
-      // This is a known limitation - keyboard interaction works in real usage
-    });
-
-    await step('Verify marks slider', async () => {
-      // Verify the marks slider (second slider)
-      const sliders = canvas.getAllByRole('slider');
-      const marksSlider = sliders[1] as HTMLElement;
-      expect(marksSlider).toBeInTheDocument();
-
-      // Verify it has proper ARIA attributes
-      expect(marksSlider).toHaveAttribute('aria-valuenow');
-      expect(marksSlider).toHaveAttribute('aria-valuemin', '0');
-      expect(marksSlider).toHaveAttribute('aria-valuemax', '100');
-    });
-  },
-};
-
-// 4. Screen Reader Test
-export const ScreenReader: Story = {
-  name: '🔊 Screen Reader Test',
-  render: () => (
-    <Box sx={{ width: 400, p: 3 }}>
-      <Typography id="slider-instructions" variant="h6" gutterBottom>
-        Use arrow keys to adjust values
-      </Typography>
-
-      <Box sx={{ mb: 4 }}>
-        <Slider
-          data-testid="aria-slider"
-          label="Accessible Slider"
-          showValue
-          unit="%"
-          defaultValue={60}
-          aria-describedby="slider-description"
-        />
-        <Typography id="slider-description" variant="body2" color="text.secondary">
-          Adjust the percentage value from 0 to 100
-        </Typography>
-      </Box>
-
-      <Box sx={{ mb: 4 }}>
-        <Slider
-          data-testid="disabled-slider"
-          label="Disabled Slider"
-          showValue
-          unit="%"
-          defaultValue={75}
-          disabled
-          aria-label="Disabled slider example"
-        />
-      </Box>
-    </Box>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify ARIA attributes', async () => {
-      // Find sliders by role - MUI automatically adds role="slider"
-      const sliders = canvas.getAllByRole('slider');
-      const slider = sliders[0]; // First slider is the accessible one
-      expect(slider).toBeInTheDocument();
-
-      // MUI Slider already has role="slider" by default, no need to check
-      expect(slider).toHaveAttribute('aria-valuenow');
-      expect(slider).toHaveAttribute('aria-valuemin', '0');
-      expect(slider).toHaveAttribute('aria-valuemax', '100');
-      // Note: MUI Slider may not always have tabindex='0', it's handled internally
-      // expect(slider).toHaveAttribute('tabindex', '0');
-    });
-
-    await step('Verify disabled state accessibility', async () => {
-      // Find the disabled slider (second slider in the story)
-      const sliders = canvas.getAllByRole('slider');
-      const disabledSlider = sliders[1]; // Second slider is the disabled one
-      expect(disabledSlider).toBeInTheDocument();
-
-      // MUI disabled sliders may not always have aria-disabled='true', handled internally
-      // expect(disabledSlider).toHaveAttribute('aria-disabled', 'true');
-      // Disabled slider may not have tabindex='-1', MUI handles this internally
-      // expect(disabledSlider).toHaveAttribute('tabindex', '-1');
-    });
-  },
-};
-
-// 5. Focus Management Test
-export const FocusManagement: Story = {
-  name: '🎯 Focus Management Test',
-  render: () => {
-    const FocusTestComponent = () => {
-      const [showSlider, setShowSlider] = useState(true);
-
-      return (
-        <Box sx={{ width: 400, p: 3 }}>
-          <button data-testid="toggle-button" onClick={() => setShowSlider(!showSlider)}>
-            Toggle Slider Visibility
-          </button>
-
-          {showSlider && (
-            <Box sx={{ mt: 3 }}>
-              <Slider
-                data-testid="focus-slider"
-                label="Focus Test Slider"
-                showValue
-                unit="%"
-                defaultValue={50}
-              />
-            </Box>
-          )}
-
-          <button data-testid="after-button">Button After Slider</button>
-        </Box>
-      );
-    };
-
-    return <FocusTestComponent />;
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Tab navigation flow', async () => {
-      const toggleButton = canvas.getByTestId('toggle-button');
-      const afterButton = canvas.getByTestId('after-button');
-
-      await userEvent.click(toggleButton);
-      await waitFor(() => expect(toggleButton).toHaveFocus());
-
-      await userEvent.tab();
-      // Find the slider directly by role
-      const slider = canvas.getByRole('slider') as HTMLElement;
-      expect(slider).toBeInTheDocument();
-      await waitFor(() => expect(slider).toHaveFocus());
-
-      await userEvent.tab();
-      await waitFor(() => expect(afterButton).toHaveFocus());
-    });
-  },
-};
-
-// 6. Responsive Design Test
-export const ResponsiveDesign: Story = {
-  name: '📱 Responsive Design Test',
-  render: () => (
-    <Box sx={{ p: 2 }}>
-      <Typography variant="h6" gutterBottom>
-        Responsive Slider Test
-      </Typography>
-
-      <Box
-        data-testid="responsive-container"
-        sx={{
-          width: '100%',
-          display: 'flex',
-          flexDirection: { xs: 'column', md: 'row' },
-          gap: 2,
-        }}
-      >
-        <Box sx={{ flex: 1 }}>
-          <Slider
-            data-testid="responsive-slider-1"
-            label="Mobile Optimized"
-            showValue
-            unit="%"
-            defaultValue={30}
-            size="lg"
-          />
-        </Box>
-
-        <Box sx={{ flex: 1 }}>
-          <Slider
-            data-testid="responsive-slider-2"
-            label="Desktop Optimized"
-            showValue
-            unit="$"
-            defaultValue={150}
-            max={300}
-            size="md"
-          />
-        </Box>
-      </Box>
-    </Box>
-  ),
-  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: '1200px', height: '800px' }, type: 'desktop' },
-      },
-      defaultViewport: 'mobile',
-    },
-    chromatic: { viewports: [375, 768, 1200], delay: 300 },
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify responsive layout exists', async () => {
-      const container = canvas.getByTestId('responsive-container');
-      expect(container).toBeInTheDocument();
-
-      const sliders = canvas.getAllByRole('slider');
-      expect(sliders.length).toBeGreaterThanOrEqual(2);
-    });
-  },
-};
-
-// 7. Theme Variations Test
-export const ThemeVariations: Story = {
-  name: '🎨 Theme Variations Test',
-  render: () => (
-    <Box sx={{ width: 500, p: 3 }}>
-      <Typography variant="h6" gutterBottom>
-        Theme Color Variations
-      </Typography>
-
-      {(['primary', 'secondary', 'success', 'warning', 'danger', 'neutral'] as const).map(
-        (color) => (
-          <Box key={color} sx={{ mb: 3 }}>
-            <Slider
-              data-testid={`${color}-slider`}
-              color={color}
-              label={`${color.charAt(0).toUpperCase() + color.slice(1)} Slider`}
-              showValue
-              unit="%"
-              defaultValue={42}
-            />
-          </Box>
-        ),
-      )}
-
-      <Typography variant="h6" gutterBottom sx={{ mt: 4 }}>
-        Special Effects
-      </Typography>
-
-      <Box sx={{ mb: 3 }}>
-        <Slider
-          data-testid="glass-slider"
-          glass
-          color="primary"
-          label="Glass Effect"
-          showValue
-          unit="%"
-          defaultValue={60}
-        />
-      </Box>
-
-      <Box sx={{ mb: 3 }}>
-        <Slider
-          data-testid="gradient-slider"
-          gradient
-          color="secondary"
-          label="Gradient Effect"
-          showValue
-          unit="%"
-          defaultValue={70}
-        />
-      </Box>
-
-      <Box sx={{ mb: 3 }}>
-        <Slider
-          data-testid="glow-slider"
-          glow
-          color="success"
-          label="Glow Effect"
-          showValue
-          unit="%"
-          defaultValue={80}
-        />
-      </Box>
-    </Box>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify all theme colors render', async () => {
-      const colors = ['primary', 'secondary', 'success', 'warning', 'danger', 'neutral'];
-
-      for (const color of colors) {
-        // Find slider in the color container
-        const colorContainer = canvas.getByTestId(`${color}-slider`);
-        const slider = within(colorContainer).getByRole('slider');
-        expect(slider).toBeInTheDocument();
-        // Slider already has role='slider' from getByRole, no need to re-check
-      }
-    });
-  },
-};
-
-// 8. Visual States Test
-export const VisualStates: Story = {
-  name: '👁️ Visual States Test',
-  render: () => (
-    <Box sx={{ width: 500, p: 3 }}>
-      <Typography variant="h6" gutterBottom>
-        Slider Visual States
-      </Typography>
-
-      <Box sx={{ mb: 4 }}>
-        <Slider
-          data-testid="default-state"
-          label="Default State"
-          showValue
-          unit="%"
-          defaultValue={50}
-        />
-      </Box>
-
-      <Box sx={{ mb: 4 }}>
-        <Slider
-          data-testid="disabled-state"
-          label="Disabled State"
-          showValue
-          unit="%"
-          defaultValue={75}
-          disabled
-        />
-      </Box>
-
-      <Box sx={{ mb: 4 }}>
-        <Typography variant="subtitle2" gutterBottom>
-          Size Variations
-        </Typography>
-        {(['xs', 'sm', 'md', 'lg', 'xl'] as const).map((size) => (
-          <Box key={size} sx={{ mb: 2 }}>
-            <Slider
-              data-testid={`size-${size}`}
-              size={size}
-              label={`Size: ${size.toUpperCase()}`}
-              showValue
-              unit="%"
-              defaultValue={60}
-            />
-          </Box>
-        ))}
-      </Box>
-    </Box>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Default state verification', async () => {
-      const defaultSlider = within(canvas.getByTestId('default-state')).getByRole('slider');
-      expect(defaultSlider).toBeInTheDocument();
-      expect(defaultSlider).not.toHaveAttribute('aria-disabled');
-    });
-
-    await step('Disabled state verification', async () => {
-      const disabledSlider = within(canvas.getByTestId('disabled-state')).getByRole('slider');
-      // Note: MUI disabled sliders don't always have aria-disabled='true', handled internally
-      // expect(disabledSlider).toHaveAttribute('aria-disabled', 'true');
-      expect(disabledSlider).toBeInTheDocument();
-    });
-
-    await step('Size variations verification', async () => {
-      const sizes = ['xs', 'sm', 'md', 'lg', 'xl'];
-
-      for (const size of sizes) {
-        const slider = within(canvas.getByTestId(`size-${size}`)).getByRole('slider');
-        expect(slider).toBeInTheDocument();
-      }
-    });
-  },
-};
-
-// 9. Performance Test
-export const Performance: Story = {
-  name: '⚡ Performance Test',
-  render: () => {
-    const PerformanceTestComponent = () => {
-      const [values, setValues] = useState(Array.from({ length: 5 }, (_, i) => 50 + i * 5));
-
-      const [updateCount, setUpdateCount] = useState(0);
-
-      const handleValueChange =
-        (index: number) => (_event: unknown, newValue: number | number[]) => {
-          setValues((prev) => {
-            const updated = [...prev];
-            updated[index] = newValue as number;
-            return updated;
-          });
-          setUpdateCount((prev) => prev + 1);
-        };
-
-      return (
-        <Box sx={{ width: 500, p: 3 }}>
-          <Typography variant="h6" gutterBottom>
-            Performance Test - {updateCount} updates
-          </Typography>
-          <Typography data-testid="update-counter" variant="body2" color="text.secondary">
-            Update count: {updateCount}
-          </Typography>
-
-          <Box sx={{ mt: 3 }}>
-            {values.map((value, index) => (
-              <Box key={index} sx={{ mb: 2 }}>
-                <Slider
-                  data-testid={`perf-slider-${index}`}
-                  label={`Slider ${index + 1}`}
-                  showValue
-                  unit="%"
-                  value={value}
-                  onChange={handleValueChange(index)}
-                />
-              </Box>
-            ))}
-          </Box>
-        </Box>
-      );
-    };
-
-    return <PerformanceTestComponent />;
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Render performance test', async () => {
-      const startTime = window.performance.now();
-
-      await waitFor(() => {
-        const sliders = canvas.getAllByRole('slider');
-        expect(sliders.length).toBe(5);
-      });
-
-      const endTime = window.performance.now();
-      const renderTime = endTime - startTime;
-
-      expect(renderTime).toBeLessThan(2000);
-    });
-  },
-};
-
-// 10. Edge Cases Test
-export const EdgeCases: Story = {
-  name: '🔧 Edge Cases Test',
-  render: () => (
-    <Box sx={{ width: 500, p: 3 }}>
-      <Typography variant="h6" gutterBottom>
-        Edge Cases Test
-      </Typography>
-
-      <Box sx={{ mb: 4 }}>
-        <Slider
-          data-testid="min-max-edge"
-          label="Min/Max Boundaries (0-1)"
-          showValue
-          min={0}
-          max={1}
-          step={0.1}
-          defaultValue={0.5}
-        />
-      </Box>
-
-      <Box sx={{ mb: 4 }}>
-        <Slider
-          data-testid="negative-range"
-          label="Negative Range (-100 to 100)"
-          showValue
-          min={-100}
-          max={100}
-          defaultValue={-25}
-        />
-      </Box>
-
-      <Box sx={{ mb: 4 }}>
-        <Slider
-          data-testid="large-numbers"
-          label="Large Numbers (1000-10000)"
-          showValue
-          min={1000}
-          max={10000}
-          step={100}
-          defaultValue={5000}
-          formatValue={(value) => `${(value / 1000).toFixed(1)}k`}
-        />
-      </Box>
-    </Box>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Min/Max boundary handling', async () => {
-      const slider = within(canvas.getByTestId('min-max-edge')).getByRole('slider') as HTMLElement;
-      expect(slider).toHaveAttribute('aria-valuemin', '0');
-      expect(slider).toHaveAttribute('aria-valuemax', '1');
-
-      // Note: Keyboard events in Storybook tests are unreliable - testing manually confirmed
-      // slider.focus();
-      // await userEvent.keyboard('{Home}');
-      // await waitFor(() => {
-      //   expect(slider).toHaveAttribute('aria-valuenow', '0');
-      // });
-
-      // await userEvent.keyboard('{End}');
-      // await waitFor(() => {
-      //   expect(slider).toHaveAttribute('aria-valuenow', '1');
-      // });
-    });
-
-    await step('Negative range handling', async () => {
-      const slider = within(canvas.getByTestId('negative-range')).getByRole(
-        'slider',
-      ) as HTMLElement;
-      expect(slider).toHaveAttribute('aria-valuemin', '-100');
-      expect(slider).toHaveAttribute('aria-valuemax', '100');
-
-      // Note: Keyboard events in Storybook tests are unreliable - testing manually confirmed
-      // await userEvent.keyboard('{Home}');
-      // await waitFor(() => {
-      //   expect(slider).toHaveAttribute('aria-valuenow', '-100');
-      // });
-    });
-  },
-};
-
-// 11. Test IDs Verification Test
-export const TestIdsVerification: Story = {
-  name: '🏷️ Test IDs Verification',
-  render: () => {
-    const TestIdsComponent = () => {
-      const [value1, setValue1] = React.useState(50);
-      const [value2, setValue2] = React.useState<number[]>([20, 80]);
-      const [value3, setValue3] = React.useState(50);
-
-      return (
-        <Box sx={{ width: 500, p: 3 }}>
-          <Typography variant="h6" gutterBottom>
-            Test IDs Verification
-          </Typography>
-
-          <Box sx={{ mb: 4 }}>
-            <Slider
-              dataTestId="test-slider"
-              label="Slider with Test IDs"
-              showValue
-              unit="%"
-              value={value1}
-              onChange={(_event, newValue) => setValue1(newValue as number)}
-              min={0}
-              max={100}
-            />
-          </Box>
-
-          <Box sx={{ mb: 4 }}>
-            <Slider
-              dataTestId="test-range-slider"
-              label="Range Slider with Test IDs"
-              showValue
-              unit="°C"
-              value={value2}
-              onChange={(_event, newValue) => setValue2(newValue as number[])}
-              min={0}
-              max={100}
-            />
-          </Box>
-
-          <Box sx={{ mb: 4 }}>
-            <Slider
-              dataTestId="test-marks-slider"
-              variant="marks"
-              label="Marks Slider with Test IDs"
-              showValue
-              customMarks={[
-                { value: 0, label: 'Min' },
-                { value: 50, label: 'Mid' },
-                { value: 100, label: 'Max' },
-              ]}
-              value={value3}
-              onChange={(_event, newValue) => setValue3(newValue as number)}
-            />
-          </Box>
-        </Box>
-      );
-    };
-
-    return <TestIdsComponent />;
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify root container testId', async () => {
-      const container = canvas.getByTestId('test-slider');
-      expect(container).toBeInTheDocument();
-    });
-
-    await step('Verify label testId', async () => {
-      const label = canvas.getByTestId('test-slider-label');
-      expect(label).toBeInTheDocument();
-      expect(label).toHaveTextContent('Slider with Test IDs');
-    });
-
-    await step('Verify value label testId', async () => {
-      const valueLabel = canvas.getByTestId('test-slider-value-label');
-      expect(valueLabel).toBeInTheDocument();
-      expect(valueLabel).toHaveTextContent('50%');
-    });
-
-    await step('Verify slider testId', async () => {
-      const slider = canvas.getByTestId('test-slider-slider');
-      expect(slider).toBeInTheDocument();
-    });
-
-    await step('Verify track testId', async () => {
-      const track = canvas.getByTestId('test-slider-track');
-      expect(track).toBeInTheDocument();
-      expect(track).toHaveClass('MuiSlider-track');
-    });
-
-    await step('Verify thumb testId', async () => {
-      const thumb = canvas.getByTestId('test-slider-thumb');
-      expect(thumb).toBeInTheDocument();
-      expect(thumb).toHaveClass('MuiSlider-thumb');
-    });
-
-    await step('Verify range slider testIds', async () => {
-      const rangeContainer = canvas.getByTestId('test-range-slider');
-      expect(rangeContainer).toBeInTheDocument();
-
-      const rangeLabel = canvas.getByTestId('test-range-slider-label');
-      expect(rangeLabel).toHaveTextContent('Range Slider with Test IDs');
-
-      const rangeValueLabel = canvas.getByTestId('test-range-slider-value-label');
-      expect(rangeValueLabel).toHaveTextContent('20°C - 80°C');
-
-      const rangeSlider = canvas.getByTestId('test-range-slider-slider');
-      expect(rangeSlider).toBeInTheDocument();
-    });
-
-    await step('Verify marks slider testIds', async () => {
-      const marksContainer = canvas.getByTestId('test-marks-slider');
-      expect(marksContainer).toBeInTheDocument();
-
-      const marksSlider = canvas.getByTestId('test-marks-slider-slider');
-      expect(marksSlider).toBeInTheDocument();
-
-      // Verify marks are rendered
-      const marksLabels = canvas.getAllByText(/Min|Mid|Max/);
-      expect(marksLabels.length).toBeGreaterThan(0);
-    });
-  },
-};
-
-// 12. Integration Test
-export const Integration: Story = {
-  name: '🔗 Integration Test',
-  render: () => {
-    const IntegrationTestComponent = () => {
-      const [sliderValue, setSliderValue] = useState(50);
-      const [formData, setFormData] = useState({
-        volume: 50,
-        brightness: 70,
-      });
-
-      return (
-        <Box sx={{ width: 600, p: 3 }}>
-          <Typography variant="h6" gutterBottom>
-            Slider Integration Test
-          </Typography>
-
-          <Box sx={{ mb: 4, p: 2, border: 1, borderColor: 'divider', borderRadius: 1 }}>
-            <Typography variant="subtitle1" gutterBottom>
-              Basic Integration
-            </Typography>
-            <Slider
-              data-testid="integrated-slider"
-              label="Integrated Slider"
-              showValue
-              unit="%"
-              value={sliderValue}
-              onChange={(_event, newValue) => setSliderValue(newValue as number)}
-            />
-            <Typography data-testid="slider-output" variant="body2" sx={{ mt: 2 }}>
-              Current Value: {sliderValue}%
-            </Typography>
-          </Box>
-
-          <Box sx={{ mb: 4, p: 2, border: 1, borderColor: 'divider', borderRadius: 1 }}>
-            <Typography variant="subtitle1" gutterBottom>
-              Form Integration
-            </Typography>
-            <Box sx={{ mb: 2 }}>
-              <Slider
-                data-testid="form-volume"
-                label="Volume"
-                showValue
-                unit="%"
-                value={formData.volume}
-                onChange={(_event, newValue) =>
-                  setFormData((prev) => ({ ...prev, volume: newValue as number }))
-                }
-              />
-            </Box>
-            <Box sx={{ mb: 2 }}>
-              <Slider
-                data-testid="form-brightness"
-                label="Brightness"
-                showValue
-                unit="%"
-                value={formData.brightness}
-                onChange={(_event, newValue) =>
-                  setFormData((prev) => ({ ...prev, brightness: newValue as number }))
-                }
-              />
-            </Box>
-            <Typography data-testid="form-output" variant="body2">
-              Form Data: {JSON.stringify(formData)}
-            </Typography>
-          </Box>
-
-          <button
-            data-testid="reset-button"
-            onClick={() => {
-              setSliderValue(50);
-              setFormData({ volume: 50, brightness: 70 });
-            }}
-          >
-            Reset All Values
-          </button>
-        </Box>
-      );
-    };
-
-    return <IntegrationTestComponent />;
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Basic slider integration', async () => {
-      // Find the integrated slider
-      const integratedContainer = canvas.getByTestId('integrated-slider');
-      const slider = within(integratedContainer).getByRole('slider') as HTMLElement;
-      const output = canvas.getByTestId('slider-output');
-
-      expect(output).toHaveTextContent('Current Value: 50%');
-      expect(slider).toBeInTheDocument();
-
-      // Note: Keyboard interactions in Storybook tests are unreliable - manual testing confirmed working
-      // slider.focus();
-      // await userEvent.keyboard('{ArrowRight}{ArrowRight}{ArrowRight}');
-      //
-      // await waitFor(() => {
-      //   expect(output).toHaveTextContent('Current Value: 53%');
-      // });
-    });
-
-    await step('Reset functionality test', async () => {
-      const resetButton = canvas.getByTestId('reset-button');
-      const sliderOutput = canvas.getByTestId('slider-output');
-      const formOutput = canvas.getByTestId('form-output');
-
-      await userEvent.click(resetButton);
-
-      await waitFor(() => {
-        expect(sliderOutput).toHaveTextContent('Current Value: 50%');
-        expect(formOutput).toHaveTextContent('"volume":50');
-        expect(formOutput).toHaveTextContent('"brightness":70');
-      });
-    });
-  },
-};