Stub out the tests, add tests for Breadcrumb

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('<Breadcrumb />', () => {
+  let shallow;
+  let render;
+  let classes;
+  const icon = <Icon>font_icon</Icon>;
+
+  before(() => {
+    shallow = createShallow({ dive: true });
+    render = createRender();
+    classes = getClasses(<Breadcrumb label="Hello World" />);
+  });
+
+  it('should render a <ButtonBase> element', () => {
+    const wrapper = shallow(<Breadcrumb label="Hello World" />);
+    assert.strictEqual(wrapper.type(), ButtonBase);
+  });
+
+  it('should render the root & gutter classes', () => {
+    const wrapper = shallow(<Breadcrumb label="Hello World" className="test-class-name" />);
+    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(<Breadcrumb label="Hello World" className="test-class-name" />);
+    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(<Breadcrumb label="Hello World" icon={icon} />);
+    const iconWrapper = wrapper.childAt(0);
+    assert.strictEqual(iconWrapper.find(Icon).length, 1);
+  });
+
+  it('should render the icon with the icon class', () => {
+    const wrapper = shallow(<Breadcrumb label="Hello World" icon={icon} />);
+    const iconWrapper = wrapper.childAt(0);
+    assert.strictEqual(iconWrapper.hasClass(classes.icon), true);
+  });
+
+  it('should not receive focus by default', () => {
+    const wrapper = shallow(<Breadcrumb label="Hello World" />);
+    assert.strictEqual(wrapper.props().tabIndex, -1);
+  });
+
+  describe('prop: active', () => {
+    let wrapper;
+    before(() => {
+      wrapper = shallow(<Breadcrumb label="Hello World" href="#" active />);
+    });
+
+    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(<Breadcrumb label="Hello World" disableGutters />);
+      assert.strictEqual(wrapper.hasClass(classes.root), true);
+      assert.strictEqual(wrapper.hasClass(classes.gutters), false);
+    });
+  });
+
+  describe('prop: href', () => {
+    it('should receive focus', () => {
+      const wrapper = shallow(<Breadcrumb label="Hello World" href="#" />);
+      assert.strictEqual(wrapper.props().tabIndex, 0);
+    });
+  });
+
+  describe('prop: onClick', () => {
+    let handleClick;
+    let wrapper;
+    before(() => {
+      handleClick = spy();
+      wrapper = shallow(<Breadcrumb onClick={handleClick} label="Hello World" />);
+    });
+
+    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(<Breadcrumb label="Hello World" />);
+      assert.strictEqual(markup.text(), 'Hello World');
+    });
+  });
+});

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('<BreadcrumbCollapsed />', () => {
+  let shallow;
+  let classes;
+
+  before(() => {
+    shallow = createShallow({ dive: true });
+    classes = getClasses(<BreadcrumbCollapsed />);
+  });
+
+  it('should render an <SvgIcon>', () => {
+    const wrapper = shallow(<BreadcrumbCollapsed />);
+
+    assert.strictEqual(wrapper.find(MoreHorizIcon).length, 1);
+  });
+
+  it('should render the root class', () => {
+    const wrapper = shallow(<BreadcrumbCollapsed />);
+
+    assert.strictEqual(wrapper.hasClass(classes.root), true);
+  });
+});

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('<BreadcrumbSeparator />', () => {
+  let shallow;
+  let classes;
+
+  before(() => {
+    shallow = createShallow({ dive: true });
+    classes = getClasses(<BreadcrumbSeparator />);
+  });
+
+  it('should render a <div> element', () => {
+    const wrapper = shallow(<BreadcrumbSeparator />);
+
+    assert.strictEqual(wrapper.type(), 'div');
+  });
+
+  it('should render the root class', () => {
+    const wrapper = shallow(<BreadcrumbSeparator />);
+
+    assert.strictEqual(wrapper.hasClass(classes.root), true);
+  });
+});

packages/material-ui-lab/src/Breadcrumbs/Breadcrumbs.js

@@ -84,7 +84,7 @@ class Breadcrumbs extends React.Component {
     if (!children) return <div className={className} {...rest} />;
 
     return (
-      <div aria-label="breadcrumb" className={classes.root} {...rest}>
+      <div aria-label="breadcrumb" className={className} {...rest}>
         {this.state.expanded || (maxItems && Children.toArray(children).length <= maxItems)
           ? this.insertSeparators(this.renderAllItems())
           : this.insertSeparators(this.renderItemsBeforeAndAfter())}

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('<Breadcrumbs />', () => {
+  let shallow;
+  let classes;
+
+  before(() => {
+    shallow = createShallow({ dive: true });
+    classes = getClasses(
+      <Breadcrumbs>
+        <Breadcrumb label="Hello World" />
+      </Breadcrumbs>,
+    );
+  });
+
+  it('should render a <div> element', () => {
+    const wrapper = shallow(
+      <Breadcrumbs>
+        <Breadcrumb label="Hello World" />
+      </Breadcrumbs>,
+    );
+    assert.strictEqual(wrapper.type(), 'div');
+  });
+
+  it('should render the root class', () => {
+    const wrapper = shallow(
+      <Breadcrumbs className="test-class-name">
+        <Breadcrumb label="Hello World" />
+      </Breadcrumbs>,
+    );
+    assert.strictEqual(wrapper.hasClass(classes.root), true);
+  });
+
+  it('should render the custom className and the root class', () => {
+    const wrapper = shallow(
+      <Breadcrumbs className="test-class-name">
+        <Breadcrumb label="Hello World" />
+      </Breadcrumbs>,
+    );
+    assert.strictEqual(wrapper.is('.test-class-name'), true);
+    assert.strictEqual(wrapper.hasClass(classes.root), true);
+  });
+});