indexSpec.js

import { createMerkurWidget } from '@merkur/core';
import {
  httpClientPlugin,
  setDefaultConfig,
  getDefaultTransformers,
  transformHeaders,
} from '../index';

describe('createWidget method with http client plugin', () => {
  let widget = null;
  let Response = null;

  beforeEach(async () => {
    widget = await createMerkurWidget({
      $plugins: [httpClientPlugin],
      name: 'my-widget',
      version: '1.0.0',
      props: {
        param: 1,
        containerSelector: '.container',
      },
      assets: [
        {
          type: 'script',
          source: 'http://www.example.com/static/1.0.0/widget.js',
        },
      ],
    });

    function transformInCache(widget) {
      widget.$in.httpClient.cache = {};
      return {
        async transformResponse(widget, request, response) {
          if (request.cache) {
            widget.$in.httpClient.cache[request.url] = response;
          }

          return [request, response];
        },
      };
    }

    function transformOutCache(widget) {
      widget.$in.httpClient.cache = {};
      return {
        async transformRequest(widget, request, response) {
          if (!widget.$in.httpClient.cache[request.url] || !request.cache) {
            return [request, response];
          }

          return [request, widget.$in.httpClient.cache[request.url]];
        },
      };
    }

    setDefaultConfig(widget, {
      baseUrl: 'http://localhost:4444',
      transformers: [
        transformInCache(widget),
        ...getDefaultTransformers(),
        transformOutCache(widget),
      ],
    });

    Response = {
      json() {
        return Promise.resolve({ message: 'text' });
      },
      ok: true,
      headers: {
        get() {
          return 'application/json';
        },
      },
      status: 200,
    };
  });

  it('should create empty widget', async () => {
    expect(widget).toMatchInlineSnapshot(`
{
  "$dependencies": {
    "AbortController": [Function],
    "fetch": [Function],
  },
  "$external": {},
  "$in": {
    "httpClient": {
      "cache": {},
      "defaultConfig": {
        "baseUrl": "http://localhost:4444",
        "headers": {},
        "method": "GET",
        "query": {},
        "timeout": 15000,
        "transformers": [
          {
            "transformResponse": [Function],
          },
          {
            "transformRequest": [Function],
          },
          {
            "transformRequest": [Function],
            "transformResponse": [Function],
          },
          {
            "transformRequest": [Function],
          },
          {
            "transformRequest": [Function],
            "transformResponse": [Function],
          },
          {
            "transformRequest": [Function],
          },
        ],
      },
    },
  },
  "$plugins": [
    {
      "create": [Function],
      "setup": [Function],
    },
  ],
  "create": [Function],
  "http": {
    "request": [Function],
  },
  "name": "my-widget",
  "setup": [Function],
  "version": "1.0.0",
}
`);
  });

  describe('API request', () => {
    beforeEach(() => {
      widget.$dependencies.fetch = jest.fn(() => Promise.resolve(Response));
    });

    it('should generate absolute url', async () => {
      const { request } = await widget.http.request({
        path: '/path/to/url',
      });

      expect(request.url).toMatchInlineSnapshot(
        `"http://localhost:4444/path/to/url"`,
      );
    });

    it('should always generate valid absolute url', async () => {
      let requests = [
        {
          baseUrl: 'http://base.com/',
          path: '/route/id',
        },
        {
          baseUrl: 'http://base.com',
          path: '/route/id',
        },
        {
          baseUrl: 'http://base.com',
          path: 'route/id',
        },
        {
          baseUrl: 'http://base.com/',
          path: 'route/id',
        },
      ];

      await requests.forEach(async (request) => {
        const { request: newRequest } = await widget.http.request({
          baseUrl: request.baseUrl,
          path: request.path,
        });

        expect(newRequest.url).toEqual('http://base.com/route/id');
      });
    });

    it('should generate absolute url with query', async () => {
      const { request } = await widget.http.request({
        path: '/path?c=d',
      });

      expect(request.url).toMatchInlineSnapshot(
        `"http://localhost:4444/path?c=d"`,
      );
    });

    it('should generate new query string', async () => {
      const { request } = await widget.http.request({
        path: '/path',
        query: { a: 'b' },
      });

      expect(request.url).toMatchInlineSnapshot(
        `"http://localhost:4444/path?a=b"`,
      );
    });

    it('should generate add query string to existing one', async () => {
      const { request } = await widget.http.request({
        path: '/path?c=d',
        query: { a: 'b' },
      });

      expect(request.url).toMatchInlineSnapshot(
        `"http://localhost:4444/path?c=d&a=b"`,
      );
    });

    it('should send body', async () => {
      const { request } = await widget.http.request({
        method: 'POST',
        path: '/path?c=d',
        body: { a: 'b' },
        headers: {
          'Content-Type': 'application/json',
        },
      });

      expect(request.body).toMatchInlineSnapshot(`"{"a":"b"}"`);
    });

    it('should send body with lowercase header content-type', async () => {
      const { request } = await widget.http.request({
        method: 'POST',
        path: '/path?c=d',
        body: { a: 'b' },
        headers: {
          'content-type': 'application/json',
        },
      });

      expect(request.body).toMatchInlineSnapshot(`"{"a":"b"}"`);
    });

    it('should set default Content-Type application/json for POST with body', async () => {
      const { request } = await widget.http.request({
        method: 'POST',
        path: '/path',
        body: { a: 'b' },
        headers: {},
      });

      expect(request.headers.get('Content-Type')).toBe('application/json');
      expect(request.body).toMatchInlineSnapshot(`"{"a":"b"}"`);
    });

    it('should not override explicit Content-Type when body is present', async () => {
      const { request } = await widget.http.request({
        method: 'POST',
        path: '/path',
        body: 'raw text',
        headers: {
          'Content-Type': 'text/plain',
        },
      });

      expect(request.headers.get('Content-Type')).toBe('text/plain');
      expect(request.body).toBe('raw text');
    });

    it('should not set default Content-Type for GET with body', async () => {
      const { request } = await widget.http.request({
        method: 'GET',
        path: '/path',
        body: { a: 'b' },
        headers: {},
      });

      expect(request.headers.get('Content-Type')).toBeNull();
    });

    it('should set default Content-Type when headers is a Headers instance', async () => {
      const { request } = await widget.http.request({
        method: 'POST',
        path: '/path',
        body: { a: 'b' },
        headers: new Headers(),
      });

      expect(request.headers.get('Content-Type')).toBe('application/json');
      expect(request.body).toMatchInlineSnapshot(`"{"a":"b"}"`);
    });

    it('should serialize body when headers is a Headers instance with Content-Type', async () => {
      const { request } = await widget.http.request({
        method: 'POST',
        path: '/path',
        body: { a: 'b' },
        headers: new Headers({ 'Content-Type': 'application/json' }),
      });

      expect(request.headers.get('content-type')).toBe('application/json');
      expect(request.body).toMatchInlineSnapshot(`"{"a":"b"}"`);
    });

    it('should not override Content-Type when headers is a Headers instance with custom type', async () => {
      const { request } = await widget.http.request({
        method: 'POST',
        path: '/path',
        body: 'raw',
        headers: new Headers({ 'Content-Type': 'text/plain' }),
      });

      expect(request.headers.get('content-type')).toBe('text/plain');
      expect(request.body).toBe('raw');
    });

    it('should preserve existing entries when headers is a Headers instance', async () => {
      const { request } = await widget.http.request({
        method: 'POST',
        path: '/path',
        body: { a: 'b' },
        headers: new Headers({
          Authorization: 'Bearer token',
          'X-Request-ID': '42',
        }),
      });

      expect(request.headers.get('Authorization')).toBe('Bearer token');
      expect(request.headers.get('X-Request-ID')).toBe('42');
      expect(request.headers.get('Content-Type')).toBe('application/json');
    });

    it('should timeout request which exceed predefined timeout limit', async () => {
      widget.$dependencies.fetch = jest.fn((url, request) => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            request.signal.aborted ? reject(new Error('Timeout')) : resolve();
          }, 10);
        });
      });

      try {
        await widget.http.request({
          path: '/path',
          timeout: 5,
        });
      } catch (error) {
        expect(error.message).toEqual('Timeout');
        expect(widget.$dependencies.fetch).toHaveBeenCalled();
      }
    });
  });

  describe('API response', () => {
    beforeEach(() => {
      widget.$dependencies.fetch = jest.fn(() => Promise.resolve(Response));
    });

    it('should add parsed body to response', async () => {
      const { response } = await widget.http.request({
        path: '/path',
      });

      expect(response.body).toMatchInlineSnapshot(`
        {
          "message": "text",
        }
      `);
    });

    it('should intercept request and return response from request transformer', async () => {
      const { response } = await widget.http.request({
        path: '/path',
        cache: true,
      });
      const { response: cachedResponse } = await widget.http.request({
        path: '/path',
        cache: true,
      });

      expect(response).toEqual(cachedResponse);
      expect(widget.$dependencies.fetch.mock.calls.length).toEqual(1);
    });

    it('should reject promise for status code greater than 299', async () => {
      widget.$dependencies.fetch = jest.fn(() =>
        Promise.resolve({ ...Response, ...{ ok: false } }),
      );

      try {
        await widget.http.request({
          path: '/path',
          cache: true,
        });
      } catch ({ response, request }) {
        expect(request.url).toMatchInlineSnapshot(
          `"http://localhost:4444/path"`,
        );
        expect(response).toMatchInlineSnapshot(`
          {
            "body": {
              "message": "text",
            },
            "headers": {
              "get": [Function],
            },
            "ok": false,
            "redirected": undefined,
            "status": 200,
            "statusText": undefined,
            "trailers": undefined,
            "type": undefined,
            "url": undefined,
            "useFinalURL": undefined,
          }
        `);
      }
    });
  });

  describe('transformError', () => {
    let errorTransformerSpy;

    beforeEach(() => {
      errorTransformerSpy = jest.fn((widget, error, request) => [
        error,
        request,
      ]);

      setDefaultConfig(widget, {
        transformers: [
          ...getDefaultTransformers(),
          {
            transformError: errorTransformerSpy,
          },
        ],
      });

      widget.$dependencies.fetch = jest.fn(() => Promise.resolve(Response));
    });

    it('should call transformError on fetch network error', async () => {
      const networkError = new Error('Network failure');
      widget.$dependencies.fetch = jest.fn(() => Promise.reject(networkError));

      await expect(widget.http.request({ path: '/path' })).rejects.toThrow(
        'Network failure',
      );

      expect(errorTransformerSpy).toHaveBeenCalledWith(
        widget,
        networkError,
        expect.objectContaining({ url: 'http://localhost:4444/path' }),
      );
    });

    it('should call transformError with the fully transformed request object', async () => {
      const networkError = new Error('fail');
      widget.$dependencies.fetch = jest.fn(() => Promise.reject(networkError));

      await widget.http.request({ path: '/path' }).catch(() => {});

      const [, , requestArg] = errorTransformerSpy.mock.calls[0];
      expect(requestArg.url).toBe('http://localhost:4444/path');
      expect(requestArg.method).toBe('GET');
    });

    it('should still throw after transformError runs', async () => {
      widget.$dependencies.fetch = jest.fn(() =>
        Promise.reject(new Error('boom')),
      );

      await expect(widget.http.request({ path: '/path' })).rejects.toThrow(
        'boom',
      );
    });

    it('should enrich thrown error with cause, request and response', async () => {
      const networkError = new Error('Network failure');
      widget.$dependencies.fetch = jest.fn(() => Promise.reject(networkError));

      const thrownError = await widget.http
        .request({ path: '/path' })
        .catch((e) => e);

      expect(thrownError.cause).toEqual({
        request: expect.objectContaining({ url: 'http://localhost:4444/path' }),
        response: null,
      });
      expect(thrownError.request).toEqual(
        expect.objectContaining({ url: 'http://localhost:4444/path' }),
      );
      expect(thrownError.response).toBeNull();
    });

    it('should not call transformError on successful fetch', async () => {
      await widget.http.request({ path: '/path' });

      expect(errorTransformerSpy).not.toHaveBeenCalled();
    });

    it('should not call transformError when response is already set by transformRequest', async () => {
      setDefaultConfig(widget, {
        transformers: [
          {
            transformRequest(widget, request) {
              return [request, Response];
            },
            transformError: errorTransformerSpy,
          },
        ],
      });

      widget.$dependencies.fetch = jest.fn(() =>
        Promise.reject(new Error('never')),
      );

      await widget.http.request({ path: '/path' });

      expect(errorTransformerSpy).not.toHaveBeenCalled();
      expect(widget.$dependencies.fetch).not.toHaveBeenCalled();
    });
  });
});

describe('transformHeaders', () => {
  const transformer = transformHeaders();

  it('should normalize a plain object to a Headers instance', async () => {
    const [result] = await transformer.transformRequest(
      null,
      { headers: { Authorization: 'Bearer token' } },
      null,
    );

    expect(result.headers).toBeInstanceOf(Headers);
    expect(result.headers.get('Authorization')).toBe('Bearer token');
  });

  it('should normalize a Headers instance to a new Headers instance', async () => {
    const input = new Headers({ 'X-Custom': 'value' });
    const [result] = await transformer.transformRequest(
      null,
      { headers: input },
      null,
    );

    expect(result.headers).toBeInstanceOf(Headers);
    expect(result.headers.get('X-Custom')).toBe('value');
  });

  it('should normalize null headers to an empty Headers instance', async () => {
    const [result] = await transformer.transformRequest(
      null,
      { headers: null },
      null,
    );

    expect(result.headers).toBeInstanceOf(Headers);
    expect([...result.headers.entries()]).toHaveLength(0);
  });

  it('should preserve the response unchanged', async () => {
    const response = { ok: true };
    const [, resultResponse] = await transformer.transformRequest(
      null,
      { headers: {} },
      response,
    );

    expect(resultResponse).toBe(response);
  });
});