Repository: mui/material-ui (TypeScript)
Date: 2019-09-19 12:34:45+00:00
Task type: Bug Fix

Issue:
[TreeItem] Prop "endIcon" is not used
I try to use `endIcon` prop in `<TreeItem />` but it didn't work.

I checked the code of TreeItem.js and found `endIcon` prop is not being used:

```js
if (!icon) {
    if (expandable) {
      if (!expanded) {
        icon = expandIcon || icons.defaultExpandIcon;
      } else {
        icon = collapseIcon || icons.defaultCollapseIcon;
      }

      if (!icon) {
        icon = icon || icons.defaultParentIcon;
      }
    } else {
      icon = icons.defaultEndIcon;    // Why not 'endIcon || icons.defaultEndIcon' ?
    }
  }
```


Issue discussion:
@Chocolatl Thank you for reporting this problem, your fix looks correct. Do you want to open a pull request with it? :)

```diff
diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.js b/packages/material-ui-lab/src/TreeItem/TreeItem.js
index 36466abb0..02841ef1b 100644
--- a/packages/material-ui-lab/src/TreeItem/TreeItem.js
+++ b/packages/material-ui-lab/src/TreeItem/TreeItem.js
@@ -114,7 +114,7 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
         icon = icon || icons.defaultParentIcon;
       }
     } else {
-      icon = icons.defaultEndIcon;
+      icon = endIcon || icons.defaultEndIcon;
     }
   }
```

Solution patch:
diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.js b/packages/material-ui-lab/src/TreeItem/TreeItem.js
--- a/packages/material-ui-lab/src/TreeItem/TreeItem.js
+++ b/packages/material-ui-lab/src/TreeItem/TreeItem.js
@@ -111,10 +111,10 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
       }
 
       if (!icon) {
-        icon = icon || icons.defaultParentIcon;
+        icon = icons.defaultParentIcon;
       }
     } else {
-      icon = icons.defaultEndIcon;
+      icon = endIcon || icons.defaultEndIcon;
     }
   }
 


Test patch:
diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.test.js b/packages/material-ui-lab/src/TreeItem/TreeItem.test.js
--- a/packages/material-ui-lab/src/TreeItem/TreeItem.test.js
+++ b/packages/material-ui-lab/src/TreeItem/TreeItem.test.js
@@ -40,6 +40,52 @@ describe('<TreeItem />', () => {
     expect(handleClick.callCount).to.equal(1);
   });
 
+  it('should display the right icons', () => {
+    const defaultEndIcon = <div data-test="defaultEndIcon" />;
+    const defaultExpandIcon = <div data-test="defaultExpandIcon" />;
+    const defaultCollapseIcon = <div data-test="defaultCollapseIcon" />;
+    const defaultParentIcon = <div data-test="defaultParentIcon" />;
+    const icon = <div data-test="icon" />;
+    const endIcon = <div data-test="endIcon" />;
+
+    const { getByTestId } = render(
+      <TreeView
+        defaultEndIcon={defaultEndIcon}
+        defaultExpandIcon={defaultExpandIcon}
+        defaultCollapseIcon={defaultCollapseIcon}
+        defaultParentIcon={defaultParentIcon}
+        defaultExpanded={['1']}
+      >
+        <TreeItem nodeId="1" label="1" data-testid="1">
+          <TreeItem nodeId="2" label="2" data-testid="2" />
+          <TreeItem nodeId="5" label="5" data-testid="5" icon={icon} />
+          <TreeItem nodeId="6" label="6" data-testid="6" endIcon={endIcon} />
+        </TreeItem>
+        <TreeItem nodeId="3" label="3" data-testid="3">
+          <TreeItem nodeId="4" label="4" data-testid="4" />
+        </TreeItem>
+      </TreeView>,
+    );
+
+    const getIcon = testId => getByTestId(testId).querySelector(`.${classes.iconContainer} div`);
+
+    expect(getIcon('1'))
+      .attribute('data-test')
+      .to.equal('defaultCollapseIcon');
+    expect(getIcon('2'))
+      .attribute('data-test')
+      .to.equal('defaultEndIcon');
+    expect(getIcon('3'))
+      .attribute('data-test')
+      .to.equal('defaultExpandIcon');
+    expect(getIcon('5'))
+      .attribute('data-test')
+      .to.equal('icon');
+    expect(getIcon('6'))
+      .attribute('data-test')
+      .to.equal('endIcon');
+  });
+
   it('should not call onClick when children are clicked', () => {
     const handleClick = spy();