@navinc/base-react-components/dist/info-drawer.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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { describe, expect, it, vi } from 'vitest';
import { useState } from 'react';
import { renderWithContext } from './tests/with-app-context.js';
import { screen, waitFor } from '@testing-library/react';
import { InfoDrawer, useInfoDrawer, InfoDrawerProvider } from './info-drawer.js';
import userEvent from '@testing-library/user-event';
const Test = ({ onClose, heightVariation = undefined, width = undefined }) => {
    const { setInfoDrawer } = useInfoDrawer({ onClose });
    const content = (_jsx("div", { children: _jsx("button", { onClick: () => {
                setInfoDrawer({ isOpen: false });
            }, children: "Content Button" }) }));
    return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => {
                    setInfoDrawer({ title: 'test', isOpen: true, heightVariation, width, content });
                }, children: "Open Info Drawer" }), _jsx("button", { onClick: () => {
                    setInfoDrawer({ title: 'test', isOpen: true, content });
                }, children: "Basic Drawer" })] }));
};
const TestContentFn = ({ onClose }) => {
    const { setInfoDrawer } = useInfoDrawer({ onClose });
    const content = ({ setInfoDrawer: localSetInfoDrawer, isOpen }) => (_jsxs("div", { children: [isOpen ? 'Is Open' : 'Not Open', _jsx("button", { onClick: () => {
                    localSetInfoDrawer({ isOpen: false });
                }, children: "Content Button" })] }));
    return (_jsx("button", { onClick: () => {
            setInfoDrawer({ title: 'test', isOpen: true, content });
        }, children: "Open Info Drawer" }));
};
const TestContentComponent = ({ onClose }) => {
    const { setInfoDrawer } = useInfoDrawer({ onClose });
    const ContentComponent = ({ setInfoDrawer: localSetInfoDrawer, isOpen, testValue }) => {
        const [value, setValue] = useState(0);
        return (_jsxs("div", { children: [isOpen ? 'Is Open' : 'Not Open', _jsx("button", { onClick: () => {
                        localSetInfoDrawer({ isOpen: false });
                    }, children: "Content Button" }), _jsx("button", { onClick: () => {
                        setValue((v) => v + 1);
                    }, children: "Increment" }), _jsx("div", { "data-testid": "increment-value", children: value }), _jsx("div", { children: testValue })] }));
    };
    return (_jsx("button", { onClick: () => {
            setInfoDrawer({
                title: 'test',
                isOpen: true,
                content: ContentComponent,
                contentProps: { testValue: 'test prop through contentProps' },
            });
        }, children: "Open Info Drawer" }));
};
describe('InfoDrawer', () => {
    it('calls onClose callback when closed', () => __awaiter(void 0, void 0, void 0, function* () {
        const onClose = vi.fn();
        renderWithContext(_jsxs(InfoDrawerProvider, { children: [_jsx(InfoDrawer, {}), _jsx(Test, { onClose: onClose })] }));
        const button = yield screen.findByText(/Open Info Drawer/i);
        yield userEvent.click(button);
        const icon = yield screen.findByTestId('info-drawer:close-button');
        yield userEvent.click(icon);
        yield waitFor(() => expect(onClose).toHaveBeenCalled());
    }));
    it('sets closed styles', () => __awaiter(void 0, void 0, void 0, function* () {
        renderWithContext(_jsxs(InfoDrawerProvider, { children: [_jsx(InfoDrawer, {}), _jsx(Test, {})] }));
        const drawer = screen.getByTestId('info-drawer:drawer');
        expect(drawer).toHaveStyle({ transform: 'translateX(485px)' });
        const button = yield screen.findByText(/Open Info Drawer/i);
        yield userEvent.click(button);
        yield screen.findByTestId('info-drawer:close-button', { timeout: 500 });
        expect(drawer).toHaveStyle({ transform: 'translateX(0px)' });
    }));
    it('sets open styles', () => __awaiter(void 0, void 0, void 0, function* () {
        renderWithContext(_jsxs(InfoDrawerProvider, { children: [_jsx(InfoDrawer, {}), _jsx(Test, {})] }));
        const button = yield screen.findByText(/Open Info Drawer/i);
        yield userEvent.click(button);
        yield screen.findByTestId('info-drawer:close-button', { timeout: 500 });
        expect(screen.getByTestId('info-drawer:drawer')).toHaveStyle({ transform: 'translateX(0px)' });
    }));
    it('passes heightVariation through setInfoDrawer', () => __awaiter(void 0, void 0, void 0, function* () {
        renderWithContext(_jsxs(InfoDrawerProvider, { children: [_jsx(InfoDrawer, {}), _jsx(Test, { heightVariation: "full" })] }));
        const button = yield screen.findByText(/Open Info Drawer/i);
        yield userEvent.click(button);
        yield screen.findByTestId('info-drawer:close-button', { timeout: 500 });
        expect(screen.getByTestId('info-drawer:drawer')).toHaveStyle({ height: '100dvh' });
    }));
    it('if no heightVariation is set, default to dynamic', () => __awaiter(void 0, void 0, void 0, function* () {
        renderWithContext(_jsxs(InfoDrawerProvider, { children: [_jsx(InfoDrawer, {}), _jsx(Test, {})] }));
        const button = yield screen.findByText(/Open Info Drawer/i);
        yield userEvent.click(button);
        yield screen.findByTestId('info-drawer:close-button', { timeout: 500 });
        expect(screen.getByTestId('info-drawer:drawer')).toHaveStyle({ minHeight: '80px' });
    }));
    it('resets height and width for basic drawer config', () => __awaiter(void 0, void 0, void 0, function* () {
        renderWithContext(_jsxs(InfoDrawerProvider, { children: [_jsx(InfoDrawer, {}), _jsx(Test, { heightVariation: "full", width: "50vw" })] }));
        const button = yield screen.findByText(/Open Info Drawer/i);
        yield userEvent.click(button);
        const closeButton = yield screen.findByTestId('info-drawer:close-button', { timeout: 500 });
        expect(screen.getByTestId('info-drawer:drawer')).toHaveStyle({ height: '100dvh' });
        yield userEvent.click(closeButton);
        const basicDrawerButton = yield screen.findByText(/Basic Drawer/i);
        yield userEvent.click(basicDrawerButton);
        yield screen.findByTestId('info-drawer:close-button', { timeout: 500 });
        expect(screen.getByTestId('info-drawer:drawer')).toHaveStyle({ height: 'auto' });
    }));
    it('calls the close callback from actions within content', () => __awaiter(void 0, void 0, void 0, function* () {
        const onClose = vi.fn();
        renderWithContext(_jsxs(InfoDrawerProvider, { children: [_jsx(InfoDrawer, {}), _jsx(Test, { onClose: onClose })] }));
        const button = yield screen.findByText(/Open Info Drawer/i);
        yield userEvent.click(button);
        const contentButton = yield screen.findByText('Content Button');
        yield userEvent.click(contentButton);
        expect(onClose).toHaveBeenCalled();
    }));
    it('calls the close callback from actions within content function', () => __awaiter(void 0, void 0, void 0, function* () {
        const onClose = vi.fn();
        renderWithContext(_jsxs(InfoDrawerProvider, { children: [_jsx(InfoDrawer, {}), _jsx(TestContentFn, { onClose: onClose })] }));
        const button = yield screen.findByText(/Open Info Drawer/i);
        yield userEvent.click(button);
        expect(screen.getByText('Is Open')).toBeInTheDocument();
        const contentButton = yield screen.findByText('Content Button');
        yield userEvent.click(contentButton);
        expect(onClose).toHaveBeenCalled();
    }));
    it('renders a content component correctly', () => __awaiter(void 0, void 0, void 0, function* () {
        const onClose = vi.fn();
        renderWithContext(_jsxs(InfoDrawerProvider, { children: [_jsx(InfoDrawer, {}), _jsx(TestContentComponent, { onClose: onClose })] }));
        const button = yield screen.findByText(/Open Info Drawer/i);
        yield userEvent.click(button);
        expect(screen.getByText('Is Open')).toBeInTheDocument();
        expect(screen.getByText('test prop through contentProps')).toBeInTheDocument();
        const incrementValue = screen.getByTestId('increment-value');
        expect(incrementValue).toHaveTextContent('0');
        const incrementButton = screen.getByText('Increment');
        yield userEvent.click(incrementButton);
        expect(incrementValue).toHaveTextContent('1');
        const contentButton = yield screen.findByText('Content Button');
        yield userEvent.click(contentButton);
        expect(onClose).toHaveBeenCalled();
    }));
});
//# sourceMappingURL=info-drawer.spec.js.map