"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const react_2 = require("@testing-library/react");
const TailwindSlider_1 = require("../components/modern/TailwindSlider");
// Mock ResizeObserver
global.ResizeObserver = jest.fn().mockImplementation(() => ({
    observe: jest.fn(),
    unobserve: jest.fn(),
    disconnect: jest.fn(),
}));
// Mock getBoundingClientRect for track element
Element.prototype.getBoundingClientRect = jest.fn(() => {
    return {
        width: 100,
        height: 10,
        top: 0,
        left: 0,
        bottom: 0,
        right: 100,
        x: 0,
        y: 0,
        toJSON: () => { },
    };
});
describe('TailwindSlider', () => {
    test('renders correctly with default props', () => {
        (0, react_2.render)((0, jsx_runtime_1.jsx)(TailwindSlider_1.TailwindSlider, {}));
        const slider = react_2.screen.getByRole('slider');
        expect(slider).toBeInTheDocument();
        expect(slider).toHaveAttribute('aria-valuemin', '0');
        expect(slider).toHaveAttribute('aria-valuemax', '100');
        expect(slider).toHaveAttribute('aria-valuenow', '0');
        // Thumb should be present
        const thumb = slider.querySelector('div[class*="rounded-full shadow-md"]');
        expect(thumb).toBeInTheDocument();
    });
    test('respects defaultValue prop', () => {
        (0, react_2.render)((0, jsx_runtime_1.jsx)(TailwindSlider_1.TailwindSlider, { defaultValue: 50 }));
        const slider = react_2.screen.getByRole('slider');
        expect(slider).toHaveAttribute('aria-valuenow', '50');
        // Filled track should be 50% wide
        const filledTrack = slider.querySelector('div[class*="absolute h-full rounded-full"]');
        expect(filledTrack).toHaveStyle('width: 50%');
    });
    test('handles value updates via mouse events', () => {
        const handleChange = jest.fn();
        (0, react_2.render)((0, jsx_runtime_1.jsx)(TailwindSlider_1.TailwindSlider, { min: 0, max: 100, onChange: handleChange, "data-testid": "slider" }));
        const slider = react_2.screen.getByTestId('slider');
        // Mock a mouse event at 50% of the track
        react_2.fireEvent.mouseDown(slider, { clientX: 50 });
        // Verify the change event was fired with the correct value
        expect(handleChange).toHaveBeenCalledWith(50);
    });
    test('handles keyboard navigation', () => {
        const handleChange = jest.fn();
        (0, react_2.render)((0, jsx_runtime_1.jsx)(TailwindSlider_1.TailwindSlider, { defaultValue: 50, min: 0, max: 100, step: 10, onChange: handleChange }));
        const slider = react_2.screen.getByRole('slider');
        // Press arrow right to increase value
        react_2.fireEvent.keyDown(slider, { key: 'ArrowRight' });
        expect(handleChange).toHaveBeenCalledWith(60);
        // Press arrow left to decrease value
        react_2.fireEvent.keyDown(slider, { key: 'ArrowLeft' });
        expect(handleChange).toHaveBeenCalledWith(40);
        // Press Home to go to min
        react_2.fireEvent.keyDown(slider, { key: 'Home' });
        expect(handleChange).toHaveBeenCalledWith(0);
        // Press End to go to max
        react_2.fireEvent.keyDown(slider, { key: 'End' });
        expect(handleChange).toHaveBeenCalledWith(100);
        // Press PageUp to increase by 10x step
        react_2.fireEvent.keyDown(slider, { key: 'PageUp' });
        expect(handleChange).toHaveBeenCalledWith(100);
        // Press PageDown to decrease by 10x step
        react_2.fireEvent.keyDown(slider, { key: 'PageDown' });
        expect(handleChange).toHaveBeenCalledWith(0);
    });
    test('respects step prop', () => {
        const handleChange = jest.fn();
        (0, react_2.render)((0, jsx_runtime_1.jsx)(TailwindSlider_1.TailwindSlider, { min: 0, max: 100, step: 25, onChange: handleChange, "data-testid": "slider" }));
        const slider = react_2.screen.getByTestId('slider');
        // Mock a mouse event at 37% of the track (should round to 25%)
        react_2.fireEvent.mouseDown(slider, { clientX: 37 });
        // Verify the change event was fired with the value rounded to the nearest step
        expect(handleChange).toHaveBeenCalledWith(25);
        // Mock a mouse event at 63% of the track (should round to 75%)
        react_2.fireEvent.mouseDown(slider, { clientX: 63 });
        // Verify the change event was fired with the value rounded to the nearest step
        expect(handleChange).toHaveBeenCalledWith(75);
    });
    test('handles disabled state', () => {
        const handleChange = jest.fn();
        (0, react_2.render)((0, jsx_runtime_1.jsx)(TailwindSlider_1.TailwindSlider, { isDisabled: true, onChange: handleChange, "data-testid": "slider" }));
        const slider = react_2.screen.getByTestId('slider');
        // Slider should have disabled attribute
        expect(slider).toHaveAttribute('aria-disabled', 'true');
        // Try to interact with the slider
        react_2.fireEvent.mouseDown(slider, { clientX: 50 });
        // Change event should not be called
        expect(handleChange).not.toHaveBeenCalled();
    });
    test('renders markers correctly', () => {
        (0, react_2.render)((0, jsx_runtime_1.jsx)(TailwindSlider_1.TailwindSlider, { min: 0, max: 100, markers: [0, 25, 50, 75, 100], "data-testid": "slider" }));
        const slider = react_2.screen.getByTestId('slider');
        // Find all markers
        const markers = slider.querySelectorAll('div[class*="absolute rounded-full bg-gray-400"]');
        expect(markers).toHaveLength(5);
        // Check marker positions
        expect(markers[0]).toHaveStyle('left: 0%');
        expect(markers[1]).toHaveStyle('left: 25%');
        expect(markers[2]).toHaveStyle('left: 50%');
        expect(markers[3]).toHaveStyle('left: 75%');
        expect(markers[4]).toHaveStyle('left: 100%');
    });
    test('renders label when showLabel is true', () => {
        (0, react_2.render)((0, jsx_runtime_1.jsx)(TailwindSlider_1.TailwindSlider, { defaultValue: 42, showLabel: true }));
        const label = react_2.screen.getByText('Value: 42');
        expect(label).toBeInTheDocument();
    });
    test('renders custom label', () => {
        (0, react_2.render)((0, jsx_runtime_1.jsx)(TailwindSlider_1.TailwindSlider, { defaultValue: 42, label: "Custom Label" }));
        const label = react_2.screen.getByText('Custom Label');
        expect(label).toBeInTheDocument();
    });
    test('applies different sizes correctly', () => {
        const { rerender } = (0, react_2.render)((0, jsx_runtime_1.jsx)(TailwindSlider_1.TailwindSlider, { size: "sm", "data-testid": "slider" }));
        // Check small size
        let track = react_2.screen.getByTestId('slider');
        expect(track).toHaveClass('h-1');
        // Check medium size
        rerender((0, jsx_runtime_1.jsx)(TailwindSlider_1.TailwindSlider, { size: "md", "data-testid": "slider" }));
        track = react_2.screen.getByTestId('slider');
        expect(track).toHaveClass('h-2');
        // Check large size
        rerender((0, jsx_runtime_1.jsx)(TailwindSlider_1.TailwindSlider, { size: "lg", "data-testid": "slider" }));
        track = react_2.screen.getByTestId('slider');
        expect(track).toHaveClass('h-3');
    });
    test('applies different color schemes correctly', () => {
        const { rerender } = (0, react_2.render)((0, jsx_runtime_1.jsx)(TailwindSlider_1.TailwindSlider, { colorScheme: "primary", "data-testid": "slider" }));
        // Check primary color
        let track = react_2.screen.getByTestId('slider');
        let filledTrack = track.querySelector('div[class*="absolute h-full rounded-full"]');
        expect(filledTrack).toHaveClass('bg-primary-500');
        // Check success color
        rerender((0, jsx_runtime_1.jsx)(TailwindSlider_1.TailwindSlider, { colorScheme: "success", "data-testid": "slider" }));
        track = react_2.screen.getByTestId('slider');
        filledTrack = track.querySelector('div[class*="absolute h-full rounded-full"]');
        expect(filledTrack).toHaveClass('bg-green-500');
        // Check danger color
        rerender((0, jsx_runtime_1.jsx)(TailwindSlider_1.TailwindSlider, { colorScheme: "danger", "data-testid": "slider" }));
        track = react_2.screen.getByTestId('slider');
        filledTrack = track.querySelector('div[class*="absolute h-full rounded-full"]');
        expect(filledTrack).toHaveClass('bg-red-500');
    });
    test('inverts track when isInverted is true', () => {
        (0, react_2.render)((0, jsx_runtime_1.jsx)(TailwindSlider_1.TailwindSlider, { defaultValue: 75, isInverted: true, "data-testid": "slider" }));
        const slider = react_2.screen.getByTestId('slider');
        const filledTrack = slider.querySelector('div[class*="absolute h-full rounded-full"]');
        // Filled track should start from the right
        expect(filledTrack).toHaveStyle('right: 0px');
    });
    test('forwards ref to slider container', () => {
        const ref = react_1.default.createRef();
        (0, react_2.render)((0, jsx_runtime_1.jsx)(TailwindSlider_1.TailwindSlider, { ref: ref }));
        expect(ref.current).not.toBeNull();
        expect(ref.current?.tagName).toBe('DIV');
    });
});
//# sourceMappingURL=TailwindSlider.test.js.map