Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use fetch-mock instead of nock #28481

Merged
merged 15 commits into from Feb 22, 2023
Merged

Use fetch-mock instead of nock #28481

merged 15 commits into from Feb 22, 2023

Conversation

ranquild
Copy link
Contributor

@ranquild ranquild commented Feb 21, 2023

Related to #28489

Problems with nock:

fetch-mock is a popular library for request mocking, but it works only with fetch. And if you try to use fetch with our cypress tests, about ~20-40 of them fail for no obvious reason, which makes me think that cypress handles xhr and fetch differently. So the solution I came up with is to use fetch in tests only for now and migrate from nock asap because it becomes a real CI blocker.

This PR converts just one single test as a proof of concept. We can migrate our existing nock-based tests in follow-up PRs.


This change is Reviewable

@ranquild ranquild self-assigned this Feb 21, 2023
@deploysentinel
Copy link

deploysentinel bot commented Feb 21, 2023

No failed tests 🎉

@codecov
Copy link

codecov bot commented Feb 21, 2023

Codecov Report

Base: 67.19% // Head: 67.18% // Decreases project coverage by -0.01% ⚠️

Coverage data is based on head (55bf18f) compared to base (b9511a6).
Patch coverage: 100.00% of modified lines in pull request are covered.

Additional details and impacted files
@@            Coverage Diff             @@
##           master   #28481      +/-   ##
==========================================
- Coverage   67.19%   67.18%   -0.01%     
==========================================
  Files        3328     3328              
  Lines       96904    96882      -22     
  Branches    12293    12293              
==========================================
- Hits        65113    65094      -19     
+ Misses      26703    26700       -3     
  Partials     5088     5088              
Flag Coverage Δ
back-end 85.50% <ø> (+<0.01%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
frontend/src/metabase/env.js 100.00% <ø> (ø)
frontend/src/metabase/lib/api.js 95.52% <100.00%> (+2.18%) ⬆️
src/metabase/models/card.clj 81.97% <0.00%> (-0.46%) ⬇️
src/metabase/models/action.clj 94.36% <0.00%> (+0.08%) ⬆️
src/metabase/driver/impl.clj 70.52% <0.00%> (+1.05%) ⬆️

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

@ranquild ranquild changed the title [WIP] Try fetch instead of xhr Use fetch-mock instead of nock Feb 22, 2023
@ranquild ranquild requested a review from a team February 22, 2023 18:23
});

const successResponse = { status: "ok" };

it("should GET", async () => {
nock(location.origin).get("/hello").reply(200, successResponse);
fetchMock.get("path:/hello", { status: 200, body: successResponse });
Copy link
Contributor Author

Choose a reason for hiding this comment

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

:path matcher allows us to skip the origin, which is an improvement over nock already :)

Copy link
Member

@alxnddr alxnddr left a comment

Choose a reason for hiding this comment

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

I like the plan! Later we can add https://www.npmjs.com/package/fetch-mock-jest

Copy link
Member

@kulyk kulyk left a comment

Choose a reason for hiding this comment

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

LGTM 👍

Comment on lines 156 to 162
_makeRequest(...args) {
if (isTest) {
return this._makeRequestWithFetch(...args);
} else {
return this._makeRequestWithXhr(...args);
}
}
Copy link
Member

Choose a reason for hiding this comment

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

I think it's worth a comment; we can link this PR here

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Agree, added a comment and linked to the issue

@WiNloSt
Copy link
Member

WiNloSt commented Feb 22, 2023

One thing that might help you track down future work when we're migrating everything to fetch is, I randomly picked a few of the failed tests from this comment (for future readers you might need to look at the comment history, currently it's 19:40 GMT)

From this screenshot
image

You can see that Cypress doesn't type the first few characters (I found another test that missed the first 2 characters). IIRC, I've encountered this problem before in my test a while ago, the cause at that time was like something triggered the rerender and causes the first few keystrokes to disappear.

I'm not sure what it is this time, but the symptom is very similar.

@ranquild ranquild enabled auto-merge (squash) February 22, 2023 22:33
@ranquild ranquild merged commit 2e71759 into master Feb 22, 2023
@ranquild ranquild deleted the api-test-fetch branch February 22, 2023 23:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants