@wix/design-system
Version:
@wix/design-system
93 lines (92 loc) • 5.04 kB
JavaScript
;
var _formatSpacingValues = require("./formatSpacingValues");
var _Box = require("../Box.constants");
describe('formatSpacingValues', () => {
describe('formatSpacingValue', () => {
it('should handle undefined values', () => {
expect((0, _formatSpacingValues.formatSpacingValue)(undefined)).toBe(undefined);
});
it('should process numeric values', () => {
expect((0, _formatSpacingValues.formatSpacingValue)(0)).toBe("calc(0 * var(--wds-space-100, 6px))");
expect((0, _formatSpacingValues.formatSpacingValue)(2)).toBe("calc(2 * var(--wds-space-100, 6px))");
expect((0, _formatSpacingValues.formatSpacingValue)('5')).toBe("calc(5 * var(--wds-space-100, 6px))");
});
it('should process SPX spacing scale', () => {
expect((0, _formatSpacingValues.formatSpacingValue)('SP1')).toBe("calc(var(--wds-space-100, 6px) * 1)");
expect((0, _formatSpacingValues.formatSpacingValue)('SP2')).toBe("calc(var(--wds-space-100, 6px) * 2)");
expect((0, _formatSpacingValues.formatSpacingValue)('SP3')).toBe("calc(var(--wds-space-100, 6px) * 3)");
expect((0, _formatSpacingValues.formatSpacingValue)('SP4')).toBe("calc(var(--wds-space-100, 6px) * 4)");
expect((0, _formatSpacingValues.formatSpacingValue)('SP5')).toBe("calc(var(--wds-space-100, 6px) * 5)");
expect((0, _formatSpacingValues.formatSpacingValue)('SP6')).toBe("calc(var(--wds-space-100, 6px) * 6)");
expect((0, _formatSpacingValues.formatSpacingValue)('SP7')).toBe("calc(var(--wds-space-100, 6px) * 7)");
expect((0, _formatSpacingValues.formatSpacingValue)('SP8')).toBe("calc(var(--wds-space-100, 6px) * 8)");
expect((0, _formatSpacingValues.formatSpacingValue)('SP9')).toBe("calc(var(--wds-space-100, 6px) * 9)");
expect((0, _formatSpacingValues.formatSpacingValue)('SP10')).toBe("calc(var(--wds-space-100, 6px) * 10)");
});
it('should process predefined spacing constants', () => {
expect((0, _formatSpacingValues.formatSpacingValue)('tiny')).toBe(_Box.SPACING.tiny);
expect((0, _formatSpacingValues.formatSpacingValue)('small')).toBe(_Box.SPACING.small);
expect((0, _formatSpacingValues.formatSpacingValue)('medium')).toBe(_Box.SPACING.medium);
expect((0, _formatSpacingValues.formatSpacingValue)('large')).toBe(_Box.SPACING.large);
});
it('should handle standard CSS values', () => {
expect((0, _formatSpacingValues.formatSpacingValue)('3px')).toBe('3px');
expect((0, _formatSpacingValues.formatSpacingValue)('2rem')).toBe('2rem');
expect((0, _formatSpacingValues.formatSpacingValue)('auto')).toBe('auto');
});
it('should handle space-separated compound values', () => {
expect((0, _formatSpacingValues.formatSpacingValue)('2 3')).toBe("calc(2 * var(--wds-space-100, 6px)) calc(3 * var(--wds-space-100, 6px))");
expect((0, _formatSpacingValues.formatSpacingValue)('small medium')).toBe("".concat(_Box.SPACING.small, " ").concat(_Box.SPACING.medium));
expect((0, _formatSpacingValues.formatSpacingValue)('2px auto')).toBe('2px auto');
expect((0, _formatSpacingValues.formatSpacingValue)('SP1 2')).toBe("calc(var(--wds-space-100, 6px) * 1) calc(2 * var(--wds-space-100, 6px))");
expect((0, _formatSpacingValues.formatSpacingValue)('2 small 10px')).toBe("calc(2 * var(--wds-space-100, 6px)) ".concat(_Box.SPACING.small, " 10px"));
});
});
describe('getSpacingValues', () => {
it('should return an empty object for empty input', () => {
expect((0, _formatSpacingValues.getSpacingValues)({})).toEqual({});
});
it('should process all spacing properties in an object', () => {
var props = {
margin: 2,
padding: 'small',
marginTop: 'SP1',
paddingBottom: '10px'
};
var expected = {
margin: "calc(2 * var(--wds-space-100, 6px))",
padding: _Box.SPACING.small,
marginTop: "calc(var(--wds-space-100, 6px) * 1)",
paddingBottom: '10px'
};
expect((0, _formatSpacingValues.getSpacingValues)(props)).toEqual(expected);
});
it('should handle complex spacing properties', () => {
var props = {
margin: '2 3 small',
padding: '10px auto',
marginLeft: 'large',
paddingRight: 'SP3'
};
var expected = {
margin: "calc(2 * var(--wds-space-100, 6px)) calc(3 * var(--wds-space-100, 6px)) ".concat(_Box.SPACING.small),
padding: '10px auto',
marginLeft: _Box.SPACING.large,
paddingRight: "calc(var(--wds-space-100, 6px) * 3)"
};
expect((0, _formatSpacingValues.getSpacingValues)(props)).toEqual(expected);
});
it('should handle undefined values', () => {
var props = {
margin: undefined,
padding: 'small'
};
var expected = {
margin: undefined,
padding: _Box.SPACING.small
};
expect((0, _formatSpacingValues.getSpacingValues)(props)).toEqual(expected);
});
});
});
//# sourceMappingURL=formatSpacingValues.spec.js.map