@acusti/dropdown/dist/Dropdown.test.js

React component that renders a dropdown with a trigger and supports searching, keyboard access, and more

// @vitest-environment happy-dom
import { cleanup, render, screen } from '@testing-library/react';
import { userEvent } from '@testing-library/user-event';
import React from 'react';
import { afterEach, describe, expect, it } from 'vitest';
import Dropdown from './Dropdown.js';
afterEach(cleanup);
describe('@acusti/dropdown', () => {
    it('renders its contents as a dropdown menu with an empty button to trigger it when it’s rendered with a single child', async () => {
        const user = userEvent.setup();
        render(
            React.createElement(
                Dropdown,
                null,
                React.createElement(
                    'ul',
                    { 'data-testid': 'dropdown-list' },
                    React.createElement('li', null, '0px'),
                    React.createElement('li', null, '4px'),
                    React.createElement('li', null, '9px'),
                    React.createElement('li', null, '18px'),
                    React.createElement('li', null, '36px'),
                    React.createElement('li', null, '54px'),
                    React.createElement('li', null, '72px'),
                    React.createElement('li', null, '144px'),
                    React.createElement('li', null, '167px'),
                    React.createElement('li', null, '198px'),
                ),
            ),
        );
        const trigger = screen.getByRole('button');
        expect(trigger.innerHTML).toBe('');
        await user.click(trigger);
        expect(screen.getByTestId('dropdown-list')).toBeTruthy();
    });
    it('renders the first child as a trigger and the second child as a dropdown when given two children', async () => {
        const user = userEvent.setup();
        render(
            React.createElement(
                Dropdown,
                null,
                'File',
                React.createElement(
                    'ul',
                    { 'data-testid': 'file-menu' },
                    React.createElement('li', null, 'New Window'),
                    React.createElement('li', null, 'New Private Window'),
                    React.createElement('li', null, 'New Tab'),
                    React.createElement('li', null, 'New Empty Tab Group'),
                    React.createElement('li', null, 'Open File\u2026'),
                    React.createElement('li', null, 'Open Location\u2026'),
                    React.createElement('li', { className: 'separator' }),
                    React.createElement('li', null, 'Close Window'),
                    React.createElement('li', null, 'Close All Window'),
                    React.createElement('li', null, 'Close Tab'),
                    React.createElement('li', null, 'Save As\u2026'),
                    React.createElement('li', { className: 'separator' }),
                    React.createElement('li', null, 'Print\u2026'),
                ),
            ),
        );
        const trigger = screen.getByRole('button');
        expect(trigger.innerHTML).toBe('File');
        await user.click(trigger);
        expect(screen.getByTestId('file-menu')).toBeTruthy();
    });
    it('triggers props.onClose and props.onOpen at the appropriate times', async () => {
        let closedCount = 0;
        const handleClose = () => closedCount++;
        let openedCount = 0;
        const handleOpen = () => openedCount++;
        const user = userEvent.setup();
        render(
            React.createElement(
                Dropdown,
                { onClose: handleClose, onOpen: handleOpen },
                'File',
                React.createElement(
                    'ul',
                    { 'data-testid': 'file-menu' },
                    React.createElement('li', null, 'New Window'),
                    React.createElement('li', null, 'New Private Window'),
                    React.createElement('li', null, 'New Tab'),
                    React.createElement('li', null, 'New Empty Tab Group'),
                    React.createElement('li', null, 'Open File\u2026'),
                    React.createElement('li', null, 'Open Location\u2026'),
                    React.createElement('li', { className: 'separator' }),
                    React.createElement('li', null, 'Close Window'),
                    React.createElement('li', null, 'Close All Window'),
                    React.createElement('li', null, 'Close Tab'),
                    React.createElement('li', null, 'Save As\u2026'),
                    React.createElement('li', { className: 'separator' }),
                    React.createElement('li', null, 'Print\u2026'),
                ),
            ),
        );
        const trigger = screen.getByRole('button');
        expect(closedCount).toBe(0);
        expect(openedCount).toBe(0);
        await user.click(trigger);
        expect(closedCount).toBe(0);
        expect(openedCount).toBe(1);
        expect(screen.getByTestId('file-menu')).toBeTruthy();
        await user.type(trigger, '{Esc}');
        expect(closedCount).toBe(1);
        expect(openedCount).toBe(1);
        expect(screen.queryByTestId('file-menu')).toBe(null);
    });
    it('triggers props.onOpen immediately if props.isOpenOnMount', async () => {
        let closedCount = 0;
        const handleClose = () => closedCount++;
        let openedCount = 0;
        const handleOpen = () => openedCount++;
        const user = userEvent.setup();
        render(
            React.createElement(
                Dropdown,
                { isOpenOnMount: true, onClose: handleClose, onOpen: handleOpen },
                React.createElement(
                    'p',
                    { 'data-testid': 'dropdown-body' },
                    'this is the dropdown contents',
                ),
            ),
        );
        const trigger = screen.getByRole('button');
        expect(screen.getByTestId('dropdown-body')).toBeTruthy();
        expect(openedCount).toBe(1);
        await user.click(trigger);
        expect(closedCount).toBe(1);
        expect(openedCount).toBe(1);
        expect(screen.queryByTestId('dropdown-body')).toBe(null);
    });
});
//# sourceMappingURL=Dropdown.test.js.map