feat(test-components): create test files for components

__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('<Button />', () => {
+  describe('render()', () => {
+    test('should render button correctly', () => {
+      const { container } = render(
+        <ThemeProvider theme={appTheme}>
+          <Button
+            label='Click me!'
+            onClick={() => alert('Clicked')}
+          />
+        </ThemeProvider>
+      );
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

__tests__/components/clipboard.test.js

@@ -0,0 +1,25 @@
+// @flow
+
+import React from 'react';
+import { render, cleanup } from 'react-testing-library';
+import { ThemeProvider } from 'styled-components';
+import 'jest-dom/extend-expect';
+
+import { Clipboard } from '../../app/components/clipboard';
+import appTheme from '../../app/theme';
+
+afterEach(cleanup);
+
+describe('<Clipboard />', () => {
+  describe('render()', () => {
+    test('should render clipboard component correctly', () => {
+      const { container } = render(
+        <ThemeProvider theme={appTheme}>
+          <Clipboard text='Click me!' />
+        </ThemeProvider>,
+      );
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

__tests__/components/confirm-dialog.test.js

@@ -0,0 +1,27 @@
+// @flow
+
+import React from 'react';
+import { render, cleanup } from 'react-testing-library';
+import 'jest-dom/extend-expect';
+
+import { ConfirmDialogComponent } from '../../app/components/confirm-dialog';
+
+afterEach(cleanup);
+
+describe('<ConfirmDialogComponent />', () => {
+  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>,
+      );
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

__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('<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>,
+      );
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

__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('<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>
+      );
+
+      expect(container).toMatchSnapshot();
+    });
+
+    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>
+      );
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

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

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

__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('<Sidebar />', () => {
+afterEach(cleanup);
+
+describe('<SidebarComponent />', () => {
   describe('render()', () => {
     test('should render correctly', () => {
       // $FlowFixMe
       const { asFragment } = render(
-        <MemoryRouter>
-          <SidebarComponent location={{ pathname: '/', hash: '/', search: '' }} />
-        </MemoryRouter>,
+        <ThemeProvider theme={appTheme}>
+          <MemoryRouter>
+            <SidebarComponent location={{ pathname: '/', hash: '/', search: '' }} />
+          </MemoryRouter>
+        </ThemeProvider>,
       );
 
       expect(asFragment()).toMatchSnapshot();

__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('<TransactionDailyComponent />', () => {
+  describe('render()', () => {
+    test('should render user daily transactions', () => {
+      const { container } = render(
+        <ThemeProvider theme={appTheme}>
+          <TransactionDailyComponent
+            transactionsDate={new Date().toISOString()}
+            zecPrice={1.345}
+            transactions={[
+              {
+                type: 'receive',
+                transactionId: 's0a8das098fgh2348a',
+                address: '123456789123456789123456789123456789',
+                amount: 1.7891,
+                zecPrice: 1.345,
+                date: new Date().toISOString(),
+              },
+              {
+                type: 'send',
+                transactionId: '0asd908fgj90f01',
+                address: '123456789123456789123456789123456789',
+                amount: 0.8458,
+                zecPrice: 1.344,
+                date: new Date().toISOString(),
+              },
+            ]}
+          />
+        </ThemeProvider>,
+      );
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

__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('<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>,
+      );
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+});