Skip to content

Commit 52a6886

Browse files
committed
refactor(Tabs): cleanup, test coverage
1 parent 7632881 commit 52a6886

File tree

2 files changed

+85
-131
lines changed

2 files changed

+85
-131
lines changed

src/views/Base/Tabs/Tabs.js

Lines changed: 73 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React, { Component } from 'react';
2-
import { Badge, Col, Nav, NavItem, NavLink, Row, TabContent, TabPane } from 'reactstrap';
1+
import React, {Component} from 'react';
2+
import {Badge, Col, Nav, NavItem, NavLink, Row, TabContent, TabPane} from 'reactstrap';
33
import classnames from 'classnames';
44

55
class Tabs extends Component {
@@ -9,16 +9,36 @@ class Tabs extends Component {
99

1010
this.toggle = this.toggle.bind(this);
1111
this.state = {
12-
activeTab: '1',
12+
activeTab: new Array(4).fill('1'),
1313
};
1414
}
1515

16-
toggle(tab) {
17-
if (this.state.activeTab !== tab) {
18-
this.setState({
19-
activeTab: tab,
20-
});
21-
}
16+
lorem() {
17+
return 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.'
18+
}
19+
20+
toggle(tabPane, tab) {
21+
const newArray = this.state.activeTab.slice()
22+
newArray[tabPane] = tab
23+
this.setState({
24+
activeTab: newArray,
25+
});
26+
}
27+
28+
tabPane() {
29+
return (
30+
<>
31+
<TabPane tabId="1">
32+
{`1. ${this.lorem()}`}
33+
</TabPane>
34+
<TabPane tabId="2">
35+
{`2. ${this.lorem()}`}
36+
</TabPane>
37+
<TabPane tabId="3">
38+
{`3. ${this.lorem()}`}
39+
</TabPane>
40+
</>
41+
);
2242
}
2343

2444
render() {
@@ -29,207 +49,129 @@ class Tabs extends Component {
2949
<Nav tabs>
3050
<NavItem>
3151
<NavLink
32-
className={classnames({ active: this.state.activeTab === '1' })}
33-
onClick={() => { this.toggle('1'); }}
52+
active={this.state.activeTab[0] === '1'}
53+
onClick={() => { this.toggle(0, '1'); }}
3454
>
3555
Home
3656
</NavLink>
3757
</NavItem>
3858
<NavItem>
3959
<NavLink
40-
className={classnames({ active: this.state.activeTab === '2' })}
41-
onClick={() => { this.toggle('2'); }}
60+
active={this.state.activeTab[0] === '2'}
61+
onClick={() => { this.toggle(0, '2'); }}
4262
>
4363
Profile
4464
</NavLink>
4565
</NavItem>
4666
<NavItem>
4767
<NavLink
48-
className={classnames({ active: this.state.activeTab === '3' })}
49-
onClick={() => { this.toggle('3'); }}
68+
active={this.state.activeTab[0] === '3'}
69+
onClick={() => { this.toggle(0, '3'); }}
5070
>
5171
Messages
5272
</NavLink>
5373
</NavItem>
5474
</Nav>
55-
<TabContent activeTab={this.state.activeTab}>
56-
<TabPane tabId="1">
57-
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
58-
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
59-
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
60-
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
61-
officia deserunt mollit anim id est laborum.
62-
</TabPane>
63-
<TabPane tabId="2">
64-
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
65-
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
66-
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
67-
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
68-
officia deserunt mollit anim id est laborum.
69-
</TabPane>
70-
<TabPane tabId="3">
71-
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
72-
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
73-
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
74-
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
75-
officia deserunt mollit anim id est laborum.
76-
</TabPane>
75+
<TabContent activeTab={this.state.activeTab[0]}>
76+
{this.tabPane()}
7777
</TabContent>
7878
</Col>
7979
<Col xs="12" md="6" className="mb-4">
8080
<Nav tabs>
8181
<NavItem>
8282
<NavLink
83-
className={classnames({ active: this.state.activeTab === '1' })}
84-
onClick={() => { this.toggle('1'); }}
83+
active={this.state.activeTab[1] === '1'}
84+
onClick={() => { this.toggle(1, '1'); }}
8585
>
8686
<i className="icon-calculator"></i>
8787
</NavLink>
8888
</NavItem>
8989
<NavItem>
9090
<NavLink
91-
className={classnames({ active: this.state.activeTab === '2' })}
92-
onClick={() => { this.toggle('2'); }}
91+
active={this.state.activeTab[1] === '2'}
92+
onClick={() => { this.toggle(1, '2'); }}
9393
>
9494
<i className="icon-basket-loaded"></i>
9595
</NavLink>
9696
</NavItem>
9797
<NavItem>
9898
<NavLink
99-
className={classnames({ active: this.state.activeTab === '3' })}
100-
onClick={() => { this.toggle('3'); }}
99+
active={this.state.activeTab[1] === '3'}
100+
onClick={() => { this.toggle(1, '3'); }}
101101
>
102102
<i className="icon-pie-chart"></i>
103103
</NavLink>
104104
</NavItem>
105105
</Nav>
106-
<TabContent activeTab={this.state.activeTab}>
107-
<TabPane tabId="1">
108-
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
109-
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
110-
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
111-
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
112-
officia deserunt mollit anim id est laborum.
113-
</TabPane>
114-
<TabPane tabId="2">
115-
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
116-
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
117-
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
118-
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
119-
officia deserunt mollit anim id est laborum.
120-
</TabPane>
121-
<TabPane tabId="3">
122-
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
123-
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
124-
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
125-
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
126-
officia deserunt mollit anim id est laborum.
127-
</TabPane>
128-
</TabContent>
106+
<TabContent activeTab={this.state.activeTab[1]}>
107+
{this.tabPane()}
108+
</TabContent>
129109
</Col>
130110
<Col xs="12" md="6" className="mb-4">
131111
<Nav tabs>
132112
<NavItem>
133113
<NavLink
134-
className={classnames({ active: this.state.activeTab === '1' })}
135-
onClick={() => { this.toggle('1'); }}
114+
active={this.state.activeTab[2] === '1'}
115+
onClick={() => { this.toggle(2, '1'); }}
136116
>
137-
<i className="icon-calculator"></i> <span className={this.state.activeTab === '1' ? '' : 'd-none'}> Calculator</span>
117+
<i className="icon-calculator"></i> <span className={this.state.activeTab[2] === '1' ? '' : 'd-none'}> Calculator</span>
138118
</NavLink>
139119
</NavItem>
140120
<NavItem>
141121
<NavLink
142-
className={classnames({ active: this.state.activeTab === '2' })}
143-
onClick={() => { this.toggle('2'); }}
122+
active={this.state.activeTab[2] === '2'}
123+
onClick={() => { this.toggle(2, '2'); }}
144124
>
145125
<i className="icon-basket-loaded"></i> <span
146-
className={this.state.activeTab === '2' ? '' : 'd-none'}> Shopping cart</span>
126+
className={this.state.activeTab[2] === '2' ? '' : 'd-none'}> Shopping cart</span>
147127
</NavLink>
148128
</NavItem>
149129
<NavItem>
150130
<NavLink
151-
className={classnames({ active: this.state.activeTab === '3' })}
152-
onClick={() => { this.toggle('3'); }}
131+
className={classnames({ active: this.state.activeTab[2] === '3' })}
132+
onClick={() => { this.toggle(2,'3'); }}
153133
>
154-
<i className="icon-pie-chart"></i> <span className={this.state.activeTab === '3' ? '' : 'd-none'}> Charts</span>
134+
<i className="icon-pie-chart"></i> <span className={this.state.activeTab[2] === '3' ? '' : 'd-none'}> Charts</span>
155135
</NavLink>
156136
</NavItem>
157137
</Nav>
158-
<TabContent activeTab={this.state.activeTab}>
159-
<TabPane tabId="1">
160-
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
161-
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
162-
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
163-
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
164-
officia deserunt mollit anim id est laborum.
165-
</TabPane>
166-
<TabPane tabId="2">
167-
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
168-
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
169-
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
170-
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
171-
officia deserunt mollit anim id est laborum.
172-
</TabPane>
173-
<TabPane tabId="3">
174-
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
175-
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
176-
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
177-
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
178-
officia deserunt mollit anim id est laborum.
179-
</TabPane>
138+
<TabContent activeTab={this.state.activeTab[2]}>
139+
{this.tabPane()}
180140
</TabContent>
181141
</Col>
182142
<Col xs="12" md="6" className="mb-4">
183143
<Nav tabs>
184144
<NavItem>
185145
<NavLink
186-
className={classnames({ active: this.state.activeTab === '1' })}
187-
onClick={() => { this.toggle('1'); }}
146+
active={this.state.activeTab[3] === '1'}
147+
onClick={() => { this.toggle(3, '1'); }}
188148
>
189-
<i className="icon-calculator"></i> <span className={this.state.activeTab === '1' ? '' : 'd-none'}> Calculator </span>{'\u00A0'}<Badge
190-
color="success">New</Badge>
149+
<i className="icon-calculator"></i>
150+
<span className={this.state.activeTab[3] === '1' ? '' : 'd-none'}> Calc</span>
151+
{'\u00A0'}<Badge color="success">New</Badge>
191152
</NavLink>
192153
</NavItem>
193154
<NavItem>
194155
<NavLink
195-
className={classnames({ active: this.state.activeTab === '2' })}
196-
onClick={() => { this.toggle('2'); }}
156+
active={this.state.activeTab[3] === '2'}
157+
onClick={() => { this.toggle(3, '2'); }}
197158
>
198-
<i className="icon-basket-loaded"></i> <span
199-
className={this.state.activeTab === '2' ? '' : 'd-none'}> Shopping cart </span>{'\u00A0'}<Badge pill color="danger">29</Badge>
159+
<i className="icon-basket-loaded"></i>
160+
<span className={this.state.activeTab[3] === '2' ? '' : 'd-none'}> Cart</span>
161+
{'\u00A0'}<Badge pill color="danger">29</Badge>
200162
</NavLink>
201163
</NavItem>
202164
<NavItem>
203165
<NavLink
204-
className={classnames({ active: this.state.activeTab === '3' })}
205-
onClick={() => { this.toggle('3'); }}
206-
>
207-
<i className="icon-pie-chart"></i> <span className={this.state.activeTab === '3' ? '' : 'd-none'}> Charts</span>
166+
active={this.state.activeTab[3] === '3'}
167+
onClick={() => { this.toggle(3, '3'); }} >
168+
<i className="icon-pie-chart"></i>
169+
<span className={this.state.activeTab[3] === '3' ? '' : 'd-none'}> Charts</span>
208170
</NavLink>
209171
</NavItem>
210172
</Nav>
211-
<TabContent activeTab={this.state.activeTab}>
212-
<TabPane tabId="1">
213-
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
214-
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
215-
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
216-
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
217-
officia deserunt mollit anim id est laborum.
218-
</TabPane>
219-
<TabPane tabId="2">
220-
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
221-
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
222-
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
223-
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
224-
officia deserunt mollit anim id est laborum.
225-
</TabPane>
226-
<TabPane tabId="3">
227-
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
228-
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
229-
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
230-
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
231-
officia deserunt mollit anim id est laborum.
232-
</TabPane>
173+
<TabContent activeTab={this.state.activeTab[3]}>
174+
{this.tabPane()}
233175
</TabContent>
234176
</Col>
235177
</Row>

src/views/Base/Tabs/Tabs.test.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,21 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
33
import Tabs from './Tabs';
4+
import {mount} from 'enzyme/build';
45

56
it('renders without crashing', () => {
67
const div = document.createElement('div');
78
ReactDOM.render(<Tabs />, div);
89
ReactDOM.unmountComponentAtNode(div);
910
});
11+
it('toggle click without crashing', () => {
12+
const wrapper = mount(<Tabs />);
13+
for (let pane=0; pane<4; pane++) {
14+
for( let tabId=1; tabId<4; tabId++) {
15+
let Tab = wrapper.find('.nav-tabs .nav-item .nav-link').at((3*pane)+tabId-1);
16+
Tab.simulate('click');
17+
expect(wrapper.state().activeTab[pane]).toEqual((tabId).toString());
18+
}
19+
}
20+
wrapper.unmount()
21+
});

0 commit comments

Comments
 (0)