feat(test-components): create test files for components
This commit is contained in:
parent
461f43eb7f
commit
ad34afc123
|
@ -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 { Button } from '../../app/components/button';
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,25 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { render, cleanup } from 'react-testing-library';
|
||||||
|
import { ThemeProvider } from 'styled-components';
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
import { Clipboard } from '../../app/components/clipboard';
|
||||||
|
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>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,27 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { render, cleanup } from 'react-testing-library';
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
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>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,40 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { render, cleanup } from 'react-testing-library';
|
||||||
|
import { ThemeProvider } from 'styled-components';
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
import { DropdownComponent } from '../../app/components/dropdown';
|
||||||
|
import { Button } from '../../app/components/button';
|
||||||
|
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>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,44 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { render, cleanup } from 'react-testing-library';
|
||||||
|
import { ThemeProvider } from 'styled-components';
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
import { InputComponent } from '../../app/components/input';
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,36 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { render, cleanup } from 'react-testing-library';
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
import { ModalComponent } from '../../app/components/modal';
|
||||||
|
|
||||||
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
describe('<ModalComponent />', () => {
|
||||||
|
describe('render()', () => {
|
||||||
|
test('should render modal correctly', () => {
|
||||||
|
const { container } = render(
|
||||||
|
<ModalComponent
|
||||||
|
renderTrigger={toggleVisibility => (
|
||||||
|
<button type="button" onClick={toggleVisibility}>
|
||||||
|
Open Modal
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{toggleVisibility => (
|
||||||
|
<div style={{ padding: '50px', backgroundColor: 'white' }}>
|
||||||
|
Modal Content
|
||||||
|
<button type="button" onClick={toggleVisibility}>
|
||||||
|
Close Modal
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</ModalComponent>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,21 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { render, cleanup } from 'react-testing-library';
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
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' />,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
|
@ -1,20 +1,26 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { render } from 'react-testing-library';
|
import { render, cleanup } from 'react-testing-library';
|
||||||
import { MemoryRouter } from 'react-router-dom';
|
import { MemoryRouter } from 'react-router-dom';
|
||||||
|
import { ThemeProvider } from 'styled-components';
|
||||||
import 'jest-dom/extend-expect';
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
import { SidebarComponent } from '../../app/components/sidebar';
|
import { SidebarComponent } from '../../app/components/sidebar';
|
||||||
|
import appTheme from '../../app/theme';
|
||||||
|
|
||||||
describe('<Sidebar />', () => {
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
describe('<SidebarComponent />', () => {
|
||||||
describe('render()', () => {
|
describe('render()', () => {
|
||||||
test('should render correctly', () => {
|
test('should render correctly', () => {
|
||||||
// $FlowFixMe
|
// $FlowFixMe
|
||||||
const { asFragment } = render(
|
const { asFragment } = render(
|
||||||
|
<ThemeProvider theme={appTheme}>
|
||||||
<MemoryRouter>
|
<MemoryRouter>
|
||||||
<SidebarComponent location={{ pathname: '/', hash: '/', search: '' }} />
|
<SidebarComponent location={{ pathname: '/', hash: '/', search: '' }} />
|
||||||
</MemoryRouter>,
|
</MemoryRouter>
|
||||||
|
</ThemeProvider>,
|
||||||
);
|
);
|
||||||
|
|
||||||
expect(asFragment()).toMatchSnapshot();
|
expect(asFragment()).toMatchSnapshot();
|
||||||
|
|
|
@ -0,0 +1,46 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { render, cleanup } from 'react-testing-library';
|
||||||
|
import { ThemeProvider } from 'styled-components';
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
import { TransactionDailyComponent } from '../../app/components/transaction-daily';
|
||||||
|
import appTheme from '../../app/theme';
|
||||||
|
|
||||||
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
describe('<TransactionDailyComponent />', () => {
|
||||||
|
describe('render()', () => {
|
||||||
|
test('should render user daily transactions', () => {
|
||||||
|
const { container } = render(
|
||||||
|
<ThemeProvider theme={appTheme}>
|
||||||
|
<TransactionDailyComponent
|
||||||
|
transactionsDate={new Date().toISOString()}
|
||||||
|
zecPrice={1.345}
|
||||||
|
transactions={[
|
||||||
|
{
|
||||||
|
type: 'receive',
|
||||||
|
transactionId: 's0a8das098fgh2348a',
|
||||||
|
address: '123456789123456789123456789123456789',
|
||||||
|
amount: 1.7891,
|
||||||
|
zecPrice: 1.345,
|
||||||
|
date: new Date().toISOString(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'send',
|
||||||
|
transactionId: '0asd908fgj90f01',
|
||||||
|
address: '123456789123456789123456789123456789',
|
||||||
|
amount: 0.8458,
|
||||||
|
zecPrice: 1.344,
|
||||||
|
date: new Date().toISOString(),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</ThemeProvider>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,29 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { render, cleanup } from 'react-testing-library';
|
||||||
|
import { ThemeProvider } from 'styled-components';
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
import { WalletAddress } from '../../app/components/wallet-address';
|
||||||
|
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>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in New Issue