zecfoundation
/
zepio
mirror of https://github.com/ZcashFoundation/zepio.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(test-components): increase tests coverage on components

This commit is contained in:
eliabejr 2019-01-31 13:41:32 -03:00
parent 8e308acbf2
commit 954c53b8bb
19 changed files with 514 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
__tests__/components/button.test.js
View File

@ -11,18 +11,32 @@ import appTheme from '../../app/theme';
afterEach(cleanup);
describe('<Button />', () => {
describe('render()', () => {
test('should render button correctly', () => {
const { container } = render(
<ThemeProvider theme={appTheme}>
<Button
label='Click me!'
onClick={() => alert('Clicked')}
/>
</ThemeProvider>
);
test('should render primary button correctly', () => {
const { queryByTestId } = render(
<ThemeProvider theme={appTheme}>
<Button
label='Click me!'
onClick={() => alert('Clicked')}
variant='primary'
/>
</ThemeProvider>
);
expect(container).toMatchSnapshot();
});
expect(queryByTestId('PrimaryButton')).toBeInTheDocument();
});
test('should render secondary button correctly', () => {
const { queryByTestId } = render(
<ThemeProvider theme={appTheme}>
<Button
label='Click me!'
onClick={() => alert('Clicked')}
variant='secondary'
/>
</ThemeProvider>
);
expect(queryByTestId('SecondaryButton')).toBeInTheDocument();
});
});

27
__tests__/components/clipboard.test.js
View File

@ -11,15 +11,24 @@ import appTheme from '../../app/theme';
afterEach(cleanup);
describe('<Clipboard />', () => {
describe('render()', () => {
test('should render clipboard component correctly', () => {
const { container } = render(
<ThemeProvider theme={appTheme}>
<Clipboard text='Click me!' />
</ThemeProvider>,
);
test('should render clipboard component correctly', () => {
const { queryByTestId } = render(
<ThemeProvider theme={appTheme}>
<Clipboard text='Click me!' />
</ThemeProvider>,
);
expect(container).toMatchSnapshot();
});
expect(queryByTestId('Clipboard')).toBeInTheDocument();
});
test('should render clipboard button correctly', () => {
const { queryByTestId } = render(
<ThemeProvider theme={appTheme}>
<Clipboard text='Click me!' />
</ThemeProvider>,
);
expect(queryByTestId('PrimaryButton')).toBeInTheDocument();
});
});

28
__tests__/components/column.test.js Normal file
View File

@ -0,0 +1,28 @@
// @flow
import React from 'react';
import { render, cleanup } from 'react-testing-library';
import { ThemeProvider } from 'styled-components';
import 'jest-dom/extend-expect';
import { ColumnComponent } from '../../app/components/column';
import appTheme from '../../app/theme';
afterEach(cleanup);
describe('<ColumnComponent />', () => {
test('should render correctly', () => {
// $FlowFixMe
const { container } = render(
<ThemeProvider theme={appTheme}>
<ColumnComponent>
<h3>ZEC</h3>
<h3>React</h3>
<h3>Wallet</h3>
</ColumnComponent>
</ThemeProvider>,
);
expect(container).toMatchSnapshot();
});
});

38
__tests__/components/confirm-dialog.test.js
View File

@ -9,19 +9,31 @@ import { ConfirmDialogComponent } from '../../app/components/confirm-dialog';
afterEach(cleanup);
describe('<ConfirmDialogComponent />', () => {
describe('render()', () => {
test('should render confirm dialog correctly', () => {
const { container } = render(
<ConfirmDialogComponent
title="Confirm example"
onConfirm={() => alert('Confirm')}
renderTrigger={toggle => <button onClick={toggle}> Open! </button>}
>
{toggle => <div>Confirm content</div>}
</ConfirmDialogComponent>,
);
test('should render confirm dialog correctly', () => {
const { queryByTestId } = render(
<ConfirmDialogComponent
title="Confirm example"
onConfirm={() => alert('Confirm')}
renderTrigger={toggle => <button onClick={toggle}> Open! </button>}
>
{toggle => <div>Confirm content</div>}
</ConfirmDialogComponent>,
);
expect(container).toMatchSnapshot();
});
expect(queryByTestId('ConfirmDialog')).toMatchSnapshot();
});
test('should render confirm dialog trigger', () => {
const { queryByTestId } = render(
<ConfirmDialogComponent
title="Confirm example"
onConfirm={() => alert('Confirm')}
renderTrigger={toggle => <button data-testid='ConfirmDialogTrigger' onClick={toggle}> Open! </button>}
>
{toggle => <div>Confirm content</div>}
</ConfirmDialogComponent>,
);
expect(queryByTestId('ConfirmDialogTrigger')).toBeInTheDocument();
});
});

24
__tests__/components/divider.test.js Normal file
View File

@ -0,0 +1,24 @@
// @flow
import React from 'react';
import { render, cleanup } from 'react-testing-library';
import { ThemeProvider } from 'styled-components';
import 'jest-dom/extend-expect';
import { Divider } from '../../app/components/divider';
import appTheme from '../../app/theme';
afterEach(cleanup);
describe('<Divider />', () => {
test('should render correctly', () => {
// $FlowFixMe
const { container } = render(
<ThemeProvider theme={appTheme}>
<Divider opacity={0.3} />
</ThemeProvider>,
);
expect(container).toMatchSnapshot();
});
});

70
__tests__/components/dropdown.test.js
View File

@ -12,29 +12,53 @@ import appTheme from '../../app/theme';
afterEach(cleanup);
describe('<DropdownComponent />', () => {
describe('render()', () => {
test('should render dropdown correctly', () => {
const { container } = render(
<ThemeProvider theme={appTheme}>
<div style={{ height: '500px' }}>
<DropdownComponent
label='Addresses'
renderTrigger={toggleVisibility => (
<Button
label='Show Dropdown'
onClick={toggleVisibility}
/>
)}
options={[
{ label: 'asbh1yeasbdh23848asdasd', onClick: console.log },
{ label: 'urtyruhjr374hbfdjdhuh', onClick: console.log },
]}
/>
</div>
</ThemeProvider>,
);
test('should render dropdown correctly', () => {
const { queryByTestId } = render(
<ThemeProvider theme={appTheme}>
<div style={{ height: '500px' }} data-testid='DropdownWrapper'>
<DropdownComponent
label='Addresses'
renderTrigger={toggleVisibility => (
<Button
label='Show Dropdown'
onClick={toggleVisibility}
/>
)}
options={[
{ label: 'asbh1yeasbdh23848asdasd', onClick: console.log },
{ label: 'urtyruhjr374hbfdjdhuh', onClick: console.log },
]}
/>
</div>
</ThemeProvider>,
);
expect(container).toMatchSnapshot();
});
expect(queryByTestId('DropdownWrapper')).toBeInTheDocument();
});
test('should render dropdown button trigger correctly', () => {
const { queryByTestId } = render(
<ThemeProvider theme={appTheme}>
<div style={{ height: '500px' }}>
<DropdownComponent
label='Addresses'
renderTrigger={toggleVisibility => (
<Button
label='Show Dropdown'
data-testid='DropdownAddressesWrapper'
onClick={toggleVisibility}
/>
)}
options={[
{ label: 'asbh1yeasbdh23848asdasd', onClick: console.log },
{ label: 'urtyruhjr374hbfdjdhuh', onClick: console.log },
]}
/>
</div>
</ThemeProvider>,
);
expect(queryByTestId('PrimaryButton')).toBeInTheDocument();
});
});

33
__tests__/components/empty-transactions.test.js Normal file
View File

@ -0,0 +1,33 @@
// @flow
import React from 'react';
import { render, cleanup, queryByText } from 'react-testing-library';
import { ThemeProvider } from 'styled-components';
import 'jest-dom/extend-expect';
import { EmptyTransactionsComponent } from '../../app/components/empty-transactions';
import appTheme from '../../app/theme';
afterEach(cleanup);
describe('<EmptyTransactions />', () => {
test('should render correctly', () => {
const { container } = render(
<ThemeProvider theme={appTheme}>
<EmptyTransactionsComponent />
</ThemeProvider>,
);
expect(container).toMatchSnapshot();
});
test('should show label correctly', () => {
const { container } = render(
<ThemeProvider theme={appTheme}>
<EmptyTransactionsComponent />
</ThemeProvider>,
);
expect(queryByText(container, /transactions/i)).toBeInTheDocument();
});
});

33
__tests__/components/input-label.test.js Normal file
View File

@ -0,0 +1,33 @@
// @flow
import React from 'react';
import { render, cleanup, queryByText } from 'react-testing-library';
import { ThemeProvider } from 'styled-components';
import 'jest-dom/extend-expect';
import { InputLabelComponent } from '../../app/components/input-label';
import appTheme from '../../app/theme';
afterEach(cleanup);
describe('<InputLabelComponent />', () => {
test('should render correctly', () => {
const { container } = render(
<ThemeProvider theme={appTheme}>
<InputLabelComponent value='From' />
</ThemeProvider>,
);
expect(container).toMatchSnapshot();
});
test('should render input label string', () => {
const { container } = render(
<ThemeProvider theme={appTheme}>
<InputLabelComponent value='From' />
</ThemeProvider>,
);
expect(queryByText(container, /From/i)).toBeInTheDocument();
});
});

50
__tests__/components/input.test.js
View File

@ -11,34 +11,32 @@ import appTheme from '../../app/theme';
afterEach(cleanup);
describe('<InputComponent />', () => {
describe('render()', () => {
test('should render text input correctly', () => {
const { container } = render(
<ThemeProvider theme={appTheme}>
<InputComponent
inputType='input'
value='Hello World!'
onChange={console.log}
/>
</ThemeProvider>
);
test('should render text input correctly', () => {
const { queryByTestId } = render(
<ThemeProvider theme={appTheme}>
<InputComponent
inputType='input'
value='Hello World!'
onChange={console.log}
/>
</ThemeProvider>
);
expect(container).toMatchSnapshot();
});
expect(queryByTestId('Input')).toBeInTheDocument();
});
test('should render textarea correctly', () => {
const { container } = render(
<ThemeProvider theme={appTheme}>
<InputComponent
inputType='textarea'
value='I am Zcash Electron Wallet'
onChange={console.log}
rows={10}
/>
</ThemeProvider>
);
test('should render textarea correctly', () => {
const { queryByTestId } = render(
<ThemeProvider theme={appTheme}>
<InputComponent
inputType='textarea'
value='I am Zcash Electron Wallet'
onChange={console.log}
rows={10}
/>
</ThemeProvider>
);
expect(container).toMatchSnapshot();
});
expect(queryByTestId('Textarea')).toBeInTheDocument();
});
});

23
__tests__/components/loading-screen.test.js Normal file
View File

@ -0,0 +1,23 @@
// @flow
import React from 'react';
import { render, cleanup } from 'react-testing-library';
import { ThemeProvider } from 'styled-components';
import 'jest-dom/extend-expect';
import { LoadingScreen } from '../../app/components/loading-screen';
import appTheme from '../../app/theme';
afterEach(cleanup);
describe('<LoadingScreen />', () => {
test('should render status pill correctly', () => {
const { queryByTestId } = render(
<ThemeProvider theme={appTheme}>
<LoadingScreen progress={83.} />
</ThemeProvider>,
);
expect(queryByTestId('LoadingScreen')).toBeInTheDocument();
});
});

39
__tests__/components/modal.test.js
View File

@ -9,28 +9,27 @@ import { ModalComponent } from '../../app/components/modal';
afterEach(cleanup);
describe('<ModalComponent />', () => {
describe('render()', () => {
test('should render modal correctly', () => {
const { container } = render(
<ModalComponent
renderTrigger={toggleVisibility => (
test('should render modal trigger correctly', () => {
const { queryByTestId } = render(
<ModalComponent
renderTrigger={toggleVisibility => (
<button type="button" data-testid='ModalTrigger' onClick={toggleVisibility}>
Open Modal
</button>
)}
>
{toggleVisibility => (
<div style={{ padding: '50px', backgroundColor: 'white' }}>
Modal Content
<button type="button" onClick={toggleVisibility}>
Open Modal
Close Modal
</button>
)}
>
{toggleVisibility => (
<div style={{ padding: '50px', backgroundColor: 'white' }}>
Modal Content
<button type="button" onClick={toggleVisibility}>
Close Modal
</button>
</div>
)}
</ModalComponent>,
);
</div>
)}
</ModalComponent>,
);
expect(container).toMatchSnapshot();
});
expect(queryByTestId('ModalTrigger')).toBeInTheDocument();
});
});

12
__tests__/components/qrcode.test.js
View File

@ -9,13 +9,11 @@ import { QRCode } from '../../app/components/qrcode';
afterEach(cleanup);
describe('<QRCode />', () => {
describe('render()', () => {
test('should render qrcode component correctly', () => {
const { container } = render(
<QRCode value='https://z.cash.foundation' />,
);
test('should render qrcode component correctly', () => {
const { queryByTestId } = render(
<QRCode value='https://z.cash.foundation' />,
);
expect(container).toMatchSnapshot();
});
expect(queryByTestId('QRCode')).toBeInTheDocument();
});
});

27
__tests__/components/row.test.js Normal file
View File

@ -0,0 +1,27 @@
// @flow
import React from 'react';
import { render, cleanup } from 'react-testing-library';
import { ThemeProvider } from 'styled-components';
import 'jest-dom/extend-expect';
import { RowComponent } from '../../app/components/row';
import appTheme from '../../app/theme';
afterEach(cleanup);
describe('<RowComponent />', () => {
test('should render correctly', () => {
const { container } = render(
<ThemeProvider theme={appTheme}>
<RowComponent>
<h3>ZEC</h3>
<h3>React</h3>
<h3>Wallet</h3>
</RowComponent>
</ThemeProvider>,
);
expect(container).toMatchSnapshot();
});
});

67
__tests__/components/select.test.js Normal file
View File

@ -0,0 +1,67 @@
// @flow
import React from 'react';
import { render, cleanup, queryByText } from 'react-testing-library';
import { ThemeProvider } from 'styled-components';
import 'jest-dom/extend-expect';
import { SelectComponent } from '../../app/components/select';
import appTheme from '../../app/theme';
afterEach(cleanup);
describe('<SelectComponent />', () => {
test('should generate snapshot correctly', () => {
const { container } = render(
<ThemeProvider theme={appTheme}>
<SelectComponent
onChange={console.log}
value='asbh1yeasbdh23848asdasd'
placeholder='Select a address'
options={[
{ label: 'asbh1yeasbdh23848asdasd', value: '1' },
{ label: 'urtyruhjr374hbfdjdhuh', value: '1' },
]}
/>
</ThemeProvider>,
);
expect(container).toMatchSnapshot();
});
test('should render correctly', () => {
const { queryByTestId } = render(
<ThemeProvider theme={appTheme}>
<SelectComponent
onChange={console.log}
value='asbh1yeasbdh23848asdasd'
placeholder='Select a address'
options={[
{ label: 'asbh1yeasbdh23848asdasd', value: '1' },
{ label: 'urtyruhjr374hbfdjdhuh', value: '1' },
]}
/>
</ThemeProvider>,
);
expect(queryByTestId('Select')).toBeInTheDocument();
});
test('should render select trigger string', () => {
const { container } = render(
<ThemeProvider theme={appTheme}>
<SelectComponent
onChange={console.log}
value='asbh1yeasbdh23848asdasd'
placeholder='Select a address'
options={[
{ label: 'asbh1yeasbdh23848asdasd', value: '1' },
{ label: 'urtyruhjr374hbfdjdhuh', value: '1' },
]}
/>
</ThemeProvider>,
);
expect(queryByText(container, /Select/i)).toBeInTheDocument();
});
});

29
__tests__/components/sidebar.test.js
View File

@ -1,29 +0,0 @@
// @flow
import React from 'react';
import { render, cleanup } from 'react-testing-library';
import { MemoryRouter } from 'react-router-dom';
import { ThemeProvider } from 'styled-components';
import 'jest-dom/extend-expect';
import { SidebarComponent } from '../../app/components/sidebar';
import appTheme from '../../app/theme';
afterEach(cleanup);
describe('<SidebarComponent />', () => {
describe('render()', () => {
test('should render correctly', () => {
// $FlowFixMe
const { asFragment } = render(
<ThemeProvider theme={appTheme}>
<MemoryRouter>
<SidebarComponent location={{ pathname: '/', hash: '/', search: '' }} />
</MemoryRouter>
</ThemeProvider>,
);
expect(asFragment()).toMatchSnapshot();
});
});
});

53
__tests__/components/status-pill.test.js
View File

@ -1,8 +1,7 @@
// @flow
import React from 'react';
import { render, cleanup } from 'react-testing-library';
import { MemoryRouter } from 'react-router-dom';
import { render, cleanup, queryByText } from 'react-testing-library';
import { ThemeProvider } from 'styled-components';
import 'jest-dom/extend-expect';
@ -12,18 +11,44 @@ import appTheme from '../../app/theme';
afterEach(cleanup);
describe('<StatusPill />', () => {
describe('render()', () => {
test('should render visual component status correctly', () => {
// $FlowFixMe
const { asFragment } = render(
<ThemeProvider theme={appTheme}>
<MemoryRouter>
<StatusPill progress={83.} type='syncing' />
</MemoryRouter>
</ThemeProvider>,
);
test('should render status pill correctly', () => {
const { queryByTestId } = render(
<ThemeProvider theme={appTheme}>
<StatusPill progress={83.} type='syncing' />
</ThemeProvider>,
);
expect(asFragment()).toMatchSnapshot();
});
expect(queryByTestId('StatusPill')).toBeInTheDocument();
});
test('should show percentage on status pill syncing', () => {
const { container } = render(
<ThemeProvider theme={appTheme}>
<StatusPill progress={56.} type='syncing' />
</ThemeProvider>,
);
expect(queryByText(container, /%/i)).toBeInTheDocument();
});
test('should hide percentage on status pill', () => {
const { container } = render(
<ThemeProvider theme={appTheme}>
<StatusPill progress={100.} type='ready' />
</ThemeProvider>,
);
expect(queryByText(container, /%/i)).not.toBeInTheDocument();
});
test('should show error string and hide percentage on status pill', () => {
const { container } = render(
<ThemeProvider theme={appTheme}>
<StatusPill progress={0.} type='error' />
</ThemeProvider>,
);
expect(queryByText(container, /%/i)).not.toBeInTheDocument();
expect(queryByText(container, /error/i)).toBeInTheDocument();
});
});

33
__tests__/components/text.test.js Normal file
View File

@ -0,0 +1,33 @@
// @flow
import React from 'react';
import { render, cleanup, queryByText } from 'react-testing-library';
import { ThemeProvider } from 'styled-components';
import 'jest-dom/extend-expect';
import { TextComponent } from '../../app/components/text';
import appTheme from '../../app/theme';
afterEach(cleanup);
describe('<TextComponent />', () => {
test('should render correctly', () => {
const { container } = render(
<ThemeProvider theme={appTheme}>
<TextComponent value='ZEC React Wallet' />
</ThemeProvider>,
);
expect(container).toMatchSnapshot();
});
test('should render input label string', () => {
const { container } = render(
<ThemeProvider theme={appTheme}>
<TextComponent value='Test' />
</ThemeProvider>,
);
expect(queryByText(container, /Test/i)).toBeInTheDocument();
});
});

31
__tests__/components/transaction-item.test.js Normal file
View File

@ -0,0 +1,31 @@
// @flow
import React from 'react';
import { render, cleanup } from 'react-testing-library';
import { ThemeProvider } from 'styled-components';
import 'jest-dom/extend-expect';
import { TransactionItemComponent } from '../../app/components/transaction-item';
import appTheme from '../../app/theme';
afterEach(cleanup);
describe('<TransactionItem />', () => {
test('should render a transaction item correctly', () => {
const { container } = render(
<ThemeProvider theme={appTheme}>
<TransactionItemComponent
type='send'
address='123456789123456789123456789123456789'
transactionId='a0s9dujo23j0'
amount={0.8652}
date={new Date().toISOString()}
zecPrice={2.94}
/>
</ThemeProvider>
);
expect(container).toMatchSnapshot();
});
});

26
__tests__/components/wallet-address.test.js
View File

@ -1,7 +1,7 @@
// @flow
import React from 'react';
import { render, cleanup } from 'react-testing-library';
import { render, cleanup, queryByText } from 'react-testing-library';
import { ThemeProvider } from 'styled-components';
import 'jest-dom/extend-expect';
@ -11,19 +11,17 @@ import appTheme from '../../app/theme';
afterEach(cleanup);
describe('<WalletAddress />', () => {
describe('render()', () => {
test('should render wallet address component correctly', () => {
const { container } = render(
<ThemeProvider theme={appTheme}>
<div style={{ width: '700px' }}>
<WalletAddress
address='t14oHp2v54vfmdgQ3v3SNuQga8JKHTNi2a1'
/>
</div>
</ThemeProvider>,
);
test('should render wallet address component correctly', () => {
const { queryByTestId } = render(
<ThemeProvider theme={appTheme}>
<div style={{ width: '700px' }}>
<WalletAddress
address='t14oHp2v54vfmdgQ3v3SNuQga8JKHTNi2a1'
/>
</div>
</ThemeProvider>,
);
expect(container).toMatchSnapshot();
});
expect(queryByTestId('Address')).toBeInTheDocument();
});
});