fix(lottie.ts): passing credentials include param to fetch request

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
 

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<LottieArgs> {
@@ -52,7 +53,7 @@ export default class LottieComponent extends Component<LottieArgs> {
       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();

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) {
@@ -219,4 +218,38 @@ module('Integration | Component | lottie', function (hooks) {
 
     assert.true(querySelector.calledOnce);
   });
+
+  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');
+    await render(hbs`
+      <Lottie
+        @path={{this.args.path}}
+        @fetchOptions={{this.args.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) {
+    this.args.path = '/data.json';
+    const fetch = sinon.spy(window, 'fetch');
+    await render(hbs`
+      <Lottie
+        @path={{this.args.path}}
+      />
+    `);
+    const fetchArgs = fetch.getCall(0).args;
+    assert.deepEqual(
+      fetchArgs,
+      ['/data.json', undefined],
+      'fetch arguments match'
+    );
+  });
 });