import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Form } from '../form/form.js';
import { render, screen, waitFor } from '@testing-library/react';
import { userEvent } from '@testing-library/user-event';
import { describe, expect, it, vi } from 'vitest';
import { renderWithForm } from '../../lib/testing.js';
import { UrlField } from './url-field.js';
describe('UrlField', () => {
    it('should match snapshot', () => {
        const { container } = renderWithForm(_jsx(UrlField, { name: "test-url", label: "Website URL", description: "Enter your website URL", placeholder: "https://example.com", required: true, warnings: ['URL may be unreachable'], errors: ['Invalid URL format'] }));
        expect(container).toMatchSnapshot();
    });
    it('should render with basic props', () => {
        renderWithForm(_jsx(UrlField, { "data-testid": "url-field", name: "test-url", label: "Website URL", placeholder: "https://example.com" }));
        expect(screen.getByTestId('url-field')).toBeInTheDocument();
        expect(screen.getByPlaceholderText('https://example.com')).toBeInTheDocument();
    });
    it('should show required indicator when required', () => {
        renderWithForm(_jsx(UrlField, { "data-testid": "url-field", name: "test-url", label: "Website URL", required: true }));
        expect(screen.getByText('*')).toBeInTheDocument();
        expect(screen.getByTestId('url-field')).toHaveAttribute('required');
    });
    it('should show description when provided', () => {
        renderWithForm(_jsx(UrlField, { name: "test-url", label: "Website URL", description: "Enter your website URL" }));
        expect(screen.getByText('Enter your website URL')).toBeInTheDocument();
    });
    it('should show error message when provided', async () => {
        renderWithForm(_jsx(UrlField, { name: "test-url", label: "Website URL", errors: ['Invalid URL format'] }));
        await waitFor(() => {
            expect(screen.getByText('Invalid URL format')).toBeInTheDocument();
        });
    });
    it('should show warning message when provided', () => {
        renderWithForm(_jsx(UrlField, { name: "test-url", label: "Website URL", warnings: ['URL may be unreachable'] }));
        expect(screen.getByText('URL may be unreachable')).toBeInTheDocument();
    });
    it('should be disabled when disabled prop is true', () => {
        renderWithForm(_jsx(UrlField, { "data-testid": "url-field", name: "test-url", label: "Website URL", disabled: true }));
        expect(screen.getByTestId('url-field')).toBeDisabled();
    });
    it('should validate URL format', async () => {
        const user = userEvent.setup();
        renderWithForm(_jsxs(_Fragment, { children: [_jsx(UrlField, { "data-testid": "url-field", name: "test-url", label: "Website URL" }), _jsx("button", { type: "submit", children: "Submit" })] }));
        const input = screen.getByTestId('url-field');
        await user.type(input, 'not-a-url{enter}');
        expect(await screen.findByText('not-a-url must be a valid URL')).toBeInTheDocument();
    });
    it('should be invalid if URL is to long', async () => {
        const user = userEvent.setup();
        renderWithForm(_jsx(UrlField, { "data-testid": "url-field", name: "test-url", label: "Website URL", maxURLLength: 10 }));
        const input = screen.getByTestId('url-field');
        await user.type(input, 'https://example.com/{enter}'); // 20 characters (including protocol and domain)
        expect(input).toHaveAttribute('aria-invalid', 'true');
        expect(await screen.findByText('Website URL must not exceed 10 characters')).toBeInTheDocument();
    });
    it('should show warning when the URL could be truncated', async () => {
        const user = userEvent.setup();
        renderWithForm(_jsx(UrlField, { "data-testid": "url-field", name: "test-url", label: "Website URL" }));
        const input = screen.getByTestId('url-field');
        await user.type(input, 'https://example.com/test...');
        await user.tab(); // trigger blur
        expect(await screen.findByText('URL may be truncated')).toBeInTheDocument();
    });
    it('should not show warnings if showWarnings prop is false', async () => {
        const user = userEvent.setup();
        renderWithForm(_jsx(UrlField, { "data-testid": "url-field", name: "test-url", label: "Website URL", showWarnings: false }));
        const input = screen.getByTestId('url-field');
        await user.type(input, 'https://example.com/test...');
        await user.tab(); // trigger blur
        expect(screen.queryByText('URL may be truncated')).not.toBeInTheDocument();
    });
    it('should submit the form when valid', async () => {
        const user = userEvent.setup();
        const onSubmit = vi.fn();
        renderWithForm(_jsxs(_Fragment, { children: [_jsx(UrlField, { "data-testid": "url-field", name: "test-url", label: "Website URL" }), _jsx("button", { type: "submit", children: "Submit" })] }), onSubmit);
        const input = screen.getByTestId('url-field');
        await user.type(input, 'https://example.com{enter}');
        expect(onSubmit).toHaveBeenCalled();
    });
    it('should render platform built-in icon when URL matches configured hostname', () => {
        renderWithForm(_jsx(UrlField, { "data-testid": "url-field", name: "test-url", label: "Website URL", value: "https://github.com/test", platformIcons: {
                'github.com': 'Github',
            } }));
        expect(screen.getByTestId('icon-fallback')).toBeInTheDocument();
    });
    it('should render a custom icon when hostname has no configured icon', () => {
        renderWithForm(_jsx(UrlField, { "data-testid": "url-field", name: "test-url", label: "Website URL", value: "https://github.com/test", platformIcons: {
                'github.com': _jsx("span", { "data-testid": "custom-icon", children: "Custom Icon" }),
            } }));
        expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
    });
    it('should not render any icon when platformIcons prop is not provided', () => {
        renderWithForm(_jsx(UrlField, { "data-testid": "url-field", name: "test-url", label: "Website URL" }));
        expect(screen.queryByTestId('icon-fallback')).not.toBeInTheDocument();
    });
    it('should hide warnings when the form is reset', async () => {
        const user = userEvent.setup();
        render(_jsx(Form, { onSubmit: () => undefined, defaultValues: { 'test-url': '' }, children: ({ reset }) => (_jsxs(_Fragment, { children: [_jsx(UrlField, { "data-testid": "url-field", name: "test-url", label: "Website URL" }), _jsx("button", { type: "reset", onClick: reset, "data-testid": "reset-button", children: "Reset" })] })) }));
        // first show the warnings typing in the input
        await user.type(screen.getByTestId('url-field'), 'https://x.com/test...');
        await user.tab(); // trigger blur
        expect(await screen.findByText('URL may be truncated')).toBeInTheDocument();
        // then hide the warnings when the form is reset
        await user.click(screen.getByTestId('reset-button'));
        expect(screen.queryByText('URL may be truncated')).toBeNull();
    });
    describe('UrlField differences', () => {
        it('should show value when viewMode is addition', () => {
            renderWithForm(_jsx(UrlField, { "data-testid": "url-input-diff", name: "test-url", label: "Website URL", value: "https://github.com/test", viewMode: "addition" }));
            const input = screen.getByTestId('url-input-diff');
            expect(input).toBeInTheDocument();
            expect(screen.getByText('https://github.com/test')).toBeInTheDocument();
            expect(screen.queryByText('https://example.com')).not.toBeInTheDocument();
        });
        it('should show baseValue when viewMode is removal', () => {
            renderWithForm(_jsx(UrlField, { "data-testid": "url-input-diff", name: "test-url", label: "Website URL", value: "https://github.com/test", baseValue: "https://example.com", viewMode: "removal" }));
            const input = screen.getByTestId('url-input-diff');
            expect(input).toBeInTheDocument();
            expect(screen.queryByText('https://github.com/test')).not.toBeInTheDocument();
            expect(screen.getByText('https://example.com')).toBeInTheDocument();
        });
        it('should show value and baseValue when viewMode is mixed', () => {
            renderWithForm(_jsx(UrlField, { "data-testid": "url-input-diff", name: "test-url", label: "Website URL", value: "https://github.com/test", baseValue: "https://example.com", viewMode: "mixed" }));
            const input = screen.getByTestId('url-input-diff');
            expect(input).toBeInTheDocument();
            expect(screen.getByText('https://github.com/test')).toBeInTheDocument();
            expect(screen.getByText('https://example.com')).toBeInTheDocument();
        });
    });
});
//# sourceMappingURL=url-field.test.js.map