Wrapped logic to perform HTTP requests with fetch into an HttpClient class

src/api/services/ShlinkApiClient.ts

@@ -20,7 +20,7 @@ import {
 import { orderToString } from '../../utils/helpers/ordering';
 import { isRegularNotFound, parseApiError } from '../utils';
 import { stringifyQuery } from '../../utils/helpers/query';
-import { JsonFetch } from '../../utils/types';
+import { HttpClient } from '../../common/services/HttpClient';
 
 const buildShlinkBaseUrl = (url: string, version: 2 | 3) => `${url}/rest/v${version}`;
 const rejectNilProps = reject(isNil);
@@ -34,7 +34,7 @@ export class ShlinkApiClient {
   private apiVersion: 2 | 3;
 
   public constructor(
-    private readonly fetch: JsonFetch,
+    private readonly httpClient: HttpClient,
     private readonly baseUrl: string,
     private readonly apiKey: string,
   ) {
@@ -119,11 +119,14 @@ export class ShlinkApiClient {
     const normalizedQuery = stringifyQuery(rejectNilProps(query));
     const stringifiedQuery = isEmpty(normalizedQuery) ? '' : `?${normalizedQuery}`;
 
-    return this.fetch<T>(`${buildShlinkBaseUrl(this.baseUrl, this.apiVersion)}${url}${stringifiedQuery}`, {
+    return this.httpClient.fetchJson<T>(
-      method,
+      `${buildShlinkBaseUrl(this.baseUrl, this.apiVersion)}${url}${stringifiedQuery}`,
-      body: body && JSON.stringify(body),
+      {
-      headers: { 'X-Api-Key': this.apiKey },
+        method,
-    }).catch((e: unknown) => {
+        body: body && JSON.stringify(body),
+        headers: { 'X-Api-Key': this.apiKey },
+      },
+    ).catch((e: unknown) => {
       if (!isRegularNotFound(parseApiError(e))) {
         throw e;
       }

src/api/services/ShlinkApiClientBuilder.ts

@@ -1,7 +1,7 @@
 import { hasServerData, ServerWithId } from '../../servers/data';
 import { GetState } from '../../container/types';
 import { ShlinkApiClient } from './ShlinkApiClient';
-import { JsonFetch } from '../../utils/types';
+import { HttpClient } from '../../common/services/HttpClient';
 
 const apiClients: Record<string, ShlinkApiClient> = {};
 
@@ -16,14 +16,14 @@ const getSelectedServerFromState = (getState: GetState): ServerWithId => {
   return selectedServer;
 };
 
-export const buildShlinkApiClient = (fetch: JsonFetch) => (getStateOrSelectedServer: GetState | ServerWithId) => {
+export const buildShlinkApiClient = (httpClient: HttpClient) => (getStateOrSelectedServer: GetState | ServerWithId) => {
   const { url, apiKey } = isGetState(getStateOrSelectedServer)
     ? getSelectedServerFromState(getStateOrSelectedServer)
     : getStateOrSelectedServer;
   const clientKey = `${url}_${apiKey}`;
 
   if (!apiClients[clientKey]) {
-    apiClients[clientKey] = new ShlinkApiClient(fetch, url, apiKey);
+    apiClients[clientKey] = new ShlinkApiClient(httpClient, url, apiKey);
   }
 
   return apiClients[clientKey];

src/api/services/provideServices.ts

@@ -2,7 +2,7 @@ import Bottle from 'bottlejs';
 import { buildShlinkApiClient } from './ShlinkApiClientBuilder';
 
 const provideServices = (bottle: Bottle) => {
-  bottle.serviceFactory('buildShlinkApiClient', buildShlinkApiClient, 'jsonFetch');
+  bottle.serviceFactory('buildShlinkApiClient', buildShlinkApiClient, 'HttpClient');
 };
 
 export default provideServices;

src/common/services/HttpClient.ts

@@ -0,0 +1,21 @@
+import { Fetch } from '../../utils/types';
+
+export class HttpClient {
+  constructor(private readonly fetch: Fetch) {}
+
+  public fetchJson<T>(url: string, options?: RequestInit): Promise<T> {
+    return this.fetch(url, options).then(async (resp) => {
+      const parsed = await resp.json();
+
+      if (!resp.ok) {
+        throw parsed;
+      }
+
+      return parsed as T;
+    });
+  }
+
+  public fetchBlob(url: string): Promise<Blob> {
+    return this.fetch(url).then((resp) => resp.blob());
+  }
+}

src/common/services/ImageDownloader.ts

@@ -1,11 +1,11 @@
-import { Fetch } from '../../utils/types';
 import { saveUrl } from '../../utils/helpers/files';
+import { HttpClient } from './HttpClient';
 
 export class ImageDownloader {
-  public constructor(private readonly fetch: Fetch, private readonly window: Window) {}
+  public constructor(private readonly httpClient: HttpClient, private readonly window: Window) {}
 
   public async saveImage(imgUrl: string, filename: string): Promise<void> {
-    const data = await this.fetch(imgUrl).then((resp) => resp.blob());
+    const data = await this.httpClient.fetchBlob(imgUrl);
     const url = URL.createObjectURL(data);
 
     saveUrl(this.window, url, filename);

src/common/services/provideServices.ts

@@ -11,16 +11,16 @@ import { withoutSelectedServer } from '../../servers/helpers/withoutSelectedServ
 import { sidebarNotPresent, sidebarPresent } from '../reducers/sidebar';
 import { ImageDownloader } from './ImageDownloader';
 import { ReportExporter } from './ReportExporter';
-import { jsonFetch } from '../../utils/helpers/fetch';
+import { HttpClient } from './HttpClient';
 
 const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   // Services
   bottle.constant('window', (global as any).window);
   bottle.constant('console', global.console);
   bottle.constant('fetch', (global as any).fetch.bind(global));
-  bottle.serviceFactory('jsonFetch', jsonFetch, 'fetch');
 
-  bottle.service('ImageDownloader', ImageDownloader, 'fetch', 'window');
+  bottle.service('HttpClient', HttpClient, 'fetch');
+  bottle.service('ImageDownloader', ImageDownloader, 'HttpClient', 'window');
   bottle.service('ReportExporter', ReportExporter, 'window', 'jsonToCsv');
 
   // Components

src/servers/reducers/remoteServers.ts

@@ -2,14 +2,14 @@ import pack from '../../../package.json';
 import { hasServerData, ServerData } from '../data';
 import { createServers } from './servers';
 import { createAsyncThunk } from '../../utils/helpers/redux';
-import { JsonFetch } from '../../utils/types';
+import { HttpClient } from '../../common/services/HttpClient';
 
 const responseToServersList = (data: any): ServerData[] => (Array.isArray(data) ? data.filter(hasServerData) : []);
 
-export const fetchServers = (fetch: JsonFetch) => createAsyncThunk(
+export const fetchServers = (httpClient: HttpClient) => createAsyncThunk(
   'shlink/remoteServers/fetchServers',
   async (_: void, { dispatch }): Promise<void> => {
-    const resp = await fetch<any>(`${pack.homepage}/servers.json`);
+    const resp = await httpClient.fetchJson<any>(`${pack.homepage}/servers.json`);
     const result = responseToServersList(resp);
 
     dispatch(createServers(result));

src/servers/services/provideServices.ts

@@ -80,7 +80,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   bottle.serviceFactory('deleteServer', () => deleteServer);
   bottle.serviceFactory('editServer', () => editServer);
   bottle.serviceFactory('setAutoConnect', () => setAutoConnect);
-  bottle.serviceFactory('fetchServers', fetchServers, 'jsonFetch');
+  bottle.serviceFactory('fetchServers', fetchServers, 'HttpClient');
 
   bottle.serviceFactory('resetSelectedServer', () => resetSelectedServer);
 

src/utils/helpers/fetch.ts

@@ -1,10 +0,0 @@
-export const jsonFetch = (fetch: typeof window.fetch) => <T>(url: string, options?: RequestInit) => fetch(url, options)
-  .then(async (resp) => {
-    const parsed = await resp.json();
-
-    if (!resp.ok) {
-      throw parsed; // eslint-disable-line @typescript-eslint/no-throw-literal
-    }
-
-    return parsed as T;
-  });

test/api/services/ShlinkApiClient.test.ts

@@ -3,26 +3,27 @@ import { ShlinkApiClient } from '../../../src/api/services/ShlinkApiClient';
 import { OptionalString } from '../../../src/utils/utils';
 import { ShlinkDomain, ShlinkVisits, ShlinkVisitsOverview } from '../../../src/api/types';
 import { ShortUrl, ShortUrlsOrder } from '../../../src/short-urls/data';
-import { JsonFetch } from '../../../src/utils/types';
 import { ErrorTypeV2, ErrorTypeV3 } from '../../../src/api/types/errors';
+import { HttpClient } from '../../../src/common/services/HttpClient';
 
 describe('ShlinkApiClient', () => {
-  const buildFetch = (data: any) => jest.fn().mockResolvedValue(data);
+  const fetchJson = jest.fn().mockResolvedValue({});
-  const buildRejectedFetch = (error: any) => jest.fn().mockRejectedValueOnce(error);
+  const httpClient = Mock.of<HttpClient>({ fetchJson });
-  const buildApiClient = (fetch: JsonFetch) => new ShlinkApiClient(fetch, '', '');
+  const buildApiClient = () => new ShlinkApiClient(httpClient, '', '');
   const shortCodesWithDomainCombinations: [string, OptionalString][] = [
     ['abc123', null],
     ['abc123', undefined],
     ['abc123', 'example.com'],
   ];
 
+  beforeEach(jest.clearAllMocks);
+
   describe('listShortUrls', () => {
     const expectedList = ['foo', 'bar'];
 
     it('properly returns short URLs list', async () => {
-      const { listShortUrls } = buildApiClient(buildFetch({
+      fetchJson.mockResolvedValue({ shortUrls: expectedList });
-        shortUrls: expectedList,
+      const { listShortUrls } = buildApiClient();
-      }));
 
       const actualList = await listShortUrls();
 
@@ -34,12 +35,15 @@ describe('ShlinkApiClient', () => {
       [{ field: 'longUrl', dir: 'ASC' } as ShortUrlsOrder, '?orderBy=longUrl-ASC'],
       [{ field: 'longUrl', dir: undefined } as ShortUrlsOrder, ''],
     ])('parses orderBy in params', async (orderBy, expectedOrderBy) => {
-      const fetch = buildFetch({ data: expectedList });
+      fetchJson.mockResolvedValue({ data: expectedList });
-      const { listShortUrls } = buildApiClient(fetch);
+      const { listShortUrls } = buildApiClient();
 
       await listShortUrls({ orderBy });
 
-      expect(fetch).toHaveBeenCalledWith(expect.stringContaining(`/short-urls${expectedOrderBy}`), expect.anything());
+      expect(fetchJson).toHaveBeenCalledWith(
+        expect.stringContaining(`/short-urls${expectedOrderBy}`),
+        expect.anything(),
+      );
     });
   });
 
@@ -49,19 +53,20 @@ describe('ShlinkApiClient', () => {
     };
 
     it('returns create short URL', async () => {
-      const { createShortUrl } = buildApiClient(buildFetch(shortUrl));
+      fetchJson.mockResolvedValue(shortUrl);
+      const { createShortUrl } = buildApiClient();
       const result = await createShortUrl({ longUrl: '' });
 
       expect(result).toEqual(shortUrl);
     });
 
     it('removes all empty options', async () => {
-      const fetch = buildFetch({ data: shortUrl });
+      fetchJson.mockResolvedValue({ data: shortUrl });
-      const { createShortUrl } = buildApiClient(fetch);
+      const { createShortUrl } = buildApiClient();
 
       await createShortUrl({ longUrl: 'bar', customSlug: undefined, maxVisits: null });
 
-      expect(fetch).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({
+      expect(fetchJson).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({
         body: JSON.stringify({ longUrl: 'bar' }),
       }));
     });
@@ -70,36 +75,37 @@ describe('ShlinkApiClient', () => {
   describe('getShortUrlVisits', () => {
     it('properly returns short URL visits', async () => {
       const expectedVisits = ['foo', 'bar'];
-      const fetch = buildFetch({
+      fetchJson.mockResolvedValue({
         visits: {
           data: expectedVisits,
         },
       });
-      const { getShortUrlVisits } = buildApiClient(fetch);
+      const { getShortUrlVisits } = buildApiClient();
 
       const actualVisits = await getShortUrlVisits('abc123', {});
 
       expect({ data: expectedVisits }).toEqual(actualVisits);
-      expect(fetch).toHaveBeenCalledWith(expect.stringContaining('/short-urls/abc123/visits'), expect.objectContaining({
+      expect(fetchJson).toHaveBeenCalledWith(
-        method: 'GET',
+        expect.stringContaining('/short-urls/abc123/visits'),
-      }));
+        expect.objectContaining({ method: 'GET' }),
+      );
     });
   });
 
   describe('getTagVisits', () => {
     it('properly returns tag visits', async () => {
       const expectedVisits = ['foo', 'bar'];
-      const fetch = buildFetch({
+      fetchJson.mockResolvedValue({
         visits: {
           data: expectedVisits,
         },
       });
-      const { getTagVisits } = buildApiClient(fetch);
+      const { getTagVisits } = buildApiClient();
 
       const actualVisits = await getTagVisits('foo', {});
 
       expect({ data: expectedVisits }).toEqual(actualVisits);
-      expect(fetch).toHaveBeenCalledWith(expect.stringContaining('/tags/foo/visits'), expect.objectContaining({
+      expect(fetchJson).toHaveBeenCalledWith(expect.stringContaining('/tags/foo/visits'), expect.objectContaining({
         method: 'GET',
       }));
     });
@@ -108,33 +114,34 @@ describe('ShlinkApiClient', () => {
   describe('getDomainVisits', () => {
     it('properly returns domain visits', async () => {
       const expectedVisits = ['foo', 'bar'];
-      const fetch = buildFetch({
+      fetchJson.mockResolvedValue({
         visits: {
           data: expectedVisits,
         },
       });
-      const { getDomainVisits } = buildApiClient(fetch);
+      const { getDomainVisits } = buildApiClient();
 
       const actualVisits = await getDomainVisits('foo.com', {});
 
       expect({ data: expectedVisits }).toEqual(actualVisits);
-      expect(fetch).toHaveBeenCalledWith(expect.stringContaining('/domains/foo.com/visits'), expect.objectContaining({
+      expect(fetchJson).toHaveBeenCalledWith(
-        method: 'GET',
+        expect.stringContaining('/domains/foo.com/visits'),
-      }));
+        expect.objectContaining({ method: 'GET' }),
+      );
     });
   });
 
   describe('getShortUrl', () => {
     it.each(shortCodesWithDomainCombinations)('properly returns short URL', async (shortCode, domain) => {
       const expectedShortUrl = { foo: 'bar' };
-      const fetch = buildFetch(expectedShortUrl);
+      fetchJson.mockResolvedValue(expectedShortUrl);
-      const { getShortUrl } = buildApiClient(fetch);
+      const { getShortUrl } = buildApiClient();
       const expectedQuery = domain ? `?domain=${domain}` : '';
 
       const result = await getShortUrl(shortCode, domain);
 
       expect(expectedShortUrl).toEqual(result);
-      expect(fetch).toHaveBeenCalledWith(
+      expect(fetchJson).toHaveBeenCalledWith(
         expect.stringContaining(`/short-urls/${shortCode}${expectedQuery}`),
         expect.objectContaining({ method: 'GET' }),
       );
@@ -148,14 +155,14 @@ describe('ShlinkApiClient', () => {
         validSince: '2025-01-01T10:00:00+01:00',
       };
       const expectedResp = Mock.of<ShortUrl>();
-      const fetch = buildFetch(expectedResp);
+      fetchJson.mockResolvedValue(expectedResp);
-      const { updateShortUrl } = buildApiClient(fetch);
+      const { updateShortUrl } = buildApiClient();
       const expectedQuery = domain ? `?domain=${domain}` : '';
 
       const result = await updateShortUrl(shortCode, domain, meta);
 
       expect(expectedResp).toEqual(result);
-      expect(fetch).toHaveBeenCalledWith(
+      expect(fetchJson).toHaveBeenCalledWith(
         expect.stringContaining(`/short-urls/${shortCode}${expectedQuery}`),
         expect.objectContaining({ method: 'PATCH' }),
       );
@@ -165,29 +172,31 @@ describe('ShlinkApiClient', () => {
   describe('listTags', () => {
     it('properly returns list of tags', async () => {
       const expectedTags = ['foo', 'bar'];
-      const fetch = buildFetch({
+      fetchJson.mockResolvedValue({
         tags: {
           data: expectedTags,
         },
       });
-      const { listTags } = buildApiClient(fetch);
+      const { listTags } = buildApiClient();
 
       const result = await listTags();
 
       expect({ tags: expectedTags }).toEqual(result);
-      expect(fetch).toHaveBeenCalledWith(expect.stringContaining('/tags'), expect.objectContaining({ method: 'GET' }));
+      expect(fetchJson).toHaveBeenCalledWith(
+        expect.stringContaining('/tags'),
+        expect.objectContaining({ method: 'GET' }),
+      );
     });
   });
 
   describe('deleteTags', () => {
     it('properly deletes provided tags', async () => {
       const tags = ['foo', 'bar'];
-      const fetch = buildFetch({});
+      const { deleteTags } = buildApiClient();
-      const { deleteTags } = buildApiClient(fetch);
 
       await deleteTags(tags);
 
-      expect(fetch).toHaveBeenCalledWith(
+      expect(fetchJson).toHaveBeenCalledWith(
         expect.stringContaining(`/tags?${tags.map((tag) => `tags%5B%5D=${tag}`).join('&')}`),
         expect.objectContaining({ method: 'DELETE' }),
       );
@@ -198,12 +207,11 @@ describe('ShlinkApiClient', () => {
     it('properly edits provided tag', async () => {
       const oldName = 'foo';
       const newName = 'bar';
-      const fetch = buildFetch({});
+      const { editTag } = buildApiClient();
-      const { editTag } = buildApiClient(fetch);
 
       await editTag(oldName, newName);
 
-      expect(fetch).toHaveBeenCalledWith(expect.stringContaining('/tags'), expect.objectContaining({
+      expect(fetchJson).toHaveBeenCalledWith(expect.stringContaining('/tags'), expect.objectContaining({
         method: 'PUT',
         body: JSON.stringify({ oldName, newName }),
       }));
@@ -212,13 +220,12 @@ describe('ShlinkApiClient', () => {
 
   describe('deleteShortUrl', () => {
     it.each(shortCodesWithDomainCombinations)('properly deletes provided short URL', async (shortCode, domain) => {
-      const fetch = buildFetch({});
+      const { deleteShortUrl } = buildApiClient();
-      const { deleteShortUrl } = buildApiClient(fetch);
       const expectedQuery = domain ? `?domain=${domain}` : '';
 
       await deleteShortUrl(shortCode, domain);
 
-      expect(fetch).toHaveBeenCalledWith(
+      expect(fetchJson).toHaveBeenCalledWith(
         expect.stringContaining(`/short-urls/${shortCode}${expectedQuery}`),
         expect.objectContaining({ method: 'DELETE' }),
       );
@@ -231,12 +238,12 @@ describe('ShlinkApiClient', () => {
         status: 'pass',
         version: '1.19.0',
       };
-      const fetch = buildFetch(expectedData);
+      fetchJson.mockResolvedValue(expectedData);
-      const { health } = buildApiClient(fetch);
+      const { health } = buildApiClient();
 
       const result = await health();
 
-      expect(fetch).toHaveBeenCalled();
+      expect(fetchJson).toHaveBeenCalled();
       expect(result).toEqual(expectedData);
     });
   });
@@ -247,12 +254,12 @@ describe('ShlinkApiClient', () => {
         token: 'abc.123.def',
         mercureHubUrl: 'http://example.com/.well-known/mercure',
       };
-      const fetch = buildFetch(expectedData);
+      fetchJson.mockResolvedValue(expectedData);
-      const { mercureInfo } = buildApiClient(fetch);
+      const { mercureInfo } = buildApiClient();
 
       const result = await mercureInfo();
 
-      expect(fetch).toHaveBeenCalled();
+      expect(fetchJson).toHaveBeenCalled();
       expect(result).toEqual(expectedData);
     });
   });
@@ -260,12 +267,12 @@ describe('ShlinkApiClient', () => {
   describe('listDomains', () => {
     it('returns domains', async () => {
       const expectedData = { data: [Mock.all<ShlinkDomain>(), Mock.all<ShlinkDomain>()] };
-      const fetch = buildFetch({ domains: expectedData });
+      fetchJson.mockResolvedValue({ domains: expectedData });
-      const { listDomains } = buildApiClient(fetch);
+      const { listDomains } = buildApiClient();
 
       const result = await listDomains();
 
-      expect(fetch).toHaveBeenCalled();
+      expect(fetchJson).toHaveBeenCalled();
       expect(result).toEqual(expectedData);
     });
   });
@@ -273,36 +280,36 @@ describe('ShlinkApiClient', () => {
   describe('getVisitsOverview', () => {
     it('returns visits overview', async () => {
       const expectedData = Mock.all<ShlinkVisitsOverview>();
-      const fetch = buildFetch({ visits: expectedData });
+      fetchJson.mockResolvedValue({ visits: expectedData });
-      const { getVisitsOverview } = buildApiClient(fetch);
+      const { getVisitsOverview } = buildApiClient();
 
       const result = await getVisitsOverview();
 
-      expect(fetch).toHaveBeenCalled();
+      expect(fetchJson).toHaveBeenCalled();
       expect(result).toEqual(expectedData);
     });
   });
 
   describe('getOrphanVisits', () => {
     it('returns orphan visits', async () => {
-      const fetch = buildFetch({ visits: Mock.of<ShlinkVisits>({ data: [] }) });
+      fetchJson.mockResolvedValue({ visits: Mock.of<ShlinkVisits>({ data: [] }) });
-      const { getOrphanVisits } = buildApiClient(fetch);
+      const { getOrphanVisits } = buildApiClient();
 
       const result = await getOrphanVisits();
 
-      expect(fetch).toHaveBeenCalled();
+      expect(fetchJson).toHaveBeenCalled();
       expect(result).toEqual({ data: [] });
     });
   });
 
   describe('getNonOrphanVisits', () => {
     it('returns non-orphan visits', async () => {
-      const fetch = buildFetch({ visits: Mock.of<ShlinkVisits>({ data: [] }) });
+      fetchJson.mockResolvedValue({ visits: Mock.of<ShlinkVisits>({ data: [] }) });
-      const { getNonOrphanVisits } = buildApiClient(fetch);
+      const { getNonOrphanVisits } = buildApiClient();
 
       const result = await getNonOrphanVisits();
 
-      expect(fetch).toHaveBeenCalled();
+      expect(fetchJson).toHaveBeenCalled();
       expect(result).toEqual({ data: [] });
     });
   });
@@ -310,12 +317,12 @@ describe('ShlinkApiClient', () => {
   describe('editDomainRedirects', () => {
     it('returns the redirects', async () => {
       const resp = { baseUrlRedirect: null, regular404Redirect: 'foo', invalidShortUrlRedirect: 'bar' };
-      const fetch = buildFetch(resp);
+      fetchJson.mockResolvedValue(resp);
-      const { editDomainRedirects } = buildApiClient(fetch);
+      const { editDomainRedirects } = buildApiClient();
 
       const result = await editDomainRedirects({ domain: 'foo' });
 
-      expect(fetch).toHaveBeenCalled();
+      expect(fetchJson).toHaveBeenCalled();
       expect(result).toEqual(resp);
     });
 
@@ -324,16 +331,16 @@ describe('ShlinkApiClient', () => {
       [ErrorTypeV2.NOT_FOUND],
       [ErrorTypeV3.NOT_FOUND],
     ])('retries request if API version is not supported', async (type) => {
-      const fetch = buildRejectedFetch({ type, detail: 'detail', title: 'title', status: 404 }).mockImplementation(
+      fetchJson
-        buildFetch({}),
+        .mockRejectedValueOnce({ type, detail: 'detail', title: 'title', status: 404 })
-      );
+        .mockResolvedValue({});
-      const { editDomainRedirects } = buildApiClient(fetch);
+      const { editDomainRedirects } = buildApiClient();
 
       await editDomainRedirects({ domain: 'foo' });
 
-      expect(fetch).toHaveBeenCalledTimes(2);
+      expect(fetchJson).toHaveBeenCalledTimes(2);
-      expect(fetch).toHaveBeenNthCalledWith(1, expect.stringContaining('/v3/'), expect.anything());
+      expect(fetchJson).toHaveBeenNthCalledWith(1, expect.stringContaining('/v3/'), expect.anything());
-      expect(fetch).toHaveBeenNthCalledWith(2, expect.stringContaining('/v2/'), expect.anything());
+      expect(fetchJson).toHaveBeenNthCalledWith(2, expect.stringContaining('/v2/'), expect.anything());
     });
   });
 });

test/api/services/ShlinkApiClientBuilder.test.ts

@@ -2,13 +2,13 @@ import { Mock } from 'ts-mockery';
 import { buildShlinkApiClient } from '../../../src/api/services/ShlinkApiClientBuilder';
 import { ReachableServer, SelectedServer } from '../../../src/servers/data';
 import { ShlinkState } from '../../../src/container/types';
+import { HttpClient } from '../../../src/common/services/HttpClient';
 
 describe('ShlinkApiClientBuilder', () => {
-  const fetch = jest.fn();
   const server = (data: Partial<ReachableServer>) => Mock.of<ReachableServer>(data);
 
   const createBuilder = () => {
-    const builder = buildShlinkApiClient(fetch);
+    const builder = buildShlinkApiClient(Mock.of<HttpClient>());
     return (selectedServer: SelectedServer) => builder(() => Mock.of<ShlinkState>({ selectedServer }));
   };
 
@@ -42,7 +42,7 @@ describe('ShlinkApiClientBuilder', () => {
   it('does not fetch from state when provided param is already selected server', () => {
     const url = 'url';
     const apiKey = 'apiKey';
-    const apiClient = buildShlinkApiClient(fetch)(server({ url, apiKey }));
+    const apiClient = buildShlinkApiClient(Mock.of<HttpClient>())(server({ url, apiKey }));
 
     expect(apiClient['baseUrl']).toEqual(url); // eslint-disable-line @typescript-eslint/dot-notation
     expect(apiClient['apiKey']).toEqual(apiKey); // eslint-disable-line @typescript-eslint/dot-notation

test/common/services/ImageDownloader.test.ts

@@ -1,22 +1,25 @@
+import { Mock } from 'ts-mockery';
 import { ImageDownloader } from '../../../src/common/services/ImageDownloader';
+import { HttpClient } from '../../../src/common/services/HttpClient';
 import { windowMock } from '../../__mocks__/Window.mock';
 
 describe('ImageDownloader', () => {
-  const fetch = jest.fn();
+  const fetchBlob = jest.fn();
+  const httpClient = Mock.of<HttpClient>({ fetchBlob });
   let imageDownloader: ImageDownloader;
 
   beforeEach(() => {
     jest.clearAllMocks();
     (global as any).URL = { createObjectURL: () => '' };
 
-    imageDownloader = new ImageDownloader(fetch, windowMock);
+    imageDownloader = new ImageDownloader(httpClient, windowMock);
   });
 
   it('calls URL with response type blob', async () => {
-    fetch.mockResolvedValue({ blob: () => new Blob() });
+    fetchBlob.mockResolvedValue(new Blob());
 
     await imageDownloader.saveImage('/foo/bar.png', 'my-image.png');
 
-    expect(fetch).toHaveBeenCalledWith('/foo/bar.png');
+    expect(fetchBlob).toHaveBeenCalledWith('/foo/bar.png');
   });
 });

test/servers/reducers/remoteServers.test.ts

@@ -1,12 +1,15 @@
+import { Mock } from 'ts-mockery';
 import { fetchServers } from '../../../src/servers/reducers/remoteServers';
 import { createServers } from '../../../src/servers/reducers/servers';
+import { HttpClient } from '../../../src/common/services/HttpClient';
 
 describe('remoteServersReducer', () => {
   afterEach(jest.clearAllMocks);
 
   describe('fetchServers', () => {
     const dispatch = jest.fn();
-    const fetch = jest.fn();
+    const fetchJson = jest.fn();
+    const httpClient = Mock.of<HttpClient>({ fetchJson });
 
     it.each([
       [
@@ -76,8 +79,8 @@ describe('remoteServersReducer', () => {
       ['<html></html>', {}],
       [{}, {}],
     ])('tries to fetch servers from remote', async (mockedValue, expectedNewServers) => {
-      fetch.mockResolvedValue(mockedValue);
+      fetchJson.mockResolvedValue(mockedValue);
-      const doFetchServers = fetchServers(fetch);
+      const doFetchServers = fetchServers(httpClient);
 
       await doFetchServers()(dispatch, jest.fn(), {});
 
@@ -88,7 +91,7 @@ describe('remoteServersReducer', () => {
       expect(dispatch).toHaveBeenNthCalledWith(3, expect.objectContaining({
         type: doFetchServers.fulfilled.toString(),
       }));
-      expect(fetch).toHaveBeenCalledTimes(1);
+      expect(fetchJson).toHaveBeenCalledTimes(1);
     });
   });
 });