@navinc/base-react-components/dist/wayfinder/select-combo-box/select-combo-box.spec.js

Nav's Pattern Library

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import { jsx as _jsx } from "react/jsx-runtime";
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { screen, waitFor } from '@testing-library/react';
import { SelectComboBox, BaseSelectComboBox } from './select-combo-box.js';
import * as useFormField from '../use-form-field.js';
import { testComponentRef, testComponentCommonStandards } from '@navinc/test-helpers';
import { renderWithContext } from '../../tests/with-app-context.js';
import userEvent from '@testing-library/user-event';
describe('<BaseSelectComboBox />', () => {
    testComponentRef(BaseSelectComboBox);
    it('renders with no props and no options', () => __awaiter(void 0, void 0, void 0, function* () {
        const user = userEvent.setup();
        renderWithContext(_jsx(BaseSelectComboBox, {}));
        yield user.click(screen.getByTestId('select-combo-box:control'));
        yield waitFor(() => expect(screen.getByText(/no options/iu)));
    }));
    it('renders with basic form props and options', () => __awaiter(void 0, void 0, void 0, function* () {
        const user = userEvent.setup();
        renderWithContext(_jsx(BaseSelectComboBox, { name: "flavor", placeholder: "Hold my place...", options: [
                { value: 'chocolate', label: 'Chocolate' },
                { value: 'strawberry', label: 'Strawberry' },
                { value: 'vanilla', label: 'Vanilla' },
            ] }));
        expect(screen.getByRole('combobox'));
        expect(screen.getByText('Hold my place...'));
        expect(screen.queryByTestId('select-combo-box:menu-list')).not.toBeInTheDocument();
        yield user.click(screen.getByTestId('select-combo-box:control'));
        yield waitFor(() => expect(screen.getByTestId('select-combo-box:menu-list')));
        expect(screen.queryByText(/no options/iu)).not.toBeInTheDocument();
        expect(screen.getByText('Chocolate'));
        expect(screen.getByText('Strawberry'));
        expect(screen.getByText('Vanilla'));
    }));
});
describe('<SelectComboBox />', () => {
    describe('new empty form', () => {
        beforeEach(() => {
            vi.spyOn(useFormField, 'useFormField').mockReturnValue({
                value: '',
                onChange: vi.fn(),
                onBlur: vi.fn(),
                error: undefined,
                helpers: {
                    setValue: vi.fn(),
                    setTouched: vi.fn(),
                    setError: vi.fn(),
                },
            });
        });
        testComponentRef(SelectComboBox, { name: 'state' });
        testComponentCommonStandards(SelectComboBox, { name: 'state' });
        it('renders with no props and no options', () => __awaiter(void 0, void 0, void 0, function* () {
            const user = userEvent.setup();
            renderWithContext(_jsx(SelectComboBox, {}));
            yield user.click(screen.getByTestId('select-combo-box:control'));
            yield waitFor(() => expect(screen.getByText(/no options/iu)));
        }));
        it('renders with basic form props and options', () => __awaiter(void 0, void 0, void 0, function* () {
            const user = userEvent.setup();
            const label = 'Label me';
            const helperText = 'Helpful text';
            const placeholder = 'Hold my beer!';
            renderWithContext(_jsx(SelectComboBox, { name: "flavor", label: label, helperText: helperText, placeholder: placeholder, options: [
                    { value: 'chocolate', label: 'Chocolate' },
                    { value: 'strawberry', label: 'Strawberry' },
                    { value: 'vanilla', label: 'Vanilla' },
                ] }));
            expect(screen.getByRole('combobox'));
            expect(screen.getByTestId('label')).toHaveTextContent(label);
            expect(screen.getByText(placeholder));
            expect(screen.queryByTestId('select-combo-box:menu-list')).not.toBeInTheDocument();
            yield user.click(screen.getByTestId('select-combo-box:control'));
            yield waitFor(() => expect(screen.getByTestId('select-combo-box:menu-list')));
            expect(screen.queryByText(/no options/iu)).not.toBeInTheDocument();
            expect(screen.getByText('Chocolate'));
            expect(screen.getByText('Strawberry'));
            expect(screen.getByText('Vanilla'));
        }));
    });
    describe('form with error', () => {
        it('renders error helper text if form has error', () => {
            const errorVal = 'Value is required';
            vi.spyOn(useFormField, 'useFormField').mockReturnValue({
                value: '',
                onChange: vi.fn(),
                onBlur: vi.fn(),
                error: [errorVal],
                helpers: {
                    setValue: vi.fn(),
                    setTouched: vi.fn(),
                    setError: vi.fn(),
                },
            });
            renderWithContext(_jsx(SelectComboBox, { name: "flavor", helperText: "should be trumped by error text", options: [
                    { value: 'chocolate', label: 'Chocolate' },
                    { value: 'strawberry', label: 'Strawberry' },
                    { value: 'vanilla', label: 'Vanilla' },
                ] }));
            expect(screen.getByRole('combobox'));
            expect(screen.getByTestId('helper-text')).toHaveTextContent(errorVal);
        });
    });
    describe('form with value', () => {
        it('renders input with single selected value', () => {
            vi.spyOn(useFormField, 'useFormField').mockReturnValue({
                value: { value: 'strawberry', label: 'Strawberry' },
                onChange: vi.fn(),
                onBlur: vi.fn(),
                error: undefined,
                helpers: {
                    setValue: vi.fn(),
                    setTouched: vi.fn(),
                    setError: vi.fn(),
                },
            });
            renderWithContext(_jsx(SelectComboBox, { name: "flavor", helperText: "should be trumped by error text", options: [
                    { value: 'chocolate', label: 'Chocolate' },
                    { value: 'strawberry', label: 'Strawberry' },
                    { value: 'vanilla', label: 'Vanilla' },
                ] }));
            expect(screen.getByRole('combobox'));
            expect(screen.getByTestId('select-combo-box:single-value')).toHaveTextContent('Strawberry');
            expect(screen.getByTestId('select-combo-box:single-value')).not.toHaveTextContent('Vanilla');
            expect(screen.getByTestId('select-combo-box:single-value')).not.toHaveTextContent('Chocolate');
        });
        it('renders input with multi selected values', () => {
            vi.spyOn(useFormField, 'useFormField').mockReturnValue({
                value: [
                    { value: 'strawberry', label: 'Strawberry' },
                    { value: 'vanilla', label: 'Vanilla' },
                ],
                onChange: vi.fn(),
                onBlur: vi.fn(),
                error: undefined,
                helpers: {
                    setValue: vi.fn(),
                    setTouched: vi.fn(),
                    setError: vi.fn(),
                },
            });
            renderWithContext(_jsx(SelectComboBox, { name: "flavor", helperText: "should be trumped by error text", options: [
                    { value: 'chocolate', label: 'Chocolate' },
                    { value: 'strawberry', label: 'Strawberry' },
                    { value: 'vanilla', label: 'Vanilla' },
                ], isMulti: true }));
            expect(screen.getByRole('combobox'));
            const valueItems = screen.getAllByTestId('select-combo-box:multi-value');
            expect(valueItems).toHaveLength(2);
            expect(valueItems[0]).toHaveTextContent('Strawberry');
            expect(valueItems[1]).toHaveTextContent('Vanilla');
        });
    });
});
//# sourceMappingURL=select-combo-box.spec.js.map