Skip to content
Snippets Groups Projects
Commit 97b476c6 authored by Jessie Keck's avatar Jessie Keck Committed by Chris Beer
Browse files

Don't wrap NestedMenu children in a collapse (since the divs added by Collapse...

Don't wrap NestedMenu children in a collapse (since the divs added by Collapse are not HTML valid as children of a ul)
parent 9b3f4ce3
No related branches found
No related tags found
No related merge requests found
...@@ -38,12 +38,6 @@ describe('NestedMenu', () => { ...@@ -38,12 +38,6 @@ describe('NestedMenu', () => {
expect(wrapper.find('WithStyles(Typography)').children().text()).toEqual('GivenLabel'); expect(wrapper.find('WithStyles(Typography)').children().text()).toEqual('GivenLabel');
}); });
it('renders the given children wrapped in a MUI Collapse', () => {
wrapper = createWrapper();
expect(wrapper.find('WithStyles(Collapse)').children().text()).toEqual('GivenChildren');
});
it('toggles the local nestedMenuIsOpen state when clicking the MenuItem', () => { it('toggles the local nestedMenuIsOpen state when clicking the MenuItem', () => {
wrapper = createWrapper(); wrapper = createWrapper();
...@@ -71,15 +65,15 @@ describe('NestedMenu', () => { ...@@ -71,15 +65,15 @@ describe('NestedMenu', () => {
expect(wrapper.find('pure(ExpandLessSharpIcon)').length).toBe(1); expect(wrapper.find('pure(ExpandLessSharpIcon)').length).toBe(1);
}); });
it("the MUI Collapse component's in prop is based on the nestedMenuIsOpen state", () => { it("renders the component's children based on the nestedMenuIsOpen state", () => {
wrapper = createWrapper(); wrapper = createWrapper();
expect(wrapper.state().nestedMenuIsOpen).toBe(false); expect(wrapper.state().nestedMenuIsOpen).toBe(false);
expect(wrapper.find('WithStyles(Collapse)').find({ in: false }).length).toBe(1); expect(wrapper.children().length).toBe(1);
expect(wrapper.find('WithStyles(Collapse)').find({ in: true }).length).toBe(0); expect(wrapper.children().text()).not.toMatch(/GivenChildren/);
wrapper.setState({ nestedMenuIsOpen: true }); wrapper.setState({ nestedMenuIsOpen: true });
expect(wrapper.find('WithStyles(Collapse)').find({ in: true }).length).toBe(1); expect(wrapper.children().length).toBe(2);
expect(wrapper.find('WithStyles(Collapse)').find({ in: false }).length).toBe(0); expect(wrapper.children().last().text()).toEqual('GivenChildren');
}); });
}); });
...@@ -47,12 +47,11 @@ export class NestedMenu extends Component { ...@@ -47,12 +47,11 @@ export class NestedMenu extends Component {
} = this.props; } = this.props;
return ( return (
<> <>
<MenuItem onClick={this.handleMenuClick} {...otherProps}> <MenuItem onClick={this.handleMenuClick} divider={nestedMenuIsOpen} {...otherProps}>
{icon {icon
&& (<ListItemIcon>{icon}</ListItemIcon>) && (<ListItemIcon>{icon}</ListItemIcon>)
} }
{/* ListItemText adds left padding and we want this to line-up with menu items */} <ListItemText>
<ListItemText style={{ paddingLeft: 0 }}>
<Typography varient="inherit">{label}</Typography> <Typography varient="inherit">{label}</Typography>
</ListItemText> </ListItemText>
{ {
...@@ -61,9 +60,7 @@ export class NestedMenu extends Component { ...@@ -61,9 +60,7 @@ export class NestedMenu extends Component {
: <ExpandMore /> : <ExpandMore />
} }
</MenuItem> </MenuItem>
<Collapse in={nestedMenuIsOpen} timeout="auto" unmountOnExit> {nestedMenuIsOpen && children}
{children}
</Collapse>
</> </>
); );
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment