[List] Memoize context value

packages/material-ui/src/List/List.js

@@ -40,6 +40,8 @@ const List = React.forwardRef(function List(props, ref) {
     ...other
   } = props;
 
+  const context = React.useMemo(() => ({ dense }), [dense]);
+
   return (
     <Component
       className={clsx(
@@ -54,7 +56,7 @@ const List = React.forwardRef(function List(props, ref) {
       ref={ref}
       {...other}
     >
-      <ListContext.Provider value={{ dense }}>
+      <ListContext.Provider value={context}>
         {subheader}
         {children}
       </ListContext.Provider>

packages/material-ui/src/List/List.test.js

@@ -1,49 +1,49 @@
 import React from 'react';
 import { assert } from 'chai';
-import { createMount, createShallow, getClasses, testRef } from '@material-ui/core/test-utils';
+import {
+  createMount,
+  findOutermostIntrinsic,
+  getClasses,
+  testRef,
+} from '@material-ui/core/test-utils';
 import ListSubheader from '../ListSubheader';
 import List from './List';
+import ListItem from '../ListItem';
 
 describe('<List />', () => {
   let mount;
-  let shallow;
   let classes;
 
   before(() => {
     mount = createMount();
-    shallow = createShallow({ dive: true });
     classes = getClasses(<List />);
   });
 
   after(() => {
     mount.cleanUp();
   });
 
-  it('should render a div', () => {
-    const wrapper = shallow(<List component="div" />);
-    assert.strictEqual(wrapper.name(), 'div');
+  it('renders a ul by default', () => {
+    const wrapper = mount(<List />);
+    assert.strictEqual(findOutermostIntrinsic(wrapper).type(), 'ul');
   });
 
-  it('should render a ul', () => {
-    const wrapper = shallow(<List />);
-    assert.strictEqual(wrapper.name(), 'ul');
+  it('can render a div', () => {
+    const wrapper = mount(<List component="div" />);
+    assert.strictEqual(findOutermostIntrinsic(wrapper).type(), 'div');
   });
 
   it('should render with the user, root and padding classes', () => {
-    const wrapper = shallow(<List className="woofList" />);
-    assert.strictEqual(wrapper.hasClass('woofList'), true);
-    assert.strictEqual(wrapper.hasClass(classes.root), true);
-    assert.strictEqual(wrapper.hasClass(classes.padding), true);
+    const wrapper = mount(<List className="woofList" />);
+    const root = wrapper.find('ul');
+    assert.strictEqual(root.hasClass('woofList'), true);
+    assert.strictEqual(root.hasClass(classes.root), true);
+    assert.strictEqual(root.hasClass(classes.padding), true);
   });
 
-  it('should disable the padding', () => {
-    const wrapper = shallow(<List disablePadding />);
-    assert.strictEqual(wrapper.hasClass(classes.root), true);
-    assert.strictEqual(
-      wrapper.hasClass(classes.padding),
-      false,
-      'should not have the padding class',
-    );
+  it('can disable the padding', () => {
+    const wrapper = mount(<List disablePadding />);
+    assert.strictEqual(wrapper.find('ul').hasClass(classes.padding), false);
   });
 
   it('does forward refs', () => {
@@ -52,32 +52,43 @@ describe('<List />', () => {
 
   describe('prop: subheader', () => {
     it('should render with subheader class', () => {
-      const wrapper = shallow(<List subheader={<ListSubheader>Title</ListSubheader>} />);
-      assert.strictEqual(wrapper.hasClass(classes.root), true);
-      assert.strictEqual(
-        wrapper.hasClass(classes.subheader),
-        true,
-        'should have the subheader class',
-      );
+      const wrapper = mount(<List subheader={<ListSubheader>Title</ListSubheader>} />);
+      assert.strictEqual(wrapper.find('ul').hasClass(classes.subheader), true);
     });
 
     it('should render ListSubheader', () => {
-      const wrapper = shallow(<List subheader={<ListSubheader>Title</ListSubheader>} />);
+      const wrapper = mount(<List subheader={<ListSubheader>Title</ListSubheader>} />);
       assert.strictEqual(wrapper.find(ListSubheader).length, 1);
     });
   });
 
-  describe('context: dense', () => {
-    it('should forward the context', () => {
-      const wrapper1 = shallow(<List />);
-      assert.strictEqual(
-        wrapper1.hasClass(classes.dense),
-        false,
-        'dense should be false by default',
+  describe('prop: dense', () => {
+    it('is disabled by default', () => {
+      const wrapper = mount(<List />);
+      assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass(classes.dense), false);
+    });
+
+    it('adds a dense class', () => {
+      const wrapper = mount(<List dense />);
+      assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass(classes.dense), true);
+    });
+
+    it('sets dense on deep nested ListItem', () => {
+      // mocking a tooltip
+      const Tooltip = React.Fragment;
+
+      const wrapper = mount(
+        <List dense>
+          <Tooltip>
+            <ListItem>Inbox</ListItem>
+          </Tooltip>
+          <ListItem>Drafts</ListItem>
+          <ListItem />
+        </List>,
       );
 
-      const wrapper2 = shallow(<List dense />);
-      assert.strictEqual(wrapper2.hasClass(classes.dense), true);
+      const listItemClasses = getClasses(<ListItem />);
+      assert.strictEqual(wrapper.find('li').every(`.${listItemClasses.dense}`), true);
     });
   });
 });