Merge pull request #5845 from oliviertassinari/table-add-integration-…

…test

[Table] Add an integration test

src/IconButton/IconButton.spec.js

@@ -3,6 +3,7 @@ import React from 'react';
 import {shallow} from 'enzyme';
 import {assert} from 'chai';
 import IconButton from './IconButton';
+import FontIcon from '../FontIcon';
 import getMuiTheme from '../styles/getMuiTheme';
 
 const dummy = <div />;
@@ -25,6 +26,22 @@ describe('<IconButton />', () => {
     assert.strictEqual(wrapper.containsMatchingElement(dummy), true, 'should contain the children');
   });
 
+  it('should render children with custom color', () => {
+    const wrapper = shallowWithContext(
+      <IconButton>
+        <FontIcon className="material-icons" color="red">home</FontIcon>
+      </IconButton>
+    );
+
+    assert.strictEqual(wrapper.find(FontIcon).length, 1, 'should contain the FontIcon child');
+    assert.strictEqual(wrapper.find(FontIcon).props().color, 'red', 'FontIcon should have color set to red');
+    assert.strictEqual(
+      wrapper.find(FontIcon).props().style.color,
+      undefined,
+      'FontIcon style object has no color property'
+    );
+  });
+
   describe('prop: hoveredStyle', () => {
     it('should apply the style when hovered', () => {
       const hoveredStyle = {

src/Table/TableHeader.js

@@ -169,7 +169,9 @@ class TableHeader extends Component {
   }
 
   handleCheckAll = (event, checked) => {
-    if (this.props.onSelectAll) this.props.onSelectAll(checked);
+    if (this.props.onSelectAll) {
+      this.props.onSelectAll(checked);
+    }
   };
 
   render() {

test/integration/Card/Card.spec.js

@@ -38,6 +38,7 @@ describe('<Card />', () => {
         </CardText>
       </Card>
     );
+
     assert.strictEqual(wrapper.find(CloseIcon).node.props.color, '#ff0000', 'CloseIcon should have color #ff0000');
     wrapper.setState({expanded: true});
     assert.strictEqual(wrapper.find(OpenIcon).node.props.color, '#00ff00', 'OpenIcon should have color #00ff00');

test/integration/RenderToLayer/RenderToLayer.spec.js

@@ -1,6 +1,6 @@
 /* eslint-env mocha */
-import {assert} from 'chai';
 import React, {Component, PropTypes} from 'react';
+import {assert} from 'chai';
 import {mount} from 'enzyme';
 import RenderToLayer from 'src/internal/RenderToLayer';
 

test/integration/fixtures/VerticalLinearStepper.js → test/integration/Stepper/VerticalLinearStepper.js

@@ -9,8 +9,9 @@ import RaisedButton from 'src/RaisedButton';
 import FlatButton from 'src/FlatButton';
 
 class VerticalLinearStepper extends Component {
-
-  static contextTypes = {muiTheme: PropTypes.object.isRequired};
+  static contextTypes = {
+    muiTheme: PropTypes.object.isRequired,
+  };
 
   state = {
     finished: false,

test/integration/stepper/verticalStepper.spec.js → test/integration/Stepper/VerticalLinearStepper.spec.js

@@ -3,9 +3,9 @@ import React from 'react';
 import {mount} from 'enzyme';
 import {assert} from 'chai';
 import getMuiTheme from 'src/styles/getMuiTheme';
-import VerticalLinearStepper from '../fixtures/VerticalLinearStepper';
+import VerticalLinearStepper from './VerticalLinearStepper';
 
-describe('Vertical Stepper', () => {
+describe('<VerticalLinearStepper />', () => {
   const muiTheme = getMuiTheme();
   const mountWithContext = (node) => mount(node, {context: {muiTheme}});
 
@@ -18,7 +18,7 @@ describe('Vertical Stepper', () => {
     it('should render a vertical stepper', () => {
       const stepper = wrapper.find('Stepper');
       assert.strictEqual(stepper.length, 1, 'there should be a stepper');
-      assert.strictEqual(stepper.prop('orientation'), 'vertical', 'it should be vertical');
+      assert.strictEqual(stepper.props().orientation, 'vertical', 'it should be vertical');
     });
 
     describe('steps', () => {

test/integration/Table/MultiSelectTable.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import {
+  Table,
+  TableBody,
+  TableHeader,
+  TableHeaderColumn,
+  TableRow,
+  TableRowColumn,
+} from 'src/Table';
+
+const tableData = [
+  {
+    name: 'John Smith',
+    selected: true,
+  },
+  {
+    name: 'Randal White',
+    selected: true,
+  },
+  {
+    name: 'Olivier',
+  },
+];
+
+function TableMutliSelect() {
+  return (
+    <Table
+      selectable={true}
+      multiSelectable={true}
+    >
+      <TableHeader
+        displaySelectAll={true}
+        adjustForCheckbox={true}
+        enableSelectAll={true}
+      >
+        <TableRow>
+          <TableHeaderColumn>
+            Name
+          </TableHeaderColumn>
+        </TableRow>
+      </TableHeader>
+      <TableBody displayRowCheckbox={true}>
+        {tableData.map( (row, index) => (
+          <TableRow key={index} selected={row.selected}>
+            <TableRowColumn>
+              {row.name}
+            </TableRowColumn>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+
+export default TableMutliSelect;

test/integration/Table/MultiSelectTable.spec.js

@@ -0,0 +1,62 @@
+/* eslint-env mocha */
+import React from 'react';
+import {mount} from 'enzyme';
+import {assert} from 'chai';
+import getMuiTheme from 'src/styles/getMuiTheme';
+import MultiSelectTable from './MultiSelectTable';
+
+describe('<MultiSelectTable />', () => {
+  it('should select and unselect every checkboxes', () => {
+    const muiTheme = getMuiTheme();
+    const mountWithContext = (node) => mount(node, {
+      context: {muiTheme},
+      childContextTypes: {muiTheme: React.PropTypes.object},
+    });
+
+    const wrapper = mountWithContext(
+      <MultiSelectTable />
+    );
+
+    assert.deepEqual(
+      wrapper.find('Checkbox').map((checkbox) => checkbox.props().checked),
+      [
+        false,
+        true,
+        true,
+        false,
+      ],
+      'should use the selected property for the initial value'
+    );
+
+    let input;
+    input = wrapper.find('Checkbox').at(0).find('input');
+    input.node.checked = !input.node.checked;
+    input.simulate('change');
+
+    assert.deepEqual(
+      wrapper.find('Checkbox').map((checkbox) => checkbox.props().checked),
+      [
+        true,
+        true,
+        true,
+        true,
+      ],
+      'should check all the checkboxes'
+    );
+
+    input = wrapper.find('Checkbox').at(0).find('input');
+    input.node.checked = !input.node.checked;
+    input.simulate('change');
+
+    assert.deepEqual(
+      wrapper.find('Checkbox').map((checkbox) => checkbox.props().checked),
+      [
+        false,
+        false,
+        false,
+        false,
+      ],
+      'should uncheck all the checkboxes'
+    );
+  });
+});

test/integration/Toolbar/ToolbarGroup.spec.js

@@ -16,10 +16,9 @@ describe('<Toolbar />', () => {
       <Toolbar>
         <ToolbarGroup firstChild={true} />
       </Toolbar>
-
     );
 
-    assert.ok(wrapper.find(ToolbarGroup), 'should contain the ToolbarGroup child');
+    assert.strictEqual(wrapper.find(ToolbarGroup).length, 1, 'should contain the ToolbarGroup child');
   });
 
   it('should render FontIcon with custom color', () => {
@@ -29,7 +28,6 @@ describe('<Toolbar />', () => {
           <FontIcon className="muidocs-icon-custom-sort" color="red" />
         </ToolbarGroup>
       </Toolbar>
-
     );
 
     assert.strictEqual(wrapper.find(FontIcon).node.props.color, 'red', 'FontIcon should have the color set to red');