feat(test-components): increase tests coverage on components

__tests__/components/button.test.js

@@ -11,18 +11,32 @@ import appTheme from '../../app/theme';
 afterEach(cleanup);
 
 describe('<Button />', () => {
-  describe('render()', () => {
+  test('should render primary button correctly', () => {
-    test('should render button correctly', () => {
+    const { queryByTestId } = render(
-      const { container } = render(
+      <ThemeProvider theme={appTheme}>
-        <ThemeProvider theme={appTheme}>
+        <Button
-          <Button
+          label='Click me!'
-            label='Click me!'
+          onClick={() => alert('Clicked')}
-            onClick={() => alert('Clicked')}
+          variant='primary' 
-          />
+        />
-        </ThemeProvider>
+      </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();
+  });
+
 });

__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', () => {
-    test('should render clipboard component correctly', () => {
+    const { queryByTestId } = render(
-      const { container } = render(
+      <ThemeProvider theme={appTheme}>
-        <ThemeProvider theme={appTheme}>
+        <Clipboard text='Click me!' />
-          <Clipboard text='Click me!' />
+      </ThemeProvider>,
-        </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();
+  });
+
 });

__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();
+  });
+});

__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', () => {
-    test('should render confirm dialog correctly', () => {
+    const { queryByTestId } = render(
-      const { container } = render(
+      <ConfirmDialogComponent
-        <ConfirmDialogComponent
+        title="Confirm example"
-          title="Confirm example"
+        onConfirm={() => alert('Confirm')}
-          onConfirm={() => alert('Confirm')}
+        renderTrigger={toggle => <button onClick={toggle}> Open! </button>}
-          renderTrigger={toggle => <button onClick={toggle}> Open! </button>}
+      >
-        >
+        {toggle => <div>Confirm content</div>}
-          {toggle => <div>Confirm content</div>}
+      </ConfirmDialogComponent>,
-        </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();
   });
 });

__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();
+  });
+});

__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', () => {
-    test('should render dropdown correctly', () => {
+    const { queryByTestId } = render(
-      const { container } = render(
+      <ThemeProvider theme={appTheme}>
-        <ThemeProvider theme={appTheme}>
+        <div style={{ height: '500px' }} data-testid='DropdownWrapper'>
-          <div style={{ height: '500px' }}>
+          <DropdownComponent
-            <DropdownComponent
+            label='Addresses'
-              label='Addresses'
+            renderTrigger={toggleVisibility => (
-              renderTrigger={toggleVisibility => (
+              <Button
-                <Button
+                label='Show Dropdown'
-                  label='Show Dropdown'
+                onClick={toggleVisibility}
-                  onClick={toggleVisibility}
+              />
-                />
+            )}
-              )}
+            options={[
-              options={[
+              { label: 'asbh1yeasbdh23848asdasd', onClick: console.log },
-                { label: 'asbh1yeasbdh23848asdasd', onClick: console.log },
+              { label: 'urtyruhjr374hbfdjdhuh', onClick: console.log },
-                { label: 'urtyruhjr374hbfdjdhuh', onClick: console.log },
+            ]}
-              ]}
+          />
-            />
+        </div>
-          </div>
+      </ThemeProvider>,
-        </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();
+  });
+
 });

__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();
+  });
+});

__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();
+  });
+});

__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', () => {
-    test('should render text input correctly', () => {
+    const { queryByTestId } = render(
-      const { container } = render(
+      <ThemeProvider theme={appTheme}>
-        <ThemeProvider theme={appTheme}>
+        <InputComponent
-          <InputComponent
+          inputType='input'
-            inputType='input'
+          value='Hello World!'
-            value='Hello World!'
+          onChange={console.log}
-            onChange={console.log}
+        />
-          />
+      </ThemeProvider>
-        </ThemeProvider>
+    );
-      );
 
-      expect(container).toMatchSnapshot();
+    expect(queryByTestId('Input')).toBeInTheDocument();
-    });
+  });
 
-    test('should render textarea correctly', () => {
+  test('should render textarea correctly', () => {
-      const { container } = render(
+    const { queryByTestId } = render(
-        <ThemeProvider theme={appTheme}>
+      <ThemeProvider theme={appTheme}>
-          <InputComponent
+        <InputComponent
-            inputType='textarea'
+          inputType='textarea'
-            value='I am Zcash Electron Wallet'
+          value='I am Zcash Electron Wallet'
-            onChange={console.log}
+          onChange={console.log}
-            rows={10}
+          rows={10}
-          />
+        />
-        </ThemeProvider>
+      </ThemeProvider>
-      );
+    );
 
-      expect(container).toMatchSnapshot();
+    expect(queryByTestId('Textarea')).toBeInTheDocument();
-    });
   });
 });

__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();
+  });
+});

__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 trigger correctly', () => {
-    test('should render modal correctly', () => {
+    const { queryByTestId } = render(
-      const { container } = render(
+      <ModalComponent
-        <ModalComponent
+        renderTrigger={toggleVisibility => (
-          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>
-          )}
+          </div>
-        >
+        )}
-          {toggleVisibility => (
+      </ModalComponent>,
-            <div style={{ padding: '50px', backgroundColor: 'white' }}>
+    );
-              Modal Content
-              <button type="button" onClick={toggleVisibility}>
-                Close Modal
-              </button>
-            </div>
-          )}
-        </ModalComponent>,
-      );
 
-      expect(container).toMatchSnapshot();
+    expect(queryByTestId('ModalTrigger')).toBeInTheDocument();
-    });
   });
+
 });

__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', () => {
-    test('should render qrcode component correctly', () => {
+    const { queryByTestId } = render(
-      const { container } = render(
+      <QRCode value='https://z.cash.foundation' />,
-        <QRCode value='https://z.cash.foundation' />,
+    );
-      );
 
-      expect(container).toMatchSnapshot();
+    expect(queryByTestId('QRCode')).toBeInTheDocument();
-    });
   });
 });

__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();
+  });
+});

__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();
+  });
+});

__tests__/components/sidebar.test.js

@@ -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();
-    });
-  });
-});

__tests__/components/status-pill.test.js

@@ -1,8 +1,7 @@
 // @flow
 
 import React from 'react';
-import { render, cleanup } from 'react-testing-library';
+import { render, cleanup, queryByText } from 'react-testing-library';
-import { MemoryRouter } from 'react-router-dom';
 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 status pill correctly', () => {
-    test('should render visual component status correctly', () => {
+    const { queryByTestId } = render(
-      // $FlowFixMe
+      <ThemeProvider theme={appTheme}>
-      const { asFragment } = render(
+        <StatusPill progress={83.} type='syncing' />
-        <ThemeProvider theme={appTheme}>
+      </ThemeProvider>,
-          <MemoryRouter>
+    );
-            <StatusPill progress={83.} type='syncing' />
-          </MemoryRouter>
-        </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();
   });
 });

__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();
+  });
+});

__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();
+  });
+
+});

__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', () => {
-    test('should render wallet address component correctly', () => {
+    const { queryByTestId } = render(
-      const { container } = render(
+      <ThemeProvider theme={appTheme}>
-        <ThemeProvider theme={appTheme}>
+        <div style={{ width: '700px' }}>
-          <div style={{ width: '700px' }}>
+          <WalletAddress
-            <WalletAddress
+            address='t14oHp2v54vfmdgQ3v3SNuQga8JKHTNi2a1'
-              address='t14oHp2v54vfmdgQ3v3SNuQga8JKHTNi2a1'
+          />
-            />
+        </div>
-          </div>
+      </ThemeProvider>,
-        </ThemeProvider>,
+    );
-      );
 
-      expect(container).toMatchSnapshot();
+    expect(queryByTestId('Address')).toBeInTheDocument();
-    });
   });
 });