[web] Add tests for js/components/common/Dropdown.jsx

This commit is contained in:
Matthew Shao 2017-05-11 08:43:50 +08:00
parent f295bfd558
commit ce15501c54
2 changed files with 200 additions and 0 deletions

View File

@ -0,0 +1,38 @@
import React from 'react'
import renderer from 'react-test-renderer'
import Dropdown, { Divider } from '../../../components/common/Dropdown'
describe('Dropdown Component', () => {
let dropup = renderer.create(<Dropdown dropup btnClass="foo">
<a href="#">1</a>
<Divider/>
<a href="#">2</a>
</Dropdown>),
dropdown = renderer.create(<Dropdown btnClass="foo">
<a href="#">1</a>
<a href="#">2</a>
</Dropdown>)
it('should render correctly', () => {
let tree = dropup.toJSON()
expect(tree).toMatchSnapshot()
tree = dropdown.toJSON()
expect(tree).toMatchSnapshot()
})
it('should handle open/close action', () => {
document.body.addEventListener('click', ()=>{})
let tree = dropup.toJSON(),
e = { preventDefault: jest.fn() }
tree.children[0].props.onClick(e)
expect(tree).toMatchSnapshot()
// click action when the state is open
tree.children[0].props.onClick(e)
// close
document.body.click()
expect(tree).toMatchSnapshot()
})
})

View File

@ -0,0 +1,162 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Dropdown Component should handle open/close action 1`] = `
<div
className="dropup"
>
<a
className="foo"
href="#"
onClick={[Function]}
/>
<ul
className="dropdown-menu"
role="menu"
>
<li>
<a
href="#"
>
1
</a>
</li>
<li>
<hr
className="divider"
/>
</li>
<li>
<a
href="#"
>
2
</a>
</li>
</ul>
</div>
`;
exports[`Dropdown Component should handle open/close action 2`] = `
<div
className="dropup"
>
<a
className="foo"
href="#"
onClick={[Function]}
/>
<ul
className="dropdown-menu"
role="menu"
>
<li>
<a
href="#"
>
1
</a>
</li>
<li>
<hr
className="divider"
/>
</li>
<li>
<a
href="#"
>
2
</a>
</li>
</ul>
</div>
`;
exports[`Dropdown Component should render correctly 1`] = `
<div
className="dropup"
>
<a
className="foo"
href="#"
onClick={[Function]}
/>
<ul
className="dropdown-menu"
role="menu"
>
<li>
<a
href="#"
>
1
</a>
</li>
<li>
<hr
className="divider"
/>
</li>
<li>
<a
href="#"
>
2
</a>
</li>
</ul>
</div>
`;
exports[`Dropdown Component should render correctly 2`] = `
<div
className="dropdown"
>
<a
className="foo"
href="#"
onClick={[Function]}
/>
<ul
className="dropdown-menu"
role="menu"
>
<li>
<a
href="#"
>
1
</a>
</li>
<li>
<a
href="#"
>
2
</a>
</li>
</ul>
</div>
`;