fix(List): render children list only when required (#1472)

* fix(List): remove class parent when items is empty * fix(List): empty array parent--item (#1459) * fix(List): rename variable isItemHasChildren to itemHasChildren
algolia · Aug 7, 2018 · 9eb2cbb · 9eb2cbb
1 parent c5f189b
commit 9eb2cbb
Show file tree

Hide file tree

Showing 3 changed files with 362 additions and 9 deletions.
diff --git a/packages/react-instantsearch-dom/src/components/List.js b/packages/react-instantsearch-dom/src/components/List.js
@@ -61,13 +61,7 @@ class List extends Component {
   };
 
   renderItem = (item, resetQuery) => {
-    const items = item.items && (
-      <ul className={this.props.cx('list', 'list--child')}>
-        {item.items
-          .slice(0, this.getLimit())
-          .map(child => this.renderItem(child, item))}
-      </ul>
-    );
+    const itemHasChildren = item.items && Boolean(item.items.length);
 
     return (
       <li
@@ -76,11 +70,17 @@ class List extends Component {
           'item',
           item.isRefined && 'item--selected',
           item.noRefinement && 'item--noRefinement',
-          items && 'item--parent'
+          itemHasChildren && 'item--parent'
         )}
       >
         {this.props.renderItem(item, resetQuery)}
-        {items}
+        {itemHasChildren && (
+          <ul className={this.props.cx('list', 'list--child')}>
+            {item.items
+              .slice(0, this.getLimit())
+              .map(child => this.renderItem(child, item))}
+          </ul>
+        )}
       </li>
     );
   };

diff --git a/packages/react-instantsearch-dom/src/components/__tests__/List.js b/packages/react-instantsearch-dom/src/components/__tests__/List.js
@@ -0,0 +1,147 @@
+import React from 'react';
+import Enzyme, { shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import List from '../List';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('List', () => {
+  const defaultProps = {
+    items: [],
+    canRefine: true,
+    renderItem: item => <span>{item.value}</span>,
+    cx: (...args) => args.filter(Boolean).join(' '),
+  };
+
+  const apple = {
+    label: 'Apple',
+    value: 'Apple',
+    count: 100,
+    isRefined: false,
+  };
+
+  const appleSubElements = [
+    {
+      label: 'iPhone',
+      value: 'iPhone',
+      count: 50,
+      isRefined: false,
+    },
+    {
+      label: 'iPad',
+      value: 'iPad',
+      count: 50,
+      isRefined: false,
+    },
+  ];
+
+  const samsung = {
+    label: 'Samsung',
+    value: 'Samsung',
+    count: 50,
+    isRefined: false,
+  };
+
+  const samsungSubElements = [
+    {
+      label: 'S8',
+      value: 'S8',
+      count: 25,
+      isRefined: false,
+    },
+    {
+      label: 'Note 5',
+      value: 'Note 5',
+      count: 25,
+      isRefined: false,
+    },
+  ];
+
+  const microsoft = {
+    label: 'Microsoft',
+    value: 'Microsoft',
+    count: 25,
+    isRefined: false,
+  };
+
+  const microsoftSubElements = [
+    {
+      label: 'Surface',
+      value: 'Surface',
+      count: 13,
+      isRefined: false,
+    },
+    {
+      label: 'Surface Pro',
+      value: 'Surface Pro',
+      count: 12,
+      isRefined: false,
+    },
+  ];
+
+  it('expect to render a list of items', () => {
+    const props = {
+      ...defaultProps,
+      items: [apple, samsung, microsoft],
+    };
+
+    const wrapper = shallow(<List {...props} />);
+
+    expect(wrapper.find('.item')).toHaveLength(3);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('expect to render a list of nested items', () => {
+    const props = {
+      ...defaultProps,
+      items: [
+        {
+          ...apple,
+          items: appleSubElements,
+        },
+        {
+          ...samsung,
+          items: samsungSubElements,
+        },
+        {
+          ...microsoft,
+          items: microsoftSubElements,
+        },
+      ],
+    };
+
+    const wrapper = shallow(<List {...props} />);
+
+    expect(wrapper.find('.item')).toHaveLength(9); // 3 parents + (3 * 2 children)
+    expect(wrapper.find('.item--parent')).toHaveLength(3);
+    expect(wrapper.find('.list--child')).toHaveLength(3);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('expect to render a list of nested items with empty children', () => {
+    const props = {
+      ...defaultProps,
+      items: [
+        {
+          ...apple,
+          items: appleSubElements,
+        },
+        {
+          ...samsung,
+          items: samsungSubElements,
+        },
+        microsoft,
+      ],
+    };
+
+    const wrapper = shallow(<List {...props} />);
+
+    expect(wrapper.find('.item')).toHaveLength(7); // 3 parents + (2 * 2 children)
+    expect(wrapper.find('.item--parent')).toHaveLength(2);
+    expect(wrapper.find('.list--child')).toHaveLength(2);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-instantsearch-dom/src/components/__tests__/__snapshots__/List.js.snap b/packages/react-instantsearch-dom/src/components/__tests__/__snapshots__/List.js.snap
@@ -0,0 +1,206 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`List expect to render a list of items 1`] = `
+<div
+  className=""
+>
+  <ul
+    className="list"
+  >
+    <li
+      className="item"
+      key="Apple"
+    >
+      <span>
+        Apple
+      </span>
+    </li>
+    <li
+      className="item"
+      key="Samsung"
+    >
+      <span>
+        Samsung
+      </span>
+    </li>
+    <li
+      className="item"
+      key="Microsoft"
+    >
+      <span>
+        Microsoft
+      </span>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`List expect to render a list of nested items 1`] = `
+<div
+  className=""
+>
+  <ul
+    className="list"
+  >
+    <li
+      className="item item--parent"
+      key="Apple"
+    >
+      <span>
+        Apple
+      </span>
+      <ul
+        className="list list--child"
+      >
+        <li
+          className="item"
+          key="iPhone"
+        >
+          <span>
+            iPhone
+          </span>
+        </li>
+        <li
+          className="item"
+          key="iPad"
+        >
+          <span>
+            iPad
+          </span>
+        </li>
+      </ul>
+    </li>
+    <li
+      className="item item--parent"
+      key="Samsung"
+    >
+      <span>
+        Samsung
+      </span>
+      <ul
+        className="list list--child"
+      >
+        <li
+          className="item"
+          key="S8"
+        >
+          <span>
+            S8
+          </span>
+        </li>
+        <li
+          className="item"
+          key="Note 5"
+        >
+          <span>
+            Note 5
+          </span>
+        </li>
+      </ul>
+    </li>
+    <li
+      className="item item--parent"
+      key="Microsoft"
+    >
+      <span>
+        Microsoft
+      </span>
+      <ul
+        className="list list--child"
+      >
+        <li
+          className="item"
+          key="Surface"
+        >
+          <span>
+            Surface
+          </span>
+        </li>
+        <li
+          className="item"
+          key="Surface Pro"
+        >
+          <span>
+            Surface Pro
+          </span>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`List expect to render a list of nested items with empty children 1`] = `
+<div
+  className=""
+>
+  <ul
+    className="list"
+  >
+    <li
+      className="item item--parent"
+      key="Apple"
+    >
+      <span>
+        Apple
+      </span>
+      <ul
+        className="list list--child"
+      >
+        <li
+          className="item"
+          key="iPhone"
+        >
+          <span>
+            iPhone
+          </span>
+        </li>
+        <li
+          className="item"
+          key="iPad"
+        >
+          <span>
+            iPad
+          </span>
+        </li>
+      </ul>
+    </li>
+    <li
+      className="item item--parent"
+      key="Samsung"
+    >
+      <span>
+        Samsung
+      </span>
+      <ul
+        className="list list--child"
+      >
+        <li
+          className="item"
+          key="S8"
+        >
+          <span>
+            S8
+          </span>
+        </li>
+        <li
+          className="item"
+          key="Note 5"
+        >
+          <span>
+            Note 5
+          </span>
+        </li>
+      </ul>
+    </li>
+    <li
+      className="item"
+      key="Microsoft"
+    >
+      <span>
+        Microsoft
+      </span>
+    </li>
+  </ul>
+</div>
+`;