Move rest of lib/utils specs to Jest

- csrf_token_spec
- naviation_utility_spec
- sticky_spec
- poll_spec

Also fixed setHTMLFixtures to use innerHTML

spec/frontend/helpers/fixtures.js

@@ -23,11 +23,12 @@ Did you run bin/rake frontend:fixtures?`,
 export const getJSONFixture = relativePath => JSON.parse(getFixture(relativePath));
 
 export const resetHTMLFixture = () => {
-  document.body.textContent = '';
+  document.head.innerHTML = '';
+  document.body.innerHTML = '';
 };
 
 export const setHTMLFixture = (htmlContent, resetHook = afterEach) => {
-  document.body.outerHTML = htmlContent;
+  document.body.innerHTML = htmlContent;
   resetHook(resetHTMLFixture);
 };
 

spec/javascripts/lib/utils/csrf_token_spec.js → spec/frontend/lib/utils/csrf_token_spec.js

 import csrf from '~/lib/utils/csrf';
+import { setHTMLFixture } from 'helpers/fixtures';
+
+describe('csrf', () => {
+  let testContext;
+
+  beforeEach(() => {
+    testContext = {};
+  });
 
-describe('csrf', function() {
   beforeEach(() => {
-    this.tokenKey = 'X-CSRF-Token';
-    this.token =
+    testContext.tokenKey = 'X-CSRF-Token';
+    testContext.token =
       'pH1cvjnP9grx2oKlhWEDvUZnJ8x2eXsIs1qzyHkF3DugSG5yTxR76CWeEZRhML2D1IeVB7NEW0t5l/axE4iJpQ==';
   });
 
   it('returns the correct headerKey', () => {
-    expect(csrf.headerKey).toBe(this.tokenKey);
+    expect(csrf.headerKey).toBe(testContext.tokenKey);
   });
 
   describe('when csrf token is in the DOM', () => {
     beforeEach(() => {
-      setFixtures(`
-        <meta name="csrf-token" content="${this.token}">
+      setHTMLFixture(`
+        <meta name="csrf-token" content="${testContext.token}">
       `);
 
       csrf.init();
     });
 
     it('returns the csrf token', () => {
-      expect(csrf.token).toBe(this.token);
+      expect(csrf.token).toBe(testContext.token);
     });
 
     it('returns the csrf headers object', () => {
-      expect(csrf.headers[this.tokenKey]).toBe(this.token);
+      expect(csrf.headers[testContext.tokenKey]).toBe(testContext.token);
     });
   });
 
   describe('when csrf token is not in the DOM', () => {
     beforeEach(() => {
-      setFixtures(`
+      setHTMLFixture(`
         <meta name="some-other-token">
       `);
 

spec/javascripts/lib/utils/navigation_utility_spec.js → spec/frontend/lib/utils/navigation_utility_spec.js

 import findAndFollowLink from '~/lib/utils/navigation_utility';
+import { visitUrl } from '~/lib/utils/url_utility';
+
+jest.mock('~/lib/utils/url_utility');
 
 describe('findAndFollowLink', () => {
   it('visits a link when the selector exists', () => {
     const href = '/some/path';
-    const visitUrl = spyOnDependency(findAndFollowLink, 'visitUrl');
 
     setFixtures(`<a class="my-shortcut" href="${href}">link</a>`);
 
@@ -13,8 +15,6 @@ describe('findAndFollowLink', () => {
   });
 
   it('does not throw an exception when the selector does not exist', () => {
-    const visitUrl = spyOnDependency(findAndFollowLink, 'visitUrl');
-
     // this should not throw an exception
     findAndFollowLink('.this-selector-does-not-exist');
 

spec/javascripts/lib/utils/poll_spec.js → spec/frontend/lib/utils/poll_spec.js

-/* eslint-disable jasmine/no-unsafe-spy */
-
 import Poll from '~/lib/utils/poll';
 import { successCodes } from '~/lib/utils/http_status';
-
-const waitForAllCallsToFinish = (service, waitForCount, successCallback) => {
-  const timer = () => {
-    setTimeout(() => {
-      if (service.fetch.calls.count() === waitForCount) {
-        successCallback();
-      } else {
-        timer();
-      }
-    }, 0);
-  };
-
-  timer();
-};
-
-function mockServiceCall(service, response, shouldFail = false) {
-  const action = shouldFail ? Promise.reject : Promise.resolve;
-  const responseObject = response;
-
-  if (!responseObject.headers) responseObject.headers = {};
-
-  service.fetch.and.callFake(action.bind(Promise, responseObject));
-}
+import waitForPromises from 'helpers/wait_for_promises';
 
 describe('Poll', () => {
-  const service = jasmine.createSpyObj('service', ['fetch']);
-  const callbacks = jasmine.createSpyObj('callbacks', ['success', 'error', 'notification']);
+  let callbacks;
+  let service;
 
   function setup() {
     return new Poll({
@@ -40,18 +16,45 @@ describe('Poll', () => {
     }).makeRequest();
   }
 
-  afterEach(() => {
-    callbacks.success.calls.reset();
-    callbacks.error.calls.reset();
-    callbacks.notification.calls.reset();
-    service.fetch.calls.reset();
+  const mockServiceCall = (response, shouldFail = false) => {
+    const value = {
+      ...response,
+      header: response.header || {},
+    };
+
+    if (shouldFail) {
+      service.fetch.mockRejectedValue(value);
+    } else {
+      service.fetch.mockResolvedValue(value);
+    }
+  };
+
+  const waitForAllCallsToFinish = (waitForCount, successCallback) => {
+    if (!waitForCount) {
+      return Promise.resolve().then(successCallback());
+    }
+
+    jest.runOnlyPendingTimers();
+
+    return waitForPromises().then(() => waitForAllCallsToFinish(waitForCount - 1, successCallback));
+  };
+
+  beforeEach(() => {
+    service = {
+      fetch: jest.fn(),
+    };
+    callbacks = {
+      success: jest.fn(),
+      error: jest.fn(),
+      notification: jest.fn(),
+    };
   });
 
   it('calls the success callback when no header for interval is provided', done => {
-    mockServiceCall(service, { status: 200 });
+    mockServiceCall({ status: 200 });
     setup();
 
-    waitForAllCallsToFinish(service, 1, () => {
+    waitForAllCallsToFinish(1, () => {
       expect(callbacks.success).toHaveBeenCalled();
       expect(callbacks.error).not.toHaveBeenCalled();
 
@@ -60,10 +63,10 @@ describe('Poll', () => {
   });
 
   it('calls the error callback when the http request returns an error', done => {
-    mockServiceCall(service, { status: 500 }, true);
+    mockServiceCall({ status: 500 }, true);
     setup();
 
-    waitForAllCallsToFinish(service, 1, () => {
+    waitForAllCallsToFinish(1, () => {
       expect(callbacks.success).not.toHaveBeenCalled();
       expect(callbacks.error).toHaveBeenCalled();
 
@@ -72,10 +75,10 @@ describe('Poll', () => {
   });
 
   it('skips the error callback when request is aborted', done => {
-    mockServiceCall(service, { status: 0 }, true);
+    mockServiceCall({ status: 0 }, true);
     setup();
 
-    waitForAllCallsToFinish(service, 1, () => {
+    waitForAllCallsToFinish(1, () => {
       expect(callbacks.success).not.toHaveBeenCalled();
       expect(callbacks.error).not.toHaveBeenCalled();
       expect(callbacks.notification).toHaveBeenCalled();
@@ -85,7 +88,7 @@ describe('Poll', () => {
   });
 
   it('should call the success callback when the interval header is -1', done => {
-    mockServiceCall(service, { status: 200, headers: { 'poll-interval': -1 } });
+    mockServiceCall({ status: 200, headers: { 'poll-interval': -1 } });
     setup()
       .then(() => {
         expect(callbacks.success).toHaveBeenCalled();
@@ -99,7 +102,7 @@ describe('Poll', () => {
   describe('for 2xx status code', () => {
     successCodes.forEach(httpCode => {
       it(`starts polling when http status is ${httpCode} and interval header is provided`, done => {
-        mockServiceCall(service, { status: httpCode, headers: { 'poll-interval': 1 } });
+        mockServiceCall({ status: httpCode, headers: { 'poll-interval': 1 } });
 
         const Polling = new Poll({
           resource: service,
@@ -111,10 +114,10 @@ describe('Poll', () => {
 
         Polling.makeRequest();
 
-        waitForAllCallsToFinish(service, 2, () => {
+        waitForAllCallsToFinish(2, () => {
           Polling.stop();
 
-          expect(service.fetch.calls.count()).toEqual(2);
+          expect(service.fetch.mock.calls).toHaveLength(2);
           expect(service.fetch).toHaveBeenCalledWith({ page: 1 });
           expect(callbacks.success).toHaveBeenCalled();
           expect(callbacks.error).not.toHaveBeenCalled();
@@ -127,7 +130,7 @@ describe('Poll', () => {
 
   describe('stop', () => {
     it('stops polling when method is called', done => {
-      mockServiceCall(service, { status: 200, headers: { 'poll-interval': 1 } });
+      mockServiceCall({ status: 200, headers: { 'poll-interval': 1 } });
 
       const Polling = new Poll({
         resource: service,
@@ -139,12 +142,12 @@ describe('Poll', () => {
         errorCallback: callbacks.error,
       });
 
-      spyOn(Polling, 'stop').and.callThrough();
+      jest.spyOn(Polling, 'stop');
 
       Polling.makeRequest();
 
-      waitForAllCallsToFinish(service, 1, () => {
-        expect(service.fetch.calls.count()).toEqual(1);
+      waitForAllCallsToFinish(1, () => {
+        expect(service.fetch.mock.calls).toHaveLength(1);
         expect(service.fetch).toHaveBeenCalledWith({ page: 1 });
         expect(Polling.stop).toHaveBeenCalled();
 
@@ -155,8 +158,7 @@ describe('Poll', () => {
 
   describe('enable', () => {
     it('should enable polling upon a response', done => {
-      jasmine.clock().install();
-
+      mockServiceCall({ status: 200 });
       const Polling = new Poll({
         resource: service,
         method: 'fetch',
@@ -169,13 +171,10 @@ describe('Poll', () => {
         response: { status: 200, headers: { 'poll-interval': 1 } },
       });
 
-      jasmine.clock().tick(1);
-      jasmine.clock().uninstall();
-
-      waitForAllCallsToFinish(service, 1, () => {
+      waitForAllCallsToFinish(1, () => {
         Polling.stop();
 
-        expect(service.fetch.calls.count()).toEqual(1);
+        expect(service.fetch.mock.calls).toHaveLength(1);
         expect(service.fetch).toHaveBeenCalledWith({ page: 4 });
         expect(Polling.options.data).toEqual({ page: 4 });
         done();
@@ -185,7 +184,7 @@ describe('Poll', () => {
 
   describe('restart', () => {
     it('should restart polling when its called', done => {
-      mockServiceCall(service, { status: 200, headers: { 'poll-interval': 1 } });
+      mockServiceCall({ status: 200, headers: { 'poll-interval': 1 } });
 
       const Polling = new Poll({
         resource: service,
@@ -193,23 +192,27 @@ describe('Poll', () => {
         data: { page: 1 },
         successCallback: () => {
           Polling.stop();
+
+          // Let's pretend that we asynchronously restart this.
+          // setTimeout is mocked but this will actually get triggered
+          // in waitForAllCalssToFinish.
           setTimeout(() => {
             Polling.restart({ data: { page: 4 } });
-          }, 0);
+          }, 1);
         },
         errorCallback: callbacks.error,
       });
 
-      spyOn(Polling, 'stop').and.callThrough();
-      spyOn(Polling, 'enable').and.callThrough();
-      spyOn(Polling, 'restart').and.callThrough();
+      jest.spyOn(Polling, 'stop');
+      jest.spyOn(Polling, 'enable');
+      jest.spyOn(Polling, 'restart');
 
       Polling.makeRequest();
 
-      waitForAllCallsToFinish(service, 2, () => {
+      waitForAllCallsToFinish(2, () => {
         Polling.stop();
 
-        expect(service.fetch.calls.count()).toEqual(2);
+        expect(service.fetch.mock.calls).toHaveLength(2);
         expect(service.fetch).toHaveBeenCalledWith({ page: 4 });
         expect(Polling.stop).toHaveBeenCalled();
         expect(Polling.enable).toHaveBeenCalled();

spec/javascripts/lib/utils/sticky_spec.js → spec/frontend/lib/utils/sticky_spec.js

 import { isSticky } from '~/lib/utils/sticky';
+import { setHTMLFixture } from 'helpers/fixtures';
+
+const TEST_OFFSET_TOP = 500;
 
 describe('sticky', () => {
   let el;
+  let offsetTop;
 
   beforeEach(() => {
-    document.body.innerHTML += `
+    setHTMLFixture(
+      `
       <div class="parent">
         <div id="js-sticky"></div>
       </div>
-    `;
+    `,
+    );
 
+    offsetTop = TEST_OFFSET_TOP;
     el = document.getElementById('js-sticky');
+    Object.defineProperty(el, 'offsetTop', {
+      get() {
+        return offsetTop;
+      },
+    });
   });
 
   afterEach(() => {
-    el.parentNode.remove();
+    el = null;
   });
 
   describe('when stuck', () => {
@@ -40,14 +52,13 @@ describe('sticky', () => {
 
   describe('when not stuck', () => {
     it('removes is-stuck class', () => {
-      spyOn(el.classList, 'remove').and.callThrough();
+      jest.spyOn(el.classList, 'remove');
 
       isSticky(el, 0, el.offsetTop);
       isSticky(el, 0, 0);
 
       expect(el.classList.remove).toHaveBeenCalledWith('is-stuck');
-
-      expect(el.classList.contains('is-stuck')).toBeFalsy();
+      expect(el.classList.contains('is-stuck')).toBe(false);
     });
 
     it('does not add is-stuck class', () => {