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

@@ -35,6 +35,7 @@ ember install @qonto/ember-lottie
   @speed={{500}}
   @containerId={{this.id}}
   @onDataReady={{this.args.onDataReady}}
+  @fetchOptions={{this.fetchOptions}}
 />
 ```
 
@@ -53,6 +54,7 @@ ember install @qonto/ember-lottie
 | 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                                            |
 | onError       | function | a function that can be used as a callback when fetching the lottie file throws                  |
+| fetchOptions  | object   | any additional params to pass to fetch function (eg: `{credentials: "include"}`)                |
 
 ## TypeScript usage
 

ember-lottie/src/components/lottie.ts

@@ -42,6 +42,7 @@ export interface LottieArgs {
   containerId?: string;
   onDataReady?: () => void;
   onError?: (error: unknown) => void;
+  fetchOptions?: RequestInit;
 }
 
 export interface LottieSignature {
@@ -72,7 +73,10 @@ export default class LottieComponent extends Component<LottieSignature> {
       animationData = this.args.animationData;
     } else if (this.args.path) {
       try {
-        const response = await fetch(this.args.path);
+        const response = await window.fetch(
+          this.args.path,
+          this.args.fetchOptions,
+        );
 
         if (response.status === 404) {
           throw new NotFoundError();

test-app/tests/integration/components/lottie-test.ts

@@ -10,6 +10,7 @@ import * as sinon from 'sinon';
 
 interface TestContext extends TestContextBase {
   onDataReady: () => void;
+  fetchOptions: RequestInit;
 }
 
 const NOOP = (): void => {};
@@ -199,4 +200,36 @@ module('Integration | Component | lottie', function (hooks) {
 
     assert.true(querySelector.calledOnce);
   });
+
+  test('it should pass fetchOptions to fetch method', async function (this: TestContext, assert) {
+    this.fetchOptions = { credentials: 'omit' };
+    const fetch = sinon.spy(window, 'fetch');
+    await render<TestContext>(hbs`
+      <Lottie
+        @path="/data.json"
+        @fetchOptions={{this.fetchOptions}}
+      />
+    `);
+    const fetchArgs = fetch.getCall(0).args;
+    assert.deepEqual(
+      fetchArgs,
+      ['/data.json', { credentials: 'omit' }],
+      'fetch arguments match',
+    );
+  });
+
+  test('it should pass path to fetch method when fetchOptions is undefined', async function (this: TestContext, assert) {
+    const fetch = sinon.spy(window, 'fetch');
+    await render(hbs`
+      <Lottie
+        @path="/data.json"
+      />
+    `);
+    const fetchArgs = fetch.getCall(0).args;
+    assert.deepEqual(
+      fetchArgs,
+      ['/data.json', undefined],
+      'fetch arguments match',
+    );
+  });
 });