"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 jest_dom_mocks_1 = require("@shopify/jest-dom-mocks");
const faker_1 = __importDefault(require("faker"));
const test_utilities_1 = require("../../test-utilities");
const Link_1 = require("../Link");
const Spinner_1 = require("../Spinner");
const Form_1 = require("../Form");
const Button_1 = require("./Button");
const defaultProps = {
    children: 'Go to next step',
};
describe('<Button />', () => {
    beforeEach(() => {
        jest_dom_mocks_1.matchMedia.mock();
    });
    afterEach(() => {
        jest_dom_mocks_1.matchMedia.restore();
    });
    describe('`<button />`', () => {
        describe('children', () => {
            it('renders the children into the button', () => {
                const text = 'Go to shipping';
                const button = test_utilities_1.mountWithContext(<Button_1.Button>{text}</Button_1.Button>);
                expect(button).toContainReactText(text);
            });
            it('renders the children into the link', () => {
                const text = 'Go to shipping';
                const linkButton = test_utilities_1.mountWithContext(<Button_1.Button to="/shipping">{text}</Button_1.Button>);
                expect(linkButton).toContainReactText(text);
            });
        });
        describe('onPress()', () => {
            it('is called when button is pressed', () => {
                const onPressSpy = jest.fn();
                const button = test_utilities_1.mountWithContext(<Button_1.Button {...defaultProps} onPress={onPressSpy}/>);
                button.find('button').trigger('onClick');
                expect(onPressSpy).toHaveBeenCalledTimes(1);
            });
        });
    });
    describe('`<UnstyledLink />`', () => {
        it('renders when a url is provided', () => {
            const url = '/shipping';
            const button = test_utilities_1.mountWithContext(<Button_1.Button {...defaultProps} to={url}/>);
            expect(button).toContainReactComponent(Link_1.UnstyledLink, { to: url });
        });
        it('renders a button when disabled', () => {
            const button = test_utilities_1.mountWithContext(<Button_1.Button {...defaultProps} disabled to="/shipping"/>);
            expect(button).not.toContainReactComponent(Link_1.UnstyledLink);
            expect(button).toContainReactComponent('button', {
                disabled: true,
            });
        });
    });
    describe('submit', () => {
        it('renders a type button when not present', () => {
            const button = test_utilities_1.mountWithContext(<Button_1.Button {...defaultProps}/>);
            expect(button).toContainReactComponent('button', { type: 'button' });
        });
        it('renders a type submit when present', () => {
            const button = test_utilities_1.mountWithContext(<Button_1.Button {...defaultProps} submit/>);
            expect(button).toContainReactComponent('button', { type: 'submit' });
        });
        it('renders a form id when rendered in a nested form', () => {
            const testId = faker_1.default.random.word();
            const button = test_utilities_1.mountWithContext(<Form_1.Form onSubmit={noop}>
          <Form_1.Form id={testId} onSubmit={noop}>
            <Button_1.Button {...defaultProps} submit/>
          </Form_1.Form>
        </Form_1.Form>);
            expect(button).toContainReactComponent('button', {
                type: 'submit',
                form: testId,
            });
        });
        it('does not render a form id when rendered in a non-nested form', () => {
            const button = test_utilities_1.mountWithContext(<Form_1.Form onSubmit={noop}>
          <Button_1.Button {...defaultProps} submit/>
        </Form_1.Form>);
            expect(button).toContainReactComponent('button', {
                type: 'submit',
                form: undefined,
            });
        });
    });
    describe('loading', () => {
        it('disables button when loading', () => {
            const button = test_utilities_1.mountWithContext(<Button_1.Button {...defaultProps} loading/>);
            expect(button).toContainReactComponent('button', { disabled: true });
        });
        it('indicates that the button is getting updated', () => {
            const button = test_utilities_1.mountWithContext(<Button_1.Button {...defaultProps} loading/>);
            expect(button).toContainReactComponent('button', { 'aria-busy': true });
            const unstyledLink = test_utilities_1.mountWithContext(<Button_1.Button {...defaultProps} loading to="/shipping"/>);
            expect(unstyledLink).toContainReactComponent(Link_1.UnstyledLink, {
                ariaBusy: true,
            });
        });
        it('does not indicate that the button is getting updated when not set', () => {
            const button = test_utilities_1.mountWithContext(<Button_1.Button {...defaultProps}/>);
            expect(button).toContainReactComponent('button', {
                'aria-busy': undefined,
            });
        });
        it('sets the right priority of announcement for screen readers', () => {
            const button = test_utilities_1.mountWithContext(<Button_1.Button {...defaultProps} loading/>);
            expect(button).toContainReactComponent('button', {
                'aria-live': 'assertive',
            });
            const unstyledLink = test_utilities_1.mountWithContext(<Button_1.Button {...defaultProps} loading to="/shipping"/>);
            expect(unstyledLink).toContainReactComponent(Link_1.UnstyledLink, {
                ariaLive: 'assertive',
            });
        });
        it('renders a <Spinner> when loading', () => {
            jest_dom_mocks_1.matchMedia.setMedia(() => ({ matches: false }));
            const button = test_utilities_1.mountWithContext(<Button_1.Button {...defaultProps} loading/>);
            expect(button).toContainReactComponent(Spinner_1.Spinner);
        });
        it('renders the loadingLabel as the Spinner children when provided', () => {
            const button = test_utilities_1.mountWithContext(<Button_1.Button {...defaultProps} loadingLabel="Processing" loading/>);
            expect(button).toContainReactComponent(Spinner_1.Spinner, {
                accessibilityLabel: 'Processing',
            });
        });
        it('adds the Spinner class when user does not prefers reduced motion', () => {
            jest_dom_mocks_1.matchMedia.setMedia(() => ({ matches: false }));
            const button = test_utilities_1.mountWithContext(<Button_1.Button {...defaultProps} loadingLabel="Processing" loading/>);
            expect(button).toContainReactComponent('span', {
                className: 'LoadingContent Spinner',
            });
        });
        it('removes the Spinner class when user prefers reduced motion', () => {
            jest_dom_mocks_1.matchMedia.setMedia(() => ({ matches: true }));
            const button = test_utilities_1.mountWithContext(<Button_1.Button {...defaultProps} loadingLabel="Processing" loading/>);
            expect(button).not.toContainReactComponent('span', {
                className: 'LoadingContent Spinner',
            });
        });
    });
    describe('accessibilityLabel', () => {
        it('renders an accessible label when provided', () => {
            const content = 'Accessible label';
            const button = test_utilities_1.mountWithContext(<Button_1.Button {...defaultProps} accessibilityLabel={content}/>);
            expect(button).toContainReactComponent('button', { 'aria-label': content });
            const unstyledLink = test_utilities_1.mountWithContext(<Button_1.Button {...defaultProps} accessibilityLabel={content} to="/shipping"/>);
            expect(unstyledLink).toContainReactComponent(Link_1.UnstyledLink, {
                ariaLabel: content,
            });
        });
    });
});
function noop() { }