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.

Sign up for GitHub

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

Add fetch example & test #199

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add fetch example & test #199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,14 +125,26 @@ import { setupBrowserFakes } from 'ember-browser-services/test-support';

module('Scenario Name', function (hooks) {
setupBrowserFakes(hooks, {
window: { location: { href: 'https://crowdstrike.com' } },
window: {
location: { href: 'https://crowdstrike.com' },
fetch: async (url) => ({ url })
Copy link

Choose a reason for hiding this comment

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

Shouldn't the faked version match the signature of the original function?

e.g. shouldn't this return something matching:

interface Response extends Body {
    readonly headers: Headers;
    readonly ok: boolean;
    readonly redirected: boolean;
    readonly status: number;
    readonly statusText: string;
    readonly type: ResponseType;
    readonly url: string;
    clone(): Response;
}

interface Body {
    readonly body: ReadableStream<Uint8Array> | null;
    readonly bodyUsed: boolean;
    arrayBuffer(): Promise<ArrayBuffer>;
    blob(): Promise<Blob>;
    formData(): Promise<FormData>;
    json(): Promise<any>;
    text(): Promise<string>;
}

(from lib.dom)

Obviously you can't have the right body but the url on the Response would enable the test you've written (and maybe in general the sort of tests that you'd want to fake fetch for?)

Copy link
Author

Choose a reason for hiding this comment

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

Yeah, we can make it match 👍 That’s definitely a great improvement! I went with a simple example here, but might as well go all the way and provide a correct example.

Copy link
Contributor

Choose a reason for hiding this comment

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

@gnclmorais if you need/want help, lemme know!

personally, I don't think we should block README updates on something like this, since the underlying implementation is basically YOLO-stubbing

},
});

test('is at crowdstrike.com', function (assert) {
let service = this.owner.lookup('service:browser/window');

assert.equal(service.location.href, 'https://crowdstrike.com'); // => succeeds
});

test('fetches from crowdstrike.com', async function (assert) {
let service = this.owner.lookup('service:browser/window');
let urlPath = 'crowdstrike.com';

let { url: urlUsed } = await service.fetch(urlPath);

assert.equal(urlUsed, urlPath);
});
});
```

Expand Down
27 changes: 27 additions & 0 deletions tests/unit/services/browser/window-test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,16 @@ module('Service | browser/window', function (hooks) {
assert.strictEqual(service.location, window.location);
assert.strictEqual(service.top.location, window.top?.location);
assert.strictEqual(service.parent.location, window.parent.location);

// we do some bind magic when we're dealing with functions,
// so this setup allows us to keep the same function for comparison
let bindBackup = window.fetch.bind;
window.fetch.bind = () => window.fetch;

assert.strictEqual(service.fetch, window.fetch);

// restore original `bind`
window.fetch.bind = bindBackup;
});
});

Expand All @@ -29,6 +39,23 @@ module('Service | browser/window', function (hooks) {
});

module('Examples', function () {
module('Stubbing fetch', function (hooks) {
setupBrowserFakes(hooks, {
window: {
fetch: async (url: string) => ({ url }),
},
});

test('can intercept fetch', async function (assert) {
let service = this.owner.lookup('service:browser/window');
let fakeUrl = 'https://example.com';
let { url: urlUsed } = await service.fetch(fakeUrl);

assert.equal(urlUsed, fakeUrl);
});
});


module('Stubbing location.href', function (hooks) {
setupBrowserFakes(hooks, {
window: {
Expand Down