Add tests to attributesModal

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

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

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(<AttributesPickerModal {...props} />, messages, context);
 
 describe('<AttributesPickerModal />', () => {
-  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();
   });
 });