debian-mirror-gitlab/spec/frontend/lib/utils/common_utils_spec.js

import * as commonUtils from '~/lib/utils/common_utils';
import setWindowLocation from 'helpers/set_window_location_helper';

describe('common_utils', () => {
  describe('getPagePath', () => {
    const { getPagePath } = commonUtils;

    let originalBody;

    beforeEach(() => {
      originalBody = document.body;
      document.body = document.createElement('body');
    });

    afterEach(() => {
      document.body = originalBody;
    });

    it('returns an empty path if none is defined', () => {
      expect(getPagePath()).toBe('');
      expect(getPagePath(0)).toBe('');
    });

    describe('returns a path', () => {
      const mockSection = 'my_section';
      const mockSubSection = 'my_sub_section';
      const mockPage = 'my_page';

      it('returns a page', () => {
        document.body.dataset.page = mockPage;

        expect(getPagePath()).toBe(mockPage);
        expect(getPagePath(0)).toBe(mockPage);
      });

      it('returns a section and page', () => {
        document.body.dataset.page = `${mockSection}:${mockPage}`;

        expect(getPagePath()).toBe(mockSection);
        expect(getPagePath(0)).toBe(mockSection);
        expect(getPagePath(1)).toBe(mockPage);
      });

      it('returns a section and subsection', () => {
        document.body.dataset.page = `${mockSection}:${mockSubSection}:${mockPage}`;

        expect(getPagePath()).toBe(mockSection);
        expect(getPagePath(0)).toBe(mockSection);
        expect(getPagePath(1)).toBe(mockSubSection);
        expect(getPagePath(2)).toBe(mockPage);
      });
    });
  });

  describe('handleLocationHash', () => {
    beforeEach(() => {
      jest.spyOn(window.document, 'getElementById');
    });

    afterEach(() => {
      window.history.pushState({}, null, '');
    });

    function expectGetElementIdToHaveBeenCalledWith(elementId) {
      expect(window.document.getElementById).toHaveBeenCalledWith(elementId);
    }

    it('decodes hash parameter', () => {
      window.history.pushState({}, null, '#random-hash');
      commonUtils.handleLocationHash();

      expectGetElementIdToHaveBeenCalledWith('random-hash');
      expectGetElementIdToHaveBeenCalledWith('user-content-random-hash');
    });

    it('decodes cyrillic hash parameter', () => {
      window.history.pushState({}, null, '#definição');
      commonUtils.handleLocationHash();

      expectGetElementIdToHaveBeenCalledWith('definição');
      expectGetElementIdToHaveBeenCalledWith('user-content-definição');
    });

    it('decodes encoded cyrillic hash parameter', () => {
      window.history.pushState({}, null, '#defini%C3%A7%C3%A3o');
      commonUtils.handleLocationHash();

      expectGetElementIdToHaveBeenCalledWith('definição');
      expectGetElementIdToHaveBeenCalledWith('user-content-definição');
    });

    it(`does not scroll when ${commonUtils.NO_SCROLL_TO_HASH_CLASS} is set on target`, () => {
      jest.spyOn(window, 'scrollBy');

      document.body.innerHTML += `
        <div id="parent">
          <a href="#test">Link</a>
          <div style="height: 2000px;"></div>
          <div id="test" style="height: 2000px;" class="${commonUtils.NO_SCROLL_TO_HASH_CLASS}"></div>
        </div>
      `;

      window.history.pushState({}, null, '#test');
      commonUtils.handleLocationHash();
      jest.runOnlyPendingTimers();

      try {
        expect(window.scrollBy).not.toHaveBeenCalled();
      } finally {
        document.getElementById('parent').remove();
      }
    });

    it('scrolls element into view', () => {
      document.body.innerHTML += `
        <div id="parent">
          <div style="height: 2000px;"></div>
          <div id="test" style="height: 2000px;"></div>
        </div>
      `;

      window.history.pushState({}, null, '#test');
      commonUtils.handleLocationHash();

      expectGetElementIdToHaveBeenCalledWith('test');

      expect(window.scrollY).toBe(document.getElementById('test').offsetTop);

      document.getElementById('parent').remove();
    });

    it('scrolls user content element into view', () => {
      document.body.innerHTML += `
        <div id="parent">
          <div style="height: 2000px;"></div>
          <div id="user-content-test" style="height: 2000px;"></div>
        </div>
      `;

      window.history.pushState({}, null, '#test');
      commonUtils.handleLocationHash();

      expectGetElementIdToHaveBeenCalledWith('test');
      expectGetElementIdToHaveBeenCalledWith('user-content-test');

      expect(window.scrollY).toBe(document.getElementById('user-content-test').offsetTop);

      document.getElementById('parent').remove();
    });

    it('scrolls to element with offset from navbar', () => {
      jest.spyOn(window, 'scrollBy');
      document.body.innerHTML += `
        <div id="parent">
          <div class="navbar-gitlab" style="position: fixed; top: 0; height: 50px;"></div>
          <div style="height: 2000px; margin-top: 50px;"></div>
          <div id="user-content-test" style="height: 2000px;"></div>
        </div>
      `;

      window.history.pushState({}, null, '#test');
      commonUtils.handleLocationHash();
      jest.advanceTimersByTime(1);

      expectGetElementIdToHaveBeenCalledWith('test');
      expectGetElementIdToHaveBeenCalledWith('user-content-test');

      expect(window.scrollY).toBe(document.getElementById('user-content-test').offsetTop - 50);
      expect(window.scrollBy).toHaveBeenCalledWith(0, -50);

      document.getElementById('parent').remove();
    });
  });

  describe('historyPushState', () => {
    afterEach(() => {
      window.history.replaceState({}, null, null);
    });

    it('should call pushState with the correct path', () => {
      jest.spyOn(window.history, 'pushState').mockImplementation(() => {});

      commonUtils.historyPushState('newpath?page=2');

      expect(window.history.pushState).toHaveBeenCalled();
      expect(window.history.pushState.mock.calls[0][2]).toContain('newpath?page=2');
    });
  });

  describe('buildUrlWithCurrentLocation', () => {
    it('should build an url with current location and given parameters', () => {
      expect(commonUtils.buildUrlWithCurrentLocation()).toEqual(window.location.pathname);
      expect(commonUtils.buildUrlWithCurrentLocation('?page=2')).toEqual(
        `${window.location.pathname}?page=2`,
      );
    });
  });

  describe('scrollToElement*', () => {
    let elem;
    const windowHeight = 550;
    const elemTop = 100;
    const id = 'scroll_test';

    beforeEach(() => {
      elem = document.createElement('div');
      elem.id = id;
      document.body.appendChild(elem);
      window.innerHeight = windowHeight;
      window.mrTabs = { currentAction: 'show' };
      jest.spyOn(window, 'scrollTo').mockImplementation(() => {});
      jest.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({ top: elemTop });
    });

    afterEach(() => {
      window.scrollTo.mockRestore();
      Element.prototype.getBoundingClientRect.mockRestore();
      elem.remove();
    });

    describe('scrollToElement with HTMLElement', () => {
      it('scrolls to element', () => {
        commonUtils.scrollToElement(elem);
        expect(window.scrollTo).toHaveBeenCalledWith({
          behavior: 'smooth',
          top: elemTop,
        });
      });

      it('scrolls to element with offset', () => {
        const offset = 50;
        commonUtils.scrollToElement(elem, { offset });
        expect(window.scrollTo).toHaveBeenCalledWith({
          behavior: 'smooth',
          top: elemTop + offset,
        });
      });
    });

    describe('scrollToElement with Selector', () => {
      it('scrolls to element', () => {
        commonUtils.scrollToElement(`#${id}`);
        expect(window.scrollTo).toHaveBeenCalledWith({
          behavior: 'smooth',
          top: elemTop,
        });
      });

      it('scrolls to element with offset', () => {
        const offset = 50;
        commonUtils.scrollToElement(`#${id}`, { offset });
        expect(window.scrollTo).toHaveBeenCalledWith({
          behavior: 'smooth',
          top: elemTop + offset,
        });
      });
    });

    describe('scrollToElementWithContext', () => {
      // This is what the implementation of scrollToElementWithContext
      // scrolls to, in case we change tha implementation
      // it needs to be adjusted
      const elementTopWithContext = elemTop - windowHeight * 0.1;

      it('with HTMLElement scrolls with context', () => {
        commonUtils.scrollToElementWithContext(elem);
        expect(window.scrollTo).toHaveBeenCalledWith({
          behavior: 'smooth',
          top: elementTopWithContext,
        });
      });

      it('with Selector scrolls with context', () => {
        commonUtils.scrollToElementWithContext(`#${id}`);
        expect(window.scrollTo).toHaveBeenCalledWith({
          behavior: 'smooth',
          top: elementTopWithContext,
        });
      });

      it('passes through behaviour', () => {
        commonUtils.scrollToElementWithContext(`#${id}`, { behavior: 'smooth' });
        expect(window.scrollTo).toHaveBeenCalledWith({
          behavior: 'smooth',
          top: elementTopWithContext,
        });
      });
    });
  });

  describe('debounceByAnimationFrame', () => {
    it('debounces a function to allow a maximum of one call per animation frame', () => {
      const spy = jest.fn();
      const debouncedSpy = commonUtils.debounceByAnimationFrame(spy);

      debouncedSpy();
      debouncedSpy();
      jest.runOnlyPendingTimers();

      expect(spy).toHaveBeenCalledTimes(1);
    });
  });

  describe('insertText', () => {
    let textArea;

    beforeAll(() => {
      textArea = document.createElement('textarea');
      document.querySelector('body').appendChild(textArea);
      textArea.value = 'two';
      textArea.setSelectionRange(0, 0);
      textArea.focus();
    });

    afterAll(() => {
      textArea.parentNode.removeChild(textArea);
    });

    describe('using execCommand', () => {
      beforeAll(() => {
        document.execCommand = jest.fn(() => true);
      });

      it('inserts the text', () => {
        commonUtils.insertText(textArea, 'one');

        expect(document.execCommand).toHaveBeenCalledWith('insertText', false, 'one');
      });

      it('removes selected text', () => {
        textArea.setSelectionRange(0, textArea.value.length);

        commonUtils.insertText(textArea, '');

        expect(document.execCommand).toHaveBeenCalledWith('delete');
      });
    });

    describe('using fallback', () => {
      beforeEach(() => {
        document.execCommand = jest.fn(() => false);
        jest.spyOn(textArea, 'dispatchEvent');
        textArea.value = 'two';
        textArea.setSelectionRange(0, 0);
      });

      it('inserts the text', () => {
        commonUtils.insertText(textArea, 'one');

        expect(textArea.value).toBe('onetwo');
        expect(textArea.dispatchEvent).toHaveBeenCalled();
      });

      it('replaces the selection', () => {
        textArea.setSelectionRange(0, textArea.value.length);

        commonUtils.insertText(textArea, 'one');

        expect(textArea.value).toBe('one');
        expect(textArea.selectionStart).toBe(textArea.value.length);
      });

      it('removes selected text', () => {
        textArea.setSelectionRange(0, textArea.value.length);

        commonUtils.insertText(textArea, '');

        expect(textArea.value).toBe('');
      });
    });
  });

  describe('normalizedHeaders', () => {
    it('should upperCase all the header keys to keep them consistent', () => {
      const apiHeaders = {
        'X-Something-Workhorse': { workhorse: 'ok' },
        'x-something-nginx': { nginx: 'ok' },
      };

      const normalized = commonUtils.normalizeHeaders(apiHeaders);

      const WORKHORSE = 'X-SOMETHING-WORKHORSE';
      const NGINX = 'X-SOMETHING-NGINX';

      expect(normalized[WORKHORSE].workhorse).toBe('ok');
      expect(normalized[NGINX].nginx).toBe('ok');
    });
  });

  describe('parseIntPagination', () => {
    it('should parse to integers all string values and return pagination object', () => {
      const pagination = {
        'X-PER-PAGE': 10,
        'X-PAGE': 2,
        'X-TOTAL': 30,
        'X-TOTAL-PAGES': 3,
        'X-NEXT-PAGE': 3,
        'X-PREV-PAGE': 1,
      };

      const expectedPagination = {
        perPage: 10,
        page: 2,
        total: 30,
        totalPages: 3,
        nextPage: 3,
        previousPage: 1,
      };

      expect(commonUtils.parseIntPagination(pagination)).toEqual(expectedPagination);
    });
  });

  describe('isMetaClick', () => {
    it('should identify meta click on Windows/Linux', () => {
      const e = {
        metaKey: false,
        ctrlKey: true,
        which: 1,
      };

      expect(commonUtils.isMetaClick(e)).toBe(true);
    });

    it('should identify meta click on macOS', () => {
      const e = {
        metaKey: true,
        ctrlKey: false,
        which: 1,
      };

      expect(commonUtils.isMetaClick(e)).toBe(true);
    });

    it('should identify as meta click on middle-click or Mouse-wheel click', () => {
      const e = {
        metaKey: false,
        ctrlKey: false,
        which: 2,
      };

      expect(commonUtils.isMetaClick(e)).toBe(true);
    });
  });

  describe('parseBoolean', () => {
    it.each`
      input          | expected
      ${'true'}      | ${true}
      ${'false'}     | ${false}
      ${'something'} | ${false}
      ${null}        | ${false}
      ${true}        | ${true}
      ${false}       | ${false}
    `('returns $expected for $input', ({ input, expected }) => {
      expect(commonUtils.parseBoolean(input)).toBe(expected);
    });
  });

  describe('backOff', () => {
    beforeEach(() => {
      jest.spyOn(window, 'setTimeout');
    });

    it('solves the promise from the callback', () => {
      const expectedResponseValue = 'Success!';
      return commonUtils
        .backOff((next, stop) =>
          new Promise((resolve) => {
            resolve(expectedResponseValue);
          }).then((resp) => {
            stop(resp);
          }),
        )
        .then((respBackoff) => {
          expect(respBackoff).toBe(expectedResponseValue);
        });
    });

    it('catches the rejected promise from the callback', () => {
      const errorMessage = 'Mistakes were made!';
      return commonUtils
        .backOff((next, stop) => {
          new Promise((resolve, reject) => {
            reject(new Error(errorMessage));
          })
            .then((resp) => {
              stop(resp);
            })
            .catch((err) => stop(err));
        })
        .catch((errBackoffResp) => {
          expect(errBackoffResp instanceof Error).toBe(true);
          expect(errBackoffResp.message).toBe(errorMessage);
        });
    });

    it('solves the promise correctly after retrying a third time', () => {
      let numberOfCalls = 1;
      const expectedResponseValue = 'Success!';
      return commonUtils
        .backOff((next, stop) =>
          Promise.resolve(expectedResponseValue).then((resp) => {
            if (numberOfCalls < 3) {
              numberOfCalls += 1;
              next();
              jest.runOnlyPendingTimers();
            } else {
              stop(resp);
            }
          }),
        )
        .then((respBackoff) => {
          const timeouts = window.setTimeout.mock.calls.map(([, timeout]) => timeout);

          expect(timeouts).toEqual([2000, 4000]);
          expect(respBackoff).toBe(expectedResponseValue);
        });
    });

    it('rejects the backOff promise after timing out', () => {
      return commonUtils
        .backOff((next) => {
          next();
          jest.runOnlyPendingTimers();
        }, 64000)
        .catch((errBackoffResp) => {
          const timeouts = window.setTimeout.mock.calls.map(([, timeout]) => timeout);

          expect(timeouts).toEqual([2000, 4000, 8000, 16000, 32000, 32000]);
          expect(errBackoffResp instanceof Error).toBe(true);
          expect(errBackoffResp.message).toBe('BACKOFF_TIMEOUT');
        });
    });
  });

  describe('spriteIcon', () => {
    let beforeGon;

    beforeEach(() => {
      window.gon = window.gon || {};
      beforeGon = { ...window.gon };
      window.gon.sprite_icons = 'icons.svg';
    });

    afterEach(() => {
      window.gon = beforeGon;
    });

    it('should return the svg for a linked icon', () => {
      expect(commonUtils.spriteIcon('test')).toEqual(
        '<svg ><use xlink:href="icons.svg#test" /></svg>',
      );
    });

    it('should set svg className when passed', () => {
      expect(commonUtils.spriteIcon('test', 'first-icon-class second-icon-class')).toEqual(
        '<svg class="first-icon-class second-icon-class"><use xlink:href="icons.svg#test" /></svg>',
      );
    });
  });

  describe('convertObjectProps*', () => {
    const mockConversionFunction = (prop) => `${prop}_converted`;
    const isEmptyObject = (obj) =>
      typeof obj === 'object' && obj !== null && Object.keys(obj).length === 0;

    const mockObjects = {
      convertObjectProps: {
        obj: {
          id: 1,
          group_name: 'GitLab.org',
          absolute_web_url: 'https://gitlab.com/gitlab-org/',
          milestones: ['12.3', '12.4'],
        },
        objNested: {
          project_name: 'GitLab CE',
          group_name: 'GitLab.org',
          license_type: 'MIT',
          tech_stack: {
            backend: 'Ruby',
            frontend_framework: 'Vue',
            database: 'PostgreSQL',
          },
          milestones: ['12.3', '12.4'],
        },
      },
      convertObjectPropsToCamelCase: {
        obj: {
          id: 1,
          group_name: 'GitLab.org',
          absolute_web_url: 'https://gitlab.com/gitlab-org/',
          milestones: ['12.3', '12.4'],
        },
        objNested: {
          project_name: 'GitLab CE',
          group_name: 'GitLab.org',
          license_type: 'MIT',
          tech_stack: {
            backend: 'Ruby',
            frontend_framework: 'Vue',
            database: 'PostgreSQL',
          },
          milestones: ['12.3', '12.4'],
        },
      },
      convertObjectPropsToSnakeCase: {
        obj: {
          id: 1,
          groupName: 'GitLab.org',
          absoluteWebUrl: 'https://gitlab.com/gitlab-org/',
          milestones: ['12.3', '12.4'],
        },
        objNested: {
          projectName: 'GitLab CE',
          groupName: 'GitLab.org',
          licenseType: 'MIT',
          techStack: {
            backend: 'Ruby',
            frontendFramework: 'Vue',
            database: 'PostgreSQL',
          },
          milestones: ['12.3', '12.4'],
        },
      },
    };

    describe('convertObjectProps', () => {
      it('returns an empty object if `conversionFunction` parameter is not a function', () => {
        const result = commonUtils.convertObjectProps(null, mockObjects.convertObjectProps.obj);

        expect(isEmptyObject(result)).toBe(true);
      });
    });

    describe.each`
      functionName                       | mockObj                                          | mockObjNested
      ${'convertObjectProps'}            | ${mockObjects.convertObjectProps.obj}            | ${mockObjects.convertObjectProps.objNested}
      ${'convertObjectPropsToCamelCase'} | ${mockObjects.convertObjectPropsToCamelCase.obj} | ${mockObjects.convertObjectPropsToCamelCase.objNested}
      ${'convertObjectPropsToSnakeCase'} | ${mockObjects.convertObjectPropsToSnakeCase.obj} | ${mockObjects.convertObjectPropsToSnakeCase.objNested}
    `('$functionName', ({ functionName, mockObj, mockObjNested }) => {
      const testFunction =
        functionName === 'convertObjectProps'
          ? (obj, options = {}) =>
              commonUtils.convertObjectProps(mockConversionFunction, obj, options)
          : commonUtils[functionName];

      it('returns an empty object if `obj` parameter is null, undefined or an empty object', () => {
        expect(isEmptyObject(testFunction(null))).toBe(true);
        expect(isEmptyObject(testFunction())).toBe(true);
        expect(isEmptyObject(testFunction({}))).toBe(true);
      });

      it('converts object properties', () => {
        const expected = {
          convertObjectProps: {
            id_converted: 1,
            group_name_converted: 'GitLab.org',
            absolute_web_url_converted: 'https://gitlab.com/gitlab-org/',
            milestones_converted: ['12.3', '12.4'],
          },
          convertObjectPropsToCamelCase: {
            id: 1,
            groupName: 'GitLab.org',
            absoluteWebUrl: 'https://gitlab.com/gitlab-org/',
            milestones: ['12.3', '12.4'],
          },
          convertObjectPropsToSnakeCase: {
            id: 1,
            group_name: 'GitLab.org',
            absolute_web_url: 'https://gitlab.com/gitlab-org/',
            milestones: ['12.3', '12.4'],
          },
        };

        expect(testFunction(mockObj)).toEqual(expected[functionName]);
      });

      it('does not deep-convert by default', () => {
        const expected = {
          convertObjectProps: {
            project_name_converted: 'GitLab CE',
            group_name_converted: 'GitLab.org',
            license_type_converted: 'MIT',
            tech_stack_converted: {
              backend: 'Ruby',
              frontend_framework: 'Vue',
              database: 'PostgreSQL',
            },
            milestones_converted: ['12.3', '12.4'],
          },
          convertObjectPropsToCamelCase: {
            projectName: 'GitLab CE',
            groupName: 'GitLab.org',
            licenseType: 'MIT',
            techStack: {
              backend: 'Ruby',
              frontend_framework: 'Vue',
              database: 'PostgreSQL',
            },
            milestones: ['12.3', '12.4'],
          },
          convertObjectPropsToSnakeCase: {
            project_name: 'GitLab CE',
            group_name: 'GitLab.org',
            license_type: 'MIT',
            tech_stack: {
              backend: 'Ruby',
              frontendFramework: 'Vue',
              database: 'PostgreSQL',
            },
            milestones: ['12.3', '12.4'],
          },
        };

        expect(testFunction(mockObjNested)).toEqual(expected[functionName]);
      });

      describe('with options', () => {
        describe('when options.deep is true', () => {
          const expected = {
            convertObjectProps: {
              project_name_converted: 'GitLab CE',
              group_name_converted: 'GitLab.org',
              license_type_converted: 'MIT',
              tech_stack_converted: {
                backend_converted: 'Ruby',
                frontend_framework_converted: 'Vue',
                database_converted: 'PostgreSQL',
              },
              milestones_converted: ['12.3', '12.4'],
            },
            convertObjectPropsToCamelCase: {
              projectName: 'GitLab CE',
              groupName: 'GitLab.org',
              licenseType: 'MIT',
              techStack: {
                backend: 'Ruby',
                frontendFramework: 'Vue',
                database: 'PostgreSQL',
              },
              milestones: ['12.3', '12.4'],
            },
            convertObjectPropsToSnakeCase: {
              project_name: 'GitLab CE',
              group_name: 'GitLab.org',
              license_type: 'MIT',
              tech_stack: {
                backend: 'Ruby',
                frontend_framework: 'Vue',
                database: 'PostgreSQL',
              },
              milestones: ['12.3', '12.4'],
            },
          };

          it('converts nested objects', () => {
            expect(testFunction(mockObjNested, { deep: true })).toEqual(expected[functionName]);
          });

          it('converts array of nested objects', () => {
            expect(testFunction([mockObjNested], { deep: true })).toEqual([expected[functionName]]);
          });

          it('converts array with child arrays', () => {
            expect(testFunction([[mockObjNested]], { deep: true })).toEqual([
              [expected[functionName]],
            ]);
          });
        });

        describe('when options.dropKeys is provided', () => {
          it('discards properties mentioned in `dropKeys` array', () => {
            const expected = {
              convertObjectProps: {
                project_name_converted: 'GitLab CE',
                license_type_converted: 'MIT',
                tech_stack_converted: {
                  backend: 'Ruby',
                  frontend_framework: 'Vue',
                  database: 'PostgreSQL',
                },
                milestones_converted: ['12.3', '12.4'],
              },
              convertObjectPropsToCamelCase: {
                projectName: 'GitLab CE',
                licenseType: 'MIT',
                techStack: {
                  backend: 'Ruby',
                  frontend_framework: 'Vue',
                  database: 'PostgreSQL',
                },
                milestones: ['12.3', '12.4'],
              },
              convertObjectPropsToSnakeCase: {
                project_name: 'GitLab CE',
                license_type: 'MIT',
                tech_stack: {
                  backend: 'Ruby',
                  frontendFramework: 'Vue',
                  database: 'PostgreSQL',
                },
                milestones: ['12.3', '12.4'],
              },
            };

            const dropKeys = {
              convertObjectProps: ['group_name'],
              convertObjectPropsToCamelCase: ['group_name'],
              convertObjectPropsToSnakeCase: ['groupName'],
            };

            expect(
              testFunction(mockObjNested, {
                dropKeys: dropKeys[functionName],
              }),
            ).toEqual(expected[functionName]);
          });

          it('discards properties mentioned in `dropKeys` array when `deep` is true', () => {
            const expected = {
              convertObjectProps: {
                project_name_converted: 'GitLab CE',
                license_type_converted: 'MIT',
                tech_stack_converted: {
                  backend_converted: 'Ruby',
                  frontend_framework_converted: 'Vue',
                },
                milestones_converted: ['12.3', '12.4'],
              },
              convertObjectPropsToCamelCase: {
                projectName: 'GitLab CE',
                licenseType: 'MIT',
                techStack: {
                  backend: 'Ruby',
                  frontendFramework: 'Vue',
                },
                milestones: ['12.3', '12.4'],
              },
              convertObjectPropsToSnakeCase: {
                project_name: 'GitLab CE',
                license_type: 'MIT',
                tech_stack: {
                  backend: 'Ruby',
                  frontend_framework: 'Vue',
                },
                milestones: ['12.3', '12.4'],
              },
            };

            const dropKeys = {
              convertObjectProps: ['group_name', 'database'],
              convertObjectPropsToCamelCase: ['group_name', 'database'],
              convertObjectPropsToSnakeCase: ['groupName', 'database'],
            };

            expect(
              testFunction(mockObjNested, {
                dropKeys: dropKeys[functionName],
                deep: true,
              }),
            ).toEqual(expected[functionName]);
          });
        });

        describe('when options.ignoreKeyNames is provided', () => {
          it('leaves properties mentioned in `ignoreKeyNames` array intact', () => {
            const expected = {
              convertObjectProps: {
                project_name_converted: 'GitLab CE',
                group_name: 'GitLab.org',
                license_type_converted: 'MIT',
                tech_stack_converted: {
                  backend: 'Ruby',
                  frontend_framework: 'Vue',
                  database: 'PostgreSQL',
                },
                milestones_converted: ['12.3', '12.4'],
              },
              convertObjectPropsToCamelCase: {
                projectName: 'GitLab CE',
                group_name: 'GitLab.org',
                licenseType: 'MIT',
                techStack: {
                  backend: 'Ruby',
                  frontend_framework: 'Vue',
                  database: 'PostgreSQL',
                },
                milestones: ['12.3', '12.4'],
              },
              convertObjectPropsToSnakeCase: {
                project_name: 'GitLab CE',
                groupName: 'GitLab.org',
                license_type: 'MIT',
                tech_stack: {
                  backend: 'Ruby',
                  frontendFramework: 'Vue',
                  database: 'PostgreSQL',
                },
                milestones: ['12.3', '12.4'],
              },
            };

            const ignoreKeyNames = {
              convertObjectProps: ['group_name'],
              convertObjectPropsToCamelCase: ['group_name'],
              convertObjectPropsToSnakeCase: ['groupName'],
            };

            expect(
              testFunction(mockObjNested, {
                ignoreKeyNames: ignoreKeyNames[functionName],
              }),
            ).toEqual(expected[functionName]);
          });

          it('leaves properties mentioned in `ignoreKeyNames` array intact when `deep` is true', () => {
            const expected = {
              convertObjectProps: {
                project_name_converted: 'GitLab CE',
                group_name: 'GitLab.org',
                license_type_converted: 'MIT',
                tech_stack_converted: {
                  backend_converted: 'Ruby',
                  frontend_framework: 'Vue',
                  database_converted: 'PostgreSQL',
                },
                milestones_converted: ['12.3', '12.4'],
              },
              convertObjectPropsToCamelCase: {
                projectName: 'GitLab CE',
                group_name: 'GitLab.org',
                licenseType: 'MIT',
                techStack: {
                  backend: 'Ruby',
                  frontend_framework: 'Vue',
                  database: 'PostgreSQL',
                },
                milestones: ['12.3', '12.4'],
              },
              convertObjectPropsToSnakeCase: {
                project_name: 'GitLab CE',
                groupName: 'GitLab.org',
                license_type: 'MIT',
                tech_stack: {
                  backend: 'Ruby',
                  frontendFramework: 'Vue',
                  database: 'PostgreSQL',
                },
                milestones: ['12.3', '12.4'],
              },
            };

            const ignoreKeyNames = {
              convertObjectProps: ['group_name', 'frontend_framework'],
              convertObjectPropsToCamelCase: ['group_name', 'frontend_framework'],
              convertObjectPropsToSnakeCase: ['groupName', 'frontendFramework'],
            };

            expect(
              testFunction(mockObjNested, {
                deep: true,
                ignoreKeyNames: ignoreKeyNames[functionName],
              }),
            ).toEqual(expected[functionName]);
          });
        });
      });
    });
  });

  describe('roundOffFloat', () => {
    it('Rounds off decimal places of a float number with provided precision', () => {
      expect(commonUtils.roundOffFloat(3.141592, 3)).toBeCloseTo(3.142);
    });

    it('Rounds off a float number to a whole number when provided precision is zero', () => {
      expect(commonUtils.roundOffFloat(3.141592, 0)).toBeCloseTo(3);
      expect(commonUtils.roundOffFloat(3.5, 0)).toBeCloseTo(4);
    });

    it('Rounds off float number to nearest 0, 10, 100, 1000 and so on when provided precision is below 0', () => {
      expect(commonUtils.roundOffFloat(34567.14159, -1)).toBeCloseTo(34570);
      expect(commonUtils.roundOffFloat(34567.14159, -2)).toBeCloseTo(34600);
      expect(commonUtils.roundOffFloat(34567.14159, -3)).toBeCloseTo(35000);
      expect(commonUtils.roundOffFloat(34567.14159, -4)).toBeCloseTo(30000);
      expect(commonUtils.roundOffFloat(34567.14159, -5)).toBeCloseTo(0);
    });
  });

  describe('roundDownFloat', () => {
    it('Rounds down decimal places of a float number with provided precision', () => {
      expect(commonUtils.roundDownFloat(3.141592, 3)).toBe(3.141);
    });

    it('Rounds down a float number to a whole number when provided precision is zero', () => {
      expect(commonUtils.roundDownFloat(3.141592, 0)).toBe(3);
      expect(commonUtils.roundDownFloat(3.9, 0)).toBe(3);
    });

    it('Rounds down float number to nearest 0, 10, 100, 1000 and so on when provided precision is below 0', () => {
      expect(commonUtils.roundDownFloat(34567.14159, -1)).toBeCloseTo(34560);
      expect(commonUtils.roundDownFloat(34567.14159, -2)).toBeCloseTo(34500);
      expect(commonUtils.roundDownFloat(34567.14159, -3)).toBeCloseTo(34000);
      expect(commonUtils.roundDownFloat(34567.14159, -4)).toBeCloseTo(30000);
      expect(commonUtils.roundDownFloat(34567.14159, -5)).toBeCloseTo(0);
    });
  });

  describe('roundToNearestHalf', () => {
    it('Rounds decimals ot the nearest half', () => {
      expect(commonUtils.roundToNearestHalf(3.141592)).toBe(3);
      expect(commonUtils.roundToNearestHalf(3.41592)).toBe(3.5);
      expect(commonUtils.roundToNearestHalf(1.27)).toBe(1.5);
      expect(commonUtils.roundToNearestHalf(1.23)).toBe(1);
      expect(commonUtils.roundToNearestHalf(1.778)).toBe(2);
    });
  });

  describe('isScopedLabel', () => {
    it('returns true when `::` is present in title', () => {
      expect(commonUtils.isScopedLabel({ title: 'foo::bar' })).toBe(true);
    });

    it('returns false when `::` is not present', () => {
      expect(commonUtils.isScopedLabel({ title: 'foobar' })).toBe(false);
    });
  });

  describe('scopedLabelKey', () => {
    it.each`
      label                           | expectedLabelKey
      ${undefined}                    | ${''}
      ${''}                           | ${''}
      ${'title'}                      | ${'title'}
      ${'scoped::value'}              | ${'scoped'}
      ${'scoped::label::value'}       | ${'scoped::label'}
      ${'scoped::label-some::value'}  | ${'scoped::label-some'}
      ${'scoped::label::some::value'} | ${'scoped::label::some'}
    `('returns "$expectedLabelKey" when label is "$label"', ({ label, expectedLabelKey }) => {
      expect(commonUtils.scopedLabelKey({ title: label })).toBe(expectedLabelKey);
    });
  });

  describe('getDashPath', () => {
    it('returns the path following /-/', () => {
      expect(commonUtils.getDashPath('/some/-/url-with-dashes-/')).toEqual('url-with-dashes-/');
    });

    it('returns null when no path follows /-/', () => {
      expect(commonUtils.getDashPath('/some/url')).toEqual(null);
    });
  });

  describe('convertArrayToCamelCase', () => {
    it('returns a new array with snake_case string elements converted camelCase', () => {
      const result = commonUtils.convertArrayToCamelCase(['hello', 'hello_world']);

      expect(result).toEqual(['hello', 'helloWorld']);
    });
  });

  describe('convertArrayOfObjectsToCamelCase', () => {
    it('returns a new array with snake_case object property names converted camelCase', () => {
      const result = commonUtils.convertArrayOfObjectsToCamelCase([
        { hello: '' },
        { hello_world: '' },
      ]);

      expect(result).toEqual([{ hello: '' }, { helloWorld: '' }]);
    });
  });

  describe('useNewFonts', () => {
    let beforeGon;
    const beforeLocation = window.location.href;

    beforeEach(() => {
      window.gon = window.gon || {};
      beforeGon = { ...window.gon };
    });

    describe.each`
      featureFlag | queryParameter | fontEnabled
      ${false}    | ${false}       | ${false}
      ${true}     | ${false}       | ${true}
      ${false}    | ${true}        | ${true}
    `('new font', ({ featureFlag, queryParameter, fontEnabled }) => {
      it(`will ${fontEnabled ? '' : 'NOT '}be applied when feature flag is ${
        featureFlag ? '' : 'NOT '
      }set and query parameter is ${queryParameter ? '' : 'NOT '}present`, () => {
        const search = queryParameter ? `?new_fonts` : '';
        setWindowLocation(search);
        window.gon = { features: { newFonts: featureFlag } };
        expect(commonUtils.useNewFonts()).toBe(fontEnabled);
      });
    });

    afterEach(() => {
      window.gon = beforeGon;
      setWindowLocation(beforeLocation);
    });
  });
});