diff --git a/packages/material-ui-lab/src/Breadcrumb/Breadcrumb.test.js b/packages/material-ui-lab/src/Breadcrumb/Breadcrumb.test.js new file mode 100644 index 00000000000000..c0e91f5033197c --- /dev/null +++ b/packages/material-ui-lab/src/Breadcrumb/Breadcrumb.test.js @@ -0,0 +1,119 @@ +import React from 'react'; +import { assert } from 'chai'; +import { spy } from 'sinon'; +import { createRender, createShallow, getClasses } from '@material-ui/core/test-utils'; +import ButtonBase from '@material-ui/core/ButtonBase'; +import Icon from '@material-ui/core/Icon'; +import Breadcrumb from './Breadcrumb'; + +describe('', () => { + let shallow; + let render; + let classes; + const icon = font_icon; + + before(() => { + shallow = createShallow({ dive: true }); + render = createRender(); + classes = getClasses(); + }); + + it('should render a element', () => { + const wrapper = shallow(); + assert.strictEqual(wrapper.type(), ButtonBase); + }); + + it('should render the root & gutter classes', () => { + const wrapper = shallow(); + assert.strictEqual(wrapper.is('.test-class-name'), true); + assert.strictEqual(wrapper.hasClass(classes.root), true); + assert.strictEqual(wrapper.hasClass(classes.gutters), true); + }); + + it('should render the custom className and the root & gutter classes', () => { + const wrapper = shallow(); + assert.strictEqual(wrapper.is('.test-class-name'), true); + assert.strictEqual(wrapper.hasClass(classes.root), true); + assert.strictEqual(wrapper.hasClass(classes.gutters), true); + }); + + it('should render an Icon', () => { + const wrapper = shallow(); + const iconWrapper = wrapper.childAt(0); + assert.strictEqual(iconWrapper.find(Icon).length, 1); + }); + + it('should render the icon with the icon class', () => { + const wrapper = shallow(); + const iconWrapper = wrapper.childAt(0); + assert.strictEqual(iconWrapper.hasClass(classes.icon), true); + }); + + it('should not receive focus by default', () => { + const wrapper = shallow(); + assert.strictEqual(wrapper.props().tabIndex, -1); + }); + + describe('prop: active', () => { + let wrapper; + before(() => { + wrapper = shallow(); + }); + + it('should render the breadcrumb with the active class', () => { + assert.strictEqual(wrapper.hasClass(classes.root), true); + assert.strictEqual(wrapper.hasClass(classes.gutters), true); + assert.strictEqual(wrapper.hasClass(classes.active), true); + }); + + it('should not receive focus', () => { + assert.strictEqual(wrapper.props().tabIndex, -1); + }); + }); + + describe('prop: disableGutters', () => { + it('should render a breadcrumb without the gutters class', () => { + const wrapper = shallow(); + assert.strictEqual(wrapper.hasClass(classes.root), true); + assert.strictEqual(wrapper.hasClass(classes.gutters), false); + }); + }); + + describe('prop: href', () => { + it('should receive focus', () => { + const wrapper = shallow(); + assert.strictEqual(wrapper.props().tabIndex, 0); + }); + }); + + describe('prop: onClick', () => { + let handleClick; + let wrapper; + before(() => { + handleClick = spy(); + wrapper = shallow(); + }); + + it('should be called when clicked', () => { + const event = {}; + wrapper.simulate('click', event); + assert.strictEqual(handleClick.callCount, 1); + }); + + it('should receive focus', () => { + assert.strictEqual(wrapper.props().tabIndex, 0); + }); + }); + + describe('server-side', () => { + // Only run the test on node. + if (!/jsdom/.test(window.navigator.userAgent)) { + return; + } + + it('should server-side render', () => { + const markup = render(); + assert.strictEqual(markup.text(), 'Hello World'); + }); + }); +}); diff --git a/packages/material-ui-lab/src/BreadcrumbCollapsed/BreadcrumbCollapsed.test.js b/packages/material-ui-lab/src/BreadcrumbCollapsed/BreadcrumbCollapsed.test.js new file mode 100644 index 00000000000000..0317f9038c7dc8 --- /dev/null +++ b/packages/material-ui-lab/src/BreadcrumbCollapsed/BreadcrumbCollapsed.test.js @@ -0,0 +1,27 @@ +import React from 'react'; +import { assert } from 'chai'; +import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import BreadcrumbCollapsed from './BreadcrumbCollapsed'; +import MoreHorizIcon from '@material-ui/icons/MoreHoriz'; + +describe('', () => { + let shallow; + let classes; + + before(() => { + shallow = createShallow({ dive: true }); + classes = getClasses(); + }); + + it('should render an ', () => { + const wrapper = shallow(); + + assert.strictEqual(wrapper.find(MoreHorizIcon).length, 1); + }); + + it('should render the root class', () => { + const wrapper = shallow(); + + assert.strictEqual(wrapper.hasClass(classes.root), true); + }); +}); diff --git a/packages/material-ui-lab/src/BreadcrumbSeparator/BreadcrumbSeparator.test.js b/packages/material-ui-lab/src/BreadcrumbSeparator/BreadcrumbSeparator.test.js new file mode 100644 index 00000000000000..ffd33238492964 --- /dev/null +++ b/packages/material-ui-lab/src/BreadcrumbSeparator/BreadcrumbSeparator.test.js @@ -0,0 +1,26 @@ +import React from 'react'; +import { assert } from 'chai'; +import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import BreadcrumbSeparator from './BreadcrumbSeparator'; + +describe('', () => { + let shallow; + let classes; + + before(() => { + shallow = createShallow({ dive: true }); + classes = getClasses(); + }); + + it('should render a
element', () => { + const wrapper = shallow(); + + assert.strictEqual(wrapper.type(), 'div'); + }); + + it('should render the root class', () => { + const wrapper = shallow(); + + assert.strictEqual(wrapper.hasClass(classes.root), true); + }); +}); diff --git a/packages/material-ui-lab/src/Breadcrumbs/Breadcrumbs.js b/packages/material-ui-lab/src/Breadcrumbs/Breadcrumbs.js index 89ed966e598194..fa62077e978461 100644 --- a/packages/material-ui-lab/src/Breadcrumbs/Breadcrumbs.js +++ b/packages/material-ui-lab/src/Breadcrumbs/Breadcrumbs.js @@ -84,7 +84,7 @@ class Breadcrumbs extends React.Component { if (!children) return
; return ( -
+
{this.state.expanded || (maxItems && Children.toArray(children).length <= maxItems) ? this.insertSeparators(this.renderAllItems()) : this.insertSeparators(this.renderItemsBeforeAndAfter())} diff --git a/packages/material-ui-lab/src/Breadcrumbs/Breadcrumbs.test.js b/packages/material-ui-lab/src/Breadcrumbs/Breadcrumbs.test.js new file mode 100644 index 00000000000000..bd400ee805c95b --- /dev/null +++ b/packages/material-ui-lab/src/Breadcrumbs/Breadcrumbs.test.js @@ -0,0 +1,47 @@ +import React from 'react'; +import { assert } from 'chai'; +import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import Breadcrumbs from './Breadcrumbs'; +import Breadcrumb from '../Breadcrumb'; + +describe('', () => { + let shallow; + let classes; + + before(() => { + shallow = createShallow({ dive: true }); + classes = getClasses( + + + , + ); + }); + + it('should render a
element', () => { + const wrapper = shallow( + + + , + ); + assert.strictEqual(wrapper.type(), 'div'); + }); + + it('should render the root class', () => { + const wrapper = shallow( + + + , + ); + assert.strictEqual(wrapper.hasClass(classes.root), true); + }); + + it('should render the custom className and the root class', () => { + const wrapper = shallow( + + + , + ); + assert.strictEqual(wrapper.is('.test-class-name'), true); + assert.strictEqual(wrapper.hasClass(classes.root), true); + }); +});