diff options
Diffstat (limited to 'spec/frontend/close_reopen_report_toggle_spec.js')
| -rw-r--r-- | spec/frontend/close_reopen_report_toggle_spec.js | 288 |
1 files changed, 288 insertions, 0 deletions
diff --git a/spec/frontend/close_reopen_report_toggle_spec.js b/spec/frontend/close_reopen_report_toggle_spec.js new file mode 100644 index 00000000000..f6b5e4bed87 --- /dev/null +++ b/spec/frontend/close_reopen_report_toggle_spec.js @@ -0,0 +1,288 @@ +import CloseReopenReportToggle from '~/close_reopen_report_toggle'; +import DropLab from '~/droplab/drop_lab'; + +describe('CloseReopenReportToggle', () => { + describe('class constructor', () => { + const dropdownTrigger = {}; + const dropdownList = {}; + const button = {}; + let commentTypeToggle; + + beforeEach(() => { + commentTypeToggle = new CloseReopenReportToggle({ + dropdownTrigger, + dropdownList, + button, + }); + }); + + it('sets .dropdownTrigger', () => { + expect(commentTypeToggle.dropdownTrigger).toBe(dropdownTrigger); + }); + + it('sets .dropdownList', () => { + expect(commentTypeToggle.dropdownList).toBe(dropdownList); + }); + + it('sets .button', () => { + expect(commentTypeToggle.button).toBe(button); + }); + }); + + describe('initDroplab', () => { + let closeReopenReportToggle; + const dropdownList = { + querySelector: jest.fn(), + }; + const dropdownTrigger = {}; + const button = {}; + const reopenItem = {}; + const closeItem = {}; + const config = {}; + + beforeEach(() => { + jest.spyOn(DropLab.prototype, 'init').mockImplementation(() => {}); + dropdownList.querySelector.mockReturnValueOnce(reopenItem).mockReturnValueOnce(closeItem); + + closeReopenReportToggle = new CloseReopenReportToggle({ + dropdownTrigger, + dropdownList, + button, + }); + + jest.spyOn(closeReopenReportToggle, 'setConfig').mockReturnValue(config); + + closeReopenReportToggle.initDroplab(); + }); + + it('sets .reopenItem and .closeItem', () => { + expect(dropdownList.querySelector).toHaveBeenCalledWith('.reopen-item'); + expect(dropdownList.querySelector).toHaveBeenCalledWith('.close-item'); + expect(closeReopenReportToggle.reopenItem).toBe(reopenItem); + expect(closeReopenReportToggle.closeItem).toBe(closeItem); + }); + + it('sets .droplab', () => { + expect(closeReopenReportToggle.droplab).toEqual(expect.any(Object)); + }); + + it('calls .setConfig', () => { + expect(closeReopenReportToggle.setConfig).toHaveBeenCalled(); + }); + + it('calls droplab.init', () => { + expect(DropLab.prototype.init).toHaveBeenCalledWith( + dropdownTrigger, + dropdownList, + expect.any(Array), + config, + ); + }); + }); + + describe('updateButton', () => { + let closeReopenReportToggle; + const dropdownList = {}; + const dropdownTrigger = {}; + const button = { + blur: jest.fn(), + }; + const isClosed = true; + + beforeEach(() => { + closeReopenReportToggle = new CloseReopenReportToggle({ + dropdownTrigger, + dropdownList, + button, + }); + + jest.spyOn(closeReopenReportToggle, 'toggleButtonType').mockImplementation(() => {}); + + closeReopenReportToggle.updateButton(isClosed); + }); + + it('calls .toggleButtonType', () => { + expect(closeReopenReportToggle.toggleButtonType).toHaveBeenCalledWith(isClosed); + }); + + it('calls .button.blur', () => { + expect(closeReopenReportToggle.button.blur).toHaveBeenCalled(); + }); + }); + + describe('toggleButtonType', () => { + let closeReopenReportToggle; + const dropdownList = {}; + const dropdownTrigger = {}; + const button = {}; + const isClosed = true; + const showItem = { + click: jest.fn(), + }; + const hideItem = {}; + showItem.classList = { + add: jest.fn(), + remove: jest.fn(), + }; + hideItem.classList = { + add: jest.fn(), + remove: jest.fn(), + }; + + beforeEach(() => { + closeReopenReportToggle = new CloseReopenReportToggle({ + dropdownTrigger, + dropdownList, + button, + }); + + jest.spyOn(closeReopenReportToggle, 'getButtonTypes').mockReturnValue([showItem, hideItem]); + + closeReopenReportToggle.toggleButtonType(isClosed); + }); + + it('calls .getButtonTypes', () => { + expect(closeReopenReportToggle.getButtonTypes).toHaveBeenCalledWith(isClosed); + }); + + it('removes hide class and add selected class to showItem, opposite for hideItem', () => { + expect(showItem.classList.remove).toHaveBeenCalledWith('hidden'); + expect(showItem.classList.add).toHaveBeenCalledWith('droplab-item-selected'); + expect(hideItem.classList.add).toHaveBeenCalledWith('hidden'); + expect(hideItem.classList.remove).toHaveBeenCalledWith('droplab-item-selected'); + }); + + it('clicks the showItem', () => { + expect(showItem.click).toHaveBeenCalled(); + }); + }); + + describe('getButtonTypes', () => { + let closeReopenReportToggle; + const dropdownList = {}; + const dropdownTrigger = {}; + const button = {}; + const reopenItem = {}; + const closeItem = {}; + + beforeEach(() => { + closeReopenReportToggle = new CloseReopenReportToggle({ + dropdownTrigger, + dropdownList, + button, + }); + + closeReopenReportToggle.reopenItem = reopenItem; + closeReopenReportToggle.closeItem = closeItem; + }); + + it('returns reopenItem, closeItem if isClosed is true', () => { + const buttonTypes = closeReopenReportToggle.getButtonTypes(true); + + expect(buttonTypes).toEqual([reopenItem, closeItem]); + }); + + it('returns closeItem, reopenItem if isClosed is false', () => { + const buttonTypes = closeReopenReportToggle.getButtonTypes(false); + + expect(buttonTypes).toEqual([closeItem, reopenItem]); + }); + }); + + describe('setDisable', () => { + let closeReopenReportToggle; + const dropdownList = {}; + const dropdownTrigger = { + setAttribute: jest.fn(), + removeAttribute: jest.fn(), + }; + const button = { + setAttribute: jest.fn(), + removeAttribute: jest.fn(), + }; + + beforeEach(() => { + closeReopenReportToggle = new CloseReopenReportToggle({ + dropdownTrigger, + dropdownList, + button, + }); + }); + + it('disable .button and .dropdownTrigger if shouldDisable is true', () => { + closeReopenReportToggle.setDisable(true); + + expect(button.setAttribute).toHaveBeenCalledWith('disabled', 'true'); + expect(dropdownTrigger.setAttribute).toHaveBeenCalledWith('disabled', 'true'); + }); + + it('disable .button and .dropdownTrigger if shouldDisable is undefined', () => { + closeReopenReportToggle.setDisable(); + + expect(button.setAttribute).toHaveBeenCalledWith('disabled', 'true'); + expect(dropdownTrigger.setAttribute).toHaveBeenCalledWith('disabled', 'true'); + }); + + it('enable .button and .dropdownTrigger if shouldDisable is false', () => { + closeReopenReportToggle.setDisable(false); + + expect(button.removeAttribute).toHaveBeenCalledWith('disabled'); + expect(dropdownTrigger.removeAttribute).toHaveBeenCalledWith('disabled'); + }); + }); + + describe('setConfig', () => { + let closeReopenReportToggle; + const dropdownList = {}; + const dropdownTrigger = {}; + const button = {}; + let config; + + beforeEach(() => { + closeReopenReportToggle = new CloseReopenReportToggle({ + dropdownTrigger, + dropdownList, + button, + }); + + config = closeReopenReportToggle.setConfig(); + }); + + it('returns a config object', () => { + expect(config).toEqual({ + InputSetter: [ + { + input: button, + valueAttribute: 'data-text', + inputAttribute: 'data-value', + }, + { + input: button, + valueAttribute: 'data-text', + inputAttribute: 'title', + }, + { + input: button, + valueAttribute: 'data-button-class', + inputAttribute: 'class', + }, + { + input: dropdownTrigger, + valueAttribute: 'data-toggle-class', + inputAttribute: 'class', + }, + { + input: button, + valueAttribute: 'data-url', + inputAttribute: 'href', + }, + { + input: button, + valueAttribute: 'data-method', + inputAttribute: 'data-method', + }, + ], + }); + }); + }); +}); |