@wix/design-system
Version:
@wix/design-system
140 lines • 7.05 kB
JavaScript
import { defineClassNames, createClassNames } from './defineClassNames';
const classes = defineClassNames('input', {
root: {
variants: {
size: ['tiny', 'small', 'medium', 'large'],
border: ['standard', 'round', 'bottomLine', 'none'],
},
states: ['focus', 'disabled', 'noLeftBorderRadius'],
},
wrapper: {},
input: {},
divider: {
variants: { orientation: ['horizontal', 'vertical'] },
states: ['transparent', 'noSpacing'],
},
});
describe('defineClassNames', () => {
describe('root', () => {
it('namespaces the block name', () => {
expect(classes.root()).toBe('wds-input');
});
it('works with no config at all', () => {
expect(defineClassNames('button').root()).toBe('wds-button');
});
it('works with an empty config', () => {
expect(defineClassNames('button', {}).root()).toBe('wds-button');
});
it('renders an active variant as block--name-value', () => {
expect(classes.root({ size: 'medium' })).toBe('wds-input wds-input--size-medium');
});
it('omits unset variants', () => {
expect(classes.root({ border: 'round' })).toBe('wds-input wds-input--border-round');
});
it('omits values not in the declared set', () => {
expect(classes.root({ size: 'huge' })).toBe('wds-input');
});
it('omits false/null variant values', () => {
expect(classes.root({ size: false, border: null })).toBe('wds-input');
});
it('renders a truthy state as block--name', () => {
expect(classes.root({ disabled: true })).toBe('wds-input wds-input--disabled');
});
it('omits falsy/unset states', () => {
expect(classes.root({ disabled: false, focus: null })).toBe('wds-input');
});
it('kebab-cases camelCase state names', () => {
expect(classes.root({ noLeftBorderRadius: true })).toBe('wds-input wds-input--no-left-border-radius');
});
});
describe('slots', () => {
it('renders a slot as block__name', () => {
expect(classes.wrapper()).toBe('wds-input__wrapper');
});
it('kebab-cases camelCase slot names', () => {
const { labelContainer } = defineClassNames('toggle', {
labelContainer: {},
});
expect(labelContainer()).toBe('wds-toggle__label-container');
});
it('renders a truthy slot state as block__name--state', () => {
expect(classes.divider({ transparent: true })).toBe('wds-input__divider wds-input__divider--transparent');
});
it('renders an active slot variant as block__name--variant-value', () => {
expect(classes.divider({ orientation: 'vertical' })).toBe('wds-input__divider wds-input__divider--orientation-vertical');
});
it('omits falsy slot modifiers', () => {
expect(classes.divider({ transparent: false, orientation: null })).toBe('wds-input__divider');
});
it('kebab-cases camelCase slot state names', () => {
expect(classes.divider({ noSpacing: true })).toBe('wds-input__divider wds-input__divider--no-spacing');
});
it('treats the root key as the block, not a slot', () => {
expect(classes.root()).toBe('wds-input');
expect(classes.root()).not.toContain('__root');
});
});
describe('deterministic ordering', () => {
it('orders by config declaration, not prop order', () => {
const fromProps = classes.root({ border: 'round', size: 'tiny' });
expect(fromProps).toBe('wds-input wds-input--size-tiny wds-input--border-round');
});
it('always emits base, then variants, then states, then extras', () => {
expect(classes.root({ disabled: true, size: 'large', border: 'none' }, 'extra-1', 'extra-2')).toBe('wds-input wds-input--size-large wds-input--border-none wds-input--disabled extra-1 extra-2');
});
it('produces identical output regardless of prop key order', () => {
expect(classes.root({ size: 'small', disabled: true })).toBe(classes.root({ disabled: true, size: 'small' }));
});
it('applies the same ordering to slots', () => {
expect(classes.divider({ transparent: true, orientation: 'horizontal' }, 'extra')).toBe('wds-input__divider wds-input__divider--orientation-horizontal wds-input__divider--transparent extra');
});
});
describe('extra class names', () => {
it('appends extra classes to root', () => {
expect(classes.root({}, 'custom')).toBe('wds-input custom');
});
it('appends extra classes to a slot', () => {
expect(classes.input({}, 'custom')).toBe('wds-input__input custom');
});
it('accepts undefined props before extras', () => {
expect(classes.input(undefined, 'custom')).toBe('wds-input__input custom');
});
it('filters out falsy extras', () => {
expect(classes.root({}, false, null, undefined, 'kept')).toBe('wds-input kept');
});
});
});
describe('createClassNames with a versioned namespace', () => {
const versioned = createClassNames('input', {
root: {
variants: { size: ['tiny', 'medium'] },
states: ['disabled'],
},
wrapper: {},
divider: { states: ['transparent'] },
}, 'wds_1_283_0');
it('root() emits the stable block then the versioned block', () => {
expect(versioned.root()).toBe('wds-input wds_1_283_0-input');
});
it('root() emits both forms of the block and each active modifier', () => {
expect(versioned.root({ size: 'medium', disabled: true })).toBe('wds-input wds-input--size-medium wds-input--disabled ' +
'wds_1_283_0-input wds_1_283_0-input--size-medium wds_1_283_0-input--disabled');
});
it('slots emit the stable form then the versioned form', () => {
expect(versioned.wrapper()).toBe('wds-input__wrapper wds_1_283_0-input__wrapper');
});
it('slots emit both forms of each active modifier', () => {
expect(versioned.divider({ transparent: true })).toBe('wds-input__divider wds-input__divider--transparent ' +
'wds_1_283_0-input__divider wds_1_283_0-input__divider--transparent');
});
it('does not version consumer-passed classes', () => {
expect(versioned.root({}, 'custom')).toBe('wds-input wds_1_283_0-input custom');
expect(versioned.wrapper({}, 'custom')).toBe('wds-input__wrapper wds_1_283_0-input__wrapper custom');
});
it('emits only the stable form when the versioned namespace is empty', () => {
const stable = createClassNames('input', { wrapper: {} }, '');
expect(stable.root()).toBe('wds-input');
expect(stable.wrapper()).toBe('wds-input__wrapper');
});
});
//# sourceMappingURL=defineClassNames.spec.js.map