From 9f30b65258d0b814ccce6f4944ab050f4ce3f3fe Mon Sep 17 00:00:00 2001 From: gshohat Date: Sun, 16 May 2021 12:02:31 +0300 Subject: [PATCH 1/3] - TransactionInfoRow component@encapsulate simple text rows - jest@mock css modules - enzyme@add --- jest.config.js | 3 ++ package.json | 4 ++ source/__mocks__/styleMock.js | 1 + source/config/jest.config.ts | 44 ++++++++++--------- .../components/TransactionInfo.tsx | 25 ++++------- .../TransactionInfoRow.test.tsx | 13 ++++++ .../TransactionInfoRow/TransactionInfoRow.tsx | 20 +++++++++ styleMock.js | 1 + 8 files changed, 75 insertions(+), 36 deletions(-) create mode 100644 source/__mocks__/styleMock.js create mode 100644 source/features/transactions/components/TransactionInfoRow/TransactionInfoRow.test.tsx create mode 100644 source/features/transactions/components/TransactionInfoRow/TransactionInfoRow.tsx create mode 100644 styleMock.js 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..c072167e 100644 --- a/source/config/jest.config.ts +++ b/source/config/jest.config.ts @@ -1,25 +1,29 @@ +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'; -beforeAll(async () => { - jest.setTimeout(15000); - waitForExpect.defaults.timeout = 9000; - await RetryPromise.retryPromise( - 'Checking Cardano GraphQL server is available', - () => { - return graphqlClient.request( - `query { - cardano { - tip { - number - } - } - } - ` - ); - }, - 40 - ); -}, 60000); +configure({ adapter: new Adapter() }); + +// beforeAll(async () => { +// jest.setTimeout(15000); +// waitForExpect.defaults.timeout = 9000; +// await RetryPromise.retryPromise( +// 'Checking Cardano GraphQL server is available', +// () => { +// return graphqlClient.request( +// `query { +// cardano { +// tip { +// number +// } +// } +// } +// ` +// ); +// }, +// 40 +// ); +// }, 60000); diff --git a/source/features/transactions/components/TransactionInfo.tsx b/source/features/transactions/components/TransactionInfo.tsx index 68c65466..a36b9351 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); @@ -248,26 +249,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 = {}; From 953cf2d64cd3239b6e6c68b3858c358e3094bce1 Mon Sep 17 00:00:00 2001 From: gshohat Date: Sun, 16 May 2021 12:05:20 +0300 Subject: [PATCH 2/3] initial --- source/config/jest.config.ts | 40 ++++++++++++++++++------------------ 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/source/config/jest.config.ts b/source/config/jest.config.ts index c072167e..da6439c0 100644 --- a/source/config/jest.config.ts +++ b/source/config/jest.config.ts @@ -7,23 +7,23 @@ import './mobx.config'; configure({ adapter: new Adapter() }); -// beforeAll(async () => { -// jest.setTimeout(15000); -// waitForExpect.defaults.timeout = 9000; -// await RetryPromise.retryPromise( -// 'Checking Cardano GraphQL server is available', -// () => { -// return graphqlClient.request( -// `query { -// cardano { -// tip { -// number -// } -// } -// } -// ` -// ); -// }, -// 40 -// ); -// }, 60000); +beforeAll(async () => { + jest.setTimeout(15000); + waitForExpect.defaults.timeout = 9000; + await RetryPromise.retryPromise( + 'Checking Cardano GraphQL server is available', + () => { + return graphqlClient.request( + `query { + cardano { + tip { + number + } + } + } + ` + ); + }, + 40 + ); +}, 60000); From 64f1197b87bc609242e72bad62d66aa9cebe113a Mon Sep 17 00:00:00 2001 From: gshohat Date: Sun, 16 May 2021 13:59:37 +0300 Subject: [PATCH 3/3] - received time row@encapsulate --- .../transactions/components/TransactionInfo.tsx | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/source/features/transactions/components/TransactionInfo.tsx b/source/features/transactions/components/TransactionInfo.tsx index a36b9351..8183ac40 100644 --- a/source/features/transactions/components/TransactionInfo.tsx +++ b/source/features/transactions/components/TransactionInfo.tsx @@ -122,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 && (