Skip to content

Commit e0b73e6

Browse files
KRRISH96KRRISH96
authored
Merge pull request #252 from Codebrahma/improve_test_coverage
Improve test coverage
2 parents 51e382d + b097237 commit e0b73e6

File tree

10 files changed

+216
-55
lines changed

10 files changed

+216
-55
lines changed

‎lib/autocomplete/tests/accessibility.test.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,23 @@ describe('AutoComplete Accessibility tests', () => {
6969
expect(simulatedValue()).to.equal(expectedValueAfterKeyDown);
7070
});
7171

72+
it('Successfully navigates to prev item in list when up arrow key is pressed.', () => {
73+
const expectedValueBeforeKeyDown = 'inactive';
74+
const expectedValueAfterKeyDown = 'active';
75+
const childIndex = 2; // Child item index to navigate to.
76+
const simulatedValue = () => wrappedComponent.find('#autocomplete-list').childAt((childIndex - data.length) + 1).prop('aria-label');
77+
78+
focusOnInput();
79+
expect(simulatedValue()).to.equal(expectedValueBeforeKeyDown);
80+
for (let i = childIndex; i >= 0; i -= 1) {
81+
wrappedComponent.find('input').simulate('keydown', {
82+
keyCode: 38,
83+
key: 'ArrowUp',
84+
});
85+
}
86+
expect(simulatedValue()).to.equal(expectedValueAfterKeyDown);
87+
});
88+
7289
it('Successfully updates input through keyboard navigation.', () => {
7390
const expectedValueBeforeSelection = '';
7491
const expectedValueAfterSelection = 'item 2';

‎lib/autocomplete/tests/edgecases.test.js

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { mount } from 'enzyme';
2+
import { mount, shallow } from 'enzyme';
33
import { expect } from 'chai';
44
import AutoComplete from '..';
55

@@ -16,7 +16,7 @@ describe('AutoComplete Edge Cases tests', () => {
1616

1717
beforeEach(() => {
1818
// Mount root component before test.
19-
wrappedComponent = mount(<AutoComplete data={data} />);
19+
wrappedComponent = mount(shallow(<AutoComplete data={data} />).get(0));
2020
});
2121

2222
afterEach(() => {
@@ -34,4 +34,12 @@ describe('AutoComplete Edge Cases tests', () => {
3434
wrappedComponent.find('input').simulate('focus');
3535
expect(simulatedValue()).equal(expectedValue);
3636
});
37+
38+
it('Shoud toggle blockOnBlur state on mouseneter and mountleave events', () => {
39+
const actualValue = () => wrappedComponent.state().blockOnBlur;
40+
wrappedComponent.find('#autocomplete-list').simulate('mouseenter');
41+
expect(actualValue()).to.equal(true);
42+
wrappedComponent.find('#autocomplete-list').simulate('mouseleave');
43+
expect(actualValue()).to.equal(false);
44+
});
3745
});

‎lib/drawer/tests/accessibility.test.js

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
/* eslint-disable jsx-a11y/no-static-element-interactions */
2+
/* eslint-disable jsx-a11y/click-events-have-key-events */
3+
import React from 'react';
4+
import { expect } from 'chai';
5+
import { mount } from 'enzyme';
6+
import sinon from 'sinon';
7+
import Drawer from '..';
8+
9+
/* eslint-disable no-undef */
10+
describe('Drawer render tests.', () => {
11+
let wrappedComponent;
12+
let expectedValueBefore;
13+
let expectedValueAfter;
14+
let actualValue;
15+
16+
class Demo extends React.Component {
17+
state = { open: false }
18+
19+
handleDrawer(open) {
20+
this.setState({
21+
open,
22+
});
23+
}
24+
25+
render() {
26+
return (
27+
<div>
28+
<button id="drawerButton" onClick={() => this.handleDrawer(true)}>
29+
click me
30+
</button>
31+
<Drawer open={this.state.open} onClose={() => this.handleDrawer(false)} position="right">
32+
<div>content</div>
33+
</Drawer>
34+
</div>
35+
);
36+
}
37+
}
38+
39+
beforeEach(() => {
40+
wrappedComponent = mount(<Demo />);
41+
});
42+
43+
it('Should close drawer on blur', () => {
44+
expectedValueBefore = true;
45+
expectedValueAfter = false;
46+
actualValue = () => wrappedComponent.find(Drawer).prop('open');
47+
wrappedComponent.find('button#drawerButton').simulate('click');
48+
expect(actualValue()).equal(expectedValueBefore);
49+
wrappedComponent.find(Drawer).simulate('blur');
50+
expect(actualValue()).equal(expectedValueAfter);
51+
});
52+
53+
it('Should get a callback for onClose prop', () => {
54+
expectedValueBefore = 0;
55+
expectedValueAfter = 1;
56+
const onClose = sinon.spy();
57+
wrappedComponent = mount(<Drawer />);
58+
wrappedComponent.setProps({ onClose });
59+
expect(onClose).to.have.property('callCount', expectedValueBefore);
60+
wrappedComponent.find(Drawer).simulate('blur');
61+
expect(onClose).to.have.property('callCount', expectedValueAfter);
62+
});
63+
});

‎lib/navbar/index.js

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,6 @@ class Navbar extends React.Component {
3131
}
3232
}
3333

34-
showMenu = () => {
35-
this.setState({
36-
showMenu: true,
37-
});
38-
}
39-
4034
toggleMenu = () => {
4135
this.setState(prevState => ({
4236
showMenu: !prevState.showMenu,
@@ -73,6 +67,7 @@ class Navbar extends React.Component {
7367
onBlur={this.hideMenu}
7468
onMouseEnter={this.blockBlur}
7569
onMouseLeave={this.blockBlur}
70+
aria-label="navbar-mobile"
7671
>
7772
<div className={navLinks}>
7873
{children && typeof children === 'object' && children.map ? children.map(child => <div onClick={this.toggleMenu}>{child}</div>) : children}

‎lib/navbar/tests/edgecase.test.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,4 +41,12 @@ describe('Navbar Edge case tests', () => {
4141
wrappedComponent.find(FaBars).simulate('blur');
4242
expect(simulatedValue()).equals(false);
4343
});
44+
45+
it('Shoud toggle blockOnBlur state on mouseneter and mountleave events', () => {
46+
const actualValue = () => wrappedComponent.state().blockBlur;
47+
wrappedComponent.find('div[aria-label="navbar-mobile"]').simulate('mouseenter');
48+
expect(actualValue()).to.equal(true);
49+
wrappedComponent.find('div[aria-label="navbar-mobile"]').simulate('mouseleave');
50+
expect(actualValue()).to.equal(false);
51+
});
4452
});

‎lib/pagination/tests/accessibility.test.js

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@ import Pagination from '..';
66
/* eslint-disable no-undef */
77
describe('Pagination accessibility tests', () => {
88
let wrappedComponent;
9+
const total = 10;
910

1011
beforeEach(() => {
11-
wrappedComponent = mount(<Pagination total={10} />);
12+
wrappedComponent = mount(<Pagination total={total} />);
1213
});
1314

1415
afterEach(() => {
@@ -23,4 +24,24 @@ describe('Pagination accessibility tests', () => {
2324
wrappedComponent.find('#next-button').simulate('click');
2425
expect(simulatedValue()).to.equal(expectedValueAfterChange);
2526
});
27+
28+
it('Should not change the curentActive page when clicked on itself', () => {
29+
const simulatedValue = () => wrappedComponent.find('div[data-react-active-page="active"]').text();
30+
expect(simulatedValue()).equal('1');
31+
wrappedComponent.find('div[data-react-active-page="active"]').simulate('click');
32+
expect(simulatedValue()).equal('1');
33+
});
34+
35+
it('Should navigate through pages correctly', () => {
36+
const simulatedValue = () => wrappedComponent.find('div[data-react-active-page="active"]').text();
37+
for (let page = 1; page <= total; page += 1) {
38+
expect(Number(simulatedValue())).equal(page);
39+
wrappedComponent.find('#next-button').simulate('click');
40+
}
41+
wrappedComponent.setProps({ defaultActive: total });
42+
for (let page = total; page >= 1; page -= 1) {
43+
expect(Number(simulatedValue())).equal(page);
44+
wrappedComponent.find('#prev-button').simulate('click');
45+
}
46+
});
2647
});

‎lib/select/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,7 @@ class Select extends Component {
168168
className={cx(theme.option, { [`${theme['option-hover']}`]: (focus === index) })}
169169
onClick={() => this.handleSelect(option)}
170170
key={option.label}
171+
data-react-active-item={focus === index ? 'active' : undefined}
171172
>
172173
<span>{option.label}</span>
173174
</span>

‎lib/select/tests/accessibility.test.js

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { mount } from 'enzyme';
2+
import { mount, shallow } from 'enzyme';
33
import { expect } from 'chai';
44
import Select from '..';
55

@@ -20,7 +20,7 @@ describe('Select Accessibility tests', () => {
2020
};
2121

2222
beforeEach(() => {
23-
wrappedComponent = mount(<Select options={data} />);
23+
wrappedComponent = mount(shallow(<Select options={data} />).get(0));
2424
});
2525

2626
afterEach(() => {
@@ -62,4 +62,27 @@ describe('Select Accessibility tests', () => {
6262
});
6363
expect(simulatedValue()).to.equal(expectedValueAfterSelection);
6464
});
65+
66+
it('Successfully navigates to last item through keypress', () => {
67+
const expectedValueAfterKeyDown = 'item 3';
68+
focusOnInput();
69+
wrappedComponent.find('#select').simulate('keydown', {
70+
keyCode: 38,
71+
key: 'ArrowUp',
72+
});
73+
expect(wrappedComponent.find('#select-dropdown span[data-react-active-item="active"]').text()).equals(expectedValueAfterKeyDown);
74+
});
75+
76+
const simulateEvent = (component, event) => wrappedComponent.find(component).simulate(event);
77+
78+
it('Should toggle blockBlurEvent state properly on mouseenter and mouse leave', () => {
79+
const expectedValueBefore = true;
80+
const expectedValueAfter = false;
81+
const actualValue = () => wrappedComponent.state().blockOnBlur;
82+
focusOnInput();
83+
simulateEvent('div#select-dropdown', 'mouseenter');
84+
expect(actualValue()).to.equal(expectedValueBefore);
85+
simulateEvent('div#select-dropdown', 'mouseleave');
86+
expect(actualValue()).to.equal(expectedValueAfter);
87+
});
6588
});

‎lib/snackbar/tests/render.test.js

Lines changed: 67 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -2,53 +2,51 @@ import React from 'react';
22
import { mount } from 'enzyme';
33
import { expect } from 'chai';
44
import Snackbar from '..';
5-
import Button from '../../button';
5+
6+
// eslint-disable-next-line import/prefer-default-export
7+
export class SnackDisplay extends React.Component {
8+
constructor(props) {
9+
super(props);
10+
this.state = {
11+
showSnackbar: false,
12+
};
13+
this.openBottomSnackbar = this.openBottomSnackbar.bind(this);
14+
this.handleSnackClose = this.handleSnackClose.bind(this);
15+
}
16+
17+
openBottomSnackbar() {
18+
this.setState({
19+
showSnackbar: !this.state.showSnackbar,
20+
});
21+
}
22+
23+
handleSnackClose() {
24+
this.setState({
25+
showSnackbar: false,
26+
});
27+
}
28+
29+
render() {
30+
return (
31+
<div>
32+
<Snackbar
33+
active={this.state.showSnackbar}
34+
onClose={this.handleSnackClose}
35+
>
36+
<span>This is a bottom snackbar.</span>
37+
</Snackbar>
38+
<button onClick={this.openBottomSnackbar}>
39+
Open Bottom Snackbar
40+
</button>
41+
</div>
42+
);
43+
}
44+
}
645

746
/* eslint-disable no-undef */
847
describe('Snackbar Render tests', () => {
948
let wrappedComponent;
1049

11-
class SnackDisplay extends React.Component {
12-
constructor(props) {
13-
super(props);
14-
this.state = {
15-
showSnackbar: false,
16-
};
17-
this.openBottomSnackbar = this.openBottomSnackbar.bind(this);
18-
this.handleSnackClose = this.handleSnackClose.bind(this);
19-
}
20-
21-
openBottomSnackbar() {
22-
this.setState({
23-
showSnackbar: !this.state.showSnackbar,
24-
});
25-
}
26-
27-
handleSnackClose() {
28-
this.setState({
29-
showSnackbar: false,
30-
});
31-
}
32-
33-
render() {
34-
return (
35-
<div>
36-
<Snackbar
37-
active={this.state.showSnackbar}
38-
onClose={this.handleSnackClose}
39-
>
40-
<span>This is a bottom snackbar.</span>
41-
</Snackbar>
42-
<div style={{ margin: '10px' }}>
43-
<Button type="primary" onClick={this.openBottomSnackbar}>
44-
Open Bottom Snackbar
45-
</Button>
46-
</div>
47-
</div>
48-
);
49-
}
50-
}
51-
5250
beforeEach(() => {
5351
wrappedComponent = mount(<SnackDisplay />);
5452
});
@@ -80,4 +78,31 @@ describe('Snackbar Render tests', () => {
8078
wrappedComponent.find('button').simulate('click');
8179
expect(simulatedValue()).equals(expectedValueAfterDisplay);
8280
});
81+
82+
it('Successfully renders snackbar.', () => {
83+
const simulatedValue = () => wrappedComponent.find('div.active').length;
84+
85+
wrappedComponent.setState({ showSnackbar: false });
86+
wrappedComponent.setState({ showSnackbar: true });
87+
expect(simulatedValue()).equals(1);
88+
setTimeout(() => {
89+
expect(simulatedValue()).equals(0);
90+
done();
91+
}, 2000);
92+
});
93+
94+
it('Should render snackbar by default when active prop is set to true by default', () => {
95+
const expectedValueBefore = true;
96+
const expectedValueAfter = false;
97+
const simulatedValue = () => wrappedComponent
98+
.find(Snackbar)
99+
.childAt(0)
100+
.prop('active');
101+
102+
wrappedComponent = mount(<Snackbar active />);
103+
104+
expect(simulatedValue()).to.equal(expectedValueBefore);
105+
wrappedComponent.setProps({ active: false });
106+
expect(simulatedValue()).equals(expectedValueAfter);
107+
});
83108
});

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
"check-coverage": true,
1919
"per-file": true,
2020
"statements": 75,
21-
"branches": 50,
22-
"functions": 50,
21+
"branches": 65,
22+
"functions": 65,
2323
"lines": 75,
2424
"include": [
2525
"lib/**/*.js"

0 commit comments

Comments
 (0)