feat(test-components): increase tests coverage on components
This commit is contained in:
parent
8e308acbf2
commit
954c53b8bb
|
@ -11,18 +11,32 @@ import appTheme from '../../app/theme';
|
||||||
afterEach(cleanup);
|
afterEach(cleanup);
|
||||||
|
|
||||||
describe('<Button />', () => {
|
describe('<Button />', () => {
|
||||||
describe('render()', () => {
|
test('should render primary button correctly', () => {
|
||||||
test('should render button correctly', () => {
|
const { queryByTestId } = render(
|
||||||
const { container } = render(
|
<ThemeProvider theme={appTheme}>
|
||||||
<ThemeProvider theme={appTheme}>
|
<Button
|
||||||
<Button
|
label='Click me!'
|
||||||
label='Click me!'
|
onClick={() => alert('Clicked')}
|
||||||
onClick={() => alert('Clicked')}
|
variant='primary'
|
||||||
/>
|
/>
|
||||||
</ThemeProvider>
|
</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();
|
||||||
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
|
@ -11,15 +11,24 @@ import appTheme from '../../app/theme';
|
||||||
afterEach(cleanup);
|
afterEach(cleanup);
|
||||||
|
|
||||||
describe('<Clipboard />', () => {
|
describe('<Clipboard />', () => {
|
||||||
describe('render()', () => {
|
test('should render clipboard component correctly', () => {
|
||||||
test('should render clipboard component correctly', () => {
|
const { queryByTestId } = render(
|
||||||
const { container } = render(
|
<ThemeProvider theme={appTheme}>
|
||||||
<ThemeProvider theme={appTheme}>
|
<Clipboard text='Click me!' />
|
||||||
<Clipboard text='Click me!' />
|
</ThemeProvider>,
|
||||||
</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();
|
||||||
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
|
@ -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();
|
||||||
|
});
|
||||||
|
});
|
|
@ -9,19 +9,31 @@ import { ConfirmDialogComponent } from '../../app/components/confirm-dialog';
|
||||||
afterEach(cleanup);
|
afterEach(cleanup);
|
||||||
|
|
||||||
describe('<ConfirmDialogComponent />', () => {
|
describe('<ConfirmDialogComponent />', () => {
|
||||||
describe('render()', () => {
|
test('should render confirm dialog correctly', () => {
|
||||||
test('should render confirm dialog correctly', () => {
|
const { queryByTestId } = render(
|
||||||
const { container } = render(
|
<ConfirmDialogComponent
|
||||||
<ConfirmDialogComponent
|
title="Confirm example"
|
||||||
title="Confirm example"
|
onConfirm={() => alert('Confirm')}
|
||||||
onConfirm={() => alert('Confirm')}
|
renderTrigger={toggle => <button onClick={toggle}> Open! </button>}
|
||||||
renderTrigger={toggle => <button onClick={toggle}> Open! </button>}
|
>
|
||||||
>
|
{toggle => <div>Confirm content</div>}
|
||||||
{toggle => <div>Confirm content</div>}
|
</ConfirmDialogComponent>,
|
||||||
</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();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -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();
|
||||||
|
});
|
||||||
|
});
|
|
@ -12,29 +12,53 @@ import appTheme from '../../app/theme';
|
||||||
afterEach(cleanup);
|
afterEach(cleanup);
|
||||||
|
|
||||||
describe('<DropdownComponent />', () => {
|
describe('<DropdownComponent />', () => {
|
||||||
describe('render()', () => {
|
test('should render dropdown correctly', () => {
|
||||||
test('should render dropdown correctly', () => {
|
const { queryByTestId } = render(
|
||||||
const { container } = render(
|
<ThemeProvider theme={appTheme}>
|
||||||
<ThemeProvider theme={appTheme}>
|
<div style={{ height: '500px' }} data-testid='DropdownWrapper'>
|
||||||
<div style={{ height: '500px' }}>
|
<DropdownComponent
|
||||||
<DropdownComponent
|
label='Addresses'
|
||||||
label='Addresses'
|
renderTrigger={toggleVisibility => (
|
||||||
renderTrigger={toggleVisibility => (
|
<Button
|
||||||
<Button
|
label='Show Dropdown'
|
||||||
label='Show Dropdown'
|
onClick={toggleVisibility}
|
||||||
onClick={toggleVisibility}
|
/>
|
||||||
/>
|
)}
|
||||||
)}
|
options={[
|
||||||
options={[
|
{ label: 'asbh1yeasbdh23848asdasd', onClick: console.log },
|
||||||
{ label: 'asbh1yeasbdh23848asdasd', onClick: console.log },
|
{ label: 'urtyruhjr374hbfdjdhuh', onClick: console.log },
|
||||||
{ label: 'urtyruhjr374hbfdjdhuh', onClick: console.log },
|
]}
|
||||||
]}
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
</ThemeProvider>,
|
||||||
</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();
|
||||||
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
|
@ -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();
|
||||||
|
});
|
||||||
|
});
|
|
@ -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();
|
||||||
|
});
|
||||||
|
});
|
|
@ -11,34 +11,32 @@ import appTheme from '../../app/theme';
|
||||||
afterEach(cleanup);
|
afterEach(cleanup);
|
||||||
|
|
||||||
describe('<InputComponent />', () => {
|
describe('<InputComponent />', () => {
|
||||||
describe('render()', () => {
|
test('should render text input correctly', () => {
|
||||||
test('should render text input correctly', () => {
|
const { queryByTestId } = render(
|
||||||
const { container } = render(
|
<ThemeProvider theme={appTheme}>
|
||||||
<ThemeProvider theme={appTheme}>
|
<InputComponent
|
||||||
<InputComponent
|
inputType='input'
|
||||||
inputType='input'
|
value='Hello World!'
|
||||||
value='Hello World!'
|
onChange={console.log}
|
||||||
onChange={console.log}
|
/>
|
||||||
/>
|
</ThemeProvider>
|
||||||
</ThemeProvider>
|
);
|
||||||
);
|
|
||||||
|
|
||||||
expect(container).toMatchSnapshot();
|
expect(queryByTestId('Input')).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('should render textarea correctly', () => {
|
test('should render textarea correctly', () => {
|
||||||
const { container } = render(
|
const { queryByTestId } = render(
|
||||||
<ThemeProvider theme={appTheme}>
|
<ThemeProvider theme={appTheme}>
|
||||||
<InputComponent
|
<InputComponent
|
||||||
inputType='textarea'
|
inputType='textarea'
|
||||||
value='I am Zcash Electron Wallet'
|
value='I am Zcash Electron Wallet'
|
||||||
onChange={console.log}
|
onChange={console.log}
|
||||||
rows={10}
|
rows={10}
|
||||||
/>
|
/>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
|
|
||||||
expect(container).toMatchSnapshot();
|
expect(queryByTestId('Textarea')).toBeInTheDocument();
|
||||||
});
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -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();
|
||||||
|
});
|
||||||
|
});
|
|
@ -9,28 +9,27 @@ import { ModalComponent } from '../../app/components/modal';
|
||||||
afterEach(cleanup);
|
afterEach(cleanup);
|
||||||
|
|
||||||
describe('<ModalComponent />', () => {
|
describe('<ModalComponent />', () => {
|
||||||
describe('render()', () => {
|
test('should render modal trigger correctly', () => {
|
||||||
test('should render modal correctly', () => {
|
const { queryByTestId } = render(
|
||||||
const { container } = render(
|
<ModalComponent
|
||||||
<ModalComponent
|
renderTrigger={toggleVisibility => (
|
||||||
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}>
|
<button type="button" onClick={toggleVisibility}>
|
||||||
Open Modal
|
Close Modal
|
||||||
</button>
|
</button>
|
||||||
)}
|
</div>
|
||||||
>
|
)}
|
||||||
{toggleVisibility => (
|
</ModalComponent>,
|
||||||
<div style={{ padding: '50px', backgroundColor: 'white' }}>
|
);
|
||||||
Modal Content
|
|
||||||
<button type="button" onClick={toggleVisibility}>
|
|
||||||
Close Modal
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</ModalComponent>,
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(container).toMatchSnapshot();
|
expect(queryByTestId('ModalTrigger')).toBeInTheDocument();
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
|
@ -9,13 +9,11 @@ import { QRCode } from '../../app/components/qrcode';
|
||||||
afterEach(cleanup);
|
afterEach(cleanup);
|
||||||
|
|
||||||
describe('<QRCode />', () => {
|
describe('<QRCode />', () => {
|
||||||
describe('render()', () => {
|
test('should render qrcode component correctly', () => {
|
||||||
test('should render qrcode component correctly', () => {
|
const { queryByTestId } = render(
|
||||||
const { container } = render(
|
<QRCode value='https://z.cash.foundation' />,
|
||||||
<QRCode value='https://z.cash.foundation' />,
|
);
|
||||||
);
|
|
||||||
|
|
||||||
expect(container).toMatchSnapshot();
|
expect(queryByTestId('QRCode')).toBeInTheDocument();
|
||||||
});
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -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();
|
||||||
|
});
|
||||||
|
});
|
|
@ -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();
|
||||||
|
});
|
||||||
|
});
|
|
@ -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();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
|
@ -1,8 +1,7 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { render, cleanup } from 'react-testing-library';
|
import { render, cleanup, queryByText } from 'react-testing-library';
|
||||||
import { MemoryRouter } from 'react-router-dom';
|
|
||||||
import { ThemeProvider } from 'styled-components';
|
import { ThemeProvider } from 'styled-components';
|
||||||
import 'jest-dom/extend-expect';
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
@ -12,18 +11,44 @@ import appTheme from '../../app/theme';
|
||||||
afterEach(cleanup);
|
afterEach(cleanup);
|
||||||
|
|
||||||
describe('<StatusPill />', () => {
|
describe('<StatusPill />', () => {
|
||||||
describe('render()', () => {
|
test('should render status pill correctly', () => {
|
||||||
test('should render visual component status correctly', () => {
|
const { queryByTestId } = render(
|
||||||
// $FlowFixMe
|
<ThemeProvider theme={appTheme}>
|
||||||
const { asFragment } = render(
|
<StatusPill progress={83.} type='syncing' />
|
||||||
<ThemeProvider theme={appTheme}>
|
</ThemeProvider>,
|
||||||
<MemoryRouter>
|
);
|
||||||
<StatusPill progress={83.} type='syncing' />
|
|
||||||
</MemoryRouter>
|
|
||||||
</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();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -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();
|
||||||
|
});
|
||||||
|
});
|
|
@ -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();
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
|
@ -1,7 +1,7 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import React from 'react';
|
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 { ThemeProvider } from 'styled-components';
|
||||||
import 'jest-dom/extend-expect';
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
@ -11,19 +11,17 @@ import appTheme from '../../app/theme';
|
||||||
afterEach(cleanup);
|
afterEach(cleanup);
|
||||||
|
|
||||||
describe('<WalletAddress />', () => {
|
describe('<WalletAddress />', () => {
|
||||||
describe('render()', () => {
|
test('should render wallet address component correctly', () => {
|
||||||
test('should render wallet address component correctly', () => {
|
const { queryByTestId } = render(
|
||||||
const { container } = render(
|
<ThemeProvider theme={appTheme}>
|
||||||
<ThemeProvider theme={appTheme}>
|
<div style={{ width: '700px' }}>
|
||||||
<div style={{ width: '700px' }}>
|
<WalletAddress
|
||||||
<WalletAddress
|
address='t14oHp2v54vfmdgQ3v3SNuQga8JKHTNi2a1'
|
||||||
address='t14oHp2v54vfmdgQ3v3SNuQga8JKHTNi2a1'
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
</ThemeProvider>,
|
||||||
</ThemeProvider>,
|
);
|
||||||
);
|
|
||||||
|
|
||||||
expect(container).toMatchSnapshot();
|
expect(queryByTestId('Address')).toBeInTheDocument();
|
||||||
});
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue