cb
chai-bem
npm i chai-bem
cb

chai-bem

📦 Chai assertions for BEM class names

by Denis Koltsov

1.4.1 (see all)License:MITTypeScript:Not Found
npm i chai-bem
Readme

Chai assertions for BEM class names

npm downloads travis coverage deps

Install

npm i chai-bem

Usage

Plug-in the plugin first:

import chai from 'chai';
import chaiBEM from 'chai-bem';

chai.use(chaiBEM());

Both classNames and DOM elements are supported:

expect('input input_focused').to.be.a.block('input');
expect(document.getElementById('someInput')).to.be.a.block('input');

BEM naming rules

You can set optional BEM naming rules (default values and available options are the same as in bem-naming), for example:

chai.use(chaiBEM({
    elem: '-',
    mod: '--',
    wordPattern: '[a-zA-Z0-9]+'
}));

entityHook option

If you want chai-bem hooks to work with entity types other than DOM nodes or classNames, you can add entityHook option. Example:

import { ShallowWrapper, ReactWrapper } from 'enzyme';

chai.use(chaiBEM({
    entityHook(entity) {
        // we can now work with enzyme wrappers!
        if (entity instanceof ShallowWrapper || entity instanceof ReactWrapper) {
            return entity.prop('className');
        }

        // by default return the same entity
        return entity;
    }
}))

Block

  • block method
  • validBlock property

Examples:

// check if it's an `input` block
expect('input input_focused').to.be.a.block('input');

// or you can just check if it's a valid block at all
expect('input input_focused').to.be.a.validBlock;

// this will throw an error
expect('input__control').to.be.a.validBlock;

Element

  • elem method
  • validElem property
expect('input__control').to.be.an.elem({
    block: 'input',
    elem: 'control'
});

// is it a valid element at all
expect('input__control').to.be.a.validElem;

// this will throw an error
expect('input').to.be.a.validElem;

Modificators

  • mods method
// you can check one modificator (both block and element mods are supported)
expect('sidebar sidebar_color_dark').to.have.mods({
    color: 'dark'
});
expect('menu__item menu__item_size_big').to.have.mods({
    size: 'big'
});

// or you can check a bunch
expect('menu__item menu__item_size_big menu__item_position_left').to.have.mods({
    size: 'big',
    position: 'left'
});

// this will throw an error because both mods were expected
expect('menu__item menu__item_size_big menu__item_position_left').to.have.mods({
    size: 'small',
    position: 'left'
});

// you can check boolean modificators as well (both explicit and implicit)
expect('menu menu_visible_true').to.have.mods({
    visible: true
});
expect('menu menu_visible').to.have.mods({
    visible: true
});

BEMJSON

  • bemjson or bem method
// block with a couple of mods
expect('input input_focused input_color_black').to.be.bem({
    block: 'input',
    mods: {
        focused: true,
        color: 'black'
    }
});

// element with a couple of mixes
expect('input__control random some__stuff').to.be.bem({
    block: 'input',
    elem: 'control',
    mix: [
        {
            block: 'random'
        },
        {
            block: 'some',
            elem: 'stuff'
        }
    ]
});

.not

.not is supported for all assertions. Examples:

expect('button_big').to.not.be.a.validBlock;

expect('menu__item').to.not.have.mods({
    size: 'small',
    position: 'left'
});

Downloads/wk

4

GitHub Stars

20

LAST COMMIT

5yrs ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
1.4.1
latest
5yrs ago
No alternatives found
No tutorials found
Add a tutorial