Provide a way to easily mock fetch and Web platform polyfills #295

maier49 · 2019-03-18T13:31:07Z

Type: feature

The following has been addressed in the PR:

There is a related issue
All code has been formatted with prettier as per the readme code style guidelines
Unit or Functional tests are included in the PR

Description:

Partially addresses #275

samends · 2019-03-18T14:06:54Z

src/shim/fetch.ts

+}
+
+export function replace(fetch: (input: RequestInfo, init?: RequestInit) => Promise<Response>) {
+	if (has('test')) {


What is has referring to here?

https://github.com/dojo/framework/tree/master/src/has/README.md

dasa · 2019-03-18T17:18:13Z

package.json

    "globalize": "1.4.0",
    "immutable": "3.8.2",
    "intersection-observer": "0.4.2",
+    "isomorphic-fetch": "^2.2.1",


cross-fetch might be a better option for this (I haven't used either): https://github.com/lquixada/cross-fetch#why-not-isomorphic-fetch

Good point, I've updated this to use cross-fetch

agubler · 2019-03-29T08:35:26Z

package.json

    "@types/globalize": "0.0.34",
    "@webcomponents/webcomponentsjs": "1.1.0",
    "cldrjs": "0.5.0",
+    "cross-fetch": "^3.0.1",


Can we fix this dep please?

agubler · 2019-03-29T09:33:37Z

src/shim/fetch.ts


-export default global.fetch.bind(global) as (input: RequestInfo, init?: RequestInit) => Promise<Response>;
+let fetchLoadedPromise: Promise<void>;
+if (!has('build-elide')) {


I think this causes issues with the bundling on the build side - we get two unnamed bundles (one for the browser and one for node).

Although when building in legacy mode it looks like it's actually bundling correctly in the platform/fetch bundle.

I'm not sure what the best way to resolve this would be then. Seems like what we'd really want is two separate static imports, one with
!has('build-elide') as well as has('host-node') and one for the browser.

But I'm not sure that would behave as expected.

so I think we don't actually ever need to run fetch in node as node is only a supported target environment under test. given thats the complaint (whatwg-fetch blowing up in tests), we can perhaps just use a polyfill that doesn't, and then we don't need to complicate this. For example: https://github.com/developit/unfetch I think doesn't blow up.

agubler · 2019-03-30T19:47:33Z

src/shim/WebAnimations.ts


-export const Animation = global.Animation as AnimationConstructor;
-export const KeyframeEffect = global.KeyframeEffect as KeyframeEffectConstructor;
+const _Animation = global.Animation as AnimationConstructor;


Do you think it's possible to wrap all the mocking / replacement parts in a has check for test? At build time this should be then converted to false and then removed from the prod build?

👍 I'll just need to make a change in cli-build-app then to set this flag for the test build.

matt-gadd · 2019-04-08T16:10:58Z

src/shim/IntersectionObserver.ts

+const _intersectionObserver: typeof IntersectionObserver = global.IntersectionObserver as typeof IntersectionObserver;
+let replacement: typeof IntersectionObserver = _intersectionObserver;
+
+const Wrapper = class {


This seems a bit verbose to have to do for each shim, also I don't think we need to wrap this outside of a test. I wonder if we could just essentially take your wrapping constructor idea and use it generically across the modules, kind of like a "live binding" wrapper to the global? That way we wouldn't even need a replace function per shim, they could just change the global?

function wrapper(nameOnGlobal: string) { return function(...args: any[]) { return new global[nameOnGlobal](...args); }; }

What IntersectionObserver.ts would then look like:

import global from './global'; `!has('build-elide')`; import 'intersection-observer'; import has from '../has/has'; import wrapper from './somewhere/wrapper'; let value = global.IntersectionObserver; if (has('test')) { value = wrapper('IntersectionObserver') ; } export default value as typeof IntersectionObserver;

matt-gadd · 2019-04-08T16:15:12Z

src/shim/fetch.ts


-export default global.fetch.bind(global) as (input: RequestInfo, init?: RequestInit) => Promise<Response>;
+let fetchLoadedPromise: Promise<void>;
+if (!has('build-elide')) {


so I think we don't actually ever need to run fetch in node as node is only a supported target environment under test. given thats the complaint (whatwg-fetch blowing up in tests), we can perhaps just use a polyfill that doesn't, and then we don't need to complicate this. For example: https://github.com/developit/unfetch I think doesn't blow up.

…sage

agubler · 2019-04-09T13:35:20Z

src/shim/IntersectionObserver.ts

+import wrapper from './util/wrapper';

-export default global.IntersectionObserver as typeof IntersectionObserver;
+export default wrapper('IntersectionObserver', true) as typeof IntersectionObserver;


Could we only use the wrapper when the has flag for test is true? This means that when in dist or dev the native implementation will be used (and also prevents the user from being able to change the implementation in anything other than test).

I have the wrapper now returning the original when the test flag is not set to true. So they'll always get the native/polyfilled implementation.

As in, it returns global[nameOfThing] one time instead of a function that provides a live binding.

matt-gadd · 2019-04-09T14:30:13Z

src/shim/util/wrapper.ts

+		}
+	}
+
+	return global[nameOnGlobal].bind(global);


if we can avoid doing this outside of test that would be ideal, just because otherwise say window.IntersectionObserver is not going to have equality with this return due to the wrapping bind?

The only reason I put this here is because fetch was already doing this. I could just put another parameter on wrapper to control this and make sure it only happens for fetch, or remote that entirely if it wasn't necessary in the first place.

@maier49 cool, perhaps it wasn't needed in the first place?

The bind on fetch was added here: #192

@matt-gadd I can't think of or find any reason why it would be. I've gone ahead and removed it.

@maier49 did you see the original issue as to why fetch was bound?

@agubler Nope, sorry, missed that. I will add another flag to the wrapper then.

Fetch replacment utility

3974c4d

maier49 requested a review from matt-gadd March 18, 2019 13:31

samends reviewed Mar 18, 2019

View reviewed changes

dasa reviewed Mar 18, 2019

View reviewed changes

maier49 added 3 commits March 19, 2019 09:46

Add more shim mocks

ddec5f9

Add tests, switch to cross fetch, and fix static ResizeObserver methods

e20800d

Fix case

33d645f

maier49 changed the title ~~Provide a way to easily mock fetch~~ Provide a way to easily mock fetch and Web platform polyfills Mar 23, 2019

maier49 added 3 commits March 25, 2019 12:08

Dynamically import fetch based on environment

bf8f002

Fix suite name

2bca95f

Fix loader config

7d12565

agubler requested changes Mar 30, 2019

View reviewed changes

matt-gadd requested changes Apr 8, 2019

View reviewed changes

Update pattern for mocking shims, update tests, and update polyfill u…

77ed723

…sage

agubler reviewed Apr 9, 2019

View reviewed changes

matt-gadd reviewed Apr 9, 2019

View reviewed changes

maier49 added 2 commits April 9, 2019 12:42

Do not bind the return value when not in a test environment

2893995

Move wrapper tests to correct folder, optionally bind functions

dc716fe

maier49 requested a review from matt-gadd April 11, 2019 23:33

Unnecessary change

f138a1a

matt-gadd approved these changes Apr 12, 2019

View reviewed changes

maier49 merged commit b77638b into dojo:master Apr 12, 2019

maier49 deleted the 275-nice-shim-mocks branch April 12, 2019 17:59

matt-gadd mentioned this pull request Sep 9, 2019

Add site content for how to mock in dojo #519

Closed

snyk-bot mentioned this pull request Nov 14, 2019

[Snyk] Upgrade @dojo/framework from 6.0.0 to 6.0.3 Matthelonianxl/cli-build-app#3

Open

Provide a way to easily mock fetch and Web platform polyfills #295

Provide a way to easily mock fetch and Web platform polyfills #295

Uh oh!

Conversation

maier49 commented Mar 18, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

samends Mar 18, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

maier49 Apr 9, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

maier49 commented Mar 18, 2019 •

edited

Loading

samends Mar 18, 2019 •

edited

Loading

maier49 Apr 9, 2019 •

edited

Loading