diff --git a/__tests__/components/button.test.js b/__tests__/components/button.test.js
index 1eef549..638d909 100644
--- a/__tests__/components/button.test.js
+++ b/__tests__/components/button.test.js
@@ -11,18 +11,32 @@ import appTheme from '../../app/theme';
afterEach(cleanup);
describe('', () => {
- describe('render()', () => {
- test('should render button correctly', () => {
- const { container } = render(
-
-
- );
+ test('should render primary button correctly', () => {
+ const { queryByTestId } = render(
+
+
+ );
- expect(container).toMatchSnapshot();
- });
+ expect(queryByTestId('PrimaryButton')).toBeInTheDocument();
});
+
+ test('should render secondary button correctly', () => {
+ const { queryByTestId } = render(
+
+
+ );
+
+ expect(queryByTestId('SecondaryButton')).toBeInTheDocument();
+ });
+
});
diff --git a/__tests__/components/clipboard.test.js b/__tests__/components/clipboard.test.js
index 0adf843..5645f60 100644
--- a/__tests__/components/clipboard.test.js
+++ b/__tests__/components/clipboard.test.js
@@ -11,15 +11,24 @@ import appTheme from '../../app/theme';
afterEach(cleanup);
describe('', () => {
- describe('render()', () => {
- test('should render clipboard component correctly', () => {
- const { container } = render(
-
-
- ,
- );
+ test('should render clipboard component correctly', () => {
+ const { queryByTestId } = render(
+
+
+ ,
+ );
- expect(container).toMatchSnapshot();
- });
+ expect(queryByTestId('Clipboard')).toBeInTheDocument();
});
+
+ test('should render clipboard button correctly', () => {
+ const { queryByTestId } = render(
+
+
+ ,
+ );
+
+ expect(queryByTestId('PrimaryButton')).toBeInTheDocument();
+ });
+
});
diff --git a/__tests__/components/column.test.js b/__tests__/components/column.test.js
new file mode 100644
index 0000000..4e8f2b2
--- /dev/null
+++ b/__tests__/components/column.test.js
@@ -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('', () => {
+ test('should render correctly', () => {
+ // $FlowFixMe
+ const { container } = render(
+
+
+ ZEC
+ React
+ Wallet
+
+ ,
+ );
+
+ expect(container).toMatchSnapshot();
+ });
+});
diff --git a/__tests__/components/confirm-dialog.test.js b/__tests__/components/confirm-dialog.test.js
index d46d49a..04bced1 100644
--- a/__tests__/components/confirm-dialog.test.js
+++ b/__tests__/components/confirm-dialog.test.js
@@ -9,19 +9,31 @@ import { ConfirmDialogComponent } from '../../app/components/confirm-dialog';
afterEach(cleanup);
describe('', () => {
- describe('render()', () => {
- test('should render confirm dialog correctly', () => {
- const { container } = render(
- alert('Confirm')}
- renderTrigger={toggle => }
- >
- {toggle => Confirm content
}
- ,
- );
+ test('should render confirm dialog correctly', () => {
+ const { queryByTestId } = render(
+ alert('Confirm')}
+ renderTrigger={toggle => }
+ >
+ {toggle => Confirm content
}
+ ,
+ );
- expect(container).toMatchSnapshot();
- });
+ expect(queryByTestId('ConfirmDialog')).toMatchSnapshot();
+ });
+
+ test('should render confirm dialog trigger', () => {
+ const { queryByTestId } = render(
+ alert('Confirm')}
+ renderTrigger={toggle => }
+ >
+ {toggle => Confirm content
}
+ ,
+ );
+
+ expect(queryByTestId('ConfirmDialogTrigger')).toBeInTheDocument();
});
});
diff --git a/__tests__/components/divider.test.js b/__tests__/components/divider.test.js
new file mode 100644
index 0000000..e617c9f
--- /dev/null
+++ b/__tests__/components/divider.test.js
@@ -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('', () => {
+ test('should render correctly', () => {
+ // $FlowFixMe
+ const { container } = render(
+
+
+ ,
+ );
+
+ expect(container).toMatchSnapshot();
+ });
+});
diff --git a/__tests__/components/dropdown.test.js b/__tests__/components/dropdown.test.js
index a6e655a..8bdea6a 100644
--- a/__tests__/components/dropdown.test.js
+++ b/__tests__/components/dropdown.test.js
@@ -12,29 +12,53 @@ import appTheme from '../../app/theme';
afterEach(cleanup);
describe('', () => {
- describe('render()', () => {
- test('should render dropdown correctly', () => {
- const { container } = render(
-
-
- (
-
- )}
- options={[
- { label: 'asbh1yeasbdh23848asdasd', onClick: console.log },
- { label: 'urtyruhjr374hbfdjdhuh', onClick: console.log },
- ]}
- />
-
- ,
- );
+ test('should render dropdown correctly', () => {
+ const { queryByTestId } = render(
+
+
+ (
+
+ )}
+ options={[
+ { label: 'asbh1yeasbdh23848asdasd', onClick: console.log },
+ { label: 'urtyruhjr374hbfdjdhuh', onClick: console.log },
+ ]}
+ />
+
+ ,
+ );
- expect(container).toMatchSnapshot();
- });
+ expect(queryByTestId('DropdownWrapper')).toBeInTheDocument();
});
+
+ test('should render dropdown button trigger correctly', () => {
+ const { queryByTestId } = render(
+
+
+ (
+
+ )}
+ options={[
+ { label: 'asbh1yeasbdh23848asdasd', onClick: console.log },
+ { label: 'urtyruhjr374hbfdjdhuh', onClick: console.log },
+ ]}
+ />
+
+ ,
+ );
+
+ expect(queryByTestId('PrimaryButton')).toBeInTheDocument();
+ });
+
});
diff --git a/__tests__/components/empty-transactions.test.js b/__tests__/components/empty-transactions.test.js
new file mode 100644
index 0000000..0d0dbd4
--- /dev/null
+++ b/__tests__/components/empty-transactions.test.js
@@ -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('', () => {
+ test('should render correctly', () => {
+ const { container } = render(
+
+
+ ,
+ );
+
+ expect(container).toMatchSnapshot();
+ });
+
+ test('should show label correctly', () => {
+ const { container } = render(
+
+
+ ,
+ );
+
+ expect(queryByText(container, /transactions/i)).toBeInTheDocument();
+ });
+});
diff --git a/__tests__/components/input-label.test.js b/__tests__/components/input-label.test.js
new file mode 100644
index 0000000..b675f00
--- /dev/null
+++ b/__tests__/components/input-label.test.js
@@ -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('', () => {
+ test('should render correctly', () => {
+ const { container } = render(
+
+
+ ,
+ );
+
+ expect(container).toMatchSnapshot();
+ });
+
+ test('should render input label string', () => {
+ const { container } = render(
+
+
+ ,
+ );
+
+ expect(queryByText(container, /From/i)).toBeInTheDocument();
+ });
+});
diff --git a/__tests__/components/input.test.js b/__tests__/components/input.test.js
index fb5ced4..01970a7 100644
--- a/__tests__/components/input.test.js
+++ b/__tests__/components/input.test.js
@@ -11,34 +11,32 @@ import appTheme from '../../app/theme';
afterEach(cleanup);
describe('', () => {
- describe('render()', () => {
- test('should render text input correctly', () => {
- const { container } = render(
-
-
-
- );
+ test('should render text input correctly', () => {
+ const { queryByTestId } = render(
+
+
+
+ );
- expect(container).toMatchSnapshot();
- });
+ expect(queryByTestId('Input')).toBeInTheDocument();
+ });
- test('should render textarea correctly', () => {
- const { container } = render(
-
-
-
- );
+ test('should render textarea correctly', () => {
+ const { queryByTestId } = render(
+
+
+
+ );
- expect(container).toMatchSnapshot();
- });
+ expect(queryByTestId('Textarea')).toBeInTheDocument();
});
});
diff --git a/__tests__/components/loading-screen.test.js b/__tests__/components/loading-screen.test.js
new file mode 100644
index 0000000..15debb1
--- /dev/null
+++ b/__tests__/components/loading-screen.test.js
@@ -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('', () => {
+ test('should render status pill correctly', () => {
+ const { queryByTestId } = render(
+
+
+ ,
+ );
+
+ expect(queryByTestId('LoadingScreen')).toBeInTheDocument();
+ });
+});
diff --git a/__tests__/components/modal.test.js b/__tests__/components/modal.test.js
index 0f5bfd5..f77b053 100644
--- a/__tests__/components/modal.test.js
+++ b/__tests__/components/modal.test.js
@@ -9,28 +9,27 @@ import { ModalComponent } from '../../app/components/modal';
afterEach(cleanup);
describe('', () => {
- describe('render()', () => {
- test('should render modal correctly', () => {
- const { container } = render(
- (
+ test('should render modal trigger correctly', () => {
+ const { queryByTestId } = render(
+ (
+
+ )}
+ >
+ {toggleVisibility => (
+
+ Modal Content
- )}
- >
- {toggleVisibility => (
-
- Modal Content
-
-
- )}
- ,
- );
+
+ )}
+ ,
+ );
- expect(container).toMatchSnapshot();
- });
+ expect(queryByTestId('ModalTrigger')).toBeInTheDocument();
});
+
});
diff --git a/__tests__/components/qrcode.test.js b/__tests__/components/qrcode.test.js
index 59adc3d..7960b31 100644
--- a/__tests__/components/qrcode.test.js
+++ b/__tests__/components/qrcode.test.js
@@ -9,13 +9,11 @@ import { QRCode } from '../../app/components/qrcode';
afterEach(cleanup);
describe('', () => {
- describe('render()', () => {
- test('should render qrcode component correctly', () => {
- const { container } = render(
- ,
- );
+ test('should render qrcode component correctly', () => {
+ const { queryByTestId } = render(
+ ,
+ );
- expect(container).toMatchSnapshot();
- });
+ expect(queryByTestId('QRCode')).toBeInTheDocument();
});
});
diff --git a/__tests__/components/row.test.js b/__tests__/components/row.test.js
new file mode 100644
index 0000000..65a68d7
--- /dev/null
+++ b/__tests__/components/row.test.js
@@ -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('', () => {
+ test('should render correctly', () => {
+ const { container } = render(
+
+
+ ZEC
+ React
+ Wallet
+
+ ,
+ );
+
+ expect(container).toMatchSnapshot();
+ });
+});
diff --git a/__tests__/components/select.test.js b/__tests__/components/select.test.js
new file mode 100644
index 0000000..b27a7dc
--- /dev/null
+++ b/__tests__/components/select.test.js
@@ -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('', () => {
+ test('should generate snapshot correctly', () => {
+ const { container } = render(
+
+
+ ,
+ );
+
+ expect(container).toMatchSnapshot();
+ });
+
+ test('should render correctly', () => {
+ const { queryByTestId } = render(
+
+
+ ,
+ );
+
+ expect(queryByTestId('Select')).toBeInTheDocument();
+ });
+
+ test('should render select trigger string', () => {
+ const { container } = render(
+
+
+ ,
+ );
+
+ expect(queryByText(container, /Select/i)).toBeInTheDocument();
+ });
+});
diff --git a/__tests__/components/sidebar.test.js b/__tests__/components/sidebar.test.js
deleted file mode 100644
index 602c093..0000000
--- a/__tests__/components/sidebar.test.js
+++ /dev/null
@@ -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('', () => {
- describe('render()', () => {
- test('should render correctly', () => {
- // $FlowFixMe
- const { asFragment } = render(
-
-
-
-
- ,
- );
-
- expect(asFragment()).toMatchSnapshot();
- });
- });
-});
diff --git a/__tests__/components/status-pill.test.js b/__tests__/components/status-pill.test.js
index 75351c1..4de74b5 100644
--- a/__tests__/components/status-pill.test.js
+++ b/__tests__/components/status-pill.test.js
@@ -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('', () => {
- describe('render()', () => {
- test('should render visual component status correctly', () => {
- // $FlowFixMe
- const { asFragment } = render(
-
-
-
-
- ,
- );
+ test('should render status pill correctly', () => {
+ const { queryByTestId } = render(
+
+
+ ,
+ );
- expect(asFragment()).toMatchSnapshot();
- });
+ expect(queryByTestId('StatusPill')).toBeInTheDocument();
+ });
+
+ test('should show percentage on status pill syncing', () => {
+ const { container } = render(
+
+
+ ,
+ );
+
+ expect(queryByText(container, /%/i)).toBeInTheDocument();
+ });
+
+ test('should hide percentage on status pill', () => {
+ const { container } = render(
+
+
+ ,
+ );
+
+ expect(queryByText(container, /%/i)).not.toBeInTheDocument();
+ });
+
+ test('should show error string and hide percentage on status pill', () => {
+ const { container } = render(
+
+
+ ,
+ );
+
+ expect(queryByText(container, /%/i)).not.toBeInTheDocument();
+ expect(queryByText(container, /error/i)).toBeInTheDocument();
});
});
diff --git a/__tests__/components/text.test.js b/__tests__/components/text.test.js
new file mode 100644
index 0000000..5d56886
--- /dev/null
+++ b/__tests__/components/text.test.js
@@ -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('', () => {
+ test('should render correctly', () => {
+ const { container } = render(
+
+
+ ,
+ );
+
+ expect(container).toMatchSnapshot();
+ });
+
+ test('should render input label string', () => {
+ const { container } = render(
+
+
+ ,
+ );
+
+ expect(queryByText(container, /Test/i)).toBeInTheDocument();
+ });
+});
diff --git a/__tests__/components/transaction-item.test.js b/__tests__/components/transaction-item.test.js
new file mode 100644
index 0000000..e75fd4a
--- /dev/null
+++ b/__tests__/components/transaction-item.test.js
@@ -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('', () => {
+ test('should render a transaction item correctly', () => {
+ const { container } = render(
+
+
+
+ );
+
+ expect(container).toMatchSnapshot();
+ });
+
+});
diff --git a/__tests__/components/wallet-address.test.js b/__tests__/components/wallet-address.test.js
index d311243..f3cc150 100644
--- a/__tests__/components/wallet-address.test.js
+++ b/__tests__/components/wallet-address.test.js
@@ -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('', () => {
- describe('render()', () => {
- test('should render wallet address component correctly', () => {
- const { container } = render(
-
-
-
-
- ,
- );
+ test('should render wallet address component correctly', () => {
+ const { queryByTestId } = render(
+
+
+
+
+ ,
+ );
- expect(container).toMatchSnapshot();
- });
+ expect(queryByTestId('Address')).toBeInTheDocument();
});
});