"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const faker_1 = __importDefault(require("faker"));
const test_utilities_1 = require("../../test-utilities");
const Heading_1 = require("../Heading");
const Modal_1 = require("./Modal");
const Child = () => <div />;
describe('<Modal />', () => {
    const defaultProps = {
        title: faker_1.default.random.words(2),
        children: <Child />,
        open: true,
        onClose: () => { },
    };
    const defaultPropsWithSource = Object.assign(Object.assign({}, defaultProps), { children: undefined, source: faker_1.default.internet.url() });
    const defaultPropsWithBlocking = Object.assign(Object.assign({}, defaultProps), { onClose: undefined });
    describe('open prop', () => {
        it('renders the modal when the open prop is true', async () => {
            const modal = await test_utilities_1.mountWithContext(<Modal_1.Modal {...defaultProps}/>);
            expect(modal).toContainReactComponent(Child);
        });
        it("doesn't render the modal when the open prop is false", async () => {
            const modal = await test_utilities_1.mountWithContext(<Modal_1.Modal {...defaultProps} open={false}/>);
            expect(modal).not.toContainReactComponent(Child);
        });
    });
    it('renders an iframe is the src prop is passed', async () => {
        const modal = await test_utilities_1.mountWithContext(<Modal_1.Modal {...defaultPropsWithSource}/>);
        expect(modal).toContainReactComponent('iframe', {
            src: defaultPropsWithSource.source,
            title: defaultPropsWithSource.title,
        });
    });
    it('renders its children if no src prop is passed', async () => {
        const modal = await test_utilities_1.mountWithContext(<Modal_1.Modal {...defaultProps}/>);
        expect(modal).not.toContainReactComponent('iframe');
        expect(modal).toContainReactComponent(Child);
    });
    it('renders a header with Heading if the title prop is passed', async () => {
        const modal = await test_utilities_1.mountWithContext(<Modal_1.Modal {...defaultProps}/>);
        expect(modal).toContainReactComponent('header');
        expect(modal).toContainReactComponent(Heading_1.Heading);
        expect(modal).toContainReactText(defaultProps.title);
    });
    it('does not render a Heading if titleHidden', async () => {
        const modal = await test_utilities_1.mountWithContext(<Modal_1.Modal {...defaultProps} titleHidden/>);
        expect(modal).not.toContainReactComponent(Heading_1.Heading);
    });
    it('still renders a close button if titleHidden', async () => {
        const modal = await test_utilities_1.mountWithContext(<Modal_1.Modal {...defaultProps} titleHidden/>);
        const header = modal.find('header');
        expect(header).toContainReactComponent('button');
    });
    describe('when the escape key is pressed', () => {
        it('calls onClose callback', async () => {
            const onCloseSpy = jest.fn();
            const modal = await test_utilities_1.mountWithContext(<Modal_1.Modal {...defaultProps} onClose={onCloseSpy}/>);
            const event = new KeyboardEvent('keydown', { key: 'Escape' });
            modal.act(() => document.dispatchEvent(event));
            expect(onCloseSpy).toHaveBeenCalledTimes(1);
        });
    });
    describe('when the close button is clicked', () => {
        it('calls onClose callback', async () => {
            var _a;
            const onCloseSpy = jest.fn();
            const modal = await test_utilities_1.mountWithContext(<Modal_1.Modal {...defaultProps} onClose={onCloseSpy}/>);
            const header = modal.find('header');
            (_a = header === null || header === void 0 ? void 0 : header.find('button')) === null || _a === void 0 ? void 0 : _a.trigger('onClick');
            expect(onCloseSpy).toHaveBeenCalledTimes(1);
        });
        // Skipped until we figure out how to test async events
        // as the `iframeHeight` is reset on `transitionend`
        // eslint-disable-next-line jest/no-disabled-tests
        it.skip('resets the iFrameHeight', async () => {
            var _a, _b;
            const expectedHeight = 100;
            const fakeEvent = {
                target: {
                    contentWindow: { document: { body: { scrollHeight: expectedHeight } } },
                },
            };
            const modal = await test_utilities_1.mountWithContext(<Modal_1.Modal {...defaultPropsWithSource}/>);
            (_a = modal.find('iframe')) === null || _a === void 0 ? void 0 : _a.trigger('onLoad', fakeEvent);
            expect(modal.find('iframe').prop('style')).toMatchObject({
                height: expectedHeight,
            });
            (_b = modal.find('header button')) === null || _b === void 0 ? void 0 : _b.trigger('onClick');
            modal.setProps({ open: false });
            modal.setProps({ open: true });
            expect(modal.find('iframe').prop('style')).toBeUndefined();
        });
    });
    describe('when the backdrop is clicked', () => {
        it('calls onClose callback', async () => {
            const onCloseSpy = jest.fn();
            const modal = await test_utilities_1.mountWithContext(<Modal_1.Modal {...defaultProps} onClose={onCloseSpy}/>);
            const backdrop = modal.findWhere((node) => { var _a; return (_a = node === null || node === void 0 ? void 0 : node.props.className) === null || _a === void 0 ? void 0 : _a.includes('Backdrop'); });
            backdrop === null || backdrop === void 0 ? void 0 : backdrop.trigger('onClick');
            expect(onCloseSpy).toHaveBeenCalledTimes(1);
        });
    });
    describe('blocking prop', () => {
        it("doesn't render the close button", async () => {
            const modal = await test_utilities_1.mountWithContext(<Modal_1.Modal {...defaultPropsWithBlocking} blocking/>);
            expect(modal).not.toContainReactComponent('header button');
        });
        it("doesn't close the modal when the escape key is pressed", async () => {
            const modal = await test_utilities_1.mountWithContext(<Modal_1.Modal {...defaultPropsWithBlocking} blocking/>);
            const event = new KeyboardEvent('keydown', { key: 'Escape' });
            modal.act(() => document.dispatchEvent(event));
            expect(modal).toContainReactComponent(Child);
        });
    });
    describe('blockSize prop', () => {
        it("doesn't add the onLoad prop when present", async () => {
            const modal = await test_utilities_1.mountWithContext(<Modal_1.Modal blockSize="fill" {...defaultPropsWithSource}/>);
            const iframe = modal.find('iframe');
            expect(iframe === null || iframe === void 0 ? void 0 : iframe.prop('onLoad')).toBeUndefined();
        });
        it('adds the onLoad prop when absent', async () => {
            const modal = await test_utilities_1.mountWithContext(<Modal_1.Modal {...defaultPropsWithSource}/>);
            const iframe = modal.find('iframe');
            expect(iframe === null || iframe === void 0 ? void 0 : iframe.prop('onLoad')).not.toBeUndefined();
        });
    });
    describe('maxInlineSize prop', () => {
        it('sets a max-width to the dialog', async () => {
            const modal = await test_utilities_1.mountWithContext(<Modal_1.Modal maxInlineSize={0.9} {...defaultProps}/>);
            expect(modal).toContainReactComponent('div', {
                style: { maxWidth: '90%' },
            });
        });
    });
});