fix: add manual displayName for components with other components in s…

…tatic fields

.eslintrc.yml

@@ -7,7 +7,7 @@ globals:
   shallow: true
   render: true
   mount: true
-  enzumeToJson: true
+  enzymeToJson: true
   EightBaseBoostProvider: true
 
 rules:  

flow-typed/global.js

@@ -11,7 +11,7 @@ declare var Otherwise: React$ComponentType<$Exact<{ children: React$Node }>>;
 declare var render: typeof __enzume.render;
 declare var mount: typeof __enzume.mount;
 declare var shallow: typeof __enzume.shallow;
-declare var enzumeToJson: (any) => string;
+declare var enzymeToJson: (any) => string;
 declare var EightBaseBoostProvider: React$ComponentType<*>;
 
 /** hocs helpers */

jest.setup.js

@@ -2,7 +2,7 @@ import * as emotion from 'emotion';
 import { createSerializer } from 'jest-emotion';
 import { configure, shallow, render, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
-import enzumeToJson from 'enzyme-to-json';
+import enzymeToJson from 'enzyme-to-json';
 import { EightBaseBoostProvider } from './src';
 
 configure({ adapter: new Adapter() });
@@ -11,7 +11,7 @@ configure({ adapter: new Adapter() });
 global.shallow = shallow;
 global.render = render;
 global.mount = mount;
-global.enzumeToJson = enzumeToJson;
+global.enzymeToJson = enzymeToJson;
 global.EightBaseBoostProvider = EightBaseBoostProvider;
 
 expect.addSnapshotSerializer(createSerializer(emotion));

src/components/Dialog/Dialog.js

@@ -104,6 +104,8 @@ Dialog.defaultProps = {
   tagName: 'div',
 };
 
+Dialog.displayName = 'Dialog';
+
 Dialog.Body = DialogBody;
 Dialog.Header = DialogHeader;
 Dialog.Footer = DialogFooter;

src/components/Dropdown/Dropdown.js

@@ -2,7 +2,7 @@
 
 import React, { Component } from 'react';
 import fp from 'lodash/fp';
-import { compose, withStateHandlers, branch, setDisplayName } from 'recompose';
+import { compose, withStateHandlers, branch } from 'recompose';
 import { Manager } from 'react-popper';
 
 import { DropdownContext } from './DropdownContext';
@@ -41,7 +41,6 @@ type DropdownContextData = {|
 
 /** When component has defaultOpen prop then adds hoc with isOpen state */
 const dropDownEnhancer: any = compose(
-  setDisplayName('Dropdown'),
   branch(
     (props) => !fp.isNil(props.defaultOpen),
     withStateHandlers(
@@ -56,7 +55,7 @@ const dropDownEnhancer: any = compose(
 
 
 const DropdownPlate = dropDownEnhancer(
-  class DropdownPlateBase extends Component<DropdownControlledProps> {
+  class DropdownPlate extends Component<DropdownControlledProps> {
   instanceIndex: number;
   dropdownRef: ?HTMLElement;
 
@@ -66,7 +65,7 @@ const DropdownPlate = dropDownEnhancer(
   constructor(props: DropdownControlledProps) {
       super(props);
 
-      this.instanceIndex = DropdownPlateBase.instancesCount++;
+      this.instanceIndex = DropdownPlate.instancesCount++;
     }
 
   toggleDropdown = () => {
@@ -115,6 +114,8 @@ const Dropdown = (props: DropdownControlledProps | DropdownUncontroledProps) =>
   <DropdownPlate { ...props } />
 );
 
+Dropdown.displayName = 'Dropdown';
+
 Dropdown.Head = DropdownHead;
 Dropdown.Body = DropdownBody;
 

src/components/Dropdown/Dropdowon.test.js

@@ -5,6 +5,21 @@ import { Dropdown } from './';
 
 
 describe('<Dropdown />', () => {
+
+  it('should render dropdown', () => {
+    const wrapper = mount(
+      <Dropdown isOpen={ false }>
+        <Dropdown.Head>Head</Dropdown.Head>
+        <Dropdown.Body>
+          <div className="body">Body</div>
+        </Dropdown.Body>
+      </Dropdown>,
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+
   it('should open and close dropdwon by changing the props', () => {
     const wrapper = mount(
       <Dropdown isOpen={ false }>

src/components/Dropdown/__snapshots__/Dropdowon.test.js.snap

@@ -0,0 +1,180 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Dropdown /> should render dropdown 1`] = `
+.emotion-4 {
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  height: auto;
+  width: auto;
+  z-index: 2;
+}
+
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+<Dropdown
+  isOpen={false}
+>
+  <branch(DropdownPlate)
+    isOpen={false}
+  >
+    <DropdownPlate
+      isOpen={false}
+    >
+      <Styled(dropdown)
+        insideRef={[Function]}
+        tag="div"
+      >
+        <Tag
+          className="emotion-8 emotion-1"
+          insideRef={[Function]}
+          tag="div"
+          tagName="div"
+        >
+          <div
+            className="emotion-8 emotion-1"
+          >
+            <Manager
+              tag={false}
+            >
+              <Dropdown.Head>
+                <DropdownHead
+                  dropdown={
+                    Object {
+                      "closeDropdown": undefined,
+                      "isOpen": false,
+                      "outsideClickIgnoreClass": "ignore-react-onclickoutside-0",
+                      "targetWidth": undefined,
+                      "toggleDropdown": [Function],
+                    }
+                  }
+                >
+                  <Styled(dropdownHead)
+                    className="ignore-react-onclickoutside-0"
+                    onClick={[Function]}
+                    tagName="div"
+                  >
+                    <Tag
+                      className="ignore-react-onclickoutside-0 emotion-4 emotion-1"
+                      onClick={[Function]}
+                      tagName="div"
+                    >
+                      <div
+                        className="ignore-react-onclickoutside-0 emotion-4 emotion-1"
+                        onClick={[Function]}
+                      >
+                        <Reference>
+                          <InnerReference
+                            getReferenceRef={[Function]}
+                          >
+                            <Styled(dropdownHeadTarget)
+                              insideRef={[Function]}
+                              tagName="div"
+                            >
+                              <Tag
+                                className="emotion-0 emotion-1"
+                                insideRef={[Function]}
+                                tagName="div"
+                              >
+                                <div
+                                  className="emotion-0 emotion-1"
+                                >
+                                  Head
+                                </div>
+                              </Tag>
+                            </Styled(dropdownHeadTarget)>
+                          </InnerReference>
+                        </Reference>
+                      </div>
+                    </Tag>
+                  </Styled(dropdownHead)>
+                </DropdownHead>
+              </Dropdown.Head>
+              <Dropdown.Body>
+                <withProps(OnClickOutside(DropdownBodyBase))
+                  dropdown={
+                    Object {
+                      "closeDropdown": undefined,
+                      "isOpen": false,
+                      "outsideClickIgnoreClass": "ignore-react-onclickoutside-0",
+                      "targetWidth": undefined,
+                      "toggleDropdown": [Function],
+                    }
+                  }
+                >
+                  <OnClickOutside(DropdownBodyBase)
+                    dropdown={
+                      Object {
+                        "closeDropdown": undefined,
+                        "isOpen": false,
+                        "outsideClickIgnoreClass": "ignore-react-onclickoutside-0",
+                        "targetWidth": undefined,
+                        "toggleDropdown": [Function],
+                      }
+                    }
+                    eventTypes={
+                      Array [
+                        "mousedown",
+                        "touchstart",
+                      ]
+                    }
+                    excludeScrollbar={false}
+                    outsideClickIgnoreClass="ignore-react-onclickoutside-0"
+                    preventDefault={false}
+                    stopPropagation={false}
+                  >
+                    <DropdownBodyBase
+                      background="none"
+                      borderRadius="md"
+                      closeOnClickOutside={true}
+                      disableOnClickOutside={[Function]}
+                      dropdown={
+                        Object {
+                          "closeDropdown": undefined,
+                          "isOpen": false,
+                          "outsideClickIgnoreClass": "ignore-react-onclickoutside-0",
+                          "targetWidth": undefined,
+                          "toggleDropdown": [Function],
+                        }
+                      }
+                      enableOnClickOutside={[Function]}
+                      eventTypes={
+                        Array [
+                          "mousedown",
+                          "touchstart",
+                        ]
+                      }
+                      forceRender={false}
+                      isOpen={false}
+                      offset="xs"
+                      outsideClickIgnoreClass="ignore-react-onclickoutside-0"
+                      padding="none"
+                      pin="left"
+                      placement="bottom"
+                      preventDefault={false}
+                      stopPropagation={false}
+                      withPortal={false}
+                    />
+                  </OnClickOutside(DropdownBodyBase)>
+                </withProps(OnClickOutside(DropdownBodyBase))>
+              </Dropdown.Body>
+            </Manager>
+          </div>
+        </Tag>
+      </Styled(dropdown)>
+    </DropdownPlate>
+  </branch(DropdownPlate)>
+</Dropdown>
+`;

src/components/Form/Form.js

@@ -74,6 +74,9 @@ Form.defaultProps = {
   alignItems: 'stretch',
 };
 
+
+Form.displayName = 'Form';
+
 Form.Field = FormField;
 Form.Section = FormSection;
 Form.SectionBody = FormSectionBody;

src/components/Form/Form.test.js

@@ -4,7 +4,37 @@ import { Form } from './';
 
 describe('<Form />', () => {
 
-  it('should render form components', () => {
+  it('should shallow form', () => {
+    const wrapperForm = shallow(<Form><div /></Form>);
+    expect(wrapperForm).toMatchSnapshot();
+  });
+
+
+  it('should shallow form error', () => {
+    const wrapperFormError = shallow(<Form.Error error="Some error" />);
+    expect(wrapperFormError).toMatchSnapshot();
+  });
+
+
+  it('should shallow form section', () => {
+    const wrapperFormSection = shallow(<Form.Section><div /></Form.Section>);
+    expect(wrapperFormSection).toMatchSnapshot();
+  });
+
+
+  it('should shallow form section body', () => {
+    const wrapperFormSectionBody = shallow(<Form.SectionBody><div /></Form.SectionBody>);
+    expect(wrapperFormSectionBody).toMatchSnapshot();
+  });
+
+
+  it('should shallow form field', () => {
+    const wrapperFormField = shallow(<Form.Field meta={{}} label="Field label" />);
+    expect(wrapperFormField).toMatchSnapshot();
+  });
+
+
+  it('should render form components content', () => {
     const wrapper = mount(
       <EightBaseBoostProvider>
         <Form>