Skip to content

Commit

Permalink
BE-652 Increase Code Coverage for test UI Cases
Browse files Browse the repository at this point in the history 
* Worked on View Components

Change-Id: I32c40b0226906e0465424bdbfadaadbd177bb827
Signed-off-by: Uma Parameshwari <umaparameswari11@gmail.com>
  • Loading branch information
@umaparam
umaparam committed Jun 11, 2019
1 parent 2cf69f8 commit 7d623ce
Show file tree
Hide file tree
Showing 9 changed files with 400 additions and 354 deletions.
4 changes: 1 addition & 3 deletions client/src/components/App/App.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,9 @@
import { App } from './App';
import Header from '../Header';
import React from 'react';
import Enzyme, { shallow, mount } from 'enzyme';
import Enzyme, { shallow } from 'enzyme';
import { unwrap } from '@material-ui/core/test-utils';
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
import Adapter from 'enzyme-adapter-react-16';
import { createMuiTheme } from '@material-ui/core/styles';

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

Expand Down
38 changes: 29 additions & 9 deletions client/src/components/Styled/Select.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,39 @@
* SPDX-License-Identifier: Apache-2.0
*/

import React from 'react';
import Enzyme, { shallow, mount } from 'enzyme';
import { unwrap } from '@material-ui/core/test-utils';
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
import Adapter from 'enzyme-adapter-react-16';
import { createMuiTheme } from '@material-ui/core/styles';
import Select from './Select';

const setup = () => {
const wrapper = shallow(<Select />);
Enzyme.configure({ adapter: new Adapter() });

return {
wrapper
};
};
const ComponentNaked = unwrap(Select);

describe('Select', () => {
test('Select component should render', () => {
const { wrapper } = setup();
describe('<Select />', () => {
it('with shallow', () => {
const wrapper = shallow(<ComponentNaked classes={{}} />);
expect(wrapper.exists()).toBe(true);
});

it('with mount', () => {
const wrapper = mount(
<MuiThemeProvider theme={createMuiTheme()}>
<Select classes={{}} />
</MuiThemeProvider>
);
expect(wrapper.exists()).toBe(true);
});

it('Check if dark theme is applied correctly', () => {
const wrapperone = mount(
<MuiThemeProvider theme={createMuiTheme({ palette: { type: 'dark' } })}>
<Select classes={{}} />
</MuiThemeProvider>
);
expect(wrapperone.exists()).toBe(true);
});
});
20 changes: 20 additions & 0 deletions client/src/components/Styled/Table.spec.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
/**
* SPDX-License-Identifier: Apache-2.0
*/

import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import { unwrap } from '@material-ui/core/test-utils';
import Adapter from 'enzyme-adapter-react-16';
import Table from './Table';

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

const ComponentNaked = unwrap(Table);

describe('<Table />', () => {
it('with shallow', () => {
const wrapper = shallow(<ComponentNaked classes={{}} />);
expect(wrapper.exists()).toBe(true);
});
});
2 changes: 1 addition & 1 deletion client/src/components/Styled/View.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { unwrap } from '@material-ui/core/test-utils';
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
import Adapter from 'enzyme-adapter-react-16';
import { createMuiTheme } from '@material-ui/core/styles';
import { View } from './View';
import View from './View';

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

Expand Down
270 changes: 117 additions & 153 deletions client/src/components/View/BlockView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,170 +6,134 @@ import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import FontAwesome from 'react-fontawesome';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import {
Table, Card, CardBody, CardTitle,
} from 'reactstrap';
import { Table, Card, CardBody, CardTitle } from 'reactstrap';
import { blockHashType, onCloseType } from '../types';
import Modal from '../Styled/Modal';

const styles = theme => ({
cubeIcon: {
color: '#ffffff',
marginRight: 20,
},
cubeIcon: {
color: '#ffffff',
marginRight: 20
}
});

class BlockView extends Component {
handleClose = () => {
const { onClose } = this.props;
onClose();
};
export class BlockView extends Component {
handleClose = () => {
const { onClose } = this.props;
onClose();
};

render() {
const { blockHash, classes } = this.props;
if (!blockHash) {
return (
<Modal>
{modalClasses => (
<Card className={modalClasses.card}>
<CardTitle className={modalClasses.title}>
<FontAwesome name="cube" />
Block Details
</CardTitle>
<CardBody className={modalClasses.body}>
<span>
{' '}
<FontAwesome name="circle-o-notch" size="3x" spin />
</span>
</CardBody>
</Card>
)}
</Modal>
);
}
return (
<Modal>
{modalClasses => (
<div className={modalClasses.dialog}>
<Card className={modalClasses.card}>
<CardTitle className={modalClasses.title}>
<FontAwesome name="cube" className={classes.cubeIcon} />
Block Details
<button
type="button"
onClick={this.handleClose}
className={modalClasses.closeBtn}
>
<FontAwesome name="close" />
</button>
</CardTitle>
<CardBody className={modalClasses.body}>
<Table striped hover responsive className="table-striped">
<tbody>
<tr>
<th>
Channel name:
</th>
<td>
{blockHash.channelname}
</td>
</tr>
<tr>
<th>
Block Number
</th>
<td>
{blockHash.blocknum}
</td>
</tr>
<tr>
<th>
Created at
</th>
<td>
{blockHash.createdt}
</td>
</tr>
render() {
const { blockHash, classes } = this.props;
if (!blockHash) {
return (
<Modal>
{modalClasses => (
<Card className={modalClasses.card}>
<CardTitle className={modalClasses.title}>
<FontAwesome name="cube" />
Block Details
</CardTitle>
<CardBody className={modalClasses.body}>
<span>
{' '}
<FontAwesome name="circle-o-notch" size="3x" spin />
</span>
</CardBody>
</Card>
)}
</Modal>
);
}
return (
<Modal>
{modalClasses => (
<div className={modalClasses.dialog}>
<Card className={modalClasses.card}>
<CardTitle className={modalClasses.title}>
<FontAwesome name="cube" className={classes.cubeIcon} />
Block Details
<button
type="button"
onClick={this.handleClose}
className={modalClasses.closeBtn}
>
<FontAwesome name="close" />
</button>
</CardTitle>
<CardBody className={modalClasses.body}>
<Table striped hover responsive className="table-striped">
<tbody>
<tr>
<th>Channel name:</th>
<td>{blockHash.channelname}</td>
</tr>
<tr>
<th>Block Number</th>
<td>{blockHash.blocknum}</td>
</tr>
<tr>
<th>Created at</th>
<td>{blockHash.createdt}</td>
</tr>

<tr>
<th>
Number of Transactions
</th>
<td>
{blockHash.txcount}
</td>
</tr>
<tr>
<th>
Block Hash
</th>
<td>
{blockHash.blockhash}
<button type="button" className={modalClasses.copyBtn}>
<div className={modalClasses.copy}>
Copy
</div>
<div className={modalClasses.copied}>
Copied
</div>
<CopyToClipboard text={blockHash.blockhash}>
<FontAwesome name="copy" />
</CopyToClipboard>
</button>
</td>
</tr>
<tr>
<th>
Data Hash
</th>
<td>
{blockHash.datahash}
<button type="button" className={modalClasses.copyBtn}>
<div className={modalClasses.copy}>
Copy
</div>
<div className={modalClasses.copied}>
Copied
</div>
<CopyToClipboard text={blockHash.datahash}>
<FontAwesome name="copy" />
</CopyToClipboard>
</button>
</td>
</tr>
<tr>
<th>
Prehash
</th>
<td>
{blockHash.prehash}
<button type="button" className={modalClasses.copyBtn}>
<div className={modalClasses.copy}>
Copy
</div>
<div className={modalClasses.copied}>
Copied
</div>
<CopyToClipboard text={blockHash.prehash}>
<FontAwesome name="copy" />
</CopyToClipboard>
</button>
</td>
</tr>
</tbody>
</Table>
</CardBody>
</Card>
</div>
)}
</Modal>
);
}
<tr>
<th>Number of Transactions</th>
<td>{blockHash.txcount}</td>
</tr>
<tr>
<th>Block Hash</th>
<td>
{blockHash.blockhash}
<button type="button" className={modalClasses.copyBtn}>
<div className={modalClasses.copy}>Copy</div>
<div className={modalClasses.copied}>Copied</div>
<CopyToClipboard text={blockHash.blockhash}>
<FontAwesome name="copy" />
</CopyToClipboard>
</button>
</td>
</tr>
<tr>
<th>Data Hash</th>
<td>
{blockHash.datahash}
<button type="button" className={modalClasses.copyBtn}>
<div className={modalClasses.copy}>Copy</div>
<div className={modalClasses.copied}>Copied</div>
<CopyToClipboard text={blockHash.datahash}>
<FontAwesome name="copy" />
</CopyToClipboard>
</button>
</td>
</tr>
<tr>
<th>Prehash</th>
<td>
{blockHash.prehash}
<button type="button" className={modalClasses.copyBtn}>
<div className={modalClasses.copy}>Copy</div>
<div className={modalClasses.copied}>Copied</div>
<CopyToClipboard text={blockHash.prehash}>
<FontAwesome name="copy" />
</CopyToClipboard>
</button>
</td>
</tr>
</tbody>
</Table>
</CardBody>
</Card>
</div>
)}
</Modal>
);
}
}

BlockView.propTypes = {
blockHash: blockHashType.isRequired,
onClose: onCloseType.isRequired,
blockHash: blockHashType.isRequired,
onClose: onCloseType.isRequired
};

export default withStyles(styles)(BlockView);
Loading

0 comments on commit 7d623ce

Please sign in to comment.