Warning: currently chai-react-suite is not tested well on different enviorments. It works for my project, but may not play well for your's. Please open issue if you have problems.
describeComponent
(render
function andhelpers
)- Ensure that component render given text
- Ensure that component's el/nested el has given class/text/attr
- Ensure that component renders another component with given props/children
- Ensure that component render collection of components (with props/children)
- Ensure that component bind events
- Ensure that component bind events
- Ensure that component calls given actions
- Testing component mixins
describeComponent
is a helper that simplify process of testing components.
Basically it does:
- Prepares playground on
beforeEach
(you will have empty block where you can render component in test). - Creates
render
function that accepts props and children and that returns rendered DOM el;render
passed as first argument to context function. - Passes helpers to context function as second argument.
var Component = rewire('component');
describeComponent(Component, function(render, helpers) {
// Tests here.
});
It accepts:
props
-Object
with props that will be passed to component (optional, can benull
),children
-*
, children that will be passed to component (optional).
// Will render described component with `{ color: 'red' }` as props and
// `'Children'` as children.
render({ color: 'red' }, 'Children');
render
have with
function that binds props and children to render
:
var bindedRender = render.with({ color: 'red' }, 'Children');
// Will render described component with `{ color: 'red' }` as props and
// `'Children'` as children.
bindedRender();
TODO
it('renders children as text', function() {
var text = 'Check, check, 1, 2, 3.';
expect(render.with(null, text)).to.render.text(text);
});
Root element:
it('renders link with "is-red" class for `color` equals "red"', function() {
expect(render.with({ color: 'red' }, 'Click me!')).to.render.el({
is: '.is-red',
href: '#',
text: 'Click me!'
});
});
Nested element:
it('renders link with "is-red" class for `color` equals "red"', function() {
expect(render.with({ color: 'red' }, 'Click me!')).to.render.el({
find: 'a',
is: '.is-red',
href: '#',
text: 'Click me!',
props: {
disabled: false,
value: 'Value'
}
});
});
expect(render).to.render.el.withClass('link');
expect(render).to.render.el.matches('a.link');
expect(render).to.render.el.withAttr('href', '#');
expect(render).to.render.el.withAttrs({
href: '#',
rel: 'link'
});
expect(render).to.render.el.withProp('disabled', false);
expect(render).to.render.el.withProps({
disabled: false,
value: 'Value'
});
expect(render).to.render.el.withValue('Input value');
expect(render).to.render.el.contains('.link-icon');
Component:
it('renders another component', function() {
expect(render).to.render.component('AnotherComponent');
});
Component with props and children (expect props equality):
it('renders another component with specified props and children', function() {
expect(render).to.render.component('AnotherComponent', {
with: [
{
type: 'test',
color: 'red'
},
'Text'
]
});
});
Fuzzy match of props:
it('renders another component with specified props and children', function() {
expect(render).to.render.component('AnotherComponent', {
with: [
match({
type: 'test',
color: 'red'
}),
'Text'
]
});
});
Works the same way as component
but instead of props and children as second
and thrid arguments it accepts array of arrays.
it('renders another component with specified props and children', function() {
expect(render).to.render.components('AnotherComponent', {
with: [
[{ type: 'test', color: 'red' }, 'Text'],
[{ type: 'test', color: 'green' }, 'Text']
]
});
});
TODO
TODO
TODO