1.4.1 • Published 8 years ago

chai-bem v1.4.1

Weekly downloads
4
License
MIT
Repository
github
Last release
8 years ago

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'
});
1.4.1

8 years ago

1.4.0

9 years ago

1.3.1

9 years ago

1.3.0

9 years ago

1.2.4

10 years ago

1.2.3

10 years ago

1.2.2

10 years ago

1.2.1

10 years ago

1.2.0

10 years ago

1.1.0

10 years ago

1.0.0

10 years ago

0.0.4

10 years ago

0.0.3

10 years ago

0.0.2

10 years ago

0.0.1

10 years ago

0.0.0

10 years ago