From 461f43eb7fb3adde77c5311d69e29184ce717586 Mon Sep 17 00:00:00 2001 From: eliabejr Date: Fri, 25 Jan 2019 17:44:01 -0300 Subject: [PATCH 01/14] feat(test-components): generate snapshots --- .../__snapshots__/Sidebar.test.js.snap | 50 ++++++- .../__snapshots__/button.test.js.snap | 11 ++ .../__snapshots__/clipboard.test.js.snap | 11 ++ .../__snapshots__/confirm-dialog.test.js.snap | 9 ++ .../__snapshots__/dropdown.test.js.snap | 15 ++ .../__snapshots__/input.test.js.snap | 34 +++++ .../__snapshots__/modal.test.js.snap | 11 ++ .../__snapshots__/qrcode.test.js.snap | 11 ++ .../transactions-daily.test.js.snap | 137 ++++++++++++++++++ .../__snapshots__/wallet-address.test.js.snap | 32 ++++ 10 files changed, 319 insertions(+), 2 deletions(-) create mode 100644 __tests__/components/__snapshots__/button.test.js.snap create mode 100644 __tests__/components/__snapshots__/clipboard.test.js.snap create mode 100644 __tests__/components/__snapshots__/confirm-dialog.test.js.snap create mode 100644 __tests__/components/__snapshots__/dropdown.test.js.snap create mode 100644 __tests__/components/__snapshots__/input.test.js.snap create mode 100644 __tests__/components/__snapshots__/modal.test.js.snap create mode 100644 __tests__/components/__snapshots__/qrcode.test.js.snap create mode 100644 __tests__/components/__snapshots__/transactions-daily.test.js.snap create mode 100644 __tests__/components/__snapshots__/wallet-address.test.js.snap diff --git a/__tests__/components/__snapshots__/Sidebar.test.js.snap b/__tests__/components/__snapshots__/Sidebar.test.js.snap index 16268ac..d944fb0 100644 --- a/__tests__/components/__snapshots__/Sidebar.test.js.snap +++ b/__tests__/components/__snapshots__/Sidebar.test.js.snap @@ -1,30 +1,76 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` render() should render correctly 1`] = ` +exports[` render() should render correctly 1`] = `
+ / Dashboard + /send Send + /receive Receive + /transactions + Transactions + + + /settings Settings + + /console + Console +
`; diff --git a/__tests__/components/__snapshots__/button.test.js.snap b/__tests__/components/__snapshots__/button.test.js.snap new file mode 100644 index 0000000..1691ef6 --- /dev/null +++ b/__tests__/components/__snapshots__/button.test.js.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` + +`; diff --git a/__tests__/components/__snapshots__/clipboard.test.js.snap b/__tests__/components/__snapshots__/clipboard.test.js.snap new file mode 100644 index 0000000..2f0dde4 --- /dev/null +++ b/__tests__/components/__snapshots__/clipboard.test.js.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` render() should render clipboard component correctly 1`] = ` +
+ +
+`; diff --git a/__tests__/components/__snapshots__/confirm-dialog.test.js.snap b/__tests__/components/__snapshots__/confirm-dialog.test.js.snap new file mode 100644 index 0000000..81a2b02 --- /dev/null +++ b/__tests__/components/__snapshots__/confirm-dialog.test.js.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` render() should render confirm dialog correctly 1`] = ` +
+ +
+`; diff --git a/__tests__/components/__snapshots__/dropdown.test.js.snap b/__tests__/components/__snapshots__/dropdown.test.js.snap new file mode 100644 index 0000000..a618be6 --- /dev/null +++ b/__tests__/components/__snapshots__/dropdown.test.js.snap @@ -0,0 +1,15 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` render() should render dropdown correctly 1`] = ` +
+
+ +
+
+`; diff --git a/__tests__/components/__snapshots__/input.test.js.snap b/__tests__/components/__snapshots__/input.test.js.snap new file mode 100644 index 0000000..75f90f5 --- /dev/null +++ b/__tests__/components/__snapshots__/input.test.js.snap @@ -0,0 +1,34 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` render() should render text input correctly 1`] = ` +
+
+ +
+
+`; + +exports[` render() should render textarea correctly 1`] = ` +
+
+ +
+
+`; diff --git a/__tests__/components/__snapshots__/modal.test.js.snap b/__tests__/components/__snapshots__/modal.test.js.snap new file mode 100644 index 0000000..9620f72 --- /dev/null +++ b/__tests__/components/__snapshots__/modal.test.js.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` render() should render modal correctly 1`] = ` +
+ +
+`; diff --git a/__tests__/components/__snapshots__/qrcode.test.js.snap b/__tests__/components/__snapshots__/qrcode.test.js.snap new file mode 100644 index 0000000..e5a5d38 --- /dev/null +++ b/__tests__/components/__snapshots__/qrcode.test.js.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` render() should render qrcode component correctly 1`] = ` +
+ +
+`; diff --git a/__tests__/components/__snapshots__/transactions-daily.test.js.snap b/__tests__/components/__snapshots__/transactions-daily.test.js.snap new file mode 100644 index 0000000..4c9200a --- /dev/null +++ b/__tests__/components/__snapshots__/transactions-daily.test.js.snap @@ -0,0 +1,137 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` render() should render user daily transactions 1`] = ` +
+
+

+ 2019-01-25T20:38:40.521Z +

+
+
+
+
+ Transaction Type Icon +
+

+ received +

+

+ 17:38 PM +

+
+
+

+ 12345678912345678912...9123456789 +

+
+
+

+ -ZEC 1.789 +

+

+ -USD $0 +

+
+
+
+
+
+
+ Transaction Type Icon +
+

+ sent +

+

+ 17:38 PM +

+
+
+

+ 12345678912345678912...9123456789 +

+
+
+

+ -ZEC 0.846 +

+

+ -USD $0 +

+
+
+
+
+
+`; diff --git a/__tests__/components/__snapshots__/wallet-address.test.js.snap b/__tests__/components/__snapshots__/wallet-address.test.js.snap new file mode 100644 index 0000000..fc8cc34 --- /dev/null +++ b/__tests__/components/__snapshots__/wallet-address.test.js.snap @@ -0,0 +1,32 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` render() should render wallet address component correctly 1`] = ` +
+
+
+
+ + +
+
+
+
+`; From ad34afc1236a0f6d09f312a5335aed9baeae51b6 Mon Sep 17 00:00:00 2001 From: eliabejr Date: Fri, 25 Jan 2019 17:44:54 -0300 Subject: [PATCH 02/14] feat(test-components): create test files for components --- __tests__/components/button.test.js | 28 +++++++++++ __tests__/components/clipboard.test.js | 25 ++++++++++ __tests__/components/confirm-dialog.test.js | 27 +++++++++++ __tests__/components/dropdown.test.js | 40 ++++++++++++++++ __tests__/components/input.test.js | 44 ++++++++++++++++++ __tests__/components/modal.test.js | 36 +++++++++++++++ __tests__/components/qrcode.test.js | 21 +++++++++ __tests__/components/sidebar.test.js | 16 +++++-- .../components/transactions-daily.test.js | 46 +++++++++++++++++++ __tests__/components/wallet-address.test.js | 29 ++++++++++++ 10 files changed, 307 insertions(+), 5 deletions(-) create mode 100644 __tests__/components/button.test.js create mode 100644 __tests__/components/clipboard.test.js create mode 100644 __tests__/components/confirm-dialog.test.js create mode 100644 __tests__/components/dropdown.test.js create mode 100644 __tests__/components/input.test.js create mode 100644 __tests__/components/modal.test.js create mode 100644 __tests__/components/qrcode.test.js create mode 100644 __tests__/components/transactions-daily.test.js create mode 100644 __tests__/components/wallet-address.test.js diff --git a/__tests__/components/button.test.js b/__tests__/components/button.test.js new file mode 100644 index 0000000..1eef549 --- /dev/null +++ b/__tests__/components/button.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 { Button } from '../../app/components/button'; +import appTheme from '../../app/theme'; + +afterEach(cleanup); + +describe('} + > + {toggle =>
Confirm content
} + , + ); + + expect(container).toMatchSnapshot(); + }); + }); +}); diff --git a/__tests__/components/dropdown.test.js b/__tests__/components/dropdown.test.js new file mode 100644 index 0000000..a6e655a --- /dev/null +++ b/__tests__/components/dropdown.test.js @@ -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('', () => { + describe('render()', () => { + test('should render dropdown correctly', () => { + const { container } = render( + +
+ ( +
+ , + ); + + expect(container).toMatchSnapshot(); + }); + }); +}); diff --git a/__tests__/components/input.test.js b/__tests__/components/input.test.js new file mode 100644 index 0000000..fb5ced4 --- /dev/null +++ b/__tests__/components/input.test.js @@ -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('', () => { + describe('render()', () => { + test('should render text input correctly', () => { + const { container } = render( + + + + ); + + expect(container).toMatchSnapshot(); + }); + + test('should render textarea correctly', () => { + const { container } = render( + + + + ); + + expect(container).toMatchSnapshot(); + }); + }); +}); diff --git a/__tests__/components/modal.test.js b/__tests__/components/modal.test.js new file mode 100644 index 0000000..0f5bfd5 --- /dev/null +++ b/__tests__/components/modal.test.js @@ -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('', () => { + describe('render()', () => { + test('should render modal correctly', () => { + const { container } = render( + ( + + )} + > + {toggleVisibility => ( +
+ Modal Content + +
+ )} + , + ); + + expect(container).toMatchSnapshot(); + }); + }); +}); diff --git a/__tests__/components/qrcode.test.js b/__tests__/components/qrcode.test.js new file mode 100644 index 0000000..59adc3d --- /dev/null +++ b/__tests__/components/qrcode.test.js @@ -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('', () => { + describe('render()', () => { + test('should render qrcode component correctly', () => { + const { container } = render( + , + ); + + expect(container).toMatchSnapshot(); + }); + }); +}); diff --git a/__tests__/components/sidebar.test.js b/__tests__/components/sidebar.test.js index 76975bd..602c093 100644 --- a/__tests__/components/sidebar.test.js +++ b/__tests__/components/sidebar.test.js @@ -1,20 +1,26 @@ // @flow import React from 'react'; -import { render } from 'react-testing-library'; +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'; -describe('', () => { +afterEach(cleanup); + +describe('', () => { describe('render()', () => { test('should render correctly', () => { // $FlowFixMe const { asFragment } = render( - - - , + + + + + , ); expect(asFragment()).toMatchSnapshot(); diff --git a/__tests__/components/transactions-daily.test.js b/__tests__/components/transactions-daily.test.js new file mode 100644 index 0000000..a999ded --- /dev/null +++ b/__tests__/components/transactions-daily.test.js @@ -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('', () => { + describe('render()', () => { + test('should render user daily transactions', () => { + const { container } = render( + + + , + ); + + expect(container).toMatchSnapshot(); + }); + }); +}); diff --git a/__tests__/components/wallet-address.test.js b/__tests__/components/wallet-address.test.js new file mode 100644 index 0000000..d311243 --- /dev/null +++ b/__tests__/components/wallet-address.test.js @@ -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('', () => { + describe('render()', () => { + test('should render wallet address component correctly', () => { + const { container } = render( + +
+ +
+ , + ); + + expect(container).toMatchSnapshot(); + }); + }); +}); From 978fe5c3c7275cd7733a878cf4a0669f9d71bf55 Mon Sep 17 00:00:00 2001 From: eliabejr Date: Fri, 25 Jan 2019 17:46:16 -0300 Subject: [PATCH 03/14] chore(test-components): add missing semicolon --- app/components/sidebar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/sidebar.js b/app/components/sidebar.js index a0fc896..96b33ea 100644 --- a/app/components/sidebar.js +++ b/app/components/sidebar.js @@ -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; From ae25a9a489741223037e029d6f8609714671eb53 Mon Sep 17 00:00:00 2001 From: eliabejr Date: Fri, 25 Jan 2019 17:47:13 -0300 Subject: [PATCH 04/14] fix(test-components): wallet summary tests --- __tests__/reducers/wallet-summary.test.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/__tests__/reducers/wallet-summary.test.js b/__tests__/reducers/wallet-summary.test.js index 7095f5e..2a88ff9 100644 --- a/__tests__/reducers/wallet-summary.test.js +++ b/__tests__/reducers/wallet-summary.test.js @@ -8,12 +8,14 @@ import walletSummaryReducer, { describe('WalletSummary Reducer', () => { test('should return the valid initial state', () => { const initialState = { + addresses: [], + transactions: [], total: 0, shielded: 0, transparent: 0, error: null, isLoading: false, - dollarValue: 0, + zecPrice: 0, }; const action = { type: 'UNKNOWN_ACTION', @@ -29,12 +31,14 @@ describe('WalletSummary Reducer', () => { payload: {}, }; const expectedState = { + addresses: [], + transactions: [], total: 0, shielded: 0, transparent: 0, error: null, isLoading: true, - dollarValue: 0, + zecPrice: 0, }; expect(walletSummaryReducer(undefined, action)).toEqual(expectedState); @@ -53,7 +57,9 @@ describe('WalletSummary Reducer', () => { ...action.payload, error: null, isLoading: false, - dollarValue: 0, + addresses: [], + transactions: [], + zecPrice: 0, }; expect(walletSummaryReducer(undefined, action)).toEqual(expectedState); @@ -72,7 +78,9 @@ describe('WalletSummary Reducer', () => { transparent: 0, error: action.payload.error, isLoading: false, - dollarValue: 0, + addresses: [], + transactions: [], + zecPrice: 0 }; expect(walletSummaryReducer(undefined, action)).toEqual(expectedState); From 2d512c8b0413c2730d0e88cd91a5845c34118618 Mon Sep 17 00:00:00 2001 From: eliabejr Date: Fri, 25 Jan 2019 17:47:52 -0300 Subject: [PATCH 05/14] chore(test-components): remove status pill docz story --- app/components/status-pill.mdx | 22 ---------------------- 1 file changed, 22 deletions(-) delete mode 100644 app/components/status-pill.mdx diff --git a/app/components/status-pill.mdx b/app/components/status-pill.mdx deleted file mode 100644 index d013575..0000000 --- a/app/components/status-pill.mdx +++ /dev/null @@ -1,22 +0,0 @@ ---- -name: StatusPill ---- - -import { Playground, PropsTable } from 'docz' - -import { StatusPill } from './status-pill.js' -import { DoczWrapper } from '../theme.js' - -# StatusPill - -## Properties - - - -## Basic Usage - - - - {() => } - - From 685113ef2e06504d89c3074ecacfba58ed536c20 Mon Sep 17 00:00:00 2001 From: eliabejr Date: Fri, 25 Jan 2019 17:48:42 -0300 Subject: [PATCH 06/14] feat(test-components): add asset resolver for jest --- package.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 32c8066..a093d0b 100644 --- a/package.json +++ b/package.json @@ -175,7 +175,10 @@ "setupTestFrameworkScriptFile": "/__tests__/setup/jest.js", "testPathIgnorePatterns": [ "/__tests__/setup/" - ] + ], + "moduleNameMapper": { + "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/__tests__/setup/assetTransformer.js" + } }, "resolutions": { "babel-core": "7.0.0-bridge.0" From e5f43dff4a6c361f47b81b1bd37840dff22dd467 Mon Sep 17 00:00:00 2001 From: eliabejr Date: Fri, 25 Jan 2019 17:49:01 -0300 Subject: [PATCH 07/14] feat(test-components): add asset resolver for jest --- __tests__/setup/assetTransformer.js | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 __tests__/setup/assetTransformer.js diff --git a/__tests__/setup/assetTransformer.js b/__tests__/setup/assetTransformer.js new file mode 100644 index 0000000..1f173b0 --- /dev/null +++ b/__tests__/setup/assetTransformer.js @@ -0,0 +1,7 @@ +const path = require('path'); + +module.exports = { + process(filename) { + return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';'; + }, +}; \ No newline at end of file From f9743f50a21d75c5ab7f2ca5e9e2a470126d6a45 Mon Sep 17 00:00:00 2001 From: eliabejr Date: Mon, 28 Jan 2019 15:11:13 -0300 Subject: [PATCH 08/14] feat(test-components): split visual from logic in status-pill --- app/components/header.js | 37 ++++++++++------- app/components/status-pill.js | 75 ++++++---------------------------- app/components/status-pill.mdx | 54 ++++++++++++++++++++++++ services/sync-status.js | 61 +++++++++++++++++++++++++++ 4 files changed, 150 insertions(+), 77 deletions(-) create mode 100644 app/components/status-pill.mdx create mode 100644 services/sync-status.js diff --git a/app/components/header.js b/app/components/header.js index 5c2a085..5e206b2 100644 --- a/app/components/header.js +++ b/app/components/header.js @@ -7,7 +7,9 @@ import { ZcashLogo } from './zcash-logo'; import { TextComponent } from './text'; import { Divider } from './divider'; import { RowComponent } from './row'; -import { StatusPill } from './status-pill'; +import StatusPill from './status-pill'; + +import withSyncStatus from '../../services/sync-status'; const Wrapper = styled.div` height: ${props => props.theme.headerHeight}; @@ -59,17 +61,22 @@ type Props = { title: string, }; -export const HeaderComponent = ({ title }: Props) => ( - - - - - - - - <StatusPill /> - </TitleRow> - <Divider opacity={0.1} /> - </TitleWrapper> - </Wrapper> -); +const Status = withSyncStatus(StatusPill); + +export const HeaderComponent = ({ title }: Props) => { + + return ( + <Wrapper> + <LogoWrapper> + <ZcashLogo /> + </LogoWrapper> + <TitleWrapper> + <TitleRow alignItems='center' justifyContent='space-around'> + <Title value={title} /> + <Status /> + </TitleRow> + <Divider opacity={0.1} /> + </TitleWrapper> + </Wrapper> + ) +}; diff --git a/app/components/status-pill.js b/app/components/status-pill.js index 1e85cd2..496ab43 100644 --- a/app/components/status-pill.js +++ b/app/components/status-pill.js @@ -1,12 +1,9 @@ // @flow import React, { Component } from 'react'; import styled, { keyframes } from 'styled-components'; -import eres from 'eres'; import { TextComponent } from './text'; -import rpc from '../../services/api'; - import readyIcon from '../assets/images/green_check.png'; import syncIcon from '../assets/images/sync_icon.png'; import errorIcon from '../assets/images/error_icon.png'; @@ -46,70 +43,24 @@ const StatusPillLabel = styled(TextComponent)` user-select: none; `; -type Props = {}; - type State = { - type: string, - icon: string, + type: 'syncing' | 'ready' | 'error', progress: number, - isSyncing: boolean, }; -export class StatusPill extends Component<Props, State> { - timer: ?IntervalID = null; +export const StatusPill = ({ type, progress }: State) => { - state = { - type: 'syncing', - icon: syncIcon, - progress: 0, - isSyncing: true, - }; + const isSyncing = type === 'syncing'; - componentDidMount() { - this.timer = setInterval(() => { - this.getBlockchainStatus(); - }, 2000); - } + const icon = type === 'error' ? errorIcon : (isSyncing ? syncIcon : readyIcon); + const showPercent = isSyncing ? `(${progress.toFixed(2)}%)` : ''; - componentWillUnmount() { - if (this.timer) { - clearInterval(this.timer); - this.timer = null; - } - } + return ( + <Wrapper> + <Icon src={icon} animated={isSyncing} /> + <StatusPillLabel value={`${type} ${showPercent}`} /> + </Wrapper> + ); +}; - getBlockchainStatus = async () => { - const [blockchainErr, blockchaininfo] = await eres( - rpc.getblockchaininfo(), - ); - - const newProgress = blockchaininfo.verificationprogress * 100; - - this.setState({ - progress: newProgress, - ...(newProgress > 99.99 ? { - type: 'ready', - icon: readyIcon, - isSyncing: false, - } : {}), - }); - - if (blockchainErr) { - this.setState(() => ({ type: 'error', icon: errorIcon })); - } - } - - render() { - const { - type, icon, progress, isSyncing, - } = this.state; - const showPercent = isSyncing ? `(${progress.toFixed(2)}%)` : ''; - - return ( - <Wrapper> - <Icon src={icon} animated={isSyncing} /> - <StatusPillLabel value={`${type} ${showPercent}`} /> - </Wrapper> - ); - } -} +export default StatusPill; \ No newline at end of file diff --git a/app/components/status-pill.mdx b/app/components/status-pill.mdx new file mode 100644 index 0000000..0a05a74 --- /dev/null +++ b/app/components/status-pill.mdx @@ -0,0 +1,54 @@ +--- +name: StatusPill +--- + +import { Playground, PropsTable } from 'docz' + +import { StatusPill } from './status-pill.js' +import { DoczWrapper } from '../theme.js' + +# StatusPill + +## Properties + +<PropsTable of={StatusPill} /> + +## Syching + +<Playground> + <DoczWrapper> + {() => + <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> \ No newline at end of file diff --git a/services/sync-status.js b/services/sync-status.js new file mode 100644 index 0000000..cfc00ca --- /dev/null +++ b/services/sync-status.js @@ -0,0 +1,61 @@ +// @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, +}; + +export default function syncStatus(WrappedComponent: ComponentType<PassedProps>) { + return class extends Component<Props, 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 type={type} progress={progress} />; + } + }; +} \ No newline at end of file From 542bacec6f2e5eaf8f15eb8e500f98a62f2cbd03 Mon Sep 17 00:00:00 2001 From: eliabejr <eliabejunior@hotmail.com.br> Date: Mon, 28 Jan 2019 15:13:29 -0300 Subject: [PATCH 09/14] feat(test-components): generate snapshots for components --- .../__snapshots__/status-pill.test.js.snap | 20 +++++++++++++ .../transactions-daily.test.js.snap | 22 +++++++------- __tests__/components/status-pill.test.js | 29 +++++++++++++++++++ 3 files changed, 60 insertions(+), 11 deletions(-) create mode 100644 __tests__/components/__snapshots__/status-pill.test.js.snap create mode 100644 __tests__/components/status-pill.test.js diff --git a/__tests__/components/__snapshots__/status-pill.test.js.snap b/__tests__/components/__snapshots__/status-pill.test.js.snap new file mode 100644 index 0000000..5c90257 --- /dev/null +++ b/__tests__/components/__snapshots__/status-pill.test.js.snap @@ -0,0 +1,20 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`<StatusPill /> render() should render visual component status correctly 1`] = ` +<DocumentFragment> + <div + class="sc-bwzfXH klEXgT" + > + <img + class="sc-htpNat geYqkR" + src="[object Object]" + /> + <p + class="sc-bxivhb gsACzh sc-bdVaJa fMeavL" + color="#FFF" + > + syncing (83.00%) + </p> + </div> +</DocumentFragment> +`; diff --git a/__tests__/components/__snapshots__/transactions-daily.test.js.snap b/__tests__/components/__snapshots__/transactions-daily.test.js.snap index 4c9200a..18b231c 100644 --- a/__tests__/components/__snapshots__/transactions-daily.test.js.snap +++ b/__tests__/components/__snapshots__/transactions-daily.test.js.snap @@ -9,7 +9,7 @@ exports[`<TransactionDailyComponent /> render() should render user daily transac class="sc-ckVGcZ kFpbuU sc-htpNat jxQpDz" color="#FFF" > - 2019-01-25T20:38:40.521Z + 2019-01-28T18:11:27.791Z </p> <div class="sc-dxgOiQ cLfqec" @@ -33,16 +33,16 @@ exports[`<TransactionDailyComponent /> render() should render user daily transac width="" > <p - class="sc-cSHVUG bHGbwE sc-htpNat dkQVQA" + class="sc-cSHVUG jLDVvD sc-htpNat dkQVQA" color="#FFF" > - received + receive </p> <p class="sc-chPdSV hltHrj sc-htpNat jxQpDz" color="#FFF" > - 17:38 PM + 15:11 PM </p> </div> </div> @@ -58,16 +58,16 @@ exports[`<TransactionDailyComponent /> render() should render user daily transac width="" > <p - class="sc-htpNat jAbxuE" - color="#FF6C6C" + class="sc-htpNat dztgbW" + color="#6AEAC0" > - -ZEC 1.789 + +ZEC 1.789 </p> <p class="sc-htpNat dhSLjI" color="#5d5d65" > - -USD $0 + +USD $2.406 </p> </div> </div> @@ -96,13 +96,13 @@ exports[`<TransactionDailyComponent /> render() should render user daily transac class="sc-cSHVUG bHGbwE sc-htpNat dkQVQA" color="#FFF" > - sent + send </p> <p class="sc-chPdSV hltHrj sc-htpNat jxQpDz" color="#FFF" > - 17:38 PM + 15:11 PM </p> </div> </div> @@ -127,7 +127,7 @@ exports[`<TransactionDailyComponent /> render() should render user daily transac class="sc-htpNat dhSLjI" color="#5d5d65" > - -USD $0 + -USD $1.138 </p> </div> </div> diff --git a/__tests__/components/status-pill.test.js b/__tests__/components/status-pill.test.js new file mode 100644 index 0000000..75351c1 --- /dev/null +++ b/__tests__/components/status-pill.test.js @@ -0,0 +1,29 @@ +// @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 { StatusPill } from '../../app/components/status-pill'; +import appTheme from '../../app/theme'; + +afterEach(cleanup); + +describe('<StatusPill />', () => { + describe('render()', () => { + test('should render visual component status correctly', () => { + // $FlowFixMe + const { asFragment } = render( + <ThemeProvider theme={appTheme}> + <MemoryRouter> + <StatusPill progress={83.} type='syncing' /> + </MemoryRouter> + </ThemeProvider>, + ); + + expect(asFragment()).toMatchSnapshot(); + }); + }); +}); From d86dfa09d01b11f8d31ea84b4c417251a62dad32 Mon Sep 17 00:00:00 2001 From: eliabejr <eliabejunior@hotmail.com.br> Date: Tue, 29 Jan 2019 10:44:05 -0300 Subject: [PATCH 10/14] fix(test-components): flow and eslint issues --- app/components/header.js | 35 +++++++++++------------- app/components/status-pill.js | 50 +++++++++++++++++++++++------------ services/sync-status.js | 25 +++++++++--------- 3 files changed, 62 insertions(+), 48 deletions(-) diff --git a/app/components/header.js b/app/components/header.js index 3f9f0ab..ade949e 100644 --- a/app/components/header.js +++ b/app/components/header.js @@ -7,9 +7,9 @@ import { ZcashLogo } from './zcash-logo'; import { TextComponent } from './text'; import { Divider } from './divider'; import { RowComponent } from './row'; -import StatusPill from './status-pill'; +import { StatusPill } from './status-pill'; -import withSyncStatus from '../../services/sync-status'; +import { withSyncStatus } from '../../services/sync-status'; const Wrapper = styled.div` height: ${props => props.theme.headerHeight}; @@ -63,20 +63,17 @@ type Props = { const Status = withSyncStatus(StatusPill); -export const HeaderComponent = ({ title }: Props) => { - - return ( - <Wrapper id='header'> - <LogoWrapper> - <ZcashLogo /> - </LogoWrapper> - <TitleWrapper> - <TitleRow alignItems='center' justifyContent='space-around'> - <Title value={title} /> - <Status /> - </TitleRow> - <Divider opacity={0.1} /> - </TitleWrapper> - </Wrapper> - ) -}; +export const HeaderComponent = ({ title }: Props) => ( + <Wrapper id='header'> + <LogoWrapper> + <ZcashLogo /> + </LogoWrapper> + <TitleWrapper> + <TitleRow alignItems='center' justifyContent='space-around'> + <Title value={title} /> + <Status type='syncing' progress={0} /> + </TitleRow> + <Divider opacity={0.1} /> + </TitleWrapper> + </Wrapper> +); diff --git a/app/components/status-pill.js b/app/components/status-pill.js index 882d5fb..8c93f91 100644 --- a/app/components/status-pill.js +++ b/app/components/status-pill.js @@ -1,5 +1,5 @@ // @flow -import React, { Component } from 'react'; +import React from 'react'; import styled, { keyframes } from 'styled-components'; import { TextComponent } from './text'; @@ -12,7 +12,6 @@ const rotate = keyframes` from { transform: rotate(0deg); } - to { transform: rotate(360deg); } @@ -43,24 +42,41 @@ const StatusPillLabel = styled(TextComponent)` user-select: none; `; -type State = { +type Props = { type: 'syncing' | 'ready' | 'error', progress: number, }; -export const StatusPill = ({ type, progress }: State) => { - - const isSyncing = type === 'syncing'; - - const icon = type === 'error' ? errorIcon : (isSyncing ? syncIcon : readyIcon); - const showPercent = isSyncing ? `(${progress.toFixed(2)}%)` : ''; - - return ( - <Wrapper> - <Icon src={icon} animated={isSyncing} /> - <StatusPillLabel value={`${type} ${showPercent}`} /> - </Wrapper> - ); +type State = { + withError: boolean, }; -export default StatusPill; +export class StatusPill extends React.PureComponent<Props, State> { + state = { + withError: false, + }; + + componentDidMount() { + const { type } = this.props; + if (type === 'error') { + this.setState(() => ({ withError: false })); + } + } + + render() { + const { type, progress } = this.props; + const { withError } = this.state; + + const isSyncing = type === 'syncing'; + + const icon = isSyncing ? syncIcon : readyIcon; + const showPercent = isSyncing ? `(${progress.toFixed(2)}%)` : ''; + + return ( + <Wrapper> + <Icon src={withError ? errorIcon : icon} animated={isSyncing} /> + <StatusPillLabel value={`${type} ${showPercent}`} /> + </Wrapper> + ); + } +} diff --git a/services/sync-status.js b/services/sync-status.js index cfc00ca..930c5cb 100644 --- a/services/sync-status.js +++ b/services/sync-status.js @@ -7,12 +7,14 @@ import rpc from './api'; type Props = {}; type State = { - type: 'syncing' | 'ready' | 'error', + type?: 'syncing' | 'ready' | 'error', progress: number, }; -export default function syncStatus(WrappedComponent: ComponentType<PassedProps>) { - return class extends Component<Props, State> { +/* eslint-disable max-len */ +export const withSyncStatus = <PassedProps: {}>( + WrappedComponent: ComponentType<PassedProps>, +): ComponentType<$Diff<PassedProps, Props>> => class extends Component<PassedProps, State> { timer: ?IntervalID = null; state = { @@ -25,28 +27,28 @@ export default function syncStatus(WrappedComponent: ComponentType<PassedProps>) 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' })); } @@ -54,8 +56,7 @@ export default function syncStatus(WrappedComponent: ComponentType<PassedProps>) render() { const { type, progress} = this.state; - - return <WrappedComponent type={type} progress={progress} />; + + return <WrappedComponent {...this.props} {...this.state} type={type} progress={progress} />; } - }; -} \ No newline at end of file + }; \ No newline at end of file From 4a515c3ad4f7dad6d2f5fc4a0de0699607b3b6ab Mon Sep 17 00:00:00 2001 From: eliabejr <eliabejunior@hotmail.com.br> Date: Thu, 31 Jan 2019 13:32:52 -0300 Subject: [PATCH 11/14] feat(test-components): generate new snapshots --- .../__snapshots__/button.test.js.snap | 11 -- .../__snapshots__/clipboard.test.js.snap | 11 -- .../__snapshots__/column.test.js.snap | 20 +++ .../__snapshots__/confirm-dialog.test.js.snap | 8 +- .../__snapshots__/divider.test.js.snap | 10 ++ .../__snapshots__/dropdown.test.js.snap | 15 -- .../empty-transactions.test.js.snap | 17 +++ .../__snapshots__/header.test.js.snap | 20 +++ .../__snapshots__/input-label.test.js.snap | 12 ++ .../__snapshots__/input.test.js.snap | 34 ----- .../__snapshots__/layout.test.js.snap | 20 +++ .../__snapshots__/modal.test.js.snap | 11 -- .../__snapshots__/qrcode.test.js.snap | 11 -- .../components/__snapshots__/row.test.js.snap | 19 +++ .../__snapshots__/select.test.js.snap | 29 ++++ .../__snapshots__/sidebar.test.js.snap | 71 +++++++++ .../__snapshots__/status-pill.test.js.snap | 20 --- .../__snapshots__/text.test.js.snap | 12 ++ .../transactions-daily.test.js.snap | 137 ------------------ .../__snapshots__/wallet-address.test.js.snap | 32 ---- 20 files changed, 231 insertions(+), 289 deletions(-) delete mode 100644 __tests__/components/__snapshots__/button.test.js.snap delete mode 100644 __tests__/components/__snapshots__/clipboard.test.js.snap create mode 100644 __tests__/components/__snapshots__/column.test.js.snap create mode 100644 __tests__/components/__snapshots__/divider.test.js.snap delete mode 100644 __tests__/components/__snapshots__/dropdown.test.js.snap create mode 100644 __tests__/components/__snapshots__/empty-transactions.test.js.snap create mode 100644 __tests__/components/__snapshots__/header.test.js.snap create mode 100644 __tests__/components/__snapshots__/input-label.test.js.snap delete mode 100644 __tests__/components/__snapshots__/input.test.js.snap create mode 100644 __tests__/components/__snapshots__/layout.test.js.snap delete mode 100644 __tests__/components/__snapshots__/modal.test.js.snap delete mode 100644 __tests__/components/__snapshots__/qrcode.test.js.snap create mode 100644 __tests__/components/__snapshots__/row.test.js.snap create mode 100644 __tests__/components/__snapshots__/select.test.js.snap create mode 100644 __tests__/components/__snapshots__/sidebar.test.js.snap delete mode 100644 __tests__/components/__snapshots__/status-pill.test.js.snap create mode 100644 __tests__/components/__snapshots__/text.test.js.snap delete mode 100644 __tests__/components/__snapshots__/transactions-daily.test.js.snap delete mode 100644 __tests__/components/__snapshots__/wallet-address.test.js.snap diff --git a/__tests__/components/__snapshots__/button.test.js.snap b/__tests__/components/__snapshots__/button.test.js.snap deleted file mode 100644 index 1691ef6..0000000 --- a/__tests__/components/__snapshots__/button.test.js.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`<Button /> render() should render button correctly 1`] = ` -<div> - <button - class="sc-bwzfXH jhigKU" - > - Click me! - </button> -</div> -`; diff --git a/__tests__/components/__snapshots__/clipboard.test.js.snap b/__tests__/components/__snapshots__/clipboard.test.js.snap deleted file mode 100644 index 2f0dde4..0000000 --- a/__tests__/components/__snapshots__/clipboard.test.js.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`<Clipboard /> render() should render clipboard component correctly 1`] = ` -<div> - <button - class="sc-bwzfXH jhigKU" - > - Copy! - </button> -</div> -`; diff --git a/__tests__/components/__snapshots__/column.test.js.snap b/__tests__/components/__snapshots__/column.test.js.snap new file mode 100644 index 0000000..0d3a634 --- /dev/null +++ b/__tests__/components/__snapshots__/column.test.js.snap @@ -0,0 +1,20 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`<ColumnComponent /> should render correctly 1`] = ` +<div> + <div + class="sc-bdVaJa kRTFg" + width="" + > + <h3> + ZEC + </h3> + <h3> + React + </h3> + <h3> + Wallet + </h3> + </div> +</div> +`; diff --git a/__tests__/components/__snapshots__/confirm-dialog.test.js.snap b/__tests__/components/__snapshots__/confirm-dialog.test.js.snap index 81a2b02..f668d22 100644 --- a/__tests__/components/__snapshots__/confirm-dialog.test.js.snap +++ b/__tests__/components/__snapshots__/confirm-dialog.test.js.snap @@ -1,9 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`<ConfirmDialogComponent /> render() should render confirm dialog correctly 1`] = ` -<div> - <button> - Open! - </button> -</div> -`; +exports[`<ConfirmDialogComponent /> should render confirm dialog correctly 1`] = `null`; diff --git a/__tests__/components/__snapshots__/divider.test.js.snap b/__tests__/components/__snapshots__/divider.test.js.snap new file mode 100644 index 0000000..837b115 --- /dev/null +++ b/__tests__/components/__snapshots__/divider.test.js.snap @@ -0,0 +1,10 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`<Divider /> should render correctly 1`] = ` +<div> + <div + class="sc-bdVaJa eTBnxX" + opacity="0.3" + /> +</div> +`; diff --git a/__tests__/components/__snapshots__/dropdown.test.js.snap b/__tests__/components/__snapshots__/dropdown.test.js.snap deleted file mode 100644 index a618be6..0000000 --- a/__tests__/components/__snapshots__/dropdown.test.js.snap +++ /dev/null @@ -1,15 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`<DropdownComponent /> render() should render dropdown correctly 1`] = ` -<div> - <div - style="height: 500px;" - > - <button - class="sc-gzVnrw ksBRVA" - > - Show Dropdown - </button> - </div> -</div> -`; diff --git a/__tests__/components/__snapshots__/empty-transactions.test.js.snap b/__tests__/components/__snapshots__/empty-transactions.test.js.snap new file mode 100644 index 0000000..989ce50 --- /dev/null +++ b/__tests__/components/__snapshots__/empty-transactions.test.js.snap @@ -0,0 +1,17 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`<EmptyTransactions /> should render correctly 1`] = ` +<div> + <div + class="sc-bwzfXH gTiHvG" + data-testid="NoTransactions" + > + <p + class="sc-bdVaJa fMeavL" + color="#FFF" + > + No transactions! + </p> + </div> +</div> +`; diff --git a/__tests__/components/__snapshots__/header.test.js.snap b/__tests__/components/__snapshots__/header.test.js.snap new file mode 100644 index 0000000..99852db --- /dev/null +++ b/__tests__/components/__snapshots__/header.test.js.snap @@ -0,0 +1,20 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`<Divider /> should render correctly 1`] = ` +<div> + <div + class="sc-bdVaJa kRTFg" + width="" + > + <h3> + ZEC + </h3> + <h3> + React + </h3> + <h3> + Wallet + </h3> + </div> +</div> +`; diff --git a/__tests__/components/__snapshots__/input-label.test.js.snap b/__tests__/components/__snapshots__/input-label.test.js.snap new file mode 100644 index 0000000..82cfbac --- /dev/null +++ b/__tests__/components/__snapshots__/input-label.test.js.snap @@ -0,0 +1,12 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`<InputLabelComponent /> should render correctly 1`] = ` +<div> + <p + class="sc-bwzfXH dvbGtP sc-bdVaJa fMeavL" + color="#FFF" + > + From + </p> +</div> +`; diff --git a/__tests__/components/__snapshots__/input.test.js.snap b/__tests__/components/__snapshots__/input.test.js.snap deleted file mode 100644 index 75f90f5..0000000 --- a/__tests__/components/__snapshots__/input.test.js.snap +++ /dev/null @@ -1,34 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`<InputComponent /> render() should render text input correctly 1`] = ` -<div> - <div - class="sc-bdVaJa EXKLM" - > - <input - class="sc-htpNat cOoEZT" - rows="4" - step="1" - type="text" - value="Hello World!" - /> - </div> -</div> -`; - -exports[`<InputComponent /> render() should render textarea correctly 1`] = ` -<div> - <div - class="sc-bdVaJa EXKLM" - > - <textarea - class="sc-bxivhb klegai" - rows="10" - step="1" - type="text" - > - I am Zcash Electron Wallet - </textarea> - </div> -</div> -`; diff --git a/__tests__/components/__snapshots__/layout.test.js.snap b/__tests__/components/__snapshots__/layout.test.js.snap new file mode 100644 index 0000000..f81f182 --- /dev/null +++ b/__tests__/components/__snapshots__/layout.test.js.snap @@ -0,0 +1,20 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`<LayoutComponent /> should render correctly 1`] = ` +<div> + <div + class="sc-bdVaJa bnGqDF" + id="layout" + > + <h3> + ZEC + </h3> + <h3> + React + </h3> + <h3> + Wallet + </h3> + </div> +</div> +`; diff --git a/__tests__/components/__snapshots__/modal.test.js.snap b/__tests__/components/__snapshots__/modal.test.js.snap deleted file mode 100644 index 9620f72..0000000 --- a/__tests__/components/__snapshots__/modal.test.js.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`<ModalComponent /> render() should render modal correctly 1`] = ` -<div> - <button - type="button" - > - Open Modal - </button> -</div> -`; diff --git a/__tests__/components/__snapshots__/qrcode.test.js.snap b/__tests__/components/__snapshots__/qrcode.test.js.snap deleted file mode 100644 index e5a5d38..0000000 --- a/__tests__/components/__snapshots__/qrcode.test.js.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`<QRCode /> render() should render qrcode component correctly 1`] = ` -<div> - <canvas - height="128" - style="height: 128px; width: 128px;" - width="128" - /> -</div> -`; diff --git a/__tests__/components/__snapshots__/row.test.js.snap b/__tests__/components/__snapshots__/row.test.js.snap new file mode 100644 index 0000000..ed1fda9 --- /dev/null +++ b/__tests__/components/__snapshots__/row.test.js.snap @@ -0,0 +1,19 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`<RowComponent /> should render correctly 1`] = ` +<div> + <div + class="sc-bdVaJa lgVsKh" + > + <h3> + ZEC + </h3> + <h3> + React + </h3> + <h3> + Wallet + </h3> + </div> +</div> +`; diff --git a/__tests__/components/__snapshots__/select.test.js.snap b/__tests__/components/__snapshots__/select.test.js.snap new file mode 100644 index 0000000..19bc70d --- /dev/null +++ b/__tests__/components/__snapshots__/select.test.js.snap @@ -0,0 +1,29 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`<SelectComponent /> should generate snapshot correctly 1`] = ` +<div> + <div + class="sc-bwzfXH laILya" + data-testid="Select" + id="select-component" + > + <div + class="sc-htpNat iHFWUy" + > + Select a address + </div> + <div + class="sc-bxivhb fUvjwK" + > + <button + class="sc-ifAKCX JHqFU" + > + <img + class="sc-EHOje fcnlsf" + src="[object Object]" + /> + </button> + </div> + </div> +</div> +`; diff --git a/__tests__/components/__snapshots__/sidebar.test.js.snap b/__tests__/components/__snapshots__/sidebar.test.js.snap new file mode 100644 index 0000000..bfb0b58 --- /dev/null +++ b/__tests__/components/__snapshots__/sidebar.test.js.snap @@ -0,0 +1,71 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`<Sidebar /> render() should render correctly 1`] = ` +<DocumentFragment> + <div + class="sc-bdVaJa igFjJZ" + id="sidebar" + > + <a + class="sc-bwzfXH kBVjXq" + > + <img + alt="/" + class="sc-htpNat kwYHDD" + src="[object Object]" + /> + Dashboard + </a> + <a + class="sc-bwzfXH cYKDCP" + > + <img + alt="/send" + class="sc-htpNat eZYlLl" + src="[object Object]" + /> + Send + </a> + <a + class="sc-bwzfXH cYKDCP" + > + <img + alt="/receive" + class="sc-htpNat eZYlLl" + src="[object Object]" + /> + Receive + </a> + <a + class="sc-bwzfXH cYKDCP" + > + <img + alt="/transactions" + class="sc-htpNat eZYlLl" + src="[object Object]" + /> + Transactions + </a> + <a + class="sc-bwzfXH cYKDCP" + > + <img + alt="/settings" + class="sc-htpNat eZYlLl" + src="[object Object]" + /> + Settings + </a> + <a + class="sc-bwzfXH cYKDCP" + > + <img + alt="/console" + class="sc-htpNat eZYlLl" + src="[object Object]" + /> + Console + </a> + </div> +</DocumentFragment> +`; diff --git a/__tests__/components/__snapshots__/status-pill.test.js.snap b/__tests__/components/__snapshots__/status-pill.test.js.snap deleted file mode 100644 index 5c90257..0000000 --- a/__tests__/components/__snapshots__/status-pill.test.js.snap +++ /dev/null @@ -1,20 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`<StatusPill /> render() should render visual component status correctly 1`] = ` -<DocumentFragment> - <div - class="sc-bwzfXH klEXgT" - > - <img - class="sc-htpNat geYqkR" - src="[object Object]" - /> - <p - class="sc-bxivhb gsACzh sc-bdVaJa fMeavL" - color="#FFF" - > - syncing (83.00%) - </p> - </div> -</DocumentFragment> -`; diff --git a/__tests__/components/__snapshots__/text.test.js.snap b/__tests__/components/__snapshots__/text.test.js.snap new file mode 100644 index 0000000..e12d42f --- /dev/null +++ b/__tests__/components/__snapshots__/text.test.js.snap @@ -0,0 +1,12 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`<TextComponent /> should render correctly 1`] = ` +<div> + <p + class="sc-bdVaJa fMeavL" + color="#FFF" + > + ZEC React Wallet + </p> +</div> +`; diff --git a/__tests__/components/__snapshots__/transactions-daily.test.js.snap b/__tests__/components/__snapshots__/transactions-daily.test.js.snap deleted file mode 100644 index 18b231c..0000000 --- a/__tests__/components/__snapshots__/transactions-daily.test.js.snap +++ /dev/null @@ -1,137 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`<TransactionDailyComponent /> render() should render user daily transactions 1`] = ` -<div> - <div - class="sc-kpOJdX inMzwo" - > - <p - class="sc-ckVGcZ kFpbuU sc-htpNat jxQpDz" - color="#FFF" - > - 2019-01-28T18:11:27.791Z - </p> - <div - class="sc-dxgOiQ cLfqec" - > - <div - class="sc-fjdhpX kUigkI sc-bdVaJa bWRfen" - > - <div - class="sc-bdVaJa eFCRqo" - > - <div - class="sc-bdVaJa eFCRqo" - > - <img - alt="Transaction Type Icon" - class="sc-jzJRlG dHAJgd" - src="[object Object]" - /> - <div - class="sc-kgoBCf fmsvla sc-bwzfXH iiePXZ" - width="" - > - <p - class="sc-cSHVUG jLDVvD sc-htpNat dkQVQA" - color="#FFF" - > - receive - </p> - <p - class="sc-chPdSV hltHrj sc-htpNat jxQpDz" - color="#FFF" - > - 15:11 PM - </p> - </div> - </div> - <p - class="sc-kAzzGY dMXFTy sc-htpNat jxQpDz" - color="#FFF" - > - 12345678912345678912...9123456789 - </p> - </div> - <div - class="sc-bwzfXH jExuEg" - width="" - > - <p - class="sc-htpNat dztgbW" - color="#6AEAC0" - > - +ZEC 1.789 - </p> - <p - class="sc-htpNat dhSLjI" - color="#5d5d65" - > - +USD $2.406 - </p> - </div> - </div> - <div - class="sc-kGXeez jZgEID" - /> - <div - class="sc-fjdhpX kUigkI sc-bdVaJa bWRfen" - > - <div - class="sc-bdVaJa eFCRqo" - > - <div - class="sc-bdVaJa eFCRqo" - > - <img - alt="Transaction Type Icon" - class="sc-jzJRlG dHAJgd" - src="[object Object]" - /> - <div - class="sc-kgoBCf fmsvla sc-bwzfXH iiePXZ" - width="" - > - <p - class="sc-cSHVUG bHGbwE sc-htpNat dkQVQA" - color="#FFF" - > - send - </p> - <p - class="sc-chPdSV hltHrj sc-htpNat jxQpDz" - color="#FFF" - > - 15:11 PM - </p> - </div> - </div> - <p - class="sc-kAzzGY dMXFTy sc-htpNat jxQpDz" - color="#FFF" - > - 12345678912345678912...9123456789 - </p> - </div> - <div - class="sc-bwzfXH jExuEg" - width="" - > - <p - class="sc-htpNat jAbxuE" - color="#FF6C6C" - > - -ZEC 0.846 - </p> - <p - class="sc-htpNat dhSLjI" - color="#5d5d65" - > - -USD $1.138 - </p> - </div> - </div> - </div> - </div> -</div> -`; diff --git a/__tests__/components/__snapshots__/wallet-address.test.js.snap b/__tests__/components/__snapshots__/wallet-address.test.js.snap deleted file mode 100644 index fc8cc34..0000000 --- a/__tests__/components/__snapshots__/wallet-address.test.js.snap +++ /dev/null @@ -1,32 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`<WalletAddress /> render() should render wallet address component correctly 1`] = ` -<div> - <div - style="width: 700px;" - > - <div - class="sc-bdVaJa eMHGRJ" - width="100%" - > - <div - class="sc-EHOje gdDRhj" - > - <input - class="sc-bZQynM kSTZfH" - value="t14oHp2v54vfmdgQ3v3S...8JKHTNi2a1" - /> - <button - class="sc-gzVnrw epOqxZ sc-bxivhb fPicDU" - > - <img - class="sc-ifAKCX hBMlcu" - src="[object Object]" - /> - Show full address and QR Code - </button> - </div> - </div> - </div> -</div> -`; From 8e308acbf2341bd55843d1226d95fa5d5ec42f3f Mon Sep 17 00:00:00 2001 From: eliabejr <eliabejunior@hotmail.com.br> Date: Thu, 31 Jan 2019 13:38:42 -0300 Subject: [PATCH 12/14] feat(test-components): update components with testid attribute --- app/components/button.js | 4 ++-- app/components/clipboard.js | 14 ++++++++------ app/components/dropdown.js | 2 +- app/components/empty-transactions.js | 2 +- app/components/input.js | 3 ++- app/components/loading-screen.js | 2 +- app/components/modal.js | 1 + app/components/qrcode.js | 2 +- app/components/select.js | 1 + app/components/status-pill.js | 2 +- app/components/transaction-daily.js | 2 +- app/components/wallet-address.js | 2 +- 12 files changed, 21 insertions(+), 16 deletions(-) diff --git a/app/components/button.js b/app/components/button.js index f3291cf..5a44bf7 100644 --- a/app/components/button.js +++ b/app/components/button.js @@ -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> diff --git a/app/components/clipboard.js b/app/components/clipboard.js index bda14ca..7f42e61 100644 --- a/app/components/clipboard.js +++ b/app/components/clipboard.js @@ -39,12 +39,14 @@ export class Clipboard extends PureComponent<Props, State> { const { copied } = this.state; return ( - <Button - label={copied ? 'Copied!' : 'Copy!'} - className={className} - onClick={this.handleClick} - disabled={copied} - /> + <div data-testid='Clipboard'> + <Button + label={copied ? 'Copied!' : 'Copy!'} + className={className} + onClick={this.handleClick} + disabled={copied} + /> + </div> ); } } diff --git a/app/components/dropdown.js b/app/components/dropdown.js index 3bd880c..2eca400 100644 --- a/app/components/dropdown.js +++ b/app/components/dropdown.js @@ -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> ))} diff --git a/app/components/empty-transactions.js b/app/components/empty-transactions.js index c0247f0..6d5ce99 100644 --- a/app/components/empty-transactions.js +++ b/app/components/empty-transactions.js @@ -13,7 +13,7 @@ const Wrapper = styled.div` `; export const EmptyTransactionsComponent = () => ( - <Wrapper> + <Wrapper data-testid='NoTransactions'> <TextComponent value='No transactions!' /> </Wrapper> ); diff --git a/app/components/input.js b/app/components/input.js index 82f4ea0..497a3b0 100644 --- a/app/components/input.js +++ b/app/components/input.js @@ -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} /> ), }; diff --git a/app/components/loading-screen.js b/app/components/loading-screen.js index 4f760ab..21ae929 100644 --- a/app/components/loading-screen.js +++ b/app/components/loading-screen.js @@ -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} diff --git a/app/components/modal.js b/app/components/modal.js index 5cec0da..0a6b3bb 100644 --- a/app/components/modal.js +++ b/app/components/modal.js @@ -99,6 +99,7 @@ export class ModalComponent extends PureComponent<Props, State> { ? createPortal( <ModalWrapper id='modal-portal-wrapper' + data-testid='Modal' onClick={(event) => { if ( closeOnBackdropClick diff --git a/app/components/qrcode.js b/app/components/qrcode.js index 862d572..6775a37 100644 --- a/app/components/qrcode.js +++ b/app/components/qrcode.js @@ -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 = { diff --git a/app/components/select.js b/app/components/select.js index e9e3d0e..1e656b3 100644 --- a/app/components/select.js +++ b/app/components/select.js @@ -152,6 +152,7 @@ export class SelectComponent extends PureComponent<Props, State> { return ( <SelectWrapper + data-testid='Select' id='select-component' isOpen={isOpen} placement={placement} diff --git a/app/components/status-pill.js b/app/components/status-pill.js index 8c93f91..1897bdb 100644 --- a/app/components/status-pill.js +++ b/app/components/status-pill.js @@ -73,7 +73,7 @@ export class StatusPill extends React.PureComponent<Props, State> { const showPercent = isSyncing ? `(${progress.toFixed(2)}%)` : ''; return ( - <Wrapper> + <Wrapper data-testid='StatusPill'> <Icon src={withError ? errorIcon : icon} animated={isSyncing} /> <StatusPillLabel value={`${type} ${showPercent}`} /> </Wrapper> diff --git a/app/components/transaction-daily.js b/app/components/transaction-daily.js index 4dd7d4e..fcd29a1 100644 --- a/app/components/transaction-daily.js +++ b/app/components/transaction-daily.js @@ -39,7 +39,7 @@ export const TransactionDailyComponent = ({ transactions, zecPrice, }: Props) => ( - <Wrapper> + <Wrapper data-testid='TransactionsDaily'> <Day value={transactionsDate} /> <TransactionsWrapper> {transactions.map( diff --git a/app/components/wallet-address.js b/app/components/wallet-address.js index f2ba388..f2e2f04 100644 --- a/app/components/wallet-address.js +++ b/app/components/wallet-address.js @@ -109,7 +109,7 @@ export class WalletAddress extends PureComponent<Props, State> { return ( <ColumnComponent width='100%'> - <AddressWrapper> + <AddressWrapper data-testid='Address'> <Input value={isVisible ? address : truncateAddress(address)} onChange={() => {}} From 954c53b8bb8f0345c72c411b92eae9e6c17997ae Mon Sep 17 00:00:00 2001 From: eliabejr <eliabejunior@hotmail.com.br> Date: Thu, 31 Jan 2019 13:41:32 -0300 Subject: [PATCH 13/14] feat(test-components): increase tests coverage on components --- __tests__/components/button.test.js | 38 ++++++---- __tests__/components/clipboard.test.js | 27 ++++--- __tests__/components/column.test.js | 28 ++++++++ __tests__/components/confirm-dialog.test.js | 38 ++++++---- __tests__/components/divider.test.js | 24 +++++++ __tests__/components/dropdown.test.js | 70 +++++++++++++------ .../components/empty-transactions.test.js | 33 +++++++++ __tests__/components/input-label.test.js | 33 +++++++++ __tests__/components/input.test.js | 50 +++++++------ __tests__/components/loading-screen.test.js | 23 ++++++ __tests__/components/modal.test.js | 39 +++++------ __tests__/components/qrcode.test.js | 12 ++-- __tests__/components/row.test.js | 27 +++++++ __tests__/components/select.test.js | 67 ++++++++++++++++++ __tests__/components/sidebar.test.js | 29 -------- __tests__/components/status-pill.test.js | 53 ++++++++++---- __tests__/components/text.test.js | 33 +++++++++ __tests__/components/transaction-item.test.js | 31 ++++++++ __tests__/components/wallet-address.test.js | 26 ++++--- 19 files changed, 514 insertions(+), 167 deletions(-) create mode 100644 __tests__/components/column.test.js create mode 100644 __tests__/components/divider.test.js create mode 100644 __tests__/components/empty-transactions.test.js create mode 100644 __tests__/components/input-label.test.js create mode 100644 __tests__/components/loading-screen.test.js create mode 100644 __tests__/components/row.test.js create mode 100644 __tests__/components/select.test.js delete mode 100644 __tests__/components/sidebar.test.js create mode 100644 __tests__/components/text.test.js create mode 100644 __tests__/components/transaction-item.test.js 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('<Button />', () => { - describe('render()', () => { - test('should render button correctly', () => { - const { container } = render( - <ThemeProvider theme={appTheme}> - <Button - label='Click me!' - onClick={() => alert('Clicked')} - /> - </ThemeProvider> - ); + test('should render primary button correctly', () => { + const { queryByTestId } = render( + <ThemeProvider theme={appTheme}> + <Button + label='Click me!' + onClick={() => alert('Clicked')} + variant='primary' + /> + </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(); + }); + }); 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('<Clipboard />', () => { - describe('render()', () => { - test('should render clipboard component correctly', () => { - const { container } = render( - <ThemeProvider theme={appTheme}> - <Clipboard text='Click me!' /> - </ThemeProvider>, - ); + test('should render clipboard component correctly', () => { + const { queryByTestId } = render( + <ThemeProvider theme={appTheme}> + <Clipboard text='Click me!' /> + </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(); + }); + }); 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('<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(); + }); +}); 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('<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>, - ); + test('should render confirm dialog correctly', () => { + const { queryByTestId } = render( + <ConfirmDialogComponent + title="Confirm example" + onConfirm={() => alert('Confirm')} + renderTrigger={toggle => <button onClick={toggle}> Open! </button>} + > + {toggle => <div>Confirm content</div>} + </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(); }); }); 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('<Divider />', () => { + test('should render correctly', () => { + // $FlowFixMe + const { container } = render( + <ThemeProvider theme={appTheme}> + <Divider opacity={0.3} /> + </ThemeProvider>, + ); + + 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('<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>, - ); + 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(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(); + }); + }); 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('<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(); + }); +}); 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('<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(); + }); +}); 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('<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> - ); + test('should render text input correctly', () => { + const { queryByTestId } = render( + <ThemeProvider theme={appTheme}> + <InputComponent + inputType='input' + value='Hello World!' + onChange={console.log} + /> + </ThemeProvider> + ); - expect(container).toMatchSnapshot(); - }); + expect(queryByTestId('Input')).toBeInTheDocument(); + }); - 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> - ); + 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(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('<LoadingScreen />', () => { + test('should render status pill correctly', () => { + const { queryByTestId } = render( + <ThemeProvider theme={appTheme}> + <LoadingScreen progress={83.} /> + </ThemeProvider>, + ); + + 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('<ModalComponent />', () => { - describe('render()', () => { - test('should render modal correctly', () => { - const { container } = render( - <ModalComponent - renderTrigger={toggleVisibility => ( + 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}> - Open Modal + Close Modal </button> - )} - > - {toggleVisibility => ( - <div style={{ padding: '50px', backgroundColor: 'white' }}> - Modal Content - <button type="button" onClick={toggleVisibility}> - Close Modal - </button> - </div> - )} - </ModalComponent>, - ); + </div> + )} + </ModalComponent>, + ); - 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('<QRCode />', () => { - describe('render()', () => { - test('should render qrcode component correctly', () => { - const { container } = render( - <QRCode value='https://z.cash.foundation' />, - ); + test('should render qrcode component correctly', () => { + const { queryByTestId } = render( + <QRCode value='https://z.cash.foundation' />, + ); - 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('<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(); + }); +}); 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('<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(); + }); +}); 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('<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(); - }); - }); -}); 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('<StatusPill />', () => { - describe('render()', () => { - test('should render visual component status correctly', () => { - // $FlowFixMe - const { asFragment } = render( - <ThemeProvider theme={appTheme}> - <MemoryRouter> - <StatusPill progress={83.} type='syncing' /> - </MemoryRouter> - </ThemeProvider>, - ); + test('should render status pill correctly', () => { + const { queryByTestId } = render( + <ThemeProvider theme={appTheme}> + <StatusPill progress={83.} type='syncing' /> + </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(); }); }); 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('<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(); + }); +}); 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('<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(); + }); + +}); 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('<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>, - ); + test('should render wallet address component correctly', () => { + const { queryByTestId } = render( + <ThemeProvider theme={appTheme}> + <div style={{ width: '700px' }}> + <WalletAddress + address='t14oHp2v54vfmdgQ3v3SNuQga8JKHTNi2a1' + /> + </div> + </ThemeProvider>, + ); - expect(container).toMatchSnapshot(); - }); + expect(queryByTestId('Address')).toBeInTheDocument(); }); }); From 4a21ceaa26edc6de6a21f26a2ff6e82f35b613a1 Mon Sep 17 00:00:00 2001 From: eliabejr <eliabejunior@hotmail.com.br> Date: Fri, 1 Feb 2019 10:19:28 -0300 Subject: [PATCH 14/14] feat(test-components): remove snapshots --- .../__snapshots__/column.test.js.snap | 20 ------ .../__snapshots__/confirm-dialog.test.js.snap | 3 - .../__snapshots__/divider.test.js.snap | 10 --- .../empty-transactions.test.js.snap | 17 ----- .../__snapshots__/header.test.js.snap | 20 ------ .../__snapshots__/input-label.test.js.snap | 12 ---- .../__snapshots__/layout.test.js.snap | 20 ------ .../components/__snapshots__/row.test.js.snap | 19 ----- .../__snapshots__/select.test.js.snap | 29 -------- .../__snapshots__/sidebar.test.js.snap | 71 ------------------- .../__snapshots__/text.test.js.snap | 12 ---- __tests__/components/column.test.js | 2 +- __tests__/components/confirm-dialog.test.js | 4 +- __tests__/components/divider.test.js | 5 +- .../components/empty-transactions.test.js | 4 +- __tests__/components/input-label.test.js | 4 +- __tests__/components/row.test.js | 2 +- __tests__/components/select.test.js | 2 +- __tests__/components/text.test.js | 2 +- public/flow-coverage-badge.svg | 2 +- 20 files changed, 16 insertions(+), 244 deletions(-) delete mode 100644 __tests__/components/__snapshots__/column.test.js.snap delete mode 100644 __tests__/components/__snapshots__/confirm-dialog.test.js.snap delete mode 100644 __tests__/components/__snapshots__/divider.test.js.snap delete mode 100644 __tests__/components/__snapshots__/empty-transactions.test.js.snap delete mode 100644 __tests__/components/__snapshots__/header.test.js.snap delete mode 100644 __tests__/components/__snapshots__/input-label.test.js.snap delete mode 100644 __tests__/components/__snapshots__/layout.test.js.snap delete mode 100644 __tests__/components/__snapshots__/row.test.js.snap delete mode 100644 __tests__/components/__snapshots__/select.test.js.snap delete mode 100644 __tests__/components/__snapshots__/sidebar.test.js.snap delete mode 100644 __tests__/components/__snapshots__/text.test.js.snap diff --git a/__tests__/components/__snapshots__/column.test.js.snap b/__tests__/components/__snapshots__/column.test.js.snap deleted file mode 100644 index 0d3a634..0000000 --- a/__tests__/components/__snapshots__/column.test.js.snap +++ /dev/null @@ -1,20 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`<ColumnComponent /> should render correctly 1`] = ` -<div> - <div - class="sc-bdVaJa kRTFg" - width="" - > - <h3> - ZEC - </h3> - <h3> - React - </h3> - <h3> - Wallet - </h3> - </div> -</div> -`; diff --git a/__tests__/components/__snapshots__/confirm-dialog.test.js.snap b/__tests__/components/__snapshots__/confirm-dialog.test.js.snap deleted file mode 100644 index f668d22..0000000 --- a/__tests__/components/__snapshots__/confirm-dialog.test.js.snap +++ /dev/null @@ -1,3 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`<ConfirmDialogComponent /> should render confirm dialog correctly 1`] = `null`; diff --git a/__tests__/components/__snapshots__/divider.test.js.snap b/__tests__/components/__snapshots__/divider.test.js.snap deleted file mode 100644 index 837b115..0000000 --- a/__tests__/components/__snapshots__/divider.test.js.snap +++ /dev/null @@ -1,10 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`<Divider /> should render correctly 1`] = ` -<div> - <div - class="sc-bdVaJa eTBnxX" - opacity="0.3" - /> -</div> -`; diff --git a/__tests__/components/__snapshots__/empty-transactions.test.js.snap b/__tests__/components/__snapshots__/empty-transactions.test.js.snap deleted file mode 100644 index 989ce50..0000000 --- a/__tests__/components/__snapshots__/empty-transactions.test.js.snap +++ /dev/null @@ -1,17 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`<EmptyTransactions /> should render correctly 1`] = ` -<div> - <div - class="sc-bwzfXH gTiHvG" - data-testid="NoTransactions" - > - <p - class="sc-bdVaJa fMeavL" - color="#FFF" - > - No transactions! - </p> - </div> -</div> -`; diff --git a/__tests__/components/__snapshots__/header.test.js.snap b/__tests__/components/__snapshots__/header.test.js.snap deleted file mode 100644 index 99852db..0000000 --- a/__tests__/components/__snapshots__/header.test.js.snap +++ /dev/null @@ -1,20 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`<Divider /> should render correctly 1`] = ` -<div> - <div - class="sc-bdVaJa kRTFg" - width="" - > - <h3> - ZEC - </h3> - <h3> - React - </h3> - <h3> - Wallet - </h3> - </div> -</div> -`; diff --git a/__tests__/components/__snapshots__/input-label.test.js.snap b/__tests__/components/__snapshots__/input-label.test.js.snap deleted file mode 100644 index 82cfbac..0000000 --- a/__tests__/components/__snapshots__/input-label.test.js.snap +++ /dev/null @@ -1,12 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`<InputLabelComponent /> should render correctly 1`] = ` -<div> - <p - class="sc-bwzfXH dvbGtP sc-bdVaJa fMeavL" - color="#FFF" - > - From - </p> -</div> -`; diff --git a/__tests__/components/__snapshots__/layout.test.js.snap b/__tests__/components/__snapshots__/layout.test.js.snap deleted file mode 100644 index f81f182..0000000 --- a/__tests__/components/__snapshots__/layout.test.js.snap +++ /dev/null @@ -1,20 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`<LayoutComponent /> should render correctly 1`] = ` -<div> - <div - class="sc-bdVaJa bnGqDF" - id="layout" - > - <h3> - ZEC - </h3> - <h3> - React - </h3> - <h3> - Wallet - </h3> - </div> -</div> -`; diff --git a/__tests__/components/__snapshots__/row.test.js.snap b/__tests__/components/__snapshots__/row.test.js.snap deleted file mode 100644 index ed1fda9..0000000 --- a/__tests__/components/__snapshots__/row.test.js.snap +++ /dev/null @@ -1,19 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`<RowComponent /> should render correctly 1`] = ` -<div> - <div - class="sc-bdVaJa lgVsKh" - > - <h3> - ZEC - </h3> - <h3> - React - </h3> - <h3> - Wallet - </h3> - </div> -</div> -`; diff --git a/__tests__/components/__snapshots__/select.test.js.snap b/__tests__/components/__snapshots__/select.test.js.snap deleted file mode 100644 index 19bc70d..0000000 --- a/__tests__/components/__snapshots__/select.test.js.snap +++ /dev/null @@ -1,29 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`<SelectComponent /> should generate snapshot correctly 1`] = ` -<div> - <div - class="sc-bwzfXH laILya" - data-testid="Select" - id="select-component" - > - <div - class="sc-htpNat iHFWUy" - > - Select a address - </div> - <div - class="sc-bxivhb fUvjwK" - > - <button - class="sc-ifAKCX JHqFU" - > - <img - class="sc-EHOje fcnlsf" - src="[object Object]" - /> - </button> - </div> - </div> -</div> -`; diff --git a/__tests__/components/__snapshots__/sidebar.test.js.snap b/__tests__/components/__snapshots__/sidebar.test.js.snap deleted file mode 100644 index bfb0b58..0000000 --- a/__tests__/components/__snapshots__/sidebar.test.js.snap +++ /dev/null @@ -1,71 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`<Sidebar /> render() should render correctly 1`] = ` -<DocumentFragment> - <div - class="sc-bdVaJa igFjJZ" - id="sidebar" - > - <a - class="sc-bwzfXH kBVjXq" - > - <img - alt="/" - class="sc-htpNat kwYHDD" - src="[object Object]" - /> - Dashboard - </a> - <a - class="sc-bwzfXH cYKDCP" - > - <img - alt="/send" - class="sc-htpNat eZYlLl" - src="[object Object]" - /> - Send - </a> - <a - class="sc-bwzfXH cYKDCP" - > - <img - alt="/receive" - class="sc-htpNat eZYlLl" - src="[object Object]" - /> - Receive - </a> - <a - class="sc-bwzfXH cYKDCP" - > - <img - alt="/transactions" - class="sc-htpNat eZYlLl" - src="[object Object]" - /> - Transactions - </a> - <a - class="sc-bwzfXH cYKDCP" - > - <img - alt="/settings" - class="sc-htpNat eZYlLl" - src="[object Object]" - /> - Settings - </a> - <a - class="sc-bwzfXH cYKDCP" - > - <img - alt="/console" - class="sc-htpNat eZYlLl" - src="[object Object]" - /> - Console - </a> - </div> -</DocumentFragment> -`; diff --git a/__tests__/components/__snapshots__/text.test.js.snap b/__tests__/components/__snapshots__/text.test.js.snap deleted file mode 100644 index e12d42f..0000000 --- a/__tests__/components/__snapshots__/text.test.js.snap +++ /dev/null @@ -1,12 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`<TextComponent /> should render correctly 1`] = ` -<div> - <p - class="sc-bdVaJa fMeavL" - color="#FFF" - > - ZEC React Wallet - </p> -</div> -`; diff --git a/__tests__/components/column.test.js b/__tests__/components/column.test.js index 4e8f2b2..5cdb0ef 100644 --- a/__tests__/components/column.test.js +++ b/__tests__/components/column.test.js @@ -23,6 +23,6 @@ describe('<ColumnComponent />', () => { </ThemeProvider>, ); - expect(container).toMatchSnapshot(); + expect(container).toBeVisible(); }); }); diff --git a/__tests__/components/confirm-dialog.test.js b/__tests__/components/confirm-dialog.test.js index 04bced1..04f189f 100644 --- a/__tests__/components/confirm-dialog.test.js +++ b/__tests__/components/confirm-dialog.test.js @@ -10,7 +10,7 @@ afterEach(cleanup); describe('<ConfirmDialogComponent />', () => { test('should render confirm dialog correctly', () => { - const { queryByTestId } = render( + const { container } = render( <ConfirmDialogComponent title="Confirm example" onConfirm={() => alert('Confirm')} @@ -20,7 +20,7 @@ describe('<ConfirmDialogComponent />', () => { </ConfirmDialogComponent>, ); - expect(queryByTestId('ConfirmDialog')).toMatchSnapshot(); + expect(container).toBeVisible(); }); test('should render confirm dialog trigger', () => { diff --git a/__tests__/components/divider.test.js b/__tests__/components/divider.test.js index e617c9f..fe2c1c4 100644 --- a/__tests__/components/divider.test.js +++ b/__tests__/components/divider.test.js @@ -19,6 +19,9 @@ describe('<Divider />', () => { </ThemeProvider>, ); - expect(container).toMatchSnapshot(); + const divider = container.querySelector('div'); + + expect(divider).toBeVisible(); + expect(divider).toHaveStyle('opacity: 0.3'); }); }); diff --git a/__tests__/components/empty-transactions.test.js b/__tests__/components/empty-transactions.test.js index 0d0dbd4..95e3fd4 100644 --- a/__tests__/components/empty-transactions.test.js +++ b/__tests__/components/empty-transactions.test.js @@ -12,13 +12,13 @@ afterEach(cleanup); describe('<EmptyTransactions />', () => { test('should render correctly', () => { - const { container } = render( + const { queryByTestId } = render( <ThemeProvider theme={appTheme}> <EmptyTransactionsComponent /> </ThemeProvider>, ); - expect(container).toMatchSnapshot(); + expect(queryByTestId('NoTransactions')).toBeInTheDocument(); }); test('should show label correctly', () => { diff --git a/__tests__/components/input-label.test.js b/__tests__/components/input-label.test.js index b675f00..881b890 100644 --- a/__tests__/components/input-label.test.js +++ b/__tests__/components/input-label.test.js @@ -18,7 +18,9 @@ describe('<InputLabelComponent />', () => { </ThemeProvider>, ); - expect(container).toMatchSnapshot(); + const label = container.querySelector('p'); + + expect(label).toBeVisible(); }); test('should render input label string', () => { diff --git a/__tests__/components/row.test.js b/__tests__/components/row.test.js index 65a68d7..1b08c33 100644 --- a/__tests__/components/row.test.js +++ b/__tests__/components/row.test.js @@ -22,6 +22,6 @@ describe('<RowComponent />', () => { </ThemeProvider>, ); - expect(container).toMatchSnapshot(); + expect(container).toBeVisible(); }); }); diff --git a/__tests__/components/select.test.js b/__tests__/components/select.test.js index b27a7dc..844ff25 100644 --- a/__tests__/components/select.test.js +++ b/__tests__/components/select.test.js @@ -26,7 +26,7 @@ describe('<SelectComponent />', () => { </ThemeProvider>, ); - expect(container).toMatchSnapshot(); + expect(container).toBeVisible(); }); test('should render correctly', () => { diff --git a/__tests__/components/text.test.js b/__tests__/components/text.test.js index 5d56886..5580a34 100644 --- a/__tests__/components/text.test.js +++ b/__tests__/components/text.test.js @@ -18,7 +18,7 @@ describe('<TextComponent />', () => { </ThemeProvider>, ); - expect(container).toMatchSnapshot(); + expect(container).toBeVisible(); }); test('should render input label string', () => { diff --git a/public/flow-coverage-badge.svg b/public/flow-coverage-badge.svg index d61c9ff..665ba93 100644 --- a/public/flow-coverage-badge.svg +++ b/public/flow-coverage-badge.svg @@ -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">81%</text><text x="107" y="14">81%</text></g></svg> \ No newline at end of file +<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> \ No newline at end of file