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();
});
});