Skip to content

Commit 7d623ce

Browse files
umaparamumaparam
committed
BE-652 Increase Code Coverage for test UI Cases
* Worked on View Components Change-Id: I32c40b0226906e0465424bdbfadaadbd177bb827 Signed-off-by: Uma Parameshwari <umaparameswari11@gmail.com>
1 parent 2cf69f8 commit 7d623ce

File tree

9 files changed

+400
-354
lines changed

9 files changed

+400
-354
lines changed

‎client/src/components/App/App.spec.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,9 @@
55
import { App } from './App';
66
import Header from '../Header';
77
import React from 'react';
8-
import Enzyme, { shallow, mount } from 'enzyme';
8+
import Enzyme, { shallow } from 'enzyme';
99
import { unwrap } from '@material-ui/core/test-utils';
10-
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
1110
import Adapter from 'enzyme-adapter-react-16';
12-
import { createMuiTheme } from '@material-ui/core/styles';
1311

1412
Enzyme.configure({ adapter: new Adapter() });
1513

‎client/src/components/Styled/Select.spec.js

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,39 @@
22
* SPDX-License-Identifier: Apache-2.0
33
*/
44

5+
import React from 'react';
6+
import Enzyme, { shallow, mount } from 'enzyme';
7+
import { unwrap } from '@material-ui/core/test-utils';
8+
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
9+
import Adapter from 'enzyme-adapter-react-16';
10+
import { createMuiTheme } from '@material-ui/core/styles';
511
import Select from './Select';
612

7-
const setup = () => {
8-
const wrapper = shallow(<Select />);
13+
Enzyme.configure({ adapter: new Adapter() });
914

10-
return {
11-
wrapper
12-
};
13-
};
15+
const ComponentNaked = unwrap(Select);
1416

15-
describe('Select', () => {
16-
test('Select component should render', () => {
17-
const { wrapper } = setup();
17+
describe('<Select />', () => {
18+
it('with shallow', () => {
19+
const wrapper = shallow(<ComponentNaked classes={{}} />);
1820
expect(wrapper.exists()).toBe(true);
1921
});
22+
23+
it('with mount', () => {
24+
const wrapper = mount(
25+
<MuiThemeProvider theme={createMuiTheme()}>
26+
<Select classes={{}} />
27+
</MuiThemeProvider>
28+
);
29+
expect(wrapper.exists()).toBe(true);
30+
});
31+
32+
it('Check if dark theme is applied correctly', () => {
33+
const wrapperone = mount(
34+
<MuiThemeProvider theme={createMuiTheme({ palette: { type: 'dark' } })}>
35+
<Select classes={{}} />
36+
</MuiThemeProvider>
37+
);
38+
expect(wrapperone.exists()).toBe(true);
39+
});
2040
});

‎client/src/components/Styled/Table.spec.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
* SPDX-License-Identifier: Apache-2.0
3+
*/
4+
5+
import React from 'react';
6+
import Enzyme, { shallow } from 'enzyme';
7+
import { unwrap } from '@material-ui/core/test-utils';
8+
import Adapter from 'enzyme-adapter-react-16';
9+
import Table from './Table';
10+
11+
Enzyme.configure({ adapter: new Adapter() });
12+
13+
const ComponentNaked = unwrap(Table);
14+
15+
describe('<Table />', () => {
16+
it('with shallow', () => {
17+
const wrapper = shallow(<ComponentNaked classes={{}} />);
18+
expect(wrapper.exists()).toBe(true);
19+
});
20+
});

‎client/src/components/Styled/View.spec.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { unwrap } from '@material-ui/core/test-utils';
77
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
88
import Adapter from 'enzyme-adapter-react-16';
99
import { createMuiTheme } from '@material-ui/core/styles';
10-
import { View } from './View';
10+
import View from './View';
1111

1212
Enzyme.configure({ adapter: new Adapter() });
1313

‎client/src/components/View/BlockView.js

Lines changed: 117 additions & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -6,170 +6,134 @@ import React, { Component } from 'react';
66
import { withStyles } from '@material-ui/core/styles';
77
import FontAwesome from 'react-fontawesome';
88
import { CopyToClipboard } from 'react-copy-to-clipboard';
9-
import {
10-
Table, Card, CardBody, CardTitle,
11-
} from 'reactstrap';
9+
import { Table, Card, CardBody, CardTitle } from 'reactstrap';
1210
import { blockHashType, onCloseType } from '../types';
1311
import Modal from '../Styled/Modal';
1412

1513
const styles = theme => ({
16-
cubeIcon: {
17-
color: '#ffffff',
18-
marginRight: 20,
19-
},
14+
cubeIcon: {
15+
color: '#ffffff',
16+
marginRight: 20
17+
}
2018
});
2119

22-
class BlockView extends Component {
23-
handleClose = () => {
24-
const { onClose } = this.props;
25-
onClose();
26-
};
20+
export class BlockView extends Component {
21+
handleClose = () => {
22+
const { onClose } = this.props;
23+
onClose();
24+
};
2725

28-
render() {
29-
const { blockHash, classes } = this.props;
30-
if (!blockHash) {
31-
return (
32-
<Modal>
33-
{modalClasses => (
34-
<Card className={modalClasses.card}>
35-
<CardTitle className={modalClasses.title}>
36-
<FontAwesome name="cube" />
37-
Block Details
38-
</CardTitle>
39-
<CardBody className={modalClasses.body}>
40-
<span>
41-
{' '}
42-
<FontAwesome name="circle-o-notch" size="3x" spin />
43-
</span>
44-
</CardBody>
45-
</Card>
46-
)}
47-
</Modal>
48-
);
49-
}
50-
return (
51-
<Modal>
52-
{modalClasses => (
53-
<div className={modalClasses.dialog}>
54-
<Card className={modalClasses.card}>
55-
<CardTitle className={modalClasses.title}>
56-
<FontAwesome name="cube" className={classes.cubeIcon} />
57-
Block Details
58-
<button
59-
type="button"
60-
onClick={this.handleClose}
61-
className={modalClasses.closeBtn}
62-
>
63-
<FontAwesome name="close" />
64-
</button>
65-
</CardTitle>
66-
<CardBody className={modalClasses.body}>
67-
<Table striped hover responsive className="table-striped">
68-
<tbody>
69-
<tr>
70-
<th>
71-
Channel name:
72-
</th>
73-
<td>
74-
{blockHash.channelname}
75-
</td>
76-
</tr>
77-
<tr>
78-
<th>
79-
Block Number
80-
</th>
81-
<td>
82-
{blockHash.blocknum}
83-
</td>
84-
</tr>
85-
<tr>
86-
<th>
87-
Created at
88-
</th>
89-
<td>
90-
{blockHash.createdt}
91-
</td>
92-
</tr>
26+
render() {
27+
const { blockHash, classes } = this.props;
28+
if (!blockHash) {
29+
return (
30+
<Modal>
31+
{modalClasses => (
32+
<Card className={modalClasses.card}>
33+
<CardTitle className={modalClasses.title}>
34+
<FontAwesome name="cube" />
35+
Block Details
36+
</CardTitle>
37+
<CardBody className={modalClasses.body}>
38+
<span>
39+
{' '}
40+
<FontAwesome name="circle-o-notch" size="3x" spin />
41+
</span>
42+
</CardBody>
43+
</Card>
44+
)}
45+
</Modal>
46+
);
47+
}
48+
return (
49+
<Modal>
50+
{modalClasses => (
51+
<div className={modalClasses.dialog}>
52+
<Card className={modalClasses.card}>
53+
<CardTitle className={modalClasses.title}>
54+
<FontAwesome name="cube" className={classes.cubeIcon} />
55+
Block Details
56+
<button
57+
type="button"
58+
onClick={this.handleClose}
59+
className={modalClasses.closeBtn}
60+
>
61+
<FontAwesome name="close" />
62+
</button>
63+
</CardTitle>
64+
<CardBody className={modalClasses.body}>
65+
<Table striped hover responsive className="table-striped">
66+
<tbody>
67+
<tr>
68+
<th>Channel name:</th>
69+
<td>{blockHash.channelname}</td>
70+
</tr>
71+
<tr>
72+
<th>Block Number</th>
73+
<td>{blockHash.blocknum}</td>
74+
</tr>
75+
<tr>
76+
<th>Created at</th>
77+
<td>{blockHash.createdt}</td>
78+
</tr>
9379

94-
<tr>
95-
<th>
96-
Number of Transactions
97-
</th>
98-
<td>
99-
{blockHash.txcount}
100-
</td>
101-
</tr>
102-
<tr>
103-
<th>
104-
Block Hash
105-
</th>
106-
<td>
107-
{blockHash.blockhash}
108-
<button type="button" className={modalClasses.copyBtn}>
109-
<div className={modalClasses.copy}>
110-
Copy
111-
</div>
112-
<div className={modalClasses.copied}>
113-
Copied
114-
</div>
115-
<CopyToClipboard text={blockHash.blockhash}>
116-
<FontAwesome name="copy" />
117-
</CopyToClipboard>
118-
</button>
119-
</td>
120-
</tr>
121-
<tr>
122-
<th>
123-
Data Hash
124-
</th>
125-
<td>
126-
{blockHash.datahash}
127-
<button type="button" className={modalClasses.copyBtn}>
128-
<div className={modalClasses.copy}>
129-
Copy
130-
</div>
131-
<div className={modalClasses.copied}>
132-
Copied
133-
</div>
134-
<CopyToClipboard text={blockHash.datahash}>
135-
<FontAwesome name="copy" />
136-
</CopyToClipboard>
137-
</button>
138-
</td>
139-
</tr>
140-
<tr>
141-
<th>
142-
Prehash
143-
</th>
144-
<td>
145-
{blockHash.prehash}
146-
<button type="button" className={modalClasses.copyBtn}>
147-
<div className={modalClasses.copy}>
148-
Copy
149-
</div>
150-
<div className={modalClasses.copied}>
151-
Copied
152-
</div>
153-
<CopyToClipboard text={blockHash.prehash}>
154-
<FontAwesome name="copy" />
155-
</CopyToClipboard>
156-
</button>
157-
</td>
158-
</tr>
159-
</tbody>
160-
</Table>
161-
</CardBody>
162-
</Card>
163-
</div>
164-
)}
165-
</Modal>
166-
);
167-
}
80+
<tr>
81+
<th>Number of Transactions</th>
82+
<td>{blockHash.txcount}</td>
83+
</tr>
84+
<tr>
85+
<th>Block Hash</th>
86+
<td>
87+
{blockHash.blockhash}
88+
<button type="button" className={modalClasses.copyBtn}>
89+
<div className={modalClasses.copy}>Copy</div>
90+
<div className={modalClasses.copied}>Copied</div>
91+
<CopyToClipboard text={blockHash.blockhash}>
92+
<FontAwesome name="copy" />
93+
</CopyToClipboard>
94+
</button>
95+
</td>
96+
</tr>
97+
<tr>
98+
<th>Data Hash</th>
99+
<td>
100+
{blockHash.datahash}
101+
<button type="button" className={modalClasses.copyBtn}>
102+
<div className={modalClasses.copy}>Copy</div>
103+
<div className={modalClasses.copied}>Copied</div>
104+
<CopyToClipboard text={blockHash.datahash}>
105+
<FontAwesome name="copy" />
106+
</CopyToClipboard>
107+
</button>
108+
</td>
109+
</tr>
110+
<tr>
111+
<th>Prehash</th>
112+
<td>
113+
{blockHash.prehash}
114+
<button type="button" className={modalClasses.copyBtn}>
115+
<div className={modalClasses.copy}>Copy</div>
116+
<div className={modalClasses.copied}>Copied</div>
117+
<CopyToClipboard text={blockHash.prehash}>
118+
<FontAwesome name="copy" />
119+
</CopyToClipboard>
120+
</button>
121+
</td>
122+
</tr>
123+
</tbody>
124+
</Table>
125+
</CardBody>
126+
</Card>
127+
</div>
128+
)}
129+
</Modal>
130+
);
131+
}
168132
}
169133

170134
BlockView.propTypes = {
171-
blockHash: blockHashType.isRequired,
172-
onClose: onCloseType.isRequired,
135+
blockHash: blockHashType.isRequired,
136+
onClose: onCloseType.isRequired
173137
};
174138

175139
export default withStyles(styles)(BlockView);

0 commit comments

Comments
 (0)