Skip to content

chore: Reduce enzymes usage 1/3#8721

Merged
Cal-L merged 7 commits into
MetaMask:chore/8616-reduce-enzyme-usagefrom
timi-codes:reduce-enzymes-usage-1/3
Mar 14, 2024
Merged

chore: Reduce enzymes usage 1/3#8721
Cal-L merged 7 commits into
MetaMask:chore/8616-reduce-enzyme-usagefrom
timi-codes:reduce-enzymes-usage-1/3

Conversation

@timi-codes

@timi-codes timi-codes commented Feb 25, 2024

Copy link
Copy Markdown
Contributor

Description

Convert the list of unit tests to use react-testing-library instead of enzyme for the following files:

'app/components/Views/Root/index.test.tsx',
'app/components/Views/NavigationUnitTest/TestScreen3.test.js',
'app/components/Views/NavigationUnitTest/TestScreen2.test.js',
'app/components/Views/NavigationUnitTest/TestScreen1.test.js',
'app/components/Views/ImportPrivateKeySuccess/index.test.tsx',
'app/components/Views/AccountBackupStep1B/index.test.tsx',
'app/components/UI/WebviewProgressBar/index.test.tsx',
'app/components/UI/SeedphraseModal/index.test.tsx',
'app/components/UI/PhishingModal/index.test.tsx',
'app/components/UI/FoxScreen/index.test.tsx',
'app/components/UI/FadeView/index.test.tsx',
'app/components/UI/CustomAlert/index.test.tsx',
'app/components/UI/Confetti/index.test.tsx',
'app/components/UI/Collectibles/index.test.tsx',
'app/components/UI/Button/index.test.tsx',
'app/components/UI/AnimatedSpinner/index.test.tsx',
'app/components/UI/AddCustomToken/index.test.tsx',

Related issues

Fixes: #8616

Manual testing steps

Not Applicable

Screenshots/Recordings

Not Applicable

Pre-merge author checklist

  • I’ve followed MetaMask Coding Standards.
  • I've clearly explained what problem this PR is solving and how it is solved.
  • I've linked related issues
  • I've included manual testing steps
  • I've included screenshots/recordings if applicable
  • I’ve included tests if applicable
  • I’ve documented my code using JSDoc format if applicable
  • I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.
  • I’ve properly set the pull request status:
    • In case it's not yet "ready for review", I've set it to "draft".
    • In case it's "ready for review", I've changed it from "draft" to "non-draft".

Pre-merge reviewer checklist

  • I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
  • I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

@github-actions

Copy link
Copy Markdown
Contributor

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.

@Cal-L Cal-L left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left comments of simplified tests using existing utility functions

Comment thread app/components/UI/AddCustomToken/index.test.tsx Outdated
Comment thread app/components/Views/AccountBackupStep1B/index.test.tsx Outdated
@Cal-L

Cal-L commented Feb 29, 2024

Copy link
Copy Markdown
Contributor

@timi-codes Left some comments

@timi-codes

Copy link
Copy Markdown
Contributor Author

Thanks for the feedback @Cal-L

I have updated 15/17 of the test files and made the recommended changes. The remaining two files are app/components/Views/Root/index.test.tsx and app/components/UI/Confetti/index.test.tsx.

The root file snapshot render null and the confetti snapshot change every time because of the randomness of the Views.
Do you have any suggestion on how to fix this?

image image

@timi-codes timi-codes marked this pull request as ready for review March 1, 2024 01:56
@timi-codes timi-codes requested a review from a team as a code owner March 1, 2024 01:56
@timi-codes timi-codes requested a review from Cal-L March 1, 2024 01:56
@Cal-L

Cal-L commented Mar 4, 2024

Copy link
Copy Markdown
Contributor

Thanks for the feedback @Cal-L

I have updated 15/17 of the test files and made the recommended changes. The remaining two files are app/components/Views/Root/index.test.tsx and app/components/UI/Confetti/index.test.tsx.

The root file snapshot render null and the confetti snapshot change every time because of the randomness of the Views. Do you have any suggestion on how to fix this?

image image

On Confetti.test.tsx, since the components being tested have non deterministic styles, I'd recommend just mocking react-native-confetti and react-native-confetti-cannon for now:

jest.mock('react-native-confetti');
jest.mock('react-native-confetti-cannon');

The snapshot will reduce to only return null but that's fine for now since this isn't a critical component.

@Cal-L

Cal-L commented Mar 4, 2024

Copy link
Copy Markdown
Contributor

Thanks for the feedback @Cal-L

I have updated 15/17 of the test files and made the recommended changes. The remaining two files are app/components/Views/Root/index.test.tsx and app/components/UI/Confetti/index.test.tsx.

The root file snapshot render null and the confetti snapshot change every time because of the randomness of the Views. Do you have any suggestion on how to fix this?

image image

For the Root component snapshot tests, you can update the test file to look like this:

image

After that, you can remove some of the mocks

image

Your Root snapshot should update and the output should remain deterministic

@Cal-L

Cal-L commented Mar 4, 2024

Copy link
Copy Markdown
Contributor

@timi-codes Left some comments regarding Confetti and Root components

@timi-codes

timi-codes commented Mar 5, 2024

Copy link
Copy Markdown
Contributor Author

Thanks for the feedback @Cal-L
I have updated 15/17 of the test files and made the recommended changes. The remaining two files are app/components/Views/Root/index.test.tsx and app/components/UI/Confetti/index.test.tsx.
The root file snapshot render null and the confetti snapshot change every time because of the randomness of the Views. Do you have any suggestion on how to fix this?
image image

For the Root component snapshot tests, you can update the test file to look like this:

image After that, you can remove some of the mocks image Your Root snapshot should update and the output should remain deterministic

@Cal-L Thank you.

For the Root file, I was referring to app/components/Views/Root/index.test.tsx not app/components/Views/confirmations/components/SignatureRequest/Root/Root.test.tsx. However, I already fixed it by mocking configureStore.

All the files are now ready for review.

@Cal-L Cal-L left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left some comments @timi-codes

Comment thread app/components/UI/Button/index.test.tsx Outdated
Comment thread app/components/UI/FadeView/index.test.tsx Outdated
@timi-codes timi-codes requested a review from Cal-L March 6, 2024 20:44

@Cal-L Cal-L left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, thanks for your contribution!

@timi-codes

Copy link
Copy Markdown
Contributor Author

Thank you @Cal-L . The 2/3 is also ready for review #8823

@codecov-commenter

codecov-commenter commented Mar 13, 2024

Copy link
Copy Markdown

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 43.53%. Comparing base (bdba039) to head (f5e60c9).

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #8721      +/-   ##
==========================================
+ Coverage   43.27%   43.53%   +0.26%     
==========================================
  Files        1271     1271              
  Lines       30916    30916              
  Branches     3092     3092              
==========================================
+ Hits        13378    13460      +82     
+ Misses      16765    16682      -83     
- Partials      773      774       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@Cal-L Cal-L changed the base branch from main to chore/8616-reduce-enzyme-usage March 14, 2024 16:04
@Cal-L Cal-L changed the title Reduce enzymes usage 1/3 chore: Reduce enzymes usage 1/3 Mar 14, 2024
@Cal-L

Cal-L commented Mar 14, 2024

Copy link
Copy Markdown
Contributor

@timi-codes Merging into a branch based on main and will follow up with a PR to merge into main.

@Cal-L Cal-L merged commit 72b8eb6 into MetaMask:chore/8616-reduce-enzyme-usage Mar 14, 2024
@github-actions github-actions Bot locked and limited conversation to collaborators Mar 14, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Reduce enzyme usage in unit test by 25% - [1 of 3]

4 participants