diff --git a/jest.config.js b/jest.config.js index 7b5d9454..1ac69265 100644 --- a/jest.config.js +++ b/jest.config.js @@ -15,4 +15,7 @@ module.exports = { '\\.graphql$': 'jest-transform-graphql', '\\.spec.ts?$': 'ts-jest' }, + moduleNameMapper: { + "\\.(css|less|scss)$": "/source/__mocks__/styleMock.js" + } }; diff --git a/package.json b/package.json index fd4edee9..599b1c87 100644 --- a/package.json +++ b/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", diff --git a/source/__mocks__/styleMock.js b/source/__mocks__/styleMock.js new file mode 100644 index 00000000..f053ebf7 --- /dev/null +++ b/source/__mocks__/styleMock.js @@ -0,0 +1 @@ +module.exports = {}; diff --git a/source/config/jest.config.ts b/source/config/jest.config.ts index 55ca1373..da6439c0 100644 --- a/source/config/jest.config.ts +++ b/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; diff --git a/source/features/transactions/components/TransactionInfo.tsx b/source/features/transactions/components/TransactionInfo.tsx index 68c65466..8183ac40 100644 --- a/source/features/transactions/components/TransactionInfo.tsx +++ b/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 ===== */} - -
-
- {translate('transaction.receivedTime')} -
-
- > {dayjs().utc().to(includedAtUtc)} ( - {includedAtUtc.format('YYYY-MM-DD HH:mm:ss')} UTC) -
-
+ ${dayjs().utc().to(includedAtUtc)} + (${includedAtUtc.format('YYYY-MM-DD HH:mm:ss')} UTC)`} + /> {/* ===== INCLUDED IN ===== */} - {props.showDetails && (
@@ -248,26 +243,18 @@ const TransactionInfo = (props: ITransactionInfoProps) => {
{/* ===== DEPOSIT ===== */} - {props.deposit !== '0' && ( -
-
{translate(depositLabel)}
-
- {Math.abs(parseInt(props.deposit))} ADA -
-
- )} + {/* ===== TOTAL OUTPUT ===== */} - -
-
- {translate('transaction.totalOutput')} -
-
{props.totalOutput} ADA
-
+ {/* ===== CONFIRMATIONS ===== */} - {props.showDetails && (
{translate('transaction.fee')}
diff --git a/source/features/transactions/components/TransactionInfoRow/TransactionInfoRow.test.tsx b/source/features/transactions/components/TransactionInfoRow/TransactionInfoRow.test.tsx new file mode 100644 index 00000000..44cdeede --- /dev/null +++ b/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('', () => { + it('deposit :renders label with value', () => { + const label = 'Deposit'; + const value = '2 ADA'; + const wrapper = shallow(); + expect(wrapper.find('[data-testid="label"]').text()).toEqual(label); + expect(wrapper.find('[data-testid="value"]').text()).toEqual(value); + }); +}); diff --git a/source/features/transactions/components/TransactionInfoRow/TransactionInfoRow.tsx b/source/features/transactions/components/TransactionInfoRow/TransactionInfoRow.tsx new file mode 100644 index 00000000..356c67cf --- /dev/null +++ b/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 ( +
+
+ {props.label} +
+
+ {props.value} +
+
+ ); +}; diff --git a/styleMock.js b/styleMock.js new file mode 100644 index 00000000..f053ebf7 --- /dev/null +++ b/styleMock.js @@ -0,0 +1 @@ +module.exports = {};