From f9cc6be551b753ced4f36fdd505d8db2181c08a7 Mon Sep 17 00:00:00 2001 From: Akil Obilineni Date: Thu, 1 Jun 2023 23:58:07 -0400 Subject: [PATCH 1/7] feat(lottie.ts): adding fetchParams argument to pass params to fetch request Fetch request is failing with 403 when trying to fetch lottie json hosted on another domain that gates the assests behind credentials. https://javascript.info/fetch-crossorigin#credentials --- README.md | 2 ++ ember-lottie/src/components/lottie.ts | 3 ++- .../tests/integration/components/lottie-test.ts | 14 ++++++++++++++ 3 files changed, 18 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 156998b4..9d801c6b 100644 --- a/README.md +++ b/README.md @@ -34,6 +34,7 @@ ember install @qonto/ember-lottie @speed={{500}} @containerId={{this.id}} @onDataReady={{this.args.onDataReady}} + @fetchOptions={{this.fetchOptions}} /> ``` @@ -51,6 +52,7 @@ ember install @qonto/ember-lottie | speed | number | `1` is normal speed | | containerId | string | the dom element id on which to render the animation (mandatory) | | onDataReady | function | a function that triggers the Lottie when you want it | +| fetchOptions | object | any additional params to pass to fetch function (eg: `{credentials: "include"}`) | | ## Contributing diff --git a/ember-lottie/src/components/lottie.ts b/ember-lottie/src/components/lottie.ts index f7a22f1c..12ed99cc 100644 --- a/ember-lottie/src/components/lottie.ts +++ b/ember-lottie/src/components/lottie.ts @@ -27,6 +27,7 @@ export interface LottieArgs { speed?: number; containerId?: string; onDataReady?: () => void; + fetchOptions?: RequestInit; } export default class LottieComponent extends Component { @@ -52,7 +53,7 @@ export default class LottieComponent extends Component { animationData = this.args.animationData; } else if (this.args.path) { try { - const response = await fetch(this.args.path); + const response = await fetch(this.args.path, this.args.fetchOptions); if (response.status === 404) { throw new NotFoundError(); diff --git a/test-app/tests/integration/components/lottie-test.ts b/test-app/tests/integration/components/lottie-test.ts index 08310d81..2aaa802d 100644 --- a/test-app/tests/integration/components/lottie-test.ts +++ b/test-app/tests/integration/components/lottie-test.ts @@ -219,4 +219,18 @@ module('Integration | Component | lottie', function (hooks) { assert.true(querySelector.calledOnce); }); + + test('it should pass fetchOptions to fetch method', async function (this: TestContext, assert: any) { + this.args.fetchOptions = { credentials: 'omit' }; + const fetch = sinon.spy(); + window.fetch = fetch; + await render(hbs` + + `); + + assert.true(fetch.calledOnce); + }); }); From 3ec4da3d6a25927b07fb5f558ffbc075d2f88207 Mon Sep 17 00:00:00 2001 From: Akil Obilineni Date: Mon, 5 Jun 2023 15:10:56 -0400 Subject: [PATCH 2/7] chore(tests): added test cases for fetchOptions Also removed ember-window-mock since its really not needed and all tests pass w/out it --- .../integration/components/lottie-test.ts | 37 ++++++++++++++----- 1 file changed, 28 insertions(+), 9 deletions(-) diff --git a/test-app/tests/integration/components/lottie-test.ts b/test-app/tests/integration/components/lottie-test.ts index 2aaa802d..678c569d 100644 --- a/test-app/tests/integration/components/lottie-test.ts +++ b/test-app/tests/integration/components/lottie-test.ts @@ -5,9 +5,6 @@ import { hbs } from 'ember-cli-htmlbars'; import type { TestContext as TestContextBase } from '@ember/test-helpers'; import type { LottieArgs } from '@qonto/ember-lottie/components/lottie'; - -import window from 'ember-window-mock'; -import { setupWindowMock } from 'ember-window-mock/test-support'; import * as sinon from 'sinon'; interface TestContext extends TestContextBase { @@ -16,11 +13,12 @@ interface TestContext extends TestContextBase { module('Integration | Component | lottie', function (hooks) { setupRenderingTest(hooks); - setupWindowMock(hooks); const originalQuerySelector: ParentNode['querySelector'] = document.querySelector; + const originalFetch: Window['fetch'] = window.fetch; + hooks.beforeEach(function (this: TestContext) { this.args = { onDataReady: (): void => { @@ -31,6 +29,7 @@ module('Integration | Component | lottie', function (hooks) { hooks.afterEach(function () { document.querySelector = originalQuerySelector; + window.fetch = originalFetch; }); test('it renders', async function (this: TestContext, assert) { @@ -220,17 +219,37 @@ module('Integration | Component | lottie', function (hooks) { assert.true(querySelector.calledOnce); }); - test('it should pass fetchOptions to fetch method', async function (this: TestContext, assert: any) { + test('it should pass fetchOptions to fetch method', async function (this: TestContext, assert) { + this.args.path = '/data.json'; this.args.fetchOptions = { credentials: 'omit' }; - const fetch = sinon.spy(); - window.fetch = fetch; + const fetch = sinon.spy(window, 'fetch'); await render(hbs` `); + const fetchArgs = fetch.getCall(0).args; + assert.deepEqual( + fetchArgs, + ['/data.json', { credentials: 'omit' }], + 'fetch arguments match' + ); + }); - assert.true(fetch.calledOnce); + test('it should pass path to fetch method when fetchOptions is undefined', async function (this: TestContext, assert) { + this.args.path = '/data.json'; + const fetch = sinon.spy(window, 'fetch'); + await render(hbs` + + `); + const fetchArgs = fetch.getCall(0).args; + assert.deepEqual( + fetchArgs, + ['/data.json', undefined], + 'fetch arguments match' + ); }); }); From 445eae34251ce2378160f0b81701c434acc16b93 Mon Sep 17 00:00:00 2001 From: Akil Obilineni Date: Thu, 15 Jun 2023 10:29:06 -0400 Subject: [PATCH 3/7] chore(deps): updating ember-window-mock package to latest since a bug causing incompatibility with sinon is fixed --- ember-lottie/package.json | 2 +- pnpm-lock.yaml | 42 ++++++++++++++++++++++----------------- test-app/package.json | 2 +- 3 files changed, 26 insertions(+), 20 deletions(-) diff --git a/ember-lottie/package.json b/ember-lottie/package.json index b3ad7e2c..2be14d30 100644 --- a/ember-lottie/package.json +++ b/ember-lottie/package.json @@ -34,7 +34,7 @@ "@ember/test-waiters": "^3.0.2", "@embroider/addon-shim": "^1.0.0", "@glimmer/component": "^1.1.2", - "ember-window-mock": "^0.8.1", + "ember-window-mock": "^0.9.0", "lottie-web": "^5.9.6" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c6016981..c86d649b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,4 +1,8 @@ -lockfileVersion: '6.0' +lockfileVersion: '6.1' + +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false importers: @@ -35,8 +39,8 @@ importers: specifier: ^3.28.0 || ^4.0.0 version: 4.11.0(@babel/core@7.21.3)(@glimmer/component@1.1.2)(webpack@5.78.0) ember-window-mock: - specifier: ^0.8.1 - version: 0.8.1 + specifier: ^0.9.0 + version: 0.9.0(ember-source@4.11.0) lottie-web: specifier: ^5.9.6 version: 5.11.0 @@ -381,8 +385,8 @@ importers: specifier: ^2.0.0 version: 2.0.0 ember-window-mock: - specifier: ^0.8.1 - version: 0.8.1 + specifier: ^0.9.0 + version: 0.9.0(ember-source@4.11.0) eslint: specifier: ^7.32.0 version: 7.32.0 @@ -2052,7 +2056,7 @@ packages: find-up: 5.0.0 lodash: 4.17.21 resolve: 1.22.2 - semver: 7.4.0 + semver: 7.5.1 transitivePeerDependencies: - supports-color @@ -3561,7 +3565,7 @@ packages: debug: 4.3.4(supports-color@8.1.1) globby: 11.1.0 is-glob: 4.0.3 - semver: 7.4.0 + semver: 7.5.1 tsutils: 3.21.0(typescript@4.9.5) typescript: 4.9.5 transitivePeerDependencies: @@ -3603,7 +3607,7 @@ packages: '@typescript-eslint/typescript-estree': 5.56.0(typescript@4.9.5) eslint: 7.32.0 eslint-scope: 5.1.1 - semver: 7.4.0 + semver: 7.5.1 transitivePeerDependencies: - supports-color - typescript @@ -6475,7 +6479,7 @@ packages: postcss-modules-values: 4.0.0(postcss@8.4.21) postcss-value-parser: 4.2.0 schema-utils: 3.1.1 - semver: 7.4.0 + semver: 7.5.1 webpack: 5.78.0 /css-tree@1.1.3: @@ -7205,7 +7209,7 @@ packages: fs-extra: 9.1.0 resolve: 1.22.2 rsvp: 4.8.5 - semver: 7.4.0 + semver: 7.5.1 stagehand: 1.0.1 walk-sync: 2.2.0 transitivePeerDependencies: @@ -7268,7 +7272,7 @@ packages: engines: {node: 10.* || >= 12.*} dependencies: resolve-package-path: 3.1.0 - semver: 7.4.0 + semver: 7.5.1 silent-error: 1.1.1 transitivePeerDependencies: - supports-color @@ -7783,7 +7787,7 @@ packages: lodash: 4.17.21 package-json: 6.5.0 remote-git-tags: 3.0.0 - semver: 7.4.0 + semver: 7.5.1 transitivePeerDependencies: - encoding dev: true @@ -7807,12 +7811,15 @@ packages: - supports-color dev: true - /ember-window-mock@0.8.1: - resolution: {integrity: sha512-wl9TJuBYFWKsPqDY2gms2jbre1L39AkrPQ9EqbhqHbZI4aEq8u8IZJ0nJaOa7IVr/Jy/kSUXYQGTgvNhz1AzPw==} - engines: {node: 12.* || 14.* || >= 16} + /ember-window-mock@0.9.0(ember-source@4.11.0): + resolution: {integrity: sha512-jFWq8zNFhiKNA0QnJFnhsYW+Y+2FwpvFuAf4s393Il5f1fJJfZoiwjL5l8FMpxV1alf2o8jZ2XqNQWh8rM9YBA==} + engines: {node: 16.* || >= 18} + peerDependencies: + ember-source: ^4.0.0 dependencies: ember-cli-babel: 7.26.11 ember-cli-htmlbars: 6.2.0 + ember-source: 4.11.0(@babel/core@7.21.3)(@glimmer/component@1.1.2)(webpack@5.78.0) transitivePeerDependencies: - supports-color @@ -11948,7 +11955,7 @@ packages: dependencies: hosted-git-info: 6.1.1 proc-log: 3.0.0 - semver: 7.4.0 + semver: 7.5.1 validate-npm-package-name: 5.0.0 dev: true @@ -13695,7 +13702,6 @@ packages: hasBin: true dependencies: lru-cache: 6.0.0 - dev: true /send@0.18.0: resolution: {integrity: sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==} @@ -15006,7 +15012,7 @@ packages: is-yarn-global: 0.3.0 latest-version: 5.1.0 pupa: 2.1.1 - semver: 7.4.0 + semver: 7.5.1 semver-diff: 3.1.1 xdg-basedir: 4.0.0 dev: true diff --git a/test-app/package.json b/test-app/package.json index c0d347a8..564b6f70 100644 --- a/test-app/package.json +++ b/test-app/package.json @@ -97,7 +97,7 @@ "ember-source-channel-url": "^3.0.0", "ember-template-lint": "^5.6.0", "ember-try": "^2.0.0", - "ember-window-mock": "^0.8.1", + "ember-window-mock": "^0.9.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.6.0", "eslint-plugin-ember": "^11.4.7", From bb85198a84716c101449cb9c5bd2499383484bde Mon Sep 17 00:00:00 2001 From: Akil Obilineni Date: Thu, 15 Jun 2023 10:30:35 -0400 Subject: [PATCH 4/7] chore(lottie.ts): using window fetch instead of direct fetch to make it work with ember-window-mock --- ember-lottie/src/components/lottie.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/ember-lottie/src/components/lottie.ts b/ember-lottie/src/components/lottie.ts index 12ed99cc..e4083596 100644 --- a/ember-lottie/src/components/lottie.ts +++ b/ember-lottie/src/components/lottie.ts @@ -53,7 +53,10 @@ export default class LottieComponent extends Component { animationData = this.args.animationData; } else if (this.args.path) { try { - const response = await fetch(this.args.path, this.args.fetchOptions); + const response = await window.fetch( + this.args.path, + this.args.fetchOptions + ); if (response.status === 404) { throw new NotFoundError(); From fbd66078705afa51638244bfc21a1feed0d46ae3 Mon Sep 17 00:00:00 2001 From: Akil Obilineni Date: Thu, 15 Jun 2023 10:31:22 -0400 Subject: [PATCH 5/7] chore(tests): adding back setting up windowmock for tests --- test-app/tests/integration/components/lottie-test.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/test-app/tests/integration/components/lottie-test.ts b/test-app/tests/integration/components/lottie-test.ts index 678c569d..df841291 100644 --- a/test-app/tests/integration/components/lottie-test.ts +++ b/test-app/tests/integration/components/lottie-test.ts @@ -5,6 +5,8 @@ import { hbs } from 'ember-cli-htmlbars'; import type { TestContext as TestContextBase } from '@ember/test-helpers'; import type { LottieArgs } from '@qonto/ember-lottie/components/lottie'; +import window from 'ember-window-mock'; +import { setupWindowMock } from 'ember-window-mock/test-support'; import * as sinon from 'sinon'; interface TestContext extends TestContextBase { @@ -13,12 +15,11 @@ interface TestContext extends TestContextBase { module('Integration | Component | lottie', function (hooks) { setupRenderingTest(hooks); + setupWindowMock(hooks); const originalQuerySelector: ParentNode['querySelector'] = document.querySelector; - const originalFetch: Window['fetch'] = window.fetch; - hooks.beforeEach(function (this: TestContext) { this.args = { onDataReady: (): void => { @@ -29,7 +30,6 @@ module('Integration | Component | lottie', function (hooks) { hooks.afterEach(function () { document.querySelector = originalQuerySelector; - window.fetch = originalFetch; }); test('it renders', async function (this: TestContext, assert) { From 65ba74a9672b1bf1d0fed396a2c27dbb4ff7a1c7 Mon Sep 17 00:00:00 2001 From: Akil Obilineni Date: Fri, 16 Jun 2023 16:06:37 -0400 Subject: [PATCH 6/7] chore(pnpm-lock): regenrate lock file with pnpm v 8.6.2 --- pnpm-lock.yaml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c86d649b..f2126653 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,4 +1,4 @@ -lockfileVersion: '6.1' +lockfileVersion: '6.0' settings: autoInstallPeers: true @@ -2070,7 +2070,7 @@ packages: js-string-escape: 1.0.1 lodash: 4.17.21 resolve-package-path: 4.0.3 - semver: 7.4.0 + semver: 7.5.1 typescript-memoize: 1.1.1 /@embroider/test-setup@2.1.1: @@ -5553,7 +5553,7 @@ packages: caniuse-lite: 1.0.30001477 isbot: 3.6.10 object-path: 0.11.8 - semver: 7.4.0 + semver: 7.5.1 ua-parser-js: 1.0.35 dev: true From c57ca215b4e35258432099c145e802b2ce0eea29 Mon Sep 17 00:00:00 2001 From: Akil Obilineni Date: Thu, 22 Jun 2023 10:01:18 -0400 Subject: [PATCH 7/7] chore(pnpm-lock.yaml): removing the settings block added by pnpm install --- pnpm-lock.yaml | 4 ---- 1 file changed, 4 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 948c6c7f..c1055421 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,9 +1,5 @@ lockfileVersion: '6.0' -settings: - autoInstallPeers: true - excludeLinksFromLockfile: false - importers: .: