Increase Jest unit test coverage for the Swaps feature to ~43% #10934

dan437 · 2021-04-26T21:58:19Z

Explanation

This PR increases Swaps coverage from 25% to about 43%, which is getting us one step closer to 90% coverage.

Manual testing steps

npm run test:coverage:jest

Screenshots

Swaps Jest unit test coverage is getting greener (43.12% for Lines coverage):

github-actions · 2021-04-26T21:58:36Z

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

dan437 · 2021-04-26T22:03:36Z

ui/app/pages/swaps/index.test.js

+  it('renders the component with initial props', async () => {
+    const store = configureMockStore(middleware)(createSwapsMockStore());
+    const { container, getByText } = renderWithProvider(<Swap />, store);
+    await waitFor(() => expect(tokensNock.isDone()).toBe(true));


This is a great way to wait until a mocked API call is done.

brad-decker · 2021-04-27T14:29:38Z

ui/app/__mocks__/react-router-dom.js

@@ -3,4 +3,9 @@ const originalModule = jest.requireActual('react-router-dom');
 module.exports = {
  ...originalModule,
  useHistory: jest.fn(),
+  useLocation: jest.fn(() => {


presumably when we expand test coverage in our other areas of the repo we'll need to mock this out in those files to override the pathname?

That's right. My assumption is that most of the tests will be fine with this path, but if they need to use a different one, they can just do this:

jest.mock('react-router-dom', () => { const originalModule = jest.requireActual('react-router-dom'); return { ...originalModule, useHistory: jest.fn(), useLocation: jest.fn(() => { return { pathname: '/feature-z/page-1', }; }), } });

brad-decker · 2021-04-27T14:32:19Z

ui/app/pages/swaps/awaiting-swap/view-on-ether-scan-link/view-on-ether-scan-link.test.js

+        })}
+      />,
+    );
+    expect(getByText('View at custom-blockchain.explorer')).toBeInTheDocument();


Is it possible for us to test what the URL will go to here instead of just checking the link text? It'd help to ensure that changes made to the URL but not the text don't pass through our test cases.

Great point, will add an assertion for a URL.

I've checked the code and we don't render a link, but open a new tab via an onClick event on a div element:
onClick={() => global.platform.openTab({ url: blockExplorerUrl })}

I will be testing events in following PRs, so I would prefer to do it there.

brad-decker · 2021-04-27T14:35:58Z

.../swaps/loading-swaps-quotes/__snapshots__/loading-swaps-quotes-stories-metadata.test.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`storiesMetadata matches expected values for storiesMetadata 1`] = `
+Object {


I am assuming this snapshot exists just to confirm that the loading-swaps-quotes-stories-metadata file isn't touched, or if it is that it is intentional?

Exactly. If there would be any change in loading-swaps-quotes-stories-metadata.js, a test would fail with an outdated snapshot. It's just a double-check that someone didn't accidentally modify it + it was showing 0% test coverage, which was lowering our overall coverage.

brad-decker · 2021-04-27T14:37:13Z

.eslintrc.js

@@ -130,6 +130,7 @@ module.exports = {
      rules: {
        'jest/no-restricted-matchers': 'off',
        'import/unambiguous': 'off',
+        'import/named': 'off',


Why did this get turned off?

Great question! That's because I used module.exports in the link below: https://github.com/MetaMask/metamask-extension/pull/10934/files#diff-8fd96322fc664541ebc0326e3c5963e55db825809abb977c6ffad8be7555cbd1R7
After which I started getting these errors:

I will give it little more time to use export instead of module.exports when re-exporting imported things. Then we hopefully wouldn't need to turn import/named off for tests.

So, I've changed it to export only:

export { createSwapsMockStore } from './mock-store'; export { renderWithProvider } from './rendering'; export { setBackgroundConnection } from './background'; export * as MOCKS from './mocks'; export * as CONSTANTS from './constants';

But even while tests are green, I'm getting the same ESLint issue when re-exporting:

That's why I would prefer to keep 'import/named': 'off',, just for tests.

looks legit. import-js/eslint-plugin-import#1998

brad-decker · 2021-04-27T14:37:47Z

package.json

@@ -33,7 +33,7 @@
    "test:e2e:firefox": "SELENIUM_BROWSER=firefox test/e2e/run-all.sh",
    "test:e2e:firefox:metrics": "SELENIUM_BROWSER=firefox mocha test/e2e/metrics.spec.js",
    "test:coverage": "nyc --silent --check-coverage yarn test:unit:strict && nyc --silent --no-clean yarn test:unit:lax && nyc report --reporter=text --reporter=html",
-    "test:coverage:jest": "jest --coverage --maxWorkers=2 --collectCoverageFrom=**/ui/app/**/swaps/**",
+    "test:coverage:jest": "jest --coverage --maxWorkers=2",


why the removal of the collectCoverageFrom flag

I've moved it to jest.config.js: https://github.com/MetaMask/metamask-extension/pull/10934/files/581c2fb2962fbb64d0772f57c451c89d3e1dd12c#diff-1e058ca1442e46581b13571fb8d261f9e1f5657e26c96634d4c1072f0f0347f1R4

dan437 requested a review from a team as a code owner April 26, 2021 21:58

dan437 requested a review from danjm April 26, 2021 21:58

dan437 commented Apr 26, 2021

View reviewed changes

brad-decker reviewed Apr 27, 2021

View reviewed changes

dan437 added 12 commits April 27, 2021 12:30

Move collectCoverageFrom to jest.config.js, ignore files from coverage

427f733

Add more UTs in the awaiting-swap folder

f1f938c

Add more tests

3a1d34b

Add more UTs for Swaps

fbb5473

Add more tests for Swaps, create new utils functions / constants

5ad663e

Increase minimum test coverage to ~43% for Swaps

3fc0ff7

Fix ESLint issues

d9c8a01

Resolve remaining ESLint issues, remove commented code

9d7d156

Fix snapshots length

d52b147

Remove unimplemented test

49915bd

Update Jest minimum threshold

87b907e

Replace module.exports with export, remove unnecessary imports

9aa65f8

dan437 force-pushed the swaps-jest-tests-v2 branch from e3c3c26 to 9aa65f8 Compare April 27, 2021 19:30

brad-decker approved these changes Apr 27, 2021

View reviewed changes

brad-decker merged commit 37159a5 into MetaMask:develop Apr 27, 2021

github-actions bot locked and limited conversation to collaborators Apr 27, 2021

dan437 deleted the swaps-jest-tests-v2 branch July 24, 2023 11:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Increase Jest unit test coverage for the Swaps feature to ~43% #10934

Increase Jest unit test coverage for the Swaps feature to ~43% #10934

dan437 commented Apr 26, 2021 •

edited

github-actions bot commented Apr 26, 2021

dan437 Apr 26, 2021

brad-decker Apr 27, 2021

brad-decker Apr 27, 2021

dan437 Apr 27, 2021

brad-decker Apr 27, 2021

dan437 Apr 27, 2021

dan437 Apr 27, 2021

brad-decker Apr 27, 2021

dan437 Apr 27, 2021

brad-decker Apr 27, 2021

dan437 Apr 27, 2021

dan437 Apr 27, 2021

brad-decker Apr 27, 2021

dan437 Apr 27, 2021

brad-decker Apr 27, 2021

dan437 Apr 27, 2021

Increase Jest unit test coverage for the Swaps feature to ~43% #10934

Increase Jest unit test coverage for the Swaps feature to ~43% #10934

Conversation

dan437 commented Apr 26, 2021 • edited

Explanation

Manual testing steps

Screenshots

github-actions bot commented Apr 26, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dan437 commented Apr 26, 2021 •

edited