Skip to content

Commit 19caaf5

Browse files
KRRISH96KRRISH96
authored
Merge pull request #250 from Codebrahma/test_coverage_improvement
Test coverage improvement
2 parents 9ca8753 + c8d533a commit 19caaf5

File tree

12 files changed

+298
-17
lines changed

12 files changed

+298
-17
lines changed

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

Lines changed: 33 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import Button from '..';
66
/* eslint-disable no-undef */
77
describe('Button Render tests', () => {
88
let wrappedComponent;
9+
let expectedValue;
10+
let simulatedValue;
911

1012
beforeEach(() => {
1113
wrappedComponent = mount(<Button>Button</Button>);
@@ -16,25 +18,48 @@ describe('Button Render tests', () => {
1618
});
1719

1820
it('Successfully renders Button component', () => {
19-
const expectedValue = 1;
20-
const simulatedValue = wrappedComponent.find(Button).length;
21+
expectedValue = 1;
22+
simulatedValue = wrappedComponent.find(Button).length;
2123

2224
expect(simulatedValue).equal(expectedValue);
2325
});
2426

2527
it('Successfully renders Default children if no children are passed.', () => {
26-
const expectedValue = 'Button';
27-
const simulatedValue = wrappedComponent.find(Button).prop('children');
28+
expectedValue = 'Button';
29+
simulatedValue = wrappedComponent.find(Button).prop('children');
2830

2931
expect(simulatedValue).to.equal(expectedValue);
3032
});
3133

3234
it('Successfully renders children when children are passed', () => {
33-
const expectedChildren = 'Some button Text';
34-
wrappedComponent = mount(<Button>{expectedChildren}</Button>);
35+
expectedValue = 'Some button Text';
36+
wrappedComponent = mount(<Button>{expectedValue}</Button>);
3537

36-
const simulatedValue = wrappedComponent.find(Button).prop('children');
38+
simulatedValue = wrappedComponent.find(Button).prop('children');
3739

38-
expect(simulatedValue).to.equal(expectedChildren);
40+
expect(simulatedValue).to.equal(expectedValue);
41+
});
42+
43+
it('Should render icon when passed as element', () => {
44+
expectedValue = 'element icon';
45+
wrappedComponent.setProps({ icon: <span className="test">element icon</span> });
46+
simulatedValue = wrappedComponent.find('span.test').text();
47+
expect(simulatedValue).equal(expectedValue);
48+
});
49+
50+
it('Should render icon when passed as string', () => {
51+
expectedValue = 1;
52+
wrappedComponent.setProps({ icon: 'icon-menu' });
53+
simulatedValue = wrappedComponent.find('i.icon-menu').length;
54+
expect(simulatedValue).equal(expectedValue);
55+
});
56+
57+
it('Should render anchor element when href is passed', () => {
58+
expectedValue = 1;
59+
wrappedComponent.setProps({
60+
href: 'https://random.link',
61+
});
62+
simulatedValue = wrappedComponent.find('a').length;
63+
expect(simulatedValue).equals(expectedValue);
3964
});
4065
});

‎lib/card/index.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ class Card extends React.Component {
2525

2626
if (footer !== null) {
2727
return (
28-
<div className={classnames(theme.cardFooter)}>
28+
<div className={classnames(theme.cardFooter)} aria-label="card-footer">
2929
{ footer }
3030
</div>
3131
);
@@ -37,11 +37,12 @@ class Card extends React.Component {
3737
theme['more-icon'],
3838
{ [theme['less-icon']]: expanded },
3939
),
40+
'aria-label': 'more-icon',
4041
};
4142

4243
return (
4344
<div className={classnames(theme.cardFooter)}>
44-
<div className={theme['card-actions']}>
45+
<div className={theme['card-actions']} aria-label="card-actions">
4546
{
4647
actions !== null &&
4748
actions

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from 'react';
2+
import { mount } from 'enzyme';
3+
import { expect } from 'chai';
4+
import Card from '..';
5+
6+
/* eslint-disable no-undef */
7+
describe('Card Accessibility tests', () => {
8+
let wrappedComponent;
9+
let expectedValue;
10+
let expectedValueBefore;
11+
let expectedValueAfter;
12+
let actualValue;
13+
14+
beforeEach(() => {
15+
wrappedComponent = mount(<Card header="Card Header">This is card body</Card>);
16+
});
17+
18+
afterEach(() => {
19+
wrappedComponent.unmount();
20+
});
21+
22+
it('Shoud accept a footer prop and render footer accordingly', () => {
23+
expectedValue = 'Card footer';
24+
actualValue = () => wrappedComponent.find('div[aria-label="card-footer"]').props().children;
25+
wrappedComponent.setProps({ footer: 'Card footer' });
26+
expect(actualValue()).equal(expectedValue);
27+
});
28+
29+
it('Shoud accept a actions prop and render footer accordingly', () => {
30+
expectedValueBefore = false;
31+
expectedValueAfter = 'Card actions';
32+
actualValue = () => wrappedComponent.find('div[aria-label="card-actions"]').props().children;
33+
expect(actualValue()).equal(expectedValueBefore);
34+
wrappedComponent.setProps({ actions: <div>Card actions</div> });
35+
expect(actualValue().props.children).equal(expectedValueAfter);
36+
});
37+
38+
it('Should render header when passed as function.', () => {
39+
expectedValue = 'Function header';
40+
actualValue = () => wrappedComponent.find('div[aria-label="card-header"]');
41+
wrappedComponent.setProps({ header: () => <span>Function header</span> });
42+
expect(wrappedComponent
43+
.find(Card)
44+
.childAt(0)
45+
.children()
46+
.childAt(0)
47+
.text()).to.equal(expectedValue);
48+
});
49+
50+
it('Should render expandedContent when passed as function.', () => {
51+
expectedValue = 'Function expandedContent';
52+
actualValue = () => wrappedComponent.find('div[aria-label="card-header"]');
53+
wrappedComponent.setProps({ expandedContent: () => <span>Function expandedContent</span> });
54+
expect(wrappedComponent.find('.expandedContent').text()).to.equal(expectedValue);
55+
});
56+
});

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ describe('Card Render tests', () => {
1111
wrappedComponent = mount(<Card header="Card Header">This is card body</Card>);
1212
});
1313

14+
afterEach(() => {
15+
wrappedComponent.unmount();
16+
});
17+
1418
it('Successfully renders card component.', () => {
1519
const expectedValue = 1;
1620

@@ -43,4 +47,13 @@ describe('Card Render tests', () => {
4347
expect(simulatedValue).to.not.equal(0);
4448
expect(simulatedValue).to.not.equal(1);
4549
});
50+
51+
it('Successfully renders expandedContent on clicking expand button.', () => {
52+
const simulatedValue = () => wrappedComponent.find('.expanded').length;
53+
wrappedComponent.setProps({ expandedContent: <div>This is expanded content</div> });
54+
55+
expect(simulatedValue()).to.equal(0);
56+
wrappedComponent.find('div[aria-label="more-icon"]').simulate('click');
57+
expect(simulatedValue()).to.equal(1);
58+
});
4659
});

‎lib/multiselect/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,7 @@ class MultiSelect extends Component {
238238
className={itemtheme}
239239
onClick={() => this.handleSelect(option)}
240240
key={option.label}
241+
data-react-active-item={focus === index ? 'active' : undefined}
241242
/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
242243
/* eslint-disable jsx-a11y/tabindex-no-positive */
243244
tabIndex={1}

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,4 +90,61 @@ describe('MultiSelect accessibility test', () => {
9090
.simulate('click');
9191
expect(simulatedValue()).to.equal(expectedValueAfterCloseClick);
9292
});
93+
94+
it('Successfully navigates to next item through keypress', () => {
95+
const expectedValueBeforeSecondKeyDown = 'Lorem';
96+
const expectedValueAfterSecondKeyDown = 'Ipsum';
97+
focusOnInput();
98+
wrappedComponent.find('#multiselect-input').simulate('keydown', {
99+
keyCode: 40,
100+
key: 'ArrowDown',
101+
});
102+
expect(wrappedComponent.find('#dropdown-options span[data-react-active-item="active"]').text()).equals(expectedValueBeforeSecondKeyDown);
103+
wrappedComponent.find('#multiselect-input').simulate('keydown', {
104+
keyCode: 40,
105+
key: 'ArrowDown',
106+
});
107+
expect(wrappedComponent.find('#dropdown-options span[data-react-active-item="active"]').text()).equals(expectedValueAfterSecondKeyDown);
108+
});
109+
110+
it('Successfully navigates to last item through keypress', () => {
111+
const expectedValueAfterKeyDown = 'Adipiscing';
112+
focusOnInput();
113+
wrappedComponent.find('#multiselect-input').simulate('keydown', {
114+
keyCode: 38,
115+
key: 'ArrowUp',
116+
});
117+
expect(wrappedComponent.find('#dropdown-options span[data-react-active-item="active"]').text()).equals(expectedValueAfterKeyDown);
118+
});
119+
120+
it('Successfully selects item through keypress', () => {
121+
let n = 2;
122+
const expectedValueAfterKeyDown = data[n - 1].label;
123+
focusOnInput();
124+
while (n > 0) {
125+
wrappedComponent.find('#multiselect-input').simulate('keydown', {
126+
keyCode: 40,
127+
key: 'ArrowDown',
128+
});
129+
n -= 1;
130+
}
131+
wrappedComponent.find('#multiselect-input').simulate('keydown', {
132+
keyCode: 13,
133+
key: 'Enter',
134+
});
135+
expect(wrappedComponent.find('#selected-options').childAt(0).prop('aria-label')).equals(expectedValueAfterKeyDown);
136+
});
137+
138+
it('Successfully navigates all options through keypress', () => {
139+
let n = 0;
140+
focusOnInput();
141+
while (n < data.length) {
142+
wrappedComponent.find('#multiselect-input').simulate('keydown', {
143+
keyCode: 40,
144+
key: 'ArrowDown',
145+
});
146+
expect(wrappedComponent.find('#dropdown-options span[data-react-active-item="active"]').text()).equals(data[n % data.length].label);
147+
n += 1;
148+
}
149+
});
93150
});

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,10 @@ describe('Navbar Render tests', () => {
1414
let actualValue;
1515

1616
beforeEach(() => {
17-
wrappedComponent = mount(<Navbar>nav item</Navbar>);
17+
wrappedComponent = mount(<Navbar>
18+
<span>item 1</span>
19+
<span>item 2</span>
20+
</Navbar>);
1821
});
1922

2023
afterEach(() => {

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/* eslint-disable no-undef */
2+
import React from 'react';
3+
import { mount, shallow } from 'enzyme';
4+
import { expect } from 'chai';
5+
import { FaBars } from 'react-icons/fa';
6+
import Navbar from '..';
7+
8+
describe('Navbar Edge case tests', () => {
9+
let wrappedComponent;
10+
11+
beforeEach(() => {
12+
wrappedComponent = mount(shallow(<Navbar title="navbar">
13+
<span id="item-1">item 1</span>
14+
<span>item 2</span>
15+
</Navbar>).get(0));
16+
});
17+
18+
afterEach(() => {
19+
wrappedComponent.unmount();
20+
});
21+
22+
it('Should show menu on menu icon click', () => {
23+
const simulatedValue = () => wrappedComponent.state().showMenu;
24+
expect(simulatedValue()).equals(false);
25+
wrappedComponent.find(FaBars).simulate('click');
26+
expect(simulatedValue()).equals(true);
27+
});
28+
29+
it('Should hide menu on menu item click', () => {
30+
const simulatedValue = () => wrappedComponent.state().showMenu;
31+
wrappedComponent.find(FaBars).simulate('click');
32+
expect(simulatedValue()).equals(true);
33+
wrappedComponent.find('span#item-1').at(1).simulate('click');
34+
expect(simulatedValue()).equals(false);
35+
});
36+
37+
it('Should remove menu on blur', () => {
38+
const simulatedValue = () => wrappedComponent.state().showMenu;
39+
wrappedComponent.find(FaBars).simulate('click');
40+
expect(simulatedValue()).equals(true);
41+
wrappedComponent.find(FaBars).simulate('blur');
42+
expect(simulatedValue()).equals(false);
43+
});
44+
});

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { expect } from 'chai';
44
import Navbar from '..';
55
import Avatar from '../../avatar';
66
import TextInput from '../../textInput';
7+
import { FaBars } from 'react-icons/fa';
78

89
/* eslint-disable no-undef */
910
describe('Navbar Render tests', () => {

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from 'react';
2+
import { mount, shallow } from 'enzyme';
3+
import { expect } from 'chai';
4+
import sinon from 'sinon';
5+
import Popover from '..';
6+
7+
/* eslint-disable no-undef */
8+
describe('Popover edge case tests', () => {
9+
let wrappedComponent;
10+
let expectedValue;
11+
let expectedValueBefore;
12+
let expectedValueAfter;
13+
let actualValue;
14+
15+
beforeEach(() => {
16+
wrappedComponent = mount(shallow( // eslint-disable-line
17+
<Popover content="this is popover content">
18+
<p>Click Me</p>
19+
</Popover>).get(0),
20+
) // eslint-disable-line
21+
});
22+
23+
afterEach(() => {
24+
wrappedComponent.unmount();
25+
});
26+
27+
const simulateEvent = (component, event) => wrappedComponent.find(component).simulate(event);
28+
29+
it('Should toggle blockBlurEvent state properly on mouseenter and mouse leave', () => {
30+
expectedValueBefore = true;
31+
expectedValueAfter = false;
32+
actualValue = () => wrappedComponent.state().blockBlurEvent;
33+
simulateEvent('p', 'click');
34+
simulateEvent('div[aria-label="popover-content"]', 'mouseenter');
35+
expect(actualValue()).to.equal(expectedValueBefore);
36+
simulateEvent('div[aria-label="popover-content"]', 'mouseleave');
37+
expect(actualValue()).to.equal(expectedValueAfter);
38+
});
39+
40+
it('Should callback the onConfirm when onConfirm prop is passed', () => {
41+
expectedValueBefore = 0;
42+
expectedValueAfter = 1;
43+
const onConfirm = sinon.spy();
44+
simulateEvent('p', 'click');
45+
expect(onConfirm).to.have.property('callCount', expectedValueBefore);
46+
wrappedComponent.setProps({ onConfirm });
47+
simulateEvent('span[aria-label="action-content"]', 'click');
48+
expect(onConfirm).to.have.property('callCount', expectedValueAfter);
49+
});
50+
51+
it('Should properly render actionContent when passed as element', () => {
52+
expectedValue = 'custom action';
53+
wrappedComponent.setProps({ actionContent: <div>custom action</div> });
54+
simulateEvent('p', 'click');
55+
actualValue = wrappedComponent.find('span[aria-label="action-content"]').props().children.props.children;
56+
expect(actualValue).equal(expectedValue);
57+
});
58+
});

0 commit comments

Comments
 (0)