@cainthus/alex-library/src/helpers/components.spec.ts

Component React library for Cainthus - Alex Dashboard.

import {
  addClassNameWithModifiers, addClassNames, parseBooleanModifierToString,
} from './components';

describe('Components helper methods', () => {
  const componentName = 'app-component';
  
  describe('When adding classnames with a list of modifiers', () => {
    let modifiers: string[];

    beforeEach(() => {
      modifiers = ['mod1', 'mod2'];
    });

    it('should return a list of component modifiers', () => {
      expect(
        addClassNameWithModifiers(
          componentName,
          ...modifiers
        )
      ).toEqual(`${componentName} ${componentName}_${modifiers[0]} ${componentName}_${modifiers[1]}`);
    });

    it('should skip empty string modifiers', () => {
      const mods = [...modifiers];
      mods.splice(1, 0, '');

      expect(
        addClassNameWithModifiers(
          componentName,
          ...mods
        )
      ).toEqual(`${componentName} ${componentName}_${mods[0]} ${componentName}_${mods[2]}`);
    });
  })

  describe('when having a list with multiple classnames', () => {
    const str1 = 'app-component';
    const str2 = 'app-component_custom';
    const str3 = 'app-component_big';
    const classNames = [str1, str2, str3];

    it('should return a string of classnames to be used by the component', () => {
      expect(addClassNames(...classNames)).toEqual(` ${str1} ${str2} ${str3}`)
    });
  })

  describe('when converting boolean modifiers into custom classname modifiers', () => {
    const roundedModifier = '_rounded';

    it('should return the string modifier if modifier is `true`', () => {
      const rounded = true;
      expect(parseBooleanModifierToString(rounded, roundedModifier))
        .toEqual(roundedModifier);
      });
      
    it('should not return the string modifier if modifier is `false`', () => {
      const rounded = false;
      expect(parseBooleanModifierToString(rounded, roundedModifier))
        .toEqual('');
    })
  });
});