"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const dom_1 = require("@quilted/react-testing/dom");
const responsive_1 = require("./responsive");
describe('generateResponsiveClassnames', () => {
    it('returns base className', () => {
        const prop = { background: 'surfacePrimary' };
        const classNames = responsive_1.generateResponsiveClassnames(prop);
        expect(classNames).toStrictEqual(['backgroundSurfacePrimary']);
    });
    it('returns multiple base classNames when prop maps to many properties', () => {
        const prop = { padding: 'base' };
        const classNames = responsive_1.generateResponsiveClassnames(prop);
        expect(classNames).toStrictEqual([
            'paddingInlineStartBase',
            'paddingInlineEndBase',
            'paddingBlockStartBase',
            'paddingBlockEndBase',
        ]);
    });
    it('returns responsive classNames when breakpoint is provided', () => {
        const prop = { padding: 'base' };
        const baseClassNames = responsive_1.generateResponsiveClassnames(prop, 'base');
        const smallClassNames = responsive_1.generateResponsiveClassnames(prop, 'small');
        const mediumClassNames = responsive_1.generateResponsiveClassnames(prop, 'medium');
        const largeClassNames = responsive_1.generateResponsiveClassnames(prop, 'large');
        expect(baseClassNames).toStrictEqual([
            'paddingInlineStartBase',
            'paddingInlineEndBase',
            'paddingBlockStartBase',
            'paddingBlockEndBase',
        ]);
        expect(smallClassNames).toStrictEqual([
            'smallPaddingInlineStartBase',
            'smallPaddingInlineEndBase',
            'smallPaddingBlockStartBase',
            'smallPaddingBlockEndBase',
        ]);
        expect(mediumClassNames).toStrictEqual([
            'mediumPaddingInlineStartBase',
            'mediumPaddingInlineEndBase',
            'mediumPaddingBlockStartBase',
            'mediumPaddingBlockEndBase',
        ]);
        expect(largeClassNames).toStrictEqual([
            'largePaddingInlineStartBase',
            'largePaddingInlineEndBase',
            'largePaddingBlockStartBase',
            'largePaddingBlockEndBase',
        ]);
    });
});
describe('convertLogicalProps', () => {
    it('returns prop untouched if not using a shorthand', () => {
        const logicalProps = responsive_1.convertLogicalProps('padding', 'base');
        expect(logicalProps).toStrictEqual({ padding: 'base' });
    });
    it('returns block and inline logical props when using 2 directions', () => {
        const logicalProps = responsive_1.convertLogicalProps('padding', ['base', 'tight']);
        expect(logicalProps).toStrictEqual({
            paddingBlock: 'base',
            paddingInline: 'tight',
        });
    });
    it('returns block start/end and inline start/end logical props when using 4 directions', () => {
        const logicalProps = responsive_1.convertLogicalProps('padding', [
            'base',
            'tight',
            'loose',
            'extraLoose',
        ]);
        expect(logicalProps).toStrictEqual({
            paddingBlockEnd: 'loose',
            paddingBlockStart: 'base',
            paddingInlineEnd: 'tight',
            paddingInlineStart: 'extraLoose',
        });
    });
});
describe('useResponsive', () => {
    const spy = jest.fn();
    function ResponsiveComponent(_a) {
        var props = __rest(_a, []);
        const responsiveClassNames = responsive_1.useResponsive(props);
        react_1.useEffect(() => {
            spy(responsiveClassNames);
        }, [responsiveClassNames]);
        return null;
    }
    afterEach(() => {
        spy.mockReset();
    });
    describe('padding', () => {
        it('applies the base padding classNames', () => {
            dom_1.mount(<ResponsiveComponent padding="base"/>);
            expect(spy.mock.calls).toMatchObject([
                [
                    [
                        'paddingInlineStartBase',
                        'paddingInlineEndBase',
                        'paddingBlockStartBase',
                        'paddingBlockEndBase',
                    ],
                ],
            ]);
        });
        it('applies the base block and inline padding classNames when using 2 directions shorthand', () => {
            dom_1.mount(<ResponsiveComponent padding={['base', 'tight']}/>);
            expect(spy.mock.calls).toMatchObject([
                [
                    [
                        'paddingBlockStartBase',
                        'paddingBlockEndBase',
                        'paddingInlineStartTight',
                        'paddingInlineEndTight',
                    ],
                ],
            ]);
        });
        it('applies the base block start/end and inline start/end padding classNames when using 4 directions shorthand', () => {
            dom_1.mount(<ResponsiveComponent padding={['tight', 'base', 'loose', 'extraLoose']}/>);
            expect(spy.mock.calls).toMatchObject([
                [
                    [
                        'paddingBlockStartTight',
                        'paddingInlineEndBase',
                        'paddingBlockEndLoose',
                        'paddingInlineStartExtraLoose',
                    ],
                ],
            ]);
        });
    });
    describe('background', () => {
        it('applies the base background className', () => {
            dom_1.mount(<ResponsiveComponent background="surfacePrimary"/>);
            expect(spy.mock.calls).toMatchObject([[['backgroundSurfacePrimary']]]);
        });
    });
    describe('border', () => {
        it('applies the base border classNames', () => {
            dom_1.mount(<ResponsiveComponent border="base"/>);
            expect(spy.mock.calls).toMatchObject([
                [
                    [
                        'borderInlineStartBase',
                        'borderInlineEndBase',
                        'borderBlockStartBase',
                        'borderBlockEndBase',
                    ],
                ],
            ]);
        });
        it('applies the base block and inline border classNames when using 2 directions shorthand', () => {
            dom_1.mount(<ResponsiveComponent border={['base', 'dotted']}/>);
            expect(spy.mock.calls).toMatchObject([
                [
                    [
                        'borderBlockStartBase',
                        'borderBlockEndBase',
                        'borderInlineStartDotted',
                        'borderInlineEndDotted',
                    ],
                ],
            ]);
        });
        it('applies the base block start/end and inline start/end border classNames when using 4 directions shorthand', () => {
            dom_1.mount(<ResponsiveComponent border={['base', 'dotted', 'base', 'dotted']}/>);
            expect(spy.mock.calls).toMatchObject([
                [
                    [
                        'borderBlockStartBase',
                        'borderInlineEndDotted',
                        'borderBlockEndBase',
                        'borderInlineStartDotted',
                    ],
                ],
            ]);
        });
    });
    describe('borderWidth', () => {
        it('applies the base borderWidth classNames', () => {
            dom_1.mount(<ResponsiveComponent borderWidth="thin"/>);
            expect(spy.mock.calls).toMatchObject([
                [
                    [
                        'borderWidthInlineStartThin',
                        'borderWidthInlineEndThin',
                        'borderWidthBlockStartThin',
                        'borderWidthBlockEndThin',
                    ],
                ],
            ]);
        });
        it('applies the base block and inline borderWidth classNames when using 2 directions shorthand', () => {
            dom_1.mount(<ResponsiveComponent borderWidth={['thin', 'thick']}/>);
            expect(spy.mock.calls).toMatchObject([
                [
                    [
                        'borderWidthBlockStartThin',
                        'borderWidthBlockEndThin',
                        'borderWidthInlineStartThick',
                        'borderWidthInlineEndThick',
                    ],
                ],
            ]);
        });
        it('applies the base block start/end and inline start/end borderWidth classNames when using 4 directions shorthand', () => {
            dom_1.mount(<ResponsiveComponent borderWidth={['thin', 'medium', 'thick', 'thin']}/>);
            expect(spy.mock.calls).toMatchObject([
                [
                    [
                        'borderWidthBlockStartThin',
                        'borderWidthInlineEndMedium',
                        'borderWidthBlockEndThick',
                        'borderWidthInlineStartThin',
                    ],
                ],
            ]);
        });
    });
    describe('borderColor', () => {
        it('applies the base borderColor classNames', () => {
            dom_1.mount(<ResponsiveComponent borderColor="base"/>);
            expect(spy.mock.calls).toMatchObject([
                [
                    [
                        'borderColorInlineStartBase',
                        'borderColorInlineEndBase',
                        'borderColorBlockStartBase',
                        'borderColorBlockEndBase',
                    ],
                ],
            ]);
        });
    });
    describe('borderRadius', () => {
        it('applies the base borderRadius classNames', () => {
            dom_1.mount(<ResponsiveComponent borderRadius="base"/>);
            expect(spy.mock.calls).toMatchObject([
                [
                    [
                        'borderRadiusInlineStartBase',
                        'borderRadiusInlineEndBase',
                        'borderRadiusBlockStartBase',
                        'borderRadiusBlockEndBase',
                    ],
                ],
            ]);
        });
        it('applies the base block and inline borderRadius classNames when using 2 directions shorthand', () => {
            dom_1.mount(<ResponsiveComponent borderRadius={['base', 'tight']}/>);
            expect(spy.mock.calls).toMatchObject([
                [
                    [
                        'borderRadiusBlockStartBase',
                        'borderRadiusBlockEndBase',
                        'borderRadiusInlineStartTight',
                        'borderRadiusInlineEndTight',
                    ],
                ],
            ]);
        });
        it('applies the base block start/end and inline start/end borderRadius classNames when using 4 directions shorthand', () => {
            dom_1.mount(<ResponsiveComponent borderRadius="base"/>);
            expect(spy.mock.calls).toMatchObject([
                [
                    [
                        'borderRadiusInlineStartBase',
                        'borderRadiusInlineEndBase',
                        'borderRadiusBlockStartBase',
                        'borderRadiusBlockEndBase',
                    ],
                ],
            ]);
        });
    });
    describe('spacing', () => {
        it('applies the base spacing classNames', () => {
            dom_1.mount(<ResponsiveComponent spacing="base"/>);
            expect(spy.mock.calls).toMatchObject([[['spacingBase']]]);
        });
    });
    describe('stack', () => {
        it('applies the base stack classNames', () => {
            dom_1.mount(<ResponsiveComponent stack={false}/>);
            expect(spy.mock.calls).toMatchObject([[['stackFalse']]]);
        });
    });
    describe('media', () => {
        it('applies the classNames to the specified viewport size', () => {
            dom_1.mount(<ResponsiveComponent background={{ small: 'surfacePrimary' }} border={{ small: ['dotted', 'base'] }} borderWidth={{ small: ['thin', 'medium', 'medium', 'thick'] }} borderColor={{ small: 'emphasized' }} borderRadius={{ small: ['tight', 'base', 'tight', 'base'] }} padding={{ small: 'extraLoose' }} spacing={{ small: 'thight' }}/>);
            expect(spy.mock.calls).toMatchObject([
                [
                    [
                        'smallBackgroundSurfacePrimary',
                        'smallBorderBlockStartDotted',
                        'smallBorderBlockEndDotted',
                        'smallBorderInlineStartBase',
                        'smallBorderInlineEndBase',
                        'smallBorderWidthBlockStartThin',
                        'smallBorderWidthInlineEndMedium',
                        'smallBorderWidthBlockEndMedium',
                        'smallBorderWidthInlineStartThick',
                        'smallBorderColorInlineStartEmphasized',
                        'smallBorderColorInlineEndEmphasized',
                        'smallBorderColorBlockStartEmphasized',
                        'smallBorderColorBlockEndEmphasized',
                        'smallBorderRadiusBlockStartTight',
                        'smallBorderRadiusInlineEndBase',
                        'smallBorderRadiusBlockEndTight',
                        'smallBorderRadiusInlineStartBase',
                        'smallPaddingInlineStartExtraLoose',
                        'smallPaddingInlineEndExtraLoose',
                        'smallPaddingBlockStartExtraLoose',
                        'smallPaddingBlockEndExtraLoose',
                        'smallSpacingThight',
                    ],
                ],
            ]);
        });
    });
});