Skip to content

Commit

Permalink
update and refactor tests
Browse files Browse the repository at this point in the history 
not much needed here
  • Loading branch information
Gilad Gray committed Dec 1, 2018
1 parent cb23d5c commit 2518adb
Showing 1 changed file with 41 additions and 77 deletions.
118 changes: 41 additions & 77 deletions packages/core/test/controls/numericInputTests.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*/

import { expect } from "chai";
import { mount, ReactWrapper } from "enzyme";
import { mount, ReactWrapper, shallow } from "enzyme";
import * as React from "react";
import { spy } from "sinon";

Expand All @@ -14,7 +14,7 @@ import * as Errors from "../../src/common/errors";
import {
Button,
ButtonGroup,
Classes,
ControlGroup,
HTMLInputProps,
Icon,
InputGroup,
Expand All @@ -27,11 +27,11 @@ import {
describe("<NumericInput>", () => {
describe("Defaults", () => {
it("renders the buttons on the right by default", () => {
const component = mount(<NumericInput />).children();
const leftGroup = component.childAt(0);
const rightGroup = component.childAt(1);
expect(leftGroup.is(InputGroup)).to.be.true;
expect(rightGroup.key()).to.equal("button-group");
// this ordering is trivial to test with shallow renderer
// (no DOM elements getting in the way)
const component = shallow(<NumericInput />);
const rightGroup = component.children().last();
expect(rightGroup.is(ButtonGroup)).to.be.true;
});

it("has a stepSize of 1 by default", () => {
Expand Down Expand Up @@ -71,56 +71,44 @@ describe("<NumericInput>", () => {

describe("Button position", () => {
it("renders the buttons on the right when buttonPosition == Position.RIGHT", () => {
const component = mount(<NumericInput buttonPosition={Position.RIGHT} />);
const buttonGroup = component.children().childAt(1);
expect(buttonGroup.is(ButtonGroup)).to.be.true;
const buttons = shallow(<NumericInput buttonPosition={Position.RIGHT} />)
.children()
.last();
expect(buttons.is(ButtonGroup)).to.be.true;
});

it("renders the buttons on the left when buttonPosition == Position.LEFT", () => {
const component = mount(<NumericInput buttonPosition={Position.LEFT} />);
const buttonGroup = component.children().childAt(0);
expect(buttonGroup.is(ButtonGroup)).to.be.true;
const buttons = shallow(<NumericInput buttonPosition={Position.LEFT} />)
.children()
.first();
expect(buttons.is(ButtonGroup)).to.be.true;
});

it('does not render the buttons when buttonPosition == "none"', () => {
const component = mount(<NumericInput buttonPosition="none" />);
const component = shallow(<NumericInput buttonPosition="none" />);
expect(component.find(ButtonGroup).exists()).to.be.false;
});

it("does not render the buttons when buttonPosition is null", () => {
const component = mount(<NumericInput buttonPosition={null} />);
const component = shallow(<NumericInput buttonPosition={null} />);
expect(component.find(ButtonGroup).exists()).to.be.false;
});

it(`renders the children in a ${Classes.CONTROL_GROUP} when buttons are visible`, () => {
// if the input is put into a control group by itself, it'll have squared border radii
// on the left, which we don't want.
const component = mount(<NumericInput />);

const index = component.html().indexOf(Classes.CONTROL_GROUP);
const isClassPresent = index >= 0;

expect(isClassPresent).to.be.true;
});

it(`does not render the children in a ${Classes.CONTROL_GROUP} when buttons are hidden`, () => {
it(`always renders the children in a ControlGroup`, () => {
// if the input is put into a control group by itself, it'll have squared border radii
// on the left, which we don't want.
const component = mount(<NumericInput buttonPosition={null} />);

const index = component.html().indexOf(Classes.CONTROL_GROUP);
const isClassPresent = index >= 0;

expect(isClassPresent).to.be.false;
const component = shallow<INumericInputProps>(<NumericInput />);
expect(component.find(ControlGroup).exists()).to.be.true;
component.setProps({ buttonPosition: null });
expect(component.find(ControlGroup).exists()).to.be.true;
});
});

describe("Basic functionality", () => {
it("works like a text input", () => {
const component = mount(<NumericInput />);

const inputField = component.find("input");
inputField.simulate("change", { target: { value: "11" } });
component.find("input").simulate("change", { target: { value: "11" } });

const value = component.state().value;
const expectedValue = "11";
Expand All @@ -130,8 +118,7 @@ describe("<NumericInput>", () => {
it("allows entry of non-numeric characters", () => {
const component = mount(<NumericInput />);

const inputField = component.find("input");
inputField.simulate("change", { target: { value: "3 + a" } });
component.find("input").simulate("change", { target: { value: "3 + a" } });

const value = component.state().value;
const expectedValue = "3 + a";
Expand Down Expand Up @@ -227,13 +214,11 @@ describe("<NumericInput>", () => {

it("if true, selects all text on focus", () => {
const attachTo = document.createElement("div");
const component = mount(<NumericInput value={VALUE} selectAllOnFocus={true} />, { attachTo });

component.find("input").simulate("focus");

const input = attachTo.querySelector("input") as HTMLInputElement;
expect(input.selectionStart).to.equal(0);
expect(input.selectionEnd).to.equal(VALUE.length);
const input = mount(<NumericInput value={VALUE} selectAllOnFocus={true} />, { attachTo }).find("input");
input.simulate("focus");
const { selectionStart, selectionEnd } = input.getDOMNode() as HTMLInputElement;
expect(selectionStart).to.equal(0);
expect(selectionEnd).to.equal(VALUE.length);
});
});

Expand Down Expand Up @@ -435,67 +420,42 @@ describe("<NumericInput>", () => {

describe("Keyboard interactions in input field", () => {
const simulateIncrement = (component: ReactWrapper<any, {}>, mockEvent?: IMockEvent) => {
const mergedMockEvent = mockEvent || {};
mergedMockEvent.keyCode = Keys.ARROW_UP;
mergedMockEvent.which = Keys.ARROW_UP;

const inputField = component.find(InputGroup).find("input");
inputField.simulate("keyDown", mergedMockEvent);
inputField.simulate("keydown", addKeyCode(mockEvent, Keys.ARROW_UP));
};

const simulateDecrement = (component: ReactWrapper<any, {}>, mockEvent?: IMockEvent) => {
const mergedMockEvent = mockEvent || {};
mergedMockEvent.keyCode = Keys.ARROW_DOWN;
mergedMockEvent.which = Keys.ARROW_DOWN;

const inputField = component.find(InputGroup).find("input");
inputField.simulate("keyDown", mergedMockEvent);
inputField.simulate("keydown", addKeyCode(mockEvent, Keys.ARROW_DOWN));
};

runInteractionSuite("Press '↑'", "Press '↓'", simulateIncrement, simulateDecrement);
});

// Enable these tests once we have a solution for testing Button onKeyUp callbacks (see PR #561)
describe("Keyboard interactions on buttons (with Space key)", () => {
const simulateIncrement = (component: ReactWrapper<any, {}>, mockEvent?: IMockEvent) => {
const mergedMockEvent = mockEvent || {};
mergedMockEvent.keyCode = Keys.SPACE;
mergedMockEvent.which = Keys.SPACE;

const simulateIncrement = (component: ReactWrapper<any, {}>, mockEvent: IMockEvent = {}) => {
const incrementButton = component.find(Button).first();
incrementButton.simulate("keyUp", mergedMockEvent);
incrementButton.simulate("keydown", addKeyCode(mockEvent, Keys.SPACE));
};

const simulateDecrement = (component: ReactWrapper<any, {}>, mockEvent?: IMockEvent) => {
const mergedMockEvent = mockEvent || {};
mergedMockEvent.keyCode = Keys.SPACE;
mergedMockEvent.which = Keys.SPACE;

const simulateDecrement = (component: ReactWrapper<any, {}>, mockEvent: IMockEvent = {}) => {
const decrementButton = component.find(Button).last();
decrementButton.simulate("keyUp", mergedMockEvent);
decrementButton.simulate("keydown", addKeyCode(mockEvent, Keys.SPACE));
};

runInteractionSuite("Press 'SPACE'", "Press 'SPACE'", simulateIncrement, simulateDecrement);
});

// Enable these tests once we have a solution for testing Button onKeyUp callbacks (see PR #561)
describe("Keyboard interactions on buttons (with Enter key)", () => {
const simulateIncrement = (component: ReactWrapper<any, {}>, mockEvent?: IMockEvent) => {
const mergedMockEvent = mockEvent || {};
mergedMockEvent.keyCode = Keys.ENTER;
mergedMockEvent.which = Keys.ENTER;

const incrementButton = component.find(Button).first();
incrementButton.simulate("keyUp", mergedMockEvent);
incrementButton.simulate("keydown", addKeyCode(mockEvent, Keys.ENTER));
};

const simulateDecrement = (component: ReactWrapper<any, {}>, mockEvent?: IMockEvent) => {
const mergedMockEvent = mockEvent || {};
mergedMockEvent.keyCode = Keys.ENTER;
mergedMockEvent.which = Keys.ENTER;

const decrementButton = component.find(Button).last();
decrementButton.simulate("keyUp", mergedMockEvent);
decrementButton.simulate("keydown", addKeyCode(mockEvent, Keys.ENTER));
};

runInteractionSuite("Press 'ENTER'", "Press 'ENTER'", simulateIncrement, simulateDecrement);
Expand Down Expand Up @@ -1100,6 +1060,10 @@ describe("<NumericInput>", () => {
});
}

function addKeyCode(mockEvent: IMockEvent = {}, keyCode: number) {
return { ...mockEvent, keyCode };
}

function stringToCharArray(str: string) {
return str == null ? [] : str.split("");
}
Expand Down

1 comment on commit 2518adb

@blueprint-bot
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

update and refactor tests

Previews: documentation | landing | table

Please sign in to comment.