Migrated ShlinkApiClient from axios to fetch

src/api/services/ShlinkApiClient.ts

@@ -20,6 +20,7 @@ import {
 import { orderToString } from '../../utils/helpers/ordering';
 import { isRegularNotFound, parseApiError } from '../utils';
 import { stringifyQuery } from '../../utils/helpers/query';
+import { Fetch } from '../../utils/types';
 
 const buildShlinkBaseUrl = (url: string, version: 2 | 3) => `${url}/rest/v${version}`;
 const rejectNilProps = reject(isNil);
@@ -33,7 +34,7 @@ export class ShlinkApiClient {
   private apiVersion: 2 | 3;
 
   public constructor(
-    private readonly fetch: typeof window.fetch,
+    private readonly fetch: Fetch,
     private readonly baseUrl: string,
     private readonly apiKey: string,
   ) {

src/api/services/ShlinkApiClientBuilder.ts

@@ -1,6 +1,7 @@
 import { hasServerData, ServerWithId } from '../../servers/data';
 import { GetState } from '../../container/types';
 import { ShlinkApiClient } from './ShlinkApiClient';
+import { Fetch } from '../../utils/types';
 
 const apiClients: Record<string, ShlinkApiClient> = {};
 
@@ -15,7 +16,7 @@ const getSelectedServerFromState = (getState: GetState): ServerWithId => {
   return selectedServer;
 };
 
-export const buildShlinkApiClient = (fetch: typeof window.fetch) => (getStateOrSelectedServer: GetState | ServerWithId) => {
+export const buildShlinkApiClient = (fetch: Fetch) => (getStateOrSelectedServer: GetState | ServerWithId) => {
   const { url, apiKey } = isGetState(getStateOrSelectedServer)
     ? getSelectedServerFromState(getStateOrSelectedServer)
     : getStateOrSelectedServer;

src/utils/types.ts

@@ -1 +1,3 @@
 export type MediaMatcher = (query: string) => MediaQueryList;
+
+export type Fetch = typeof window.fetch;

test/api/services/ShlinkApiClient.test.ts

@@ -1,16 +1,17 @@
-import { AxiosError, AxiosInstance, AxiosRequestConfig } from 'axios';
 import { Mock } from 'ts-mockery';
 import { ShlinkApiClient } from '../../../src/api/services/ShlinkApiClient';
 import { OptionalString } from '../../../src/utils/utils';
-import { ShlinkDomain, ShlinkVisitsOverview } from '../../../src/api/types';
+import { ShlinkDomain, ShlinkVisits, ShlinkVisitsOverview } from '../../../src/api/types';
 import { ShortUrl, ShortUrlsOrder } from '../../../src/short-urls/data';
-import { Visit } from '../../../src/visits/types';
+import { Fetch } from '../../../src/utils/types';
 
 describe('ShlinkApiClient', () => {
-  const createAxios = (data: AxiosRequestConfig) => (async () => Promise.resolve(data)) as unknown as AxiosInstance;
+  const buildFetch = (data: any) => jest.fn().mockResolvedValue({ json: () => Promise.resolve(data), ok: true });
-  const createAxiosMock = (data: AxiosRequestConfig = {}) => jest.fn(createAxios(data)) as unknown as AxiosInstance;
+  const buildRejectedFetch = (error: any) => jest.fn().mockResolvedValueOnce(
-  const createApiClient = (data: AxiosRequestConfig) => new ShlinkApiClient(createAxios(data), '', '');
+    { json: () => Promise.resolve(error), ok: false },
-  const shortCodesWithDomainCombinations: [ string, OptionalString ][] = [
+  );
+  const buildApiClient = (fetch: Fetch) => new ShlinkApiClient(fetch, '', '');
+  const shortCodesWithDomainCombinations: [string, OptionalString][] = [
     ['abc123', null],
     ['abc123', undefined],
     ['abc123', 'example.com'],
@@ -20,11 +21,9 @@ describe('ShlinkApiClient', () => {
     const expectedList = ['foo', 'bar'];
 
     it('properly returns short URLs list', async () => {
-      const { listShortUrls } = createApiClient({
+      const { listShortUrls } = buildApiClient(buildFetch({
-        data: {
+        shortUrls: expectedList,
-          shortUrls: expectedList,
+      }));
-        },
-      });
 
       const actualList = await listShortUrls();
 
@@ -32,20 +31,16 @@ describe('ShlinkApiClient', () => {
     });
 
     it.each([
-      [{ field: 'visits', dir: 'DESC' } as ShortUrlsOrder, 'visits-DESC'],
+      [{ field: 'visits', dir: 'DESC' } as ShortUrlsOrder, '?orderBy=visits-DESC'],
-      [{ field: 'longUrl', dir: 'ASC' } as ShortUrlsOrder, 'longUrl-ASC'],
+      [{ field: 'longUrl', dir: 'ASC' } as ShortUrlsOrder, '?orderBy=longUrl-ASC'],
-      [{ field: 'longUrl', dir: undefined } as ShortUrlsOrder, undefined],
+      [{ field: 'longUrl', dir: undefined } as ShortUrlsOrder, ''],
     ])('parses orderBy in params', async (orderBy, expectedOrderBy) => {
-      const axiosSpy = createAxiosMock({
+      const fetch = buildFetch({ data: expectedList });
-        data: expectedList,
+      const { listShortUrls } = buildApiClient(fetch);
-      });
-      const { listShortUrls } = new ShlinkApiClient(axiosSpy, '', '');
 
       await listShortUrls({ orderBy });
 
-      expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
+      expect(fetch).toHaveBeenCalledWith(expect.stringContaining(`/short-urls${expectedOrderBy}`), expect.anything());
-        params: { orderBy: expectedOrderBy },
-      }));
     });
   });
 
@@ -55,39 +50,38 @@ describe('ShlinkApiClient', () => {
     };
 
     it('returns create short URL', async () => {
-      const { createShortUrl } = createApiClient({ data: shortUrl });
+      const { createShortUrl } = buildApiClient(buildFetch(shortUrl));
       const result = await createShortUrl({ longUrl: '' });
 
       expect(result).toEqual(shortUrl);
     });
 
     it('removes all empty options', async () => {
-      const axiosSpy = createAxiosMock({ data: shortUrl });
+      const fetch = buildFetch({ data: shortUrl });
-      const { createShortUrl } = new ShlinkApiClient(axiosSpy, '', '');
+      const { createShortUrl } = buildApiClient(fetch);
 
       await createShortUrl({ longUrl: 'bar', customSlug: undefined, maxVisits: null });
 
-      expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({ data: { longUrl: 'bar' } }));
+      expect(fetch).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({
+        body: JSON.stringify({ longUrl: 'bar' }),
+      }));
     });
   });
 
   describe('getShortUrlVisits', () => {
     it('properly returns short URL visits', async () => {
       const expectedVisits = ['foo', 'bar'];
-      const axiosSpy = createAxiosMock({
+      const fetch = buildFetch({
-        data: {
+        visits: {
-          visits: {
+          data: expectedVisits,
-            data: expectedVisits,
-          },
         },
       });
-      const { getShortUrlVisits } = new ShlinkApiClient(axiosSpy, '', '');
+      const { getShortUrlVisits } = buildApiClient(fetch);
 
       const actualVisits = await getShortUrlVisits('abc123', {});
 
       expect({ data: expectedVisits }).toEqual(actualVisits);
-      expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
+      expect(fetch).toHaveBeenCalledWith(expect.stringContaining('/short-urls/abc123/visits'), expect.objectContaining({
-        url: expect.stringContaining('/short-urls/abc123/visits'),
         method: 'GET',
       }));
     });
@@ -96,20 +90,17 @@ describe('ShlinkApiClient', () => {
   describe('getTagVisits', () => {
     it('properly returns tag visits', async () => {
       const expectedVisits = ['foo', 'bar'];
-      const axiosSpy = createAxiosMock({
+      const fetch = buildFetch({
-        data: {
+        visits: {
-          visits: {
+          data: expectedVisits,
-            data: expectedVisits,
-          },
         },
       });
-      const { getTagVisits } = new ShlinkApiClient(axiosSpy, '', '');
+      const { getTagVisits } = buildApiClient(fetch);
 
       const actualVisits = await getTagVisits('foo', {});
 
       expect({ data: expectedVisits }).toEqual(actualVisits);
-      expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
+      expect(fetch).toHaveBeenCalledWith(expect.stringContaining('/tags/foo/visits'), expect.objectContaining({
-        url: expect.stringContaining('/tags/foo/visits'),
         method: 'GET',
       }));
     });
@@ -118,20 +109,17 @@ describe('ShlinkApiClient', () => {
   describe('getDomainVisits', () => {
     it('properly returns domain visits', async () => {
       const expectedVisits = ['foo', 'bar'];
-      const axiosSpy = createAxiosMock({
+      const fetch = buildFetch({
-        data: {
+        visits: {
-          visits: {
+          data: expectedVisits,
-            data: expectedVisits,
-          },
         },
       });
-      const { getDomainVisits } = new ShlinkApiClient(axiosSpy, '', '');
+      const { getDomainVisits } = buildApiClient(fetch);
 
       const actualVisits = await getDomainVisits('foo.com', {});
 
       expect({ data: expectedVisits }).toEqual(actualVisits);
-      expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
+      expect(fetch).toHaveBeenCalledWith(expect.stringContaining('/domains/foo.com/visits'), expect.objectContaining({
-        url: expect.stringContaining('/domains/foo.com/visits'),
         method: 'GET',
       }));
     });
@@ -140,19 +128,17 @@ describe('ShlinkApiClient', () => {
   describe('getShortUrl', () => {
     it.each(shortCodesWithDomainCombinations)('properly returns short URL', async (shortCode, domain) => {
       const expectedShortUrl = { foo: 'bar' };
-      const axiosSpy = createAxiosMock({
+      const fetch = buildFetch(expectedShortUrl);
-        data: expectedShortUrl,
+      const { getShortUrl } = buildApiClient(fetch);
-      });
+      const expectedQuery = domain ? `?domain=${domain}` : '';
-      const { getShortUrl } = new ShlinkApiClient(axiosSpy, '', '');
 
       const result = await getShortUrl(shortCode, domain);
 
       expect(expectedShortUrl).toEqual(result);
-      expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
+      expect(fetch).toHaveBeenCalledWith(
-        url: expect.stringContaining(`/short-urls/${shortCode}`),
+        expect.stringContaining(`/short-urls/${shortCode}${expectedQuery}`),
-        method: 'GET',
+        expect.objectContaining({ method: 'GET' }),
-        params: domain ? { domain } : {},
+      );
-      }));
     });
   });
 
@@ -163,53 +149,49 @@ describe('ShlinkApiClient', () => {
         validSince: '2025-01-01T10:00:00+01:00',
       };
       const expectedResp = Mock.of<ShortUrl>();
-      const axiosSpy = createAxiosMock({ data: expectedResp });
+      const fetch = buildFetch(expectedResp);
-      const { updateShortUrl } = new ShlinkApiClient(axiosSpy, '', '');
+      const { updateShortUrl } = buildApiClient(fetch);
+      const expectedQuery = domain ? `?domain=${domain}` : '';
 
       const result = await updateShortUrl(shortCode, domain, meta);
 
       expect(expectedResp).toEqual(result);
-      expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
+      expect(fetch).toHaveBeenCalledWith(
-        url: expect.stringContaining(`/short-urls/${shortCode}`),
+        expect.stringContaining(`/short-urls/${shortCode}${expectedQuery}`),
-        method: 'PATCH',
+        expect.objectContaining({ method: 'PATCH' }),
-        params: domain ? { domain } : {},
+      );
-      }));
     });
   });
 
   describe('listTags', () => {
     it('properly returns list of tags', async () => {
       const expectedTags = ['foo', 'bar'];
-      const axiosSpy = createAxiosMock({
+      const fetch = buildFetch({
-        data: {
+        tags: {
-          tags: { data: expectedTags },
+          data: expectedTags,
         },
       });
-      const { listTags } = new ShlinkApiClient(axiosSpy, '', '');
+      const { listTags } = buildApiClient(fetch);
 
       const result = await listTags();
 
       expect({ tags: expectedTags }).toEqual(result);
-      expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
+      expect(fetch).toHaveBeenCalledWith(expect.stringContaining('/tags'), expect.objectContaining({ method: 'GET' }));
-        url: expect.stringContaining('/tags'),
-        method: 'GET',
-      }));
     });
   });
 
   describe('deleteTags', () => {
     it('properly deletes provided tags', async () => {
       const tags = ['foo', 'bar'];
-      const axiosSpy = createAxiosMock();
+      const fetch = buildFetch({});
-      const { deleteTags } = new ShlinkApiClient(axiosSpy, '', '');
+      const { deleteTags } = buildApiClient(fetch);
 
       await deleteTags(tags);
 
-      expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
+      expect(fetch).toHaveBeenCalledWith(
-        url: expect.stringContaining('/tags'),
+        expect.stringContaining(`/tags?${tags.map((tag) => `tags%5B%5D=${tag}`).join('&')}`),
-        method: 'DELETE',
+        expect.objectContaining({ method: 'DELETE' }),
-        params: { tags },
+      );
-      }));
     });
   });
 
@@ -217,31 +199,30 @@ describe('ShlinkApiClient', () => {
     it('properly edits provided tag', async () => {
       const oldName = 'foo';
       const newName = 'bar';
-      const axiosSpy = createAxiosMock();
+      const fetch = buildFetch({});
-      const { editTag } = new ShlinkApiClient(axiosSpy, '', '');
+      const { editTag } = buildApiClient(fetch);
 
       await editTag(oldName, newName);
 
-      expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
+      expect(fetch).toHaveBeenCalledWith(expect.stringContaining('/tags'), expect.objectContaining({
-        url: expect.stringContaining('/tags'),
         method: 'PUT',
-        data: { oldName, newName },
+        body: JSON.stringify({ oldName, newName }),
       }));
     });
   });
 
   describe('deleteShortUrl', () => {
     it.each(shortCodesWithDomainCombinations)('properly deletes provided short URL', async (shortCode, domain) => {
-      const axiosSpy = createAxiosMock({});
+      const fetch = buildFetch({});
-      const { deleteShortUrl } = new ShlinkApiClient(axiosSpy, '', '');
+      const { deleteShortUrl } = buildApiClient(fetch);
+      const expectedQuery = domain ? `?domain=${domain}` : '';
 
       await deleteShortUrl(shortCode, domain);
 
-      expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
+      expect(fetch).toHaveBeenCalledWith(
-        url: expect.stringContaining(`/short-urls/${shortCode}`),
+        expect.stringContaining(`/short-urls/${shortCode}${expectedQuery}`),
-        method: 'DELETE',
+        expect.objectContaining({ method: 'DELETE' }),
-        params: domain ? { domain } : {},
+      );
-      }));
     });
   });
 
@@ -251,12 +232,12 @@ describe('ShlinkApiClient', () => {
         status: 'pass',
         version: '1.19.0',
       };
-      const axiosSpy = createAxiosMock({ data: expectedData });
+      const fetch = buildFetch(expectedData);
-      const { health } = new ShlinkApiClient(axiosSpy, '', '');
+      const { health } = buildApiClient(fetch);
 
       const result = await health();
 
-      expect(axiosSpy).toHaveBeenCalled();
+      expect(fetch).toHaveBeenCalled();
       expect(result).toEqual(expectedData);
     });
   });
@@ -267,12 +248,12 @@ describe('ShlinkApiClient', () => {
         token: 'abc.123.def',
         mercureHubUrl: 'http://example.com/.well-known/mercure',
       };
-      const axiosSpy = createAxiosMock({ data: expectedData });
+      const fetch = buildFetch(expectedData);
-      const { mercureInfo } = new ShlinkApiClient(axiosSpy, '', '');
+      const { mercureInfo } = buildApiClient(fetch);
 
       const result = await mercureInfo();
 
-      expect(axiosSpy).toHaveBeenCalled();
+      expect(fetch).toHaveBeenCalled();
       expect(result).toEqual(expectedData);
     });
   });
@@ -280,13 +261,12 @@ describe('ShlinkApiClient', () => {
   describe('listDomains', () => {
     it('returns domains', async () => {
       const expectedData = { data: [Mock.all<ShlinkDomain>(), Mock.all<ShlinkDomain>()] };
-      const resp = { domains: expectedData };
+      const fetch = buildFetch({ domains: expectedData });
-      const axiosSpy = createAxiosMock({ data: resp });
+      const { listDomains } = buildApiClient(fetch);
-      const { listDomains } = new ShlinkApiClient(axiosSpy, '', '');
 
       const result = await listDomains();
 
-      expect(axiosSpy).toHaveBeenCalled();
+      expect(fetch).toHaveBeenCalled();
       expect(result).toEqual(expectedData);
     });
   });
@@ -294,76 +274,61 @@ describe('ShlinkApiClient', () => {
   describe('getVisitsOverview', () => {
     it('returns visits overview', async () => {
       const expectedData = Mock.all<ShlinkVisitsOverview>();
-      const resp = { visits: expectedData };
+      const fetch = buildFetch({ visits: expectedData });
-      const axiosSpy = createAxiosMock({ data: resp });
+      const { getVisitsOverview } = buildApiClient(fetch);
-      const { getVisitsOverview } = new ShlinkApiClient(axiosSpy, '', '');
 
       const result = await getVisitsOverview();
 
-      expect(axiosSpy).toHaveBeenCalled();
+      expect(fetch).toHaveBeenCalled();
       expect(result).toEqual(expectedData);
     });
   });
 
   describe('getOrphanVisits', () => {
     it('returns orphan visits', async () => {
-      const expectedData: Visit[] = [];
+      const fetch = buildFetch({ visits: Mock.of<ShlinkVisits>({ data: [] }) });
-      const resp = { visits: expectedData };
+      const { getOrphanVisits } = buildApiClient(fetch);
-      const axiosSpy = createAxiosMock({ data: resp });
-      const { getOrphanVisits } = new ShlinkApiClient(axiosSpy, '', '');
 
       const result = await getOrphanVisits();
 
-      expect(axiosSpy).toHaveBeenCalled();
+      expect(fetch).toHaveBeenCalled();
-      expect(result).toEqual(expectedData);
+      expect(result).toEqual({ data: [] });
     });
   });
 
   describe('getNonOrphanVisits', () => {
     it('returns non-orphan visits', async () => {
-      const expectedData: Visit[] = [];
+      const fetch = buildFetch({ visits: Mock.of<ShlinkVisits>({ data: [] }) });
-      const resp = { visits: expectedData };
+      const { getNonOrphanVisits } = buildApiClient(fetch);
-      const axiosSpy = createAxiosMock({ data: resp });
-      const { getNonOrphanVisits } = new ShlinkApiClient(axiosSpy, '', '');
 
       const result = await getNonOrphanVisits();
 
-      expect(axiosSpy).toHaveBeenCalled();
+      expect(fetch).toHaveBeenCalled();
-      expect(result).toEqual(expectedData);
+      expect(result).toEqual({ data: [] });
     });
   });
 
   describe('editDomainRedirects', () => {
     it('returns the redirects', async () => {
       const resp = { baseUrlRedirect: null, regular404Redirect: 'foo', invalidShortUrlRedirect: 'bar' };
-      const axiosSpy = createAxiosMock({ data: resp });
+      const fetch = buildFetch(resp);
-      const { editDomainRedirects } = new ShlinkApiClient(axiosSpy, '', '');
+      const { editDomainRedirects } = buildApiClient(fetch);
 
       const result = await editDomainRedirects({ domain: 'foo' });
 
-      expect(axiosSpy).toHaveBeenCalled();
+      expect(fetch).toHaveBeenCalled();
       expect(result).toEqual(resp);
     });
 
     it('retries request if API version is not supported', async () => {
-      const axiosSpy = jest.fn()
+      const fetch = buildRejectedFetch({ type: 'NOT_FOUND', status: 404 }).mockImplementation(buildFetch({}));
-        .mockImplementationOnce(() => Promise.reject(Mock.of<AxiosError>({
+      const { editDomainRedirects } = buildApiClient(fetch);
-          response: {
-            data: { type: 'NOT_FOUND', status: 404 },
-          },
-        })))
-        .mockImplementation(createAxios({})) as unknown as AxiosInstance;
-      const { editDomainRedirects } = new ShlinkApiClient(axiosSpy, '', '');
 
       await editDomainRedirects({ domain: 'foo' });
 
-      expect(axiosSpy).toHaveBeenCalledTimes(2);
+      expect(fetch).toHaveBeenCalledTimes(2);
-      expect(axiosSpy).toHaveBeenNthCalledWith(1, expect.objectContaining({
+      expect(fetch).toHaveBeenNthCalledWith(1, expect.stringContaining('/v3/'), expect.anything());
-        url: expect.stringContaining('/v3/'),
+      expect(fetch).toHaveBeenNthCalledWith(2, expect.stringContaining('/v2/'), expect.anything());
-      }));
-      expect(axiosSpy).toHaveBeenNthCalledWith(2, expect.objectContaining({
-        url: expect.stringContaining('/v2/'),
-      }));
     });
   });
 });

test/api/services/ShlinkApiClientBuilder.test.ts

@@ -1,16 +1,14 @@
 import { Mock } from 'ts-mockery';
-import { AxiosInstance } from 'axios';
 import { buildShlinkApiClient } from '../../../src/api/services/ShlinkApiClientBuilder';
 import { ReachableServer, SelectedServer } from '../../../src/servers/data';
 import { ShlinkState } from '../../../src/container/types';
 
 describe('ShlinkApiClientBuilder', () => {
-  const axiosMock = Mock.all<AxiosInstance>();
+  const fetch = jest.fn();
   const server = (data: Partial<ReachableServer>) => Mock.of<ReachableServer>(data);
 
   const createBuilder = () => {
-    const builder = buildShlinkApiClient(axiosMock);
+    const builder = buildShlinkApiClient(fetch);
-
     return (selectedServer: SelectedServer) => builder(() => Mock.of<ShlinkState>({ selectedServer }));
   };
 
@@ -44,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(axiosMock)(server({ url, apiKey }));
+    const apiClient = buildShlinkApiClient(fetch)(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