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('} - > - {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( - -
- ( -
-
, - ); + test('should render dropdown correctly', () => { + const { queryByTestId } = render( + +
+ ( +
+
, + ); - expect(container).toMatchSnapshot(); - }); + expect(queryByTestId('DropdownWrapper')).toBeInTheDocument(); }); + + test('should render dropdown button trigger correctly', () => { + const { queryByTestId } = render( + +
+ ( +
+
, + ); + + 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(); }); });