Feature/transaction info row

jest.config.js

@@ -15,4 +15,7 @@ module.exports = {
     '\\.graphql$': 'jest-transform-graphql',
     '\\.spec.ts?$': 'ts-jest'
   },
+  moduleNameMapper: {
+    "\\.(css|less|scss)$": "<rootDir>/source/__mocks__/styleMock.js"
+  }
 };

package.json

@@ -92,6 +92,8 @@
     "@types/chroma-js": "1.4.3",
     "@types/classnames": "2.2.9",
     "@types/debug": "4.1.4",
+    "@types/enzyme": "^3.10.8",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/graphql": "14.2.0",
     "@types/jest": "26.0.3",
     "@types/lodash": "4.14.119",
@@ -120,6 +122,8 @@
     "cypress": "4.12.1",
     "dotenv": "8.0.0",
     "dotenv-webpack": "1.7.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
     "husky": "3.0.3",
     "jest": "26.1.0",
     "jest-transform-graphql": "2.1.0",

source/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

source/config/jest.config.ts

@@ -1,8 +1,12 @@
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 import { RetryPromise } from 'promise-exponential-retry';
 import waitForExpect from 'wait-for-expect';
 import { graphqlClient } from '../lib/graphql/graphqlClient';
 import './mobx.config';
 
+configure({ adapter: new Adapter() });
+
 beforeAll(async () => {
   jest.setTimeout(15000);
   waitForExpect.defaults.timeout = 9000;

source/features/transactions/components/TransactionInfo.tsx

@@ -21,6 +21,7 @@ import {
   IWithdrawal,
 } from '../types';
 import styles from './TransactionInfo.module.scss';
+import { TransactionInfoRow } from './TransactionInfoRow/TransactionInfoRow';
 import TokenList from './TransactionTokenList';
 
 dayjs.extend(relativeTime);
@@ -121,19 +122,13 @@ const TransactionInfo = (props: ITransactionInfoProps) => {
         )}
 
         {/* ===== RECEIVED TIME ===== */}
-
-        <div className={styles.row}>
-          <div className={styles.label}>
-            {translate('transaction.receivedTime')}
-          </div>
-          <div className={styles.value}>
-            &gt; {dayjs().utc().to(includedAtUtc)} (
-            {includedAtUtc.format('YYYY-MM-DD HH:mm:ss')} UTC)
-          </div>
-        </div>
+        <TransactionInfoRow
+          label={translate('transaction.receivedTime')}
+          value={`> ${dayjs().utc().to(includedAtUtc)}
+          (${includedAtUtc.format('YYYY-MM-DD HH:mm:ss')} UTC)`}
+        />
 
         {/* ===== INCLUDED IN ===== */}
-
         {props.showDetails && (
           <div className={styles.row}>
             <div className={styles.label}>
@@ -248,26 +243,18 @@ const TransactionInfo = (props: ITransactionInfoProps) => {
         </div>
 
         {/* ===== DEPOSIT ===== */}
-        {props.deposit !== '0' && (
-          <div className={styles.row}>
-            <div className={styles.label}>{translate(depositLabel)}</div>
-            <div className={styles.value}>
-              {Math.abs(parseInt(props.deposit))} ADA
-            </div>
-          </div>
-        )}
+        <TransactionInfoRow
+          label={translate(depositLabel)}
+          value={`${Math.abs(parseInt(props.deposit))} ADA`}
+        />
 
         {/* ===== TOTAL OUTPUT ===== */}
-
-        <div className={styles.row}>
-          <div className={styles.label}>
-            {translate('transaction.totalOutput')}
-          </div>
-          <div className={styles.value}>{props.totalOutput} ADA</div>
-        </div>
+        <TransactionInfoRow
+          label={translate('transaction.totalOutput')}
+          value={`${props.totalOutput} ADA`}
+        />
 
         {/* ===== CONFIRMATIONS ===== */}
-
         {props.showDetails && (
           <div className={styles.row}>
             <div className={styles.label}>{translate('transaction.fee')}</div>

source/features/transactions/components/TransactionInfoRow/TransactionInfoRow.test.tsx

@@ -0,0 +1,13 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { TransactionInfoRow } from './TransactionInfoRow';
+
+describe('<TransactionInfoRow/>', () => {
+  it('deposit :renders label with value', () => {
+    const label = 'Deposit';
+    const value = '2 ADA';
+    const wrapper = shallow(<TransactionInfoRow label={label} value={value} />);
+    expect(wrapper.find('[data-testid="label"]').text()).toEqual(label);
+    expect(wrapper.find('[data-testid="value"]').text()).toEqual(value);
+  });
+});

source/features/transactions/components/TransactionInfoRow/TransactionInfoRow.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import styles from '../TransactionInfo.module.scss';
+
+interface ITransactionInfoRowProps {
+  label: string;
+  value: string;
+}
+
+export const TransactionInfoRow = (props: ITransactionInfoRowProps) => {
+  return (
+    <div className={styles.row}>
+      <div data-testid="label" className={styles.label}>
+        {props.label}
+      </div>
+      <div data-testid="value" className={styles.value}>
+        {props.value}
+      </div>
+    </div>
+  );
+};

styleMock.js

@@ -0,0 +1 @@
+module.exports = {};