@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