From a9850b25c3624fe31d0230ad3f0df00fec6b7d48 Mon Sep 17 00:00:00 2001 From: Paul Slaughter Date: Fri, 24 May 2019 13:14:24 -0500 Subject: Jestify autosave spec and add localStorage helper The helper was needed because `jest.spyOn` would not work on this special window object property. The only way we could successfully spy on `localStorage` was with this helper. --- spec/frontend/autosave_spec.js | 151 +++++++++++++++++++++++++ spec/frontend/helpers/local_storage_helper.js | 41 +++++++ spec/javascripts/autosave_spec.js | 154 -------------------------- 3 files changed, 192 insertions(+), 154 deletions(-) create mode 100644 spec/frontend/autosave_spec.js create mode 100644 spec/frontend/helpers/local_storage_helper.js delete mode 100644 spec/javascripts/autosave_spec.js diff --git a/spec/frontend/autosave_spec.js b/spec/frontend/autosave_spec.js new file mode 100644 index 00000000000..4d9c8f96d62 --- /dev/null +++ b/spec/frontend/autosave_spec.js @@ -0,0 +1,151 @@ +import $ from 'jquery'; +import Autosave from '~/autosave'; +import AccessorUtilities from '~/lib/utils/accessor'; +import { useLocalStorageSpy } from 'helpers/local_storage_helper'; + +describe('Autosave', () => { + useLocalStorageSpy(); + + let autosave; + const field = $(''); + const key = 'key'; + + describe('class constructor', () => { + beforeEach(() => { + jest.spyOn(AccessorUtilities, 'isLocalStorageAccessSafe').mockReturnValue(true); + jest.spyOn(Autosave.prototype, 'restore').mockImplementation(() => {}); + }); + + it('should set .isLocalStorageAvailable', () => { + autosave = new Autosave(field, key); + + expect(AccessorUtilities.isLocalStorageAccessSafe).toHaveBeenCalled(); + expect(autosave.isLocalStorageAvailable).toBe(true); + }); + }); + + describe('restore', () => { + beforeEach(() => { + autosave = { + field, + key, + }; + }); + + describe('if .isLocalStorageAvailable is `false`', () => { + beforeEach(() => { + autosave.isLocalStorageAvailable = false; + + Autosave.prototype.restore.call(autosave); + }); + + it('should not call .getItem', () => { + expect(window.localStorage.getItem).not.toHaveBeenCalled(); + }); + }); + + describe('if .isLocalStorageAvailable is `true`', () => { + beforeEach(() => { + autosave.isLocalStorageAvailable = true; + }); + + it('should call .getItem', () => { + Autosave.prototype.restore.call(autosave); + + expect(window.localStorage.getItem).toHaveBeenCalledWith(key); + }); + + it('triggers jquery event', () => { + jest.spyOn(autosave.field, 'trigger').mockImplementation(() => {}); + + Autosave.prototype.restore.call(autosave); + + expect(field.trigger).toHaveBeenCalled(); + }); + + it('triggers native event', done => { + autosave.field.get(0).addEventListener('change', () => { + done(); + }); + + Autosave.prototype.restore.call(autosave); + }); + }); + + describe('if field gets deleted from DOM', () => { + beforeEach(() => { + autosave.field = $('.not-a-real-element'); + }); + + it('does not trigger event', () => { + jest.spyOn(field, 'trigger'); + + expect(field.trigger).not.toHaveBeenCalled(); + }); + }); + }); + + describe('save', () => { + beforeEach(() => { + autosave = { reset: jest.fn() }; + autosave.field = field; + field.val('value'); + }); + + describe('if .isLocalStorageAvailable is `false`', () => { + beforeEach(() => { + autosave.isLocalStorageAvailable = false; + + Autosave.prototype.save.call(autosave); + }); + + it('should not call .setItem', () => { + expect(window.localStorage.setItem).not.toHaveBeenCalled(); + }); + }); + + describe('if .isLocalStorageAvailable is `true`', () => { + beforeEach(() => { + autosave.isLocalStorageAvailable = true; + + Autosave.prototype.save.call(autosave); + }); + + it('should call .setItem', () => { + expect(window.localStorage.setItem).toHaveBeenCalled(); + }); + }); + }); + + describe('reset', () => { + beforeEach(() => { + autosave = { + key, + }; + }); + + describe('if .isLocalStorageAvailable is `false`', () => { + beforeEach(() => { + autosave.isLocalStorageAvailable = false; + + Autosave.prototype.reset.call(autosave); + }); + + it('should not call .removeItem', () => { + expect(window.localStorage.removeItem).not.toHaveBeenCalled(); + }); + }); + + describe('if .isLocalStorageAvailable is `true`', () => { + beforeEach(() => { + autosave.isLocalStorageAvailable = true; + + Autosave.prototype.reset.call(autosave); + }); + + it('should call .removeItem', () => { + expect(window.localStorage.removeItem).toHaveBeenCalledWith(key); + }); + }); + }); +}); diff --git a/spec/frontend/helpers/local_storage_helper.js b/spec/frontend/helpers/local_storage_helper.js new file mode 100644 index 00000000000..48e66b11767 --- /dev/null +++ b/spec/frontend/helpers/local_storage_helper.js @@ -0,0 +1,41 @@ +/** + * Manage the instance of a custom `window.localStorage` + * + * This only encapsulates the setup / teardown logic so that it can easily be + * reused with different implementations (i.e. a spy or a [fake][1]) + * + * [1]: https://stackoverflow.com/a/41434763/1708147 + * + * @param {() => any} fn Function that returns the object to use for localStorage + */ +const useLocalStorage = fn => { + const origLocalStorage = window.localStorage; + let currentLocalStorage; + + Object.defineProperty(window, 'localStorage', { + get: () => currentLocalStorage, + }); + + beforeEach(() => { + currentLocalStorage = fn(); + }); + + afterEach(() => { + currentLocalStorage = origLocalStorage; + }); +}; + +/** + * Create an object with the localStorage interface but `jest.fn()` implementations. + */ +export const createLocalStorageSpy = () => ({ + clear: jest.fn(), + getItem: jest.fn(), + setItem: jest.fn(), + removeItem: jest.fn(), +}); + +/** + * Before each test, overwrite `window.localStorage` with a spy implementation. + */ +export const useLocalStorageSpy = () => useLocalStorage(createLocalStorageSpy); diff --git a/spec/javascripts/autosave_spec.js b/spec/javascripts/autosave_spec.js deleted file mode 100644 index dcb1c781591..00000000000 --- a/spec/javascripts/autosave_spec.js +++ /dev/null @@ -1,154 +0,0 @@ -import $ from 'jquery'; -import Autosave from '~/autosave'; -import AccessorUtilities from '~/lib/utils/accessor'; - -describe('Autosave', () => { - let autosave; - const field = $(''); - const key = 'key'; - - describe('class constructor', () => { - beforeEach(() => { - spyOn(AccessorUtilities, 'isLocalStorageAccessSafe').and.returnValue(true); - spyOn(Autosave.prototype, 'restore'); - }); - - it('should set .isLocalStorageAvailable', () => { - autosave = new Autosave(field, key); - - expect(AccessorUtilities.isLocalStorageAccessSafe).toHaveBeenCalled(); - expect(autosave.isLocalStorageAvailable).toBe(true); - }); - }); - - describe('restore', () => { - beforeEach(() => { - autosave = { - field, - key, - }; - - spyOn(window.localStorage, 'getItem'); - }); - - describe('if .isLocalStorageAvailable is `false`', () => { - beforeEach(() => { - autosave.isLocalStorageAvailable = false; - - Autosave.prototype.restore.call(autosave); - }); - - it('should not call .getItem', () => { - expect(window.localStorage.getItem).not.toHaveBeenCalled(); - }); - }); - - describe('if .isLocalStorageAvailable is `true`', () => { - beforeEach(() => { - autosave.isLocalStorageAvailable = true; - }); - - it('should call .getItem', () => { - Autosave.prototype.restore.call(autosave); - - expect(window.localStorage.getItem).toHaveBeenCalledWith(key); - }); - - it('triggers jquery event', () => { - spyOn(autosave.field, 'trigger').and.callThrough(); - - Autosave.prototype.restore.call(autosave); - - expect(field.trigger).toHaveBeenCalled(); - }); - - it('triggers native event', done => { - autosave.field.get(0).addEventListener('change', () => { - done(); - }); - - Autosave.prototype.restore.call(autosave); - }); - }); - - describe('if field gets deleted from DOM', () => { - beforeEach(() => { - autosave.field = $('.not-a-real-element'); - }); - - it('does not trigger event', () => { - spyOn(field, 'trigger').and.callThrough(); - - expect(field.trigger).not.toHaveBeenCalled(); - }); - }); - }); - - describe('save', () => { - beforeEach(() => { - autosave = jasmine.createSpyObj('autosave', ['reset']); - autosave.field = field; - field.val('value'); - - spyOn(window.localStorage, 'setItem'); - }); - - describe('if .isLocalStorageAvailable is `false`', () => { - beforeEach(() => { - autosave.isLocalStorageAvailable = false; - - Autosave.prototype.save.call(autosave); - }); - - it('should not call .setItem', () => { - expect(window.localStorage.setItem).not.toHaveBeenCalled(); - }); - }); - - describe('if .isLocalStorageAvailable is `true`', () => { - beforeEach(() => { - autosave.isLocalStorageAvailable = true; - - Autosave.prototype.save.call(autosave); - }); - - it('should call .setItem', () => { - expect(window.localStorage.setItem).toHaveBeenCalled(); - }); - }); - }); - - describe('reset', () => { - beforeEach(() => { - autosave = { - key, - }; - - spyOn(window.localStorage, 'removeItem'); - }); - - describe('if .isLocalStorageAvailable is `false`', () => { - beforeEach(() => { - autosave.isLocalStorageAvailable = false; - - Autosave.prototype.reset.call(autosave); - }); - - it('should not call .removeItem', () => { - expect(window.localStorage.removeItem).not.toHaveBeenCalled(); - }); - }); - - describe('if .isLocalStorageAvailable is `true`', () => { - beforeEach(() => { - autosave.isLocalStorageAvailable = true; - - Autosave.prototype.reset.call(autosave); - }); - - it('should call .removeItem', () => { - expect(window.localStorage.removeItem).toHaveBeenCalledWith(key); - }); - }); - }); -}); -- cgit v1.2.1