1 | import React from 'react';
|
2 | import {shallow, mount, render} from 'enzyme';
|
3 | import {expect} from 'chai';
|
4 | import { Panel, PanelGroup } from '../src/index';
|
5 |
|
6 |
|
7 | describe('verifiy default panel', function () {
|
8 | it('Panel should be exist', function () {
|
9 | const title = (
|
10 | <h3>Panel title</h3>
|
11 | );
|
12 | let panel = shallow(<Panel header={title} footer='Panel footer'>
|
13 | Panel content
|
14 | </Panel>);
|
15 |
|
16 | expect(panel.hasClass('u-panel')).to.equal(true);
|
17 | expect(panel.find('.u-panel-heading')).to.have.length(1);
|
18 | expect(panel.find('.u-panel-title')).to.have.length(1);
|
19 | expect(panel.find('.u-panel-body')).to.have.length(1);
|
20 | expect(panel.find('.u-panel-footer')).to.have.length(1);
|
21 | expect(panel.find('h3').text()).to.equal('Panel title');
|
22 |
|
23 | });
|
24 |
|
25 | });
|
26 | describe('verifiy Collapsible panel', function () {
|
27 | it('Panel collapsible', function () {
|
28 |
|
29 | class CollapsibleDemo extends React.Component {
|
30 | constructor(...args) {
|
31 | super(...args);
|
32 | this.state = {
|
33 | open: true
|
34 | };
|
35 | }
|
36 |
|
37 | render() {
|
38 | const content = "some description";
|
39 |
|
40 | const title = (
|
41 | <h3>Panel title</h3>
|
42 | )
|
43 | return (
|
44 | <div>
|
45 | <button onClick={ ()=> this.setState({ open: !this.state.open })}>
|
46 | click
|
47 | </button>
|
48 | <Panel collapsible expanded={this.state.open}>
|
49 | { content }
|
50 | </Panel>
|
51 | </div>
|
52 | );
|
53 | }
|
54 | }
|
55 | let collapsibleDemo = shallow(<CollapsibleDemo />);
|
56 |
|
57 | //expect(collapsibleDemo.find(Panel).shallow().find('.in')).to.have.length(1);
|
58 | collapsibleDemo.find('button').simulate('click');
|
59 |
|
60 | expect(collapsibleDemo.state('open')).to.equal(false);
|
61 | expect(collapsibleDemo.find(Panel).at(0).props().expanded).to.equal(false);
|
62 | expect(collapsibleDemo.find(Panel).shallow().find('.in')).to.have.length(0);
|
63 | });
|
64 |
|
65 | });
|
66 | describe('verifiy panelGroup', function () {
|
67 | it('panelGroup click', function () {
|
68 | class PanelGroupDemo extends React.Component {
|
69 | constructor(...args) {
|
70 | super(...args);
|
71 | this.state = {
|
72 | activeKey: '1'
|
73 | };
|
74 | this.handleSelect = this.handleSelect.bind(this);
|
75 | }
|
76 | handleSelect(activeKey) {
|
77 | this.setState({ activeKey });
|
78 | }
|
79 |
|
80 | render() {
|
81 | return (
|
82 | <PanelGroup activeKey={this.state.activeKey} onSelect={this.handleSelect} accordion>
|
83 | <Panel header="Panel 1" eventKey="1">Panel 1 content</Panel>
|
84 | <Panel header="Panel 2" eventKey="2">Panel 2 content</Panel>
|
85 | </PanelGroup>
|
86 | );
|
87 | }
|
88 | }
|
89 |
|
90 |
|
91 | let panelGroupDemo = mount(<PanelGroupDemo />);
|
92 | // panelGroupDemo.find('a').at(1).simulate('click');
|
93 | // expect(panelGroupDemo.state('activeKey')).to.equal(2);
|
94 | // console.log(panelGroupDemo.find(Panel).at(1).props());
|
95 | // expect(panelGroupDemo.find(Panel).at(1).props().expanded).to.equal(true);
|
96 |
|
97 | });
|
98 |
|
99 | });
|
100 |
|
\ | No newline at end of file |