import { describe, it, expect } from 'vitest';
import { render, fireEvent } from '@testing-library/svelte';
import QuantitySelector from './QuantitySelector.svelte';
describe('m-quantityselector component', () => {
    const baseProps = {
        id: 'test-qty',
        value: 2,
        min: 1,
        max: 5,
        step: 1,
        incrementlabel: 'Add one',
        decrementlabel: 'Remove one',
    };
    let input;
    let increaseBtn;
    let decreaseBtn;
    const getElements = (container) => {
        input = container.querySelector('input');
        const buttons = container.querySelectorAll('button');
        increaseBtn = buttons[0];
        decreaseBtn = buttons[1];
    };
    it('renders input and two buttons', () => {
        const { container } = render(QuantitySelector, { props: baseProps });
        const inputs = container.querySelectorAll('input');
        const buttons = container.querySelectorAll('button');
        expect(inputs.length).toBe(1);
        expect(buttons.length).toBe(2);
    });
    it('displays initial value correctly', () => {
        const { container } = render(QuantitySelector, { props: baseProps });
        getElements(container);
        expect(input.value).toBe('2');
    });
    it('increments value when increment button is clicked', async () => {
        const { container } = render(QuantitySelector, { props: baseProps });
        getElements(container);
        await fireEvent.click(increaseBtn);
        expect(input.value).toBe('3');
    });
    it('decrements value when decrement button is clicked', async () => {
        const { container } = render(QuantitySelector, { props: baseProps });
        getElements(container);
        await fireEvent.click(decreaseBtn);
        expect(input.value).toBe('1');
    });
    it('does not exceed max value on increment', async () => {
        const { container } = render(QuantitySelector, {
            props: { ...baseProps, value: 5 },
        });
        getElements(container);
        await fireEvent.click(increaseBtn);
        expect(input.value).toBe('5');
        expect(increaseBtn).toBeDisabled();
    });
    it('does not go below min value on decrement', async () => {
        const { container } = render(QuantitySelector, {
            props: { ...baseProps, value: 1 },
        });
        getElements(container);
        await fireEvent.click(decreaseBtn);
        expect(input.value).toBe('1');
        expect(decreaseBtn).toBeDisabled();
    });
    it('applies disabled prop to input and buttons', () => {
        const { container } = render(QuantitySelector, {
            props: { ...baseProps, disabled: true },
        });
        getElements(container);
        expect(input).toBeDisabled();
        expect(increaseBtn).toBeDisabled();
        expect(decreaseBtn).toBeDisabled();
    });
    it('applies readonly prop to input', () => {
        const { container } = render(QuantitySelector, {
            props: { ...baseProps, readonly: true },
        });
        getElements(container);
        expect(input).toHaveAttribute('readonly');
    });
    it('adds invalid class when isinvalid is true', () => {
        const { container } = render(QuantitySelector, {
            props: { ...baseProps, isinvalid: true },
        });
        const wrapper = container.querySelector('.mc-quantity-selector');
        expect(wrapper.classList.contains('is-invalid')).toBe(true);
    });
    it('clamps value on manual input above max', async () => {
        const { container } = render(QuantitySelector, {
            props: { ...baseProps, value: 4 },
        });
        getElements(container);
        await fireEvent.input(input, { target: { value: '10' } });
        expect(input.value).toBe('5');
    });
    it('clamps value on manual input below min', async () => {
        const { container } = render(QuantitySelector, {
            props: { ...baseProps, value: 2 },
        });
        getElements(container);
        await fireEvent.input(input, { target: { value: '0' } });
        expect(input.value).toBe('1');
    });
});
