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