Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix table tests #1897

Merged
merged 5 commits into from
Dec 13, 2017
Merged

Fix table tests #1897

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c855d3a
Fix table tests
themadcreator Dec 12, 2017
77a7e4c
Merge remote-tracking branch 'origin/ad/react-16' into bd/fix-react-16
themadcreator Dec 12, 2017
6994b7d
Fix table tests
themadcreator Dec 12, 2017
4440263
Fix editable tests by switching to enzyme
themadcreator Dec 13, 2017
762adc9
GILASD TPYO
themadcreator Dec 13, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 2 additions & 6 deletions packages/table/src/table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -494,9 +494,6 @@ export class Table extends AbstractComponent<ITableProps, ITableState> {

public constructor(props: ITableProps & { children: React.ReactNode }, context?: any) {
super(props, context);
if (!CoreUtils.isNodeEnv("production")) {
this.validateProps(props);
}

const { children, columnWidths, defaultRowHeight, defaultColumnWidth, numRows, rowHeights } = this.props;

Expand Down Expand Up @@ -668,9 +665,8 @@ export class Table extends AbstractComponent<ITableProps, ITableState> {
}

public componentWillReceiveProps(nextProps: ITableProps & { children: React.ReactNode }) {
if (!CoreUtils.isNodeEnv("production")) {
this.validateProps(nextProps);
}
// calls validateProps
super.componentWillReceiveProps(nextProps);

const {
children,
Expand Down
102 changes: 39 additions & 63 deletions packages/table/test/editableCellTests.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,27 +12,16 @@ import * as sinon from "sinon";
import * as Classes from "../src/common/classes";
import { EditableCell } from "../src/index";
import { CellType, expectCellLoading } from "./cellTestUtils";
import { ElementHarness, ReactHarness } from "./harness";

describe("<EditableCell>", () => {
const harness = new ReactHarness();

afterEach(() => {
harness.unmount();
});

after(() => {
harness.destroy();
});

it("renders", () => {
const elem = harness.mount(<EditableCell value="test-value-5000" />);
const elem = mount(<EditableCell value="test-value-5000" />);
expect(elem.find(`.${Classes.TABLE_TRUNCATED_TEXT}`).text()).to.equal("test-value-5000");
});

it("renders loading state", () => {
const editableCellHarness = harness.mount(<EditableCell loading={true} value="test-value-5000" />);
expectCellLoading(editableCellHarness.element.children[0], CellType.BODY_CELL);
const editableCellHarness = mount(<EditableCell loading={true} value="test-value-5000" />);
expectCellLoading(editableCellHarness.first().getDOMNode(), CellType.BODY_CELL);
});

it("renders new value if props.value changes", () => {
Expand All @@ -50,61 +39,60 @@ describe("<EditableCell>", () => {
const onCancel = sinon.spy();
const onChange = sinon.spy();
const onConfirm = sinon.spy();
const elem = harness.mount(

const elem = mount(
<EditableCell value="test-value-5000" onCancel={onCancel} onChange={onChange} onConfirm={onConfirm} />,
);

// double click to edit
doubleClickToEdit(elem);
const input = getInput(elem);
// TODO: throws JSON-stringify cyclic errors as of #1741; need to fix.
// expect(input.element).to.equal(document.activeElement);
// start editing
elem.setState({ isEditing: true, dirtyValue: "test-value-5000" });
const input = elem.find(`.${Classes.TABLE_EDITABLE_TEXT} input`);
expect(input.length).to.equal(1);

// edit
input.change("my-changed-value");
// make changes
input.simulate("change", { target: { value: "new-text" } });
expect(onChange.called).to.be.true;
expect(onCancel.called).to.be.false;
expect(onConfirm.called).to.be.false;
expect(elem.find(".pt-editable-content").text()).to.equal("my-changed-value");
expect(elem.find(`.${Classes.TABLE_EDITABLE_TEXT} .pt-editable-content`).text()).to.equal("new-text");

// confirm
input.blur();
input.simulate("blur");
expect(onCancel.called).to.be.false;
// TODO: onBlur isn't firing as of #1741; need to re-enable this test.
// expect(onConfirm.called).to.be.true;
expect(onConfirm.called).to.be.true;
});

it("doesn't change edited value on non-value prop changes", () => {
const onCancel = sinon.spy();
const onChange = sinon.spy();
const onConfirm = sinon.spy();
const elem = harness.mount(

const elem = mount(
<EditableCell value="test-value-5000" onCancel={onCancel} onChange={onChange} onConfirm={onConfirm} />,
);

// double click to edit
doubleClickToEdit(elem);
const input = getInput(elem);
// TODO: throws JSON-stringify cyclic errors as of #1741; need to fix.
// expect(input.element).to.equal(document.activeElement);
// start editing
elem.setState({ isEditing: true, dirtyValue: "test-value-5000" });
const input = elem.find(`.${Classes.TABLE_EDITABLE_TEXT} input`);
expect(input.length).to.equal(1);

// edit
input.change("my-changed-value");
// make changes
input.simulate("change", { target: { value: "new-text" } });
expect(onChange.called).to.be.true;
expect(onCancel.called).to.be.false;
expect(onConfirm.called).to.be.false;
expect(elem.find(".pt-editable-content").text()).to.equal("my-changed-value");
expect(elem.find(`.${Classes.TABLE_EDITABLE_TEXT} .pt-editable-content`).text()).to.equal("new-text");

harness.mount(
<EditableCell value="test-value-5000" onCancel={onCancel} onChange={null} onConfirm={onConfirm} />,
);
expect(elem.find(".pt-editable-content").text()).to.equal("my-changed-value");
// set non-value prop
elem.setProps({ onChange: null });

// value stays the same
expect(elem.find(`.${Classes.TABLE_EDITABLE_TEXT} .pt-editable-content`).text()).to.equal("new-text");

// confirm
input.blur();
input.simulate("blur");
expect(onCancel.called).to.be.false;
// TODO: onBlur isn't firing as of #1741; need to re-enable this test.
// expect(onConfirm.called).to.be.true;
expect(onConfirm.called).to.be.true;
});

it("passes index prop to callbacks if index was provided", () => {
Expand All @@ -116,7 +104,7 @@ describe("<EditableCell>", () => {
const ROW_INDEX = 17;
const COLUMN_INDEX = 44;

const elem = harness.mount(
const elem = mount(
<EditableCell
rowIndex={ROW_INDEX}
columnIndex={COLUMN_INDEX}
Expand All @@ -126,29 +114,17 @@ describe("<EditableCell>", () => {
/>,
);

doubleClickToEdit(elem);
// start editing
elem.setState({ isEditing: true, dirtyValue: "" });

// edit
const input = getInput(elem);
input.change(CHANGED_VALUE);
// change value
const input = elem.find(`.${Classes.TABLE_EDITABLE_TEXT} input`);
expect(input.length).to.equal(1);
input.simulate("change", { target: { value: CHANGED_VALUE } });
expect(onChangeSpy.firstCall.args).to.deep.equal([CHANGED_VALUE, ROW_INDEX, COLUMN_INDEX]);

// confirm
input.blur();
// TODO: onBlur isn't firing as of #1741; need to re-enable this test.
// expect(onConfirmSpy.firstCall.args).to.deep.equal([CHANGED_VALUE, ROW_INDEX, COLUMN_INDEX]);
input.simulate("blur");
expect(onChangeSpy.firstCall.args).to.deep.equal([CHANGED_VALUE, ROW_INDEX, COLUMN_INDEX]);
});

function doubleClickToEdit(elem: ElementHarness) {
elem
.find(`.${Classes.TABLE_TRUNCATED_TEXT}`)
.mouse("mousedown")
.mouse("mouseup")
.mouse("mousedown")
.mouse("mouseup");
}

function getInput(elem: ElementHarness) {
return elem.find(".pt-editable-input");
}
});
22 changes: 6 additions & 16 deletions packages/table/test/editableNameTests.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,48 +5,38 @@
*/

import { expect } from "chai";
import { mount } from "enzyme";
import * as React from "react";
import * as sinon from "sinon";

import { EditableName } from "../src/index";
import { ReactHarness } from "./harness";

describe("<EditableName>", () => {
const harness = new ReactHarness();

afterEach(() => {
harness.unmount();
});

after(() => {
harness.destroy();
});

it("renders", () => {
const elem = harness.mount(<EditableName name="test-name-5000" />);
const elem = mount(<EditableName name="test-name-5000" />);
expect(elem.find(".pt-editable-content").text()).to.equal("test-name-5000");
});

it("edits", () => {
const onCancel = sinon.spy();
const onChange = sinon.spy();
const onConfirm = sinon.spy();
const elem = harness.mount(
const elem = mount(
<EditableName name="test-name-5000" onCancel={onCancel} onChange={onChange} onConfirm={onConfirm} />,
);

// focus
elem.find(".pt-editable-text").focus();
elem.find(".pt-editable-text").simulate("focus");

// edit
const input = elem.find(".pt-editable-input").change("my-changed-name");
const input = elem.find(".pt-editable-input").simulate("change", { target: { value: "my-changed-name" } });
expect(onChange.called).to.be.true;
expect(onCancel.called).to.be.false;
expect(onConfirm.called).to.be.false;
expect(elem.find(".pt-editable-content").text()).to.equal("my-changed-name");

// confirm
input.blur();
input.simulate("blur");
expect(onCancel.called).to.be.false;
expect(onConfirm.called).to.be.true;
});
Expand Down
Loading