@wix/design-system/dist/cjs/utils/defineClassNames.spec.js

@wix/design-system

"use strict";

var _defineClassNames2 = require("./defineClassNames");
var classes = (0, _defineClassNames2.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((0, _defineClassNames2.defineClassNames)('button').root()).toBe('wds-button');
    });
    it('works with an empty config', () => {
      expect((0, _defineClassNames2.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', () => {
      var _defineClassNames = (0, _defineClassNames2.defineClassNames)('toggle', {
          labelContainer: {}
        }),
        labelContainer = _defineClassNames.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', () => {
      var 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', () => {
  var versioned = (0, _defineClassNames2.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', () => {
    var stable = (0, _defineClassNames2.createClassNames)('input', {
      wrapper: {}
    }, '');
    expect(stable.root()).toBe('wds-input');
    expect(stable.wrapper()).toBe('wds-input__wrapper');
  });
});
//# sourceMappingURL=defineClassNames.spec.js.map