From afb3628f2f9ca2c415055d6cadac684ba2ee6232 Mon Sep 17 00:00:00 2001 From: soupette Date: Tue, 12 Mar 2019 16:53:10 +0100 Subject: [PATCH] Add tests to attributesModal --- .../lib/src/testUtils/mountWithIntl.js | 4 +- .../containers/AttributesPickerModal/index.js | 23 ++- .../AttributesPickerModal/tests/index.test.js | 171 +++++++++++++++++- 3 files changed, 187 insertions(+), 11 deletions(-) diff --git a/packages/strapi-helper-plugin/lib/src/testUtils/mountWithIntl.js b/packages/strapi-helper-plugin/lib/src/testUtils/mountWithIntl.js index 3df39f1ded..98517af53d 100644 --- a/packages/strapi-helper-plugin/lib/src/testUtils/mountWithIntl.js +++ b/packages/strapi-helper-plugin/lib/src/testUtils/mountWithIntl.js @@ -2,13 +2,13 @@ import React from 'react'; import { mount } from 'enzyme'; import { IntlProvider, intlShape } from 'react-intl'; -const mountWithIntl = (componentToMount, pluginTrads) => { +const mountWithIntl = (componentToMount, pluginTrads, context = {}) => { const intlProvider = new IntlProvider({ locale: 'en', messages: pluginTrads }, {}); const { intl } = intlProvider.getChildContext(); return mount( React.cloneElement(componentToMount, { intl }), { - context: { intl }, + context: { intl, ...context }, childContextTypes: { intl: intlShape }, }, ); diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/AttributesPickerModal/index.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/AttributesPickerModal/index.js index d0c0921c5c..b02a664f8c 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/containers/AttributesPickerModal/index.js +++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/AttributesPickerModal/index.js @@ -26,7 +26,7 @@ class AttributesPickerModal extends React.Component { // eslint-disable-line rea const { isOpen } = this.props; if (isOpen) { - document.addEventListener('keydown', this.handleKeyDown); + this.addEventListener(); } } @@ -37,9 +37,9 @@ class AttributesPickerModal extends React.Component { // eslint-disable-line rea this.updateNodeToFocus(0); if (isOpen) { - document.addEventListener('keydown', this.handleKeyDown); + this.addEventListener(); } else { - document.removeEventListener('keydown', this.handleKeyDown); + this.removeEventListener(); } } } @@ -57,16 +57,30 @@ class AttributesPickerModal extends React.Component { // eslint-disable-line rea }); } - handleKeyDown = (e ) => { + addEventListener = () => { + document.addEventListener('keydown', this.handleKeyDown); + } + + removeEventListener = () => { + document.removeEventListener('keydown', this.handleKeyDown); + } + + /* istanbul ignore next */ + handleKeyDown = (e) => { + /* istanbul ignore next */ const { nodeToFocus } = this.state; + /* istanbul ignore next */ const attributesLength = this.getAttributes().length; + /* istanbul ignore next */ let next = 0; // Disable the tab behavior + /* istanbul ignore next */ if (e.keyCode === 9) { e.preventDefault(); } + /* istanbul ignore next */ switch (e.keyCode) { case 9: // Tab case 39: // Right Arrow @@ -79,6 +93,7 @@ class AttributesPickerModal extends React.Component { // eslint-disable-line rea next = 0; } + /* istanbul ignore next */ this.updateNodeToFocus(next); } diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/AttributesPickerModal/tests/index.test.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/AttributesPickerModal/tests/index.test.js index d69954b9b6..2886a3964b 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/containers/AttributesPickerModal/tests/index.test.js +++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/AttributesPickerModal/tests/index.test.js @@ -1,10 +1,171 @@ -// import React from 'react'; -// import { shallow } from 'enzyme'; +import React from 'react'; +import { fromJS } from 'immutable'; -// import { AttributesPickerModal } from '../index'; +import mountWithIntl from 'testUtils/mountWithIntl'; +import formatMessagesWithPluginId from 'testUtils/formatMessages'; + +import pluginId from '../../../pluginId'; +import pluginTradsEn from '../../../translations/en.json'; + +import AttributesPickerModal from '../index'; + +const messages = formatMessagesWithPluginId(pluginId, pluginTradsEn); + +const renderComponent = (props = {}, context = {}) => mountWithIntl(, messages, context); describe('', () => { - it('Expect to have unit tests specified', () => { - expect(true).toEqual(false); + let props; + + beforeEach(() => { + props = { + isOpen: false, + push: jest.fn(), + }; + }); + + it('it should not crash', () => { + const wrapper = renderComponent(props); + + wrapper.unmount(); + }); + + it('should add the keyup eventListener when mounted if the isOpen prop is true', () => { + props.isOpen = true; + + const wrapper = renderComponent(props); + const spyOnAddEventListener = jest.spyOn(wrapper.instance(), 'addEventListener'); + + wrapper.instance().componentDidMount(); + + expect(spyOnAddEventListener).toHaveBeenCalled(); + + wrapper.unmount(); + }); + + it('should update the nodeToFocus state when the isOpen prop changes', () => { + const wrapper = renderComponent(props); + const spyOnUpdateNodeToFocus = jest.spyOn(wrapper.instance(), 'updateNodeToFocus'); + const spyOnAddEventListener = jest.spyOn(wrapper.instance(), 'addEventListener'); + + wrapper.setState({ nodeToFocus: 1 }); + wrapper.setProps({ isOpen: true }); + + expect(spyOnUpdateNodeToFocus).toHaveBeenCalledWith(0); + expect(spyOnAddEventListener).toHaveBeenCalled(); + expect(wrapper.state('nodeToFocus')).toEqual(0); + + wrapper.unmount(); + }); + + it('should remove the event listener when the props isOpen changes from true to false', () => { + props.isOpen = true; + + const wrapper = renderComponent(props); + const removeEventListener = jest.spyOn(wrapper.instance(), 'removeEventListener'); + + wrapper.setProps({ isOpen: false }); + + expect(removeEventListener).toHaveBeenCalled(); + + wrapper.unmount(); + }); + + it('should remove the media option if the upload plugin is not installed', () => { + const context = { + plugins: { + 'content-type-builder': {}, + }, + }; + const wrapper = renderComponent(props, context); + const { getAttributes } = wrapper.instance(); + + expect(getAttributes()).not.toContain({ + "type": "media", + "description": "content-type-builder.popUpForm.attributes.media.description", + }); + }); + + it('should not remove the media option if the upload plugin is installed', () => { + const context = { + plugins: { + 'content-type-builder': {}, + 'upload': {}, + }, + }; + const wrapper = renderComponent(props, context); + const { getAttributes } = wrapper.instance(); + + expect(getAttributes()).toContainEqual({ + "type": "media", + "description": "content-type-builder.popUpForm.attributes.media.description", + }); + + wrapper.unmount(); + }); + + it('should handle the plugins context object correctly', () => { + const context = { + plugins: fromJS({ + 'content-type-builder': {}, + 'upload': {}, + }), + }; + const wrapper = renderComponent(props, context); + const { getAttributes } = wrapper.instance(); + + expect(getAttributes()).not.toBeNull(); + }); + + it('should handle the onOpened instance correctly', () => { + const wrapper = renderComponent(props); + + wrapper.instance().handleOnOpened(); + expect(wrapper.state('isDisplayed')).toEqual(true); + + wrapper.unmount(); + }); + + it('should handle the onClosed instance correctly', () => { + const wrapper = renderComponent(props); + + wrapper.setState({ isDisplayed: true }); + wrapper.instance().handleOnClosed(); + + expect(wrapper.state('isDisplayed')).toEqual(false); + + wrapper.unmount(); + }); + + it('should handle the toggle instance correctly', () => { + const wrapper = renderComponent(props); + + wrapper.instance().handleToggle(); + + expect(props.push).toHaveBeenCalledWith({ search: '' }); + + wrapper.unmount(); + }); + + it('listens to the keydown event', () => { + const map = {}; + document.addEventListener = jest.fn((event, cb) => { + map[event] = cb; + }); + const context = { + plugins: fromJS({ + 'content-type-builder': {}, + 'upload': {}, + }), + }; + const wrapper = renderComponent(props, context); + + + const spyOnHandleKeyDown = jest.spyOn(wrapper.instance(), 'handleKeyDown'); + + wrapper.instance().forceUpdate(); + wrapper.setProps({ isOpen: true }); + map.keydown({ key: 'Tab' }); + + expect(spyOnHandleKeyDown).toHaveBeenCalled(); }); });