chore: solve merge conflicts
This commit is contained in:
commit
90f16a6ba6
|
@ -0,0 +1,42 @@
|
|||
// @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 />', () => {
|
||||
test('should render primary button correctly', () => {
|
||||
const { queryByTestId } = render(
|
||||
<ThemeProvider theme={appTheme}>
|
||||
<Button
|
||||
label='Click me!'
|
||||
onClick={() => alert('Clicked')}
|
||||
variant='primary'
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
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();
|
||||
});
|
||||
|
||||
});
|
|
@ -0,0 +1,34 @@
|
|||
// @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 />', () => {
|
||||
test('should render clipboard component correctly', () => {
|
||||
const { queryByTestId } = render(
|
||||
<ThemeProvider theme={appTheme}>
|
||||
<Clipboard text='Click me!' />
|
||||
</ThemeProvider>,
|
||||
);
|
||||
|
||||
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).toBeVisible();
|
||||
});
|
||||
});
|
|
@ -0,0 +1,39 @@
|
|||
// @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 />', () => {
|
||||
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).toBeVisible();
|
||||
});
|
||||
|
||||
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,27 @@
|
|||
// @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>,
|
||||
);
|
||||
|
||||
const divider = container.querySelector('div');
|
||||
|
||||
expect(divider).toBeVisible();
|
||||
expect(divider).toHaveStyle('opacity: 0.3');
|
||||
});
|
||||
});
|
|
@ -0,0 +1,64 @@
|
|||
// @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 />', () => {
|
||||
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(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 { queryByTestId } = render(
|
||||
<ThemeProvider theme={appTheme}>
|
||||
<EmptyTransactionsComponent />
|
||||
</ThemeProvider>,
|
||||
);
|
||||
|
||||
expect(queryByTestId('NoTransactions')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should show label correctly', () => {
|
||||
const { container } = render(
|
||||
<ThemeProvider theme={appTheme}>
|
||||
<EmptyTransactionsComponent />
|
||||
</ThemeProvider>,
|
||||
);
|
||||
|
||||
expect(queryByText(container, /transactions/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
|
@ -0,0 +1,35 @@
|
|||
// @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>,
|
||||
);
|
||||
|
||||
const label = container.querySelector('p');
|
||||
|
||||
expect(label).toBeVisible();
|
||||
});
|
||||
|
||||
test('should render input label string', () => {
|
||||
const { container } = render(
|
||||
<ThemeProvider theme={appTheme}>
|
||||
<InputLabelComponent value='From' />
|
||||
</ThemeProvider>,
|
||||
);
|
||||
|
||||
expect(queryByText(container, /From/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
|
@ -0,0 +1,42 @@
|
|||
// @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 />', () => {
|
||||
test('should render text input correctly', () => {
|
||||
const { queryByTestId } = render(
|
||||
<ThemeProvider theme={appTheme}>
|
||||
<InputComponent
|
||||
inputType='input'
|
||||
value='Hello World!'
|
||||
onChange={console.log}
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
expect(queryByTestId('Input')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
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(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();
|
||||
});
|
||||
});
|
|
@ -0,0 +1,35 @@
|
|||
// @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 />', () => {
|
||||
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}>
|
||||
Close Modal
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</ModalComponent>,
|
||||
);
|
||||
|
||||
expect(queryByTestId('ModalTrigger')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
});
|
|
@ -0,0 +1,19 @@
|
|||
// @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 />', () => {
|
||||
test('should render qrcode component correctly', () => {
|
||||
const { queryByTestId } = render(
|
||||
<QRCode value='https://z.cash.foundation' />,
|
||||
);
|
||||
|
||||
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).toBeVisible();
|
||||
});
|
||||
});
|
|
@ -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).toBeVisible();
|
||||
});
|
||||
|
||||
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();
|
||||
});
|
||||
});
|
|
@ -0,0 +1,54 @@
|
|||
// @flow
|
||||
|
||||
import React from 'react';
|
||||
import { render, cleanup, queryByText } from 'react-testing-library';
|
||||
import { ThemeProvider } from 'styled-components';
|
||||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { StatusPill } from '../../app/components/status-pill';
|
||||
import appTheme from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
describe('<StatusPill />', () => {
|
||||
test('should render status pill correctly', () => {
|
||||
const { queryByTestId } = render(
|
||||
<ThemeProvider theme={appTheme}>
|
||||
<StatusPill progress={83.} type='syncing' />
|
||||
</ThemeProvider>,
|
||||
);
|
||||
|
||||
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).toBeVisible();
|
||||
});
|
||||
|
||||
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();
|
||||
});
|
||||
|
||||
});
|
|
@ -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,27 @@
|
|||
// @flow
|
||||
|
||||
import React from 'react';
|
||||
import { render, cleanup, queryByText } 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 />', () => {
|
||||
test('should render wallet address component correctly', () => {
|
||||
const { queryByTestId } = render(
|
||||
<ThemeProvider theme={appTheme}>
|
||||
<div style={{ width: '700px' }}>
|
||||
<WalletAddress
|
||||
address='t14oHp2v54vfmdgQ3v3SNuQga8JKHTNi2a1'
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>,
|
||||
);
|
||||
|
||||
expect(queryByTestId('Address')).toBeInTheDocument();
|
||||
});
|
||||
});
|
|
@ -0,0 +1,7 @@
|
|||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
process(filename) {
|
||||
return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
|
||||
},
|
||||
};
|
|
@ -102,12 +102,12 @@ export const Button = ({
|
|||
const buttonLabel = isLoading ? 'Loading...' : label;
|
||||
|
||||
const component = variant === 'primary' ? (
|
||||
<Primary {...props}>
|
||||
<Primary {...props} data-testid='PrimaryButton'>
|
||||
{icon ? <Icon src={icon} /> : null}
|
||||
{buttonLabel}
|
||||
</Primary>
|
||||
) : (
|
||||
<Secondary {...props}>
|
||||
<Secondary {...props} data-testid='SecondaryButton'>
|
||||
{icon ? <Icon src={icon} /> : null}
|
||||
{buttonLabel}
|
||||
</Secondary>
|
||||
|
|
|
@ -39,12 +39,14 @@ export class Clipboard extends PureComponent<Props, State> {
|
|||
const { copied } = this.state;
|
||||
|
||||
return (
|
||||
<div data-testid='Clipboard'>
|
||||
<Button
|
||||
label={copied ? 'Copied!' : 'Copy!'}
|
||||
className={className}
|
||||
onClick={this.handleClick}
|
||||
disabled={copied}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -107,7 +107,7 @@ export class DropdownComponent extends Component<Props, State> {
|
|||
</MenuItem>
|
||||
)}
|
||||
{options.map(({ label: optionLabel, onClick }) => (
|
||||
<OptionItem onClick={onClick} key={optionLabel}>
|
||||
<OptionItem onClick={onClick} key={optionLabel} data-testid='DropdownOption'>
|
||||
<Option value={truncate ? truncateAddress(optionLabel) : optionLabel} />
|
||||
</OptionItem>
|
||||
))}
|
||||
|
|
|
@ -13,7 +13,7 @@ const Wrapper = styled.div`
|
|||
`;
|
||||
|
||||
export const EmptyTransactionsComponent = () => (
|
||||
<Wrapper>
|
||||
<Wrapper data-testid='NoTransactions'>
|
||||
<TextComponent value='No transactions!' />
|
||||
</Wrapper>
|
||||
);
|
||||
|
|
|
@ -9,6 +9,8 @@ import { Divider } from './divider';
|
|||
import { RowComponent } from './row';
|
||||
import { StatusPill } from './status-pill';
|
||||
|
||||
import { withSyncStatus } from '../../services/sync-status';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
height: ${props => props.theme.headerHeight};
|
||||
width: 100vw;
|
||||
|
@ -59,6 +61,8 @@ type Props = {
|
|||
title: string,
|
||||
};
|
||||
|
||||
const Status = withSyncStatus(StatusPill);
|
||||
|
||||
export const HeaderComponent = ({ title }: Props) => (
|
||||
<Wrapper id='header'>
|
||||
<LogoWrapper>
|
||||
|
@ -67,7 +71,7 @@ export const HeaderComponent = ({ title }: Props) => (
|
|||
<TitleWrapper>
|
||||
<TitleRow alignItems='center' justifyContent='space-around'>
|
||||
<Title value={title} />
|
||||
<StatusPill />
|
||||
<Status type='syncing' progress={0} />
|
||||
</TitleRow>
|
||||
<Divider opacity={0.1} />
|
||||
</TitleWrapper>
|
||||
|
|
|
@ -62,11 +62,12 @@ export const InputComponent = ({
|
|||
onChange={evt => onChange(evt.target.value)}
|
||||
withRightElement={Boolean(rightElement)}
|
||||
bgColor={bgColor}
|
||||
data-testid='Input'
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
textarea: () => (
|
||||
<Textarea onChange={evt => onChange(evt.target.value)} bgColor={bgColor} {...props} />
|
||||
<Textarea onChange={evt => onChange(evt.target.value)} bgColor={bgColor} data-testid='Textarea' {...props} />
|
||||
),
|
||||
};
|
||||
|
||||
|
|
|
@ -60,7 +60,7 @@ export class LoadingScreen extends PureComponent<Props, State> {
|
|||
const { progress } = this.props;
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<Wrapper data-testid='LoadingScreen'>
|
||||
<Transition
|
||||
native
|
||||
items={start}
|
||||
|
|
|
@ -99,6 +99,7 @@ export class ModalComponent extends PureComponent<Props, State> {
|
|||
? createPortal(
|
||||
<ModalWrapper
|
||||
id='modal-portal-wrapper'
|
||||
data-testid='Modal'
|
||||
onClick={(event) => {
|
||||
if (
|
||||
closeOnBackdropClick
|
||||
|
|
|
@ -9,7 +9,7 @@ type Props = {
|
|||
};
|
||||
|
||||
export const QRCode = ({ value, size }: Props) => (
|
||||
<QR value={value} size={size} />
|
||||
<QR data-testid='QRCode' value={value} size={size} />
|
||||
);
|
||||
|
||||
QRCode.defaultProps = {
|
||||
|
|
|
@ -152,6 +152,7 @@ export class SelectComponent extends PureComponent<Props, State> {
|
|||
|
||||
return (
|
||||
<SelectWrapper
|
||||
data-testid='Select'
|
||||
id='select-component'
|
||||
isOpen={isOpen}
|
||||
placement={placement}
|
||||
|
|
|
@ -10,7 +10,7 @@ const Wrapper = styled.div`
|
|||
flex-direction: column;
|
||||
width: ${props => props.theme.sidebarWidth};
|
||||
height: ${props => `calc(100vh - ${props.theme.headerHeight})`};
|
||||
font-family: ${props => props.theme.fontFamily}
|
||||
font-family: ${props => props.theme.fontFamily};
|
||||
background-color: ${props => props.theme.colors.sidebarBg};
|
||||
padding-top: 15px;
|
||||
position: relative;
|
||||
|
|
|
@ -15,7 +15,6 @@ const rotate = keyframes`
|
|||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
|
|
@ -13,10 +13,42 @@ import { DoczWrapper } from '../theme.js'
|
|||
|
||||
<PropsTable of={StatusPill} />
|
||||
|
||||
## Basic Usage
|
||||
## Syching
|
||||
|
||||
<Playground>
|
||||
<DoczWrapper>
|
||||
{() => <StatusPill percent={83.} />}
|
||||
{() =>
|
||||
<StatusPill
|
||||
progress={99.3}
|
||||
type='syncing'
|
||||
/>
|
||||
}
|
||||
</DoczWrapper>
|
||||
</Playground>
|
||||
|
||||
## Ready
|
||||
|
||||
<Playground>
|
||||
<DoczWrapper>
|
||||
{() =>
|
||||
<StatusPill
|
||||
progress={100.}
|
||||
type='ready'
|
||||
/>
|
||||
}
|
||||
</DoczWrapper>
|
||||
</Playground>
|
||||
|
||||
|
||||
## With Error
|
||||
|
||||
<Playground>
|
||||
<DoczWrapper>
|
||||
{() =>
|
||||
<StatusPill
|
||||
progress={0.}
|
||||
type='error'
|
||||
/>
|
||||
}
|
||||
</DoczWrapper>
|
||||
</Playground>
|
|
@ -39,7 +39,7 @@ export const TransactionDailyComponent = ({
|
|||
transactions,
|
||||
zecPrice,
|
||||
}: Props) => (
|
||||
<Wrapper>
|
||||
<Wrapper data-testid='TransactionsDaily'>
|
||||
<Day value={transactionsDate} />
|
||||
<TransactionsWrapper>
|
||||
{transactions.map(
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
// @flow
|
||||
import React, { PureComponent } from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { Transition, animated } from 'react-spring';
|
||||
|
||||
import { ColumnComponent } from './column';
|
||||
import { Button } from './button';
|
||||
import { QRCode } from './qrcode';
|
||||
|
||||
|
@ -17,7 +17,6 @@ const AddressWrapper = styled.div`
|
|||
border-radius: 6px;
|
||||
padding: 7px 13px;
|
||||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
`;
|
||||
|
||||
const Input = styled.input`
|
||||
|
@ -35,123 +34,70 @@ const Input = styled.input`
|
|||
}
|
||||
`;
|
||||
|
||||
/* eslint-disable max-len */
|
||||
const Btn = styled(Button)`
|
||||
border-width: 1px;
|
||||
font-weight: ${props => props.theme.fontWeight.regular};
|
||||
border-color: ${props => (props.isVisible ? props.theme.colors.primary : props.theme.colors.buttonBorderColor)};
|
||||
padding: 8px 10px;
|
||||
min-width: 260px;
|
||||
|
||||
img {
|
||||
height: 12px;
|
||||
width: 20px;
|
||||
}
|
||||
`;
|
||||
/* eslint-enable max-len */
|
||||
|
||||
const QRCodeWrapper = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
background-color: #000;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const RevealsMain = styled.div`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
height: ${props => (props.isVisible ? '178px' : 0)}
|
||||
transition: all 0.25s ease-in-out;
|
||||
|
||||
& > div {
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
address: string,
|
||||
isVisible?: boolean,
|
||||
};
|
||||
|
||||
type State = {
|
||||
isVisible: boolean,
|
||||
};
|
||||
|
||||
export class WalletAddress extends PureComponent<Props, State> {
|
||||
static defaultProps = {
|
||||
export class WalletAddress extends Component<Props, State> {
|
||||
state = {
|
||||
isVisible: false,
|
||||
};
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
show = () => {
|
||||
this.setState(
|
||||
() => ({ isVisible: true }),
|
||||
);
|
||||
};
|
||||
|
||||
this.state = { isVisible: Boolean(props.isVisible) };
|
||||
}
|
||||
hide = () => {
|
||||
this.setState(
|
||||
() => ({ isVisible: false }),
|
||||
);
|
||||
};
|
||||
|
||||
show = () => this.setState(() => ({ isVisible: true }));
|
||||
|
||||
hide = () => this.setState(() => ({ isVisible: false }));
|
||||
|
||||
render() {
|
||||
const { address } = this.props;
|
||||
const { isVisible } = this.state;
|
||||
const toggleVisibility = isVisible ? this.hide : this.show;
|
||||
const buttonLabel = `${isVisible ? 'Hide' : 'Show'} details and QR Code`;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ColumnComponent width='100%'>
|
||||
<AddressWrapper>
|
||||
<Input
|
||||
value={isVisible ? address : truncateAddress(address)}
|
||||
onChange={() => { }}
|
||||
onFocus={event => event.currentTarget.select()}
|
||||
/>
|
||||
<Btn
|
||||
<Button
|
||||
icon={eyeIcon}
|
||||
label={buttonLabel}
|
||||
label={`${isVisible ? 'Hide' : 'Show'} full address and QR Code`}
|
||||
onClick={toggleVisibility}
|
||||
variant='secondary'
|
||||
isVisible={isVisible}
|
||||
/>
|
||||
</AddressWrapper>
|
||||
<RevealsMain isVisible={isVisible}>
|
||||
<Transition
|
||||
native
|
||||
items={isVisible}
|
||||
enter={[
|
||||
{
|
||||
height: 'auto',
|
||||
opacity: 1,
|
||||
},
|
||||
]}
|
||||
leave={{ height: 0, opacity: 0 }}
|
||||
from={{
|
||||
position: 'absolute',
|
||||
overflow: 'hidden',
|
||||
opacity: 0,
|
||||
height: 0,
|
||||
}}
|
||||
>
|
||||
{show => show
|
||||
&& (props => (
|
||||
<animated.div style={props}>
|
||||
{isVisible
|
||||
? (
|
||||
<QRCodeWrapper>
|
||||
<QRCode value={address} />
|
||||
</QRCodeWrapper>
|
||||
</animated.div>
|
||||
))
|
||||
}
|
||||
</Transition>
|
||||
</RevealsMain>
|
||||
</div>
|
||||
)
|
||||
: null}
|
||||
</ColumnComponent>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -181,7 +181,10 @@
|
|||
"setupTestFrameworkScriptFile": "<rootDir>/__tests__/setup/jest.js",
|
||||
"testPathIgnorePatterns": [
|
||||
"<rootDir>/__tests__/setup/"
|
||||
]
|
||||
],
|
||||
"moduleNameMapper": {
|
||||
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__tests__/setup/assetTransformer.js"
|
||||
}
|
||||
},
|
||||
"resolutions": {
|
||||
"babel-core": "7.0.0-bridge.0"
|
||||
|
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="125" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="a"><rect width="125" height="20" rx="3" fill="#fff"/></mask><g mask="url(#a)"><path fill="#555" d="M0 0h91v20H0z"/><path fill="#4C1" d="M91 0h34v20H91z"/><path fill="url(#b)" d="M0 0h125v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,DejaVu Sans,Geneva,sans-serif" font-size="11"><text x="45.5" y="15" fill="#010101" fill-opacity=".3">flow-coverage</text><text x="45.5" y="14">flow-coverage</text><text x="107" y="15" fill="#010101" fill-opacity=".3">82%</text><text x="107" y="14">82%</text></g></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="125" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="a"><rect width="125" height="20" rx="3" fill="#fff"/></mask><g mask="url(#a)"><path fill="#555" d="M0 0h91v20H0z"/><path fill="#4C1" d="M91 0h34v20H91z"/><path fill="url(#b)" d="M0 0h125v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,DejaVu Sans,Geneva,sans-serif" font-size="11"><text x="45.5" y="15" fill="#010101" fill-opacity=".3">flow-coverage</text><text x="45.5" y="14">flow-coverage</text><text x="107" y="15" fill="#010101" fill-opacity=".3">83%</text><text x="107" y="14">83%</text></g></svg>
|
Before Width: | Height: | Size: 745 B After Width: | Height: | Size: 745 B |
|
@ -0,0 +1,62 @@
|
|||
// @flow
|
||||
import React, { type ComponentType, Component } from 'react';
|
||||
import eres from 'eres';
|
||||
|
||||
import rpc from './api';
|
||||
|
||||
type Props = {};
|
||||
|
||||
type State = {
|
||||
type?: 'syncing' | 'ready' | 'error',
|
||||
progress: number,
|
||||
};
|
||||
|
||||
/* eslint-disable max-len */
|
||||
export const withSyncStatus = <PassedProps: {}>(
|
||||
WrappedComponent: ComponentType<PassedProps>,
|
||||
): ComponentType<$Diff<PassedProps, Props>> => class extends Component<PassedProps, State> {
|
||||
timer: ?IntervalID = null;
|
||||
|
||||
state = {
|
||||
type: 'syncing',
|
||||
progress: 0,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.timer = setInterval(() => {
|
||||
this.getBlockchainStatus();
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
}
|
||||
|
||||
getBlockchainStatus = async () => {
|
||||
const [blockchainErr, blockchaininfo] = await eres(
|
||||
rpc.getblockchaininfo(),
|
||||
);
|
||||
|
||||
const newProgress = blockchaininfo.verificationprogress * 100;
|
||||
|
||||
this.setState({
|
||||
progress: newProgress,
|
||||
...(newProgress > 99.99 ? {
|
||||
type: 'ready',
|
||||
} : {}),
|
||||
});
|
||||
|
||||
if (blockchainErr) {
|
||||
this.setState(() => ({ type: 'error' }));
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { type, progress} = this.state;
|
||||
|
||||
return <WrappedComponent {...this.props} {...this.state} type={type} progress={progress} />;
|
||||
}
|
||||
};
|
Loading…
Reference in New Issue