npm i -D rebem-enzyme
In addition to usual Enzyme methods there are few new which lets you search for components by BEM PropTypes instead of selector
:
{
block
elem
mods
mix
}
This object may be called bemjson
.
👉 Examples below illustrates how it work with shallow
wrapper just to be short – mount
wrapper has absolutely the same methods.
In addition to find()
.
import { BEM } from 'rebem';
import { shallow } from 'rebem-enzyme';
const wrapper = shallow(
BEM({ block: 'block' },
BEM({ block: 'block', elem: 'elem' }),
BEM({ block: 'block2' })
)
);
console.log(
wrapper.findBEM({ block: 'block', elem: 'elem' }).length
);
// 1
In addition to filter()
.
import { BEM } from 'rebem';
import { shallow } from 'rebem-enzyme';
const wrapper = shallow(
BEM({ block: 'block' },
BEM({ block: 'block', elem: 'elem' }),
BEM({ block: 'block2' })
)
);
const children = wrapper.children();
console.log(
children.filterBEM({ block: 'block', elem: 'elem' }).length
);
// 1
In addition to not()
.
import { BEM } from 'rebem';
import { shallow } from 'rebem-enzyme';
const wrapper = shallow(
BEM({ block: 'block' },
BEM({ block: 'block', elem: 'elem' }),
BEM({ block: 'block2' })
)
);
const children = wrapper.children();
console.log(
children.notBEM({ block: 'block', elem: 'elem' }).length
);
// 1
In addition to is()
.
import { BEM } from 'rebem';
import { shallow } from 'rebem-enzyme';
const wrapper = shallow(
BEM({ block: 'block', elem: 'elem' })
);
console.log(
wrapper.isBEM({ block: 'block', elem: 'elem' })
);
// true
In addition to closest()
.
import { BEM } from 'rebem';
import { shallow } from 'rebem-enzyme';
const wrapper = shallow(
BEM({ block: 'block', mods: { mod: true } },
BEM({ block: 'block', elem: 'elem' }),
BEM({ block: 'block2' })
)
);
const firstChild = wrapper.children().first();
console.log(
firstChild.closestBEM({ block: 'block', mods: { mod: true } }).length
);
// 1
In addition to some()
.
import { BEM } from 'rebem';
import { shallow } from 'rebem-enzyme';
const wrapper = shallow(
BEM({ block: 'block' },
BEM({ block: 'block', elem: 'elem' }),
BEM({ block: 'block2' })
)
);
const children = wrapper.children();
console.log(
children.someBEM({ block: 'block', elem: 'elem' })
);
// true
In addition to every()
.
import { BEM } from 'rebem';
import { shallow } from 'rebem-enzyme';
const wrapper = shallow(
BEM({ block: 'block' },
BEM({ block: 'block', elem: 'elem' }),
BEM({ block: 'block2' })
)
);
const children = wrapper.children();
console.log(
children.everyBEM({ block: 'block', elem: 'elem' })
);
// false