Merge branch 'himkp-jest-filtered-search' into 'master'

Migrate some filtered_search files to Jest

See merge request gitlab-org/gitlab!31215

spec/javascripts/filtered_search/dropdown_utils_spec.js → spec/frontend/filtered_search/dropdown_utils_spec.js

@@ -213,7 +213,7 @@ describe('Dropdown Utils', () => {
 
   describe('setDataValueIfSelected', () => {
     beforeEach(() => {
-      spyOn(FilteredSearchDropdownManager, 'addWordToInput').and.callFake(() => {});
+      jest.spyOn(FilteredSearchDropdownManager, 'addWordToInput').mockImplementation(() => {});
     });
 
     it('calls addWordToInput when dataValue exists', () => {
@@ -224,7 +224,7 @@ describe('Dropdown Utils', () => {
 
       DropdownUtils.setDataValueIfSelected(null, '=', selected);
 
-      expect(FilteredSearchDropdownManager.addWordToInput.calls.count()).toEqual(1);
+      expect(FilteredSearchDropdownManager.addWordToInput.mock.calls.length).toEqual(1);
     });
 
     it('returns true when dataValue exists', () => {

spec/javascripts/filtered_search/services/recent_searches_service_spec.js → spec/frontend/filtered_search/services/recent_searches_service_spec.js

 import RecentSearchesService from '~/filtered_search/services/recent_searches_service';
 import RecentSearchesServiceError from '~/filtered_search/services/recent_searches_service_error';
 import AccessorUtilities from '~/lib/utils/accessor';
+import { useLocalStorageSpy } from 'helpers/local_storage_helper';
+
+useLocalStorageSpy();
 
 describe('RecentSearchesService', () => {
   let service;
 
   beforeEach(() => {
     service = new RecentSearchesService();
-    window.localStorage.removeItem(service.localStorageKey);
+    localStorage.removeItem(service.localStorageKey);
   });
 
   describe('fetch', () => {
     beforeEach(() => {
-      spyOn(RecentSearchesService, 'isAvailable').and.returnValue(true);
+      jest.spyOn(RecentSearchesService, 'isAvailable').mockReturnValue(true);
     });
 
     it('should default to empty array', done => {
@@ -27,33 +30,33 @@ describe('RecentSearchesService', () => {
     });
 
     it('should reject when unable to parse', done => {
-      window.localStorage.setItem(service.localStorageKey, 'fail');
+      jest.spyOn(localStorage, 'getItem').mockReturnValue('fail');
       const fetchItemsPromise = service.fetch();
 
       fetchItemsPromise
         .then(done.fail)
         .catch(error => {
-          expect(error).toEqual(jasmine.any(SyntaxError));
+          expect(error).toEqual(expect.any(SyntaxError));
         })
         .then(done)
         .catch(done.fail);
     });
 
     it('should reject when service is unavailable', done => {
-      RecentSearchesService.isAvailable.and.returnValue(false);
+      RecentSearchesService.isAvailable.mockReturnValue(false);
 
       service
         .fetch()
         .then(done.fail)
         .catch(error => {
-          expect(error).toEqual(jasmine.any(Error));
+          expect(error).toEqual(expect.any(Error));
         })
         .then(done)
         .catch(done.fail);
     });
 
     it('should return items from localStorage', done => {
-      window.localStorage.setItem(service.localStorageKey, '["foo", "bar"]');
+      jest.spyOn(localStorage, 'getItem').mockReturnValue('["foo", "bar"]');
       const fetchItemsPromise = service.fetch();
 
       fetchItemsPromise
@@ -66,9 +69,9 @@ describe('RecentSearchesService', () => {
 
     describe('if .isAvailable returns `false`', () => {
       beforeEach(() => {
-        RecentSearchesService.isAvailable.and.returnValue(false);
+        RecentSearchesService.isAvailable.mockReturnValue(false);
 
-        spyOn(window.localStorage, 'getItem');
+        jest.spyOn(Storage.prototype, 'getItem').mockImplementation(() => {});
       });
 
       it('should not call .getItem', done => {
@@ -77,7 +80,7 @@ describe('RecentSearchesService', () => {
           .then(done.fail)
           .catch(err => {
             expect(err).toEqual(new RecentSearchesServiceError());
-            expect(window.localStorage.getItem).not.toHaveBeenCalled();
+            expect(localStorage.getItem).not.toHaveBeenCalled();
           })
           .then(done)
           .catch(done.fail);
@@ -87,22 +90,22 @@ describe('RecentSearchesService', () => {
 
   describe('setRecentSearches', () => {
     beforeEach(() => {
-      spyOn(RecentSearchesService, 'isAvailable').and.returnValue(true);
+      jest.spyOn(RecentSearchesService, 'isAvailable').mockReturnValue(true);
     });
 
     it('should save things in localStorage', () => {
+      jest.spyOn(localStorage, 'setItem');
       const items = ['foo', 'bar'];
       service.save(items);
-      const newLocalStorageValue = window.localStorage.getItem(service.localStorageKey);
 
-      expect(JSON.parse(newLocalStorageValue)).toEqual(items);
+      expect(localStorage.setItem).toHaveBeenCalledWith(expect.any(String), JSON.stringify(items));
     });
   });
 
   describe('save', () => {
     beforeEach(() => {
-      spyOn(window.localStorage, 'setItem');
-      spyOn(RecentSearchesService, 'isAvailable');
+      jest.spyOn(localStorage, 'setItem');
+      jest.spyOn(RecentSearchesService, 'isAvailable').mockImplementation(() => {});
     });
 
     describe('if .isAvailable returns `true`', () => {
@@ -113,27 +116,27 @@ describe('RecentSearchesService', () => {
       };
 
       beforeEach(() => {
-        RecentSearchesService.isAvailable.and.returnValue(true);
+        RecentSearchesService.isAvailable.mockReturnValue(true);
 
-        spyOn(JSON, 'stringify').and.returnValue(searchesString);
+        jest.spyOn(JSON, 'stringify').mockReturnValue(searchesString);
       });
 
       it('should call .setItem', () => {
         RecentSearchesService.prototype.save.call(recentSearchesService);
 
-        expect(window.localStorage.setItem).toHaveBeenCalledWith(localStorageKey, searchesString);
+        expect(localStorage.setItem).toHaveBeenCalledWith(localStorageKey, searchesString);
       });
     });
 
     describe('if .isAvailable returns `false`', () => {
       beforeEach(() => {
-        RecentSearchesService.isAvailable.and.returnValue(false);
+        RecentSearchesService.isAvailable.mockReturnValue(false);
       });
 
       it('should not call .setItem', () => {
         RecentSearchesService.prototype.save();
 
-        expect(window.localStorage.setItem).not.toHaveBeenCalled();
+        expect(localStorage.setItem).not.toHaveBeenCalled();
       });
     });
   });
@@ -142,7 +145,7 @@ describe('RecentSearchesService', () => {
     let isAvailable;
 
     beforeEach(() => {
-      spyOn(AccessorUtilities, 'isLocalStorageAccessSafe').and.callThrough();
+      jest.spyOn(AccessorUtilities, 'isLocalStorageAccessSafe');
 
       isAvailable = RecentSearchesService.isAvailable();
     });

spec/javascripts/filtered_search/visual_token_value_spec.js → spec/frontend/filtered_search/visual_token_value_spec.js

@@ -38,11 +38,11 @@ describe('Filtered Search Visual Tokens', () => {
     let usersCacheSpy;
 
     beforeEach(() => {
-      spyOn(UsersCache, 'retrieve').and.callFake(username => usersCacheSpy(username));
+      jest.spyOn(UsersCache, 'retrieve').mockImplementation(username => usersCacheSpy(username));
     });
 
     it('ignores error if UsersCache throws', done => {
-      spyOn(window, 'Flash');
+      jest.spyOn(window, 'Flash').mockImplementation(() => {});
       const dummyError = new Error('Earth rotated backwards');
       const { subject, tokenValueContainer, tokenValueElement } = findElements(authorToken);
       const tokenValue = tokenValueElement.innerText;
@@ -54,7 +54,7 @@ describe('Filtered Search Visual Tokens', () => {
       subject
         .updateUserTokenAppearance(tokenValueContainer, tokenValueElement, tokenValue)
         .then(() => {
-          expect(window.Flash.calls.count()).toBe(0);
+          expect(window.Flash.mock.calls.length).toBe(0);
         })
         .then(done)
         .catch(done.fail);
@@ -96,8 +96,8 @@ describe('Filtered Search Visual Tokens', () => {
           expect(tokenValueElement.innerText.trim()).toBe(dummyUser.name);
           const avatar = tokenValueElement.querySelector('img.avatar');
 
-          expect(avatar.src).toBe(dummyUser.avatar_url);
-          expect(avatar.alt).toBe('');
+          expect(avatar.getAttribute('src')).toBe(dummyUser.avatar_url);
+          expect(avatar.getAttribute('alt')).toBe('');
         })
         .then(done)
         .catch(done.fail);
@@ -260,10 +260,10 @@ describe('Filtered Search Visual Tokens', () => {
 
   describe('render', () => {
     const setupSpies = subject => {
-      spyOn(subject, 'updateLabelTokenColor'); // eslint-disable-line jasmine/no-unsafe-spy
+      jest.spyOn(subject, 'updateLabelTokenColor').mockImplementation(() => {});
       const updateLabelTokenColorSpy = subject.updateLabelTokenColor;
 
-      spyOn(subject, 'updateUserTokenAppearance'); // eslint-disable-line jasmine/no-unsafe-spy
+      jest.spyOn(subject, 'updateUserTokenAppearance').mockImplementation(() => {});
       const updateUserTokenAppearanceSpy = subject.updateUserTokenAppearance;
 
       return { updateLabelTokenColorSpy, updateUserTokenAppearanceSpy };
@@ -290,11 +290,11 @@ describe('Filtered Search Visual Tokens', () => {
       const { updateLabelTokenColorSpy, updateUserTokenAppearanceSpy } = setupSpies(subject);
       subject.render(tokenValueContainer, tokenValueElement);
 
-      expect(updateUserTokenAppearanceSpy.calls.count()).toBe(1);
+      expect(updateUserTokenAppearanceSpy.mock.calls.length).toBe(1);
       const expectedArgs = [tokenValueContainer, tokenValueElement];
 
-      expect(updateUserTokenAppearanceSpy.calls.argsFor(0)).toEqual(expectedArgs);
-      expect(updateLabelTokenColorSpy.calls.count()).toBe(0);
+      expect(updateUserTokenAppearanceSpy.mock.calls[0]).toEqual(expectedArgs);
+      expect(updateLabelTokenColorSpy.mock.calls.length).toBe(0);
     });
 
     it('renders a label token value element', () => {
@@ -303,11 +303,11 @@ describe('Filtered Search Visual Tokens', () => {
       const { updateLabelTokenColorSpy, updateUserTokenAppearanceSpy } = setupSpies(subject);
       subject.render(tokenValueContainer, tokenValueElement);
 
-      expect(updateLabelTokenColorSpy.calls.count()).toBe(1);
+      expect(updateLabelTokenColorSpy.mock.calls.length).toBe(1);
       const expectedArgs = [tokenValueContainer];
 
-      expect(updateLabelTokenColorSpy.calls.argsFor(0)).toEqual(expectedArgs);
-      expect(updateUserTokenAppearanceSpy.calls.count()).toBe(0);
+      expect(updateLabelTokenColorSpy.mock.calls[0]).toEqual(expectedArgs);
+      expect(updateUserTokenAppearanceSpy.mock.calls.length).toBe(0);
     });
 
     it('renders a milestone token value element', () => {
@@ -316,8 +316,8 @@ describe('Filtered Search Visual Tokens', () => {
       const { updateLabelTokenColorSpy, updateUserTokenAppearanceSpy } = setupSpies(subject);
       subject.render(tokenValueContainer, tokenValueElement);
 
-      expect(updateLabelTokenColorSpy.calls.count()).toBe(0);
-      expect(updateUserTokenAppearanceSpy.calls.count()).toBe(0);
+      expect(updateLabelTokenColorSpy.mock.calls.length).toBe(0);
+      expect(updateUserTokenAppearanceSpy.mock.calls.length).toBe(0);
     });
 
     it('does not update user token appearance for `none` filter', () => {
@@ -328,7 +328,7 @@ describe('Filtered Search Visual Tokens', () => {
       const { updateUserTokenAppearanceSpy } = setupSpies(subject);
       subject.render(tokenValueContainer, tokenValueElement);
 
-      expect(updateUserTokenAppearanceSpy.calls.count()).toBe(0);
+      expect(updateUserTokenAppearanceSpy.mock.calls.length).toBe(0);
     });
 
     it('does not update user token appearance for `None` filter', () => {
@@ -339,7 +339,7 @@ describe('Filtered Search Visual Tokens', () => {
       const { updateUserTokenAppearanceSpy } = setupSpies(subject);
       subject.render(tokenValueContainer, tokenValueElement);
 
-      expect(updateUserTokenAppearanceSpy.calls.count()).toBe(0);
+      expect(updateUserTokenAppearanceSpy.mock.calls.length).toBe(0);
     });
 
     it('does not update user token appearance for `any` filter', () => {
@@ -350,7 +350,7 @@ describe('Filtered Search Visual Tokens', () => {
       const { updateUserTokenAppearanceSpy } = setupSpies(subject);
       subject.render(tokenValueContainer, tokenValueElement);
 
-      expect(updateUserTokenAppearanceSpy.calls.count()).toBe(0);
+      expect(updateUserTokenAppearanceSpy.mock.calls.length).toBe(0);
     });
 
     it('does not update label token color for `None` filter', () => {
@@ -361,7 +361,7 @@ describe('Filtered Search Visual Tokens', () => {
       const { updateLabelTokenColorSpy } = setupSpies(subject);
       subject.render(tokenValueContainer, tokenValueElement);
 
-      expect(updateLabelTokenColorSpy.calls.count()).toBe(0);
+      expect(updateLabelTokenColorSpy.mock.calls.length).toBe(0);
     });
 
     it('does not update label token color for `none` filter', () => {
@@ -372,7 +372,7 @@ describe('Filtered Search Visual Tokens', () => {
       const { updateLabelTokenColorSpy } = setupSpies(subject);
       subject.render(tokenValueContainer, tokenValueElement);
 
-      expect(updateLabelTokenColorSpy.calls.count()).toBe(0);
+      expect(updateLabelTokenColorSpy.mock.calls.length).toBe(0);
     });
 
     it('does not update label token color for `any` filter', () => {
@@ -383,7 +383,7 @@ describe('Filtered Search Visual Tokens', () => {
       const { updateLabelTokenColorSpy } = setupSpies(subject);
       subject.render(tokenValueContainer, tokenValueElement);
 
-      expect(updateLabelTokenColorSpy.calls.count()).toBe(0);
+      expect(updateLabelTokenColorSpy.mock.calls.length).toBe(0);
     });
   });
 });