Skip to content

Commit

Permalink
Merge pull request #1362 from KleeGroup/input-date-checkonblur
Browse files Browse the repository at this point in the history 
Input date checkonblur
  • Loading branch information
@fconstantin
fconstantin authored Mar 17, 2017
2 parents 6fe1660 + bb2eef3 commit e9d4e8a
Show file tree
Hide file tree
Showing 2 changed files with 184 additions and 44 deletions.
124 changes: 97 additions & 27 deletions src/components/input/date/__tests__/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ describe('The input date', () => {
let reactComponent, domNode, inputNode;
const onChangeSpy = sinon.spy();
before(() => {
reactComponent = TestUtils.renderIntoDocument(<InputDate onChange={onChangeSpy} value={now} />);
reactComponent = TestUtils.renderIntoDocument(<InputDate name="testdate" onChange={onChangeSpy} value={now} />);
domNode = ReactDOM.findDOMNode(reactComponent);
});
it('should render a node with data-focus attribute', () => {
Expand All @@ -31,13 +31,12 @@ describe('The input date', () => {
});
});


describe('when mounted with a disabled props', () => {
const now = new Date().toISOString();
let reactComponent, inputNode;
const onChangeSpy = sinon.spy();
before(() => {
reactComponent = TestUtils.renderIntoDocument(<InputDate onChange={onChangeSpy} value={now} disabled={true} />);
reactComponent = TestUtils.renderIntoDocument(<InputDate name="testdate" onChange={onChangeSpy} value={now} disabled />);
inputNode = ReactDOM.findDOMNode(reactComponent.refs.input.refs.htmlInput);
});
it('should render a node with disabled attribute', () => {
Expand All @@ -49,7 +48,7 @@ describe('The input date', () => {
let renderedTest;
const onChangeSpy = sinon.spy();
before(() => {
renderedTest = TestUtils.renderIntoDocument(<InputDate onChange={onChangeSpy} value={null} />);
renderedTest = TestUtils.renderIntoDocument(<InputDate name="testdate" onChange={onChangeSpy} value={null} />);
});

it('should give a null value', () => {
Expand All @@ -71,7 +70,7 @@ describe('The input date', () => {
const onChangeSpy = sinon.spy();
const invalidDateString = 'invalid date';
before(() => {
renderedTest = TestUtils.renderIntoDocument(<InputDate onChange={onChangeSpy} value={invalidDateString} />);
renderedTest = TestUtils.renderIntoDocument(<InputDate name="testdate" onChange={onChangeSpy} value={invalidDateString} />);
});

it('should display the invalid value in the input', () => {
Expand All @@ -89,7 +88,7 @@ describe('The input date', () => {

describe('when the value given has a prop changes', () => {
const now = new Date().toISOString();
const past = new Date('01/10/1995').toISOString() /*'1995-01-09T23:00:00.000Z'*/;
const past = new Date('01/10/1995').toISOString();
let renderedTest;
const onChangeSpy = sinon.spy();
class TestComponent extends Component {
Expand All @@ -101,7 +100,7 @@ describe('The input date', () => {
}

render() {
return <InputDate onChange={onChangeSpy} ref='date' value={this.state.value} />;
return <InputDate name="testdate" onChange={onChangeSpy} ref='date' value={this.state.value} />;
}
}

Expand All @@ -120,7 +119,7 @@ describe('The input date', () => {
let renderedTest;
const onChangeSpy = sinon.spy();
before(() => {
renderedTest = TestUtils.renderIntoDocument(<InputDate onChange={onChangeSpy} value={now} />);
renderedTest = TestUtils.renderIntoDocument(<InputDate name="testdate" onChange={onChangeSpy} value={now} />);
const input = ReactDOM.findDOMNode(renderedTest.refs.input.refs.htmlInput);
TestUtils.Simulate.change(input, {target: {value: ''}});
});
Expand All @@ -145,22 +144,79 @@ describe('The input date', () => {
};

render() {
return <InputDate onChange={this.onDateChange} ref='date' value={this.state.value} />;
return <InputDate name="testdate" onChange={this.onDateChange} ref='date' value={this.state.value} />;
}
}
before(() => {
renderedTest = TestUtils.renderIntoDocument(<TestComponent />);
const input = ReactDOM.findDOMNode(renderedTest.refs.date.refs.input.refs.htmlInput);
TestUtils.Simulate.change(input, {target: {value: validDateString}});
//TestUtils.Simulate.click(document);
});
it('should give the provided value', () => {
expect(moment(renderedTest.refs.date.getValue()).isSame(moment.utc(validDateString, 'MM/DD/YYYY').toISOString())).to.be.true;
});
});

describe('when the user enters an invalid input', () => {
const invalidDateString = 'Lol invalid';
describe('when the user enters a valid input with multiples formats', () => {
const validDateString = '02/03/2010';
let renderedTest;
class TestComponent extends Component {
constructor() {
super();
this.state = {
value: null
};
}

onDateChange = (value) => {
this.setState({value});
};

render() {
return <InputDate name="testdate" onChange={this.onDateChange} format={['DD/MM/YYYY', 'DDMMYY', 'DDMMYYYY']} ref='date' value={this.state.value} />;
}
}
before(() => {
renderedTest = TestUtils.renderIntoDocument(<TestComponent />);
const input = ReactDOM.findDOMNode(renderedTest.refs.date.refs.input.refs.htmlInput);
TestUtils.Simulate.change(input, {target: {value: validDateString}});
});
it('should give the provided value', () => {
expect(moment(renderedTest.refs.date.getValue()).isSame(moment.utc(validDateString, 'DD/MM/YYYY').toISOString())).to.be.true;
});
});

describe('when the user enters a partially valid input with multiples formats', () => {
const validDateString = '020320';
let renderedTest;
class TestComponent extends Component {
constructor() {
super();
this.state = {
value: null
};
}

onDateChange = (value) => {
this.setState({value});
};

render() {
return <InputDate name="testdate" onChange={this.onDateChange} format={['DD/MM/YYYY', 'DDMMYY', 'DDMMYYYY']} ref='date' value={this.state.value} />;
}
}
before(() => {
renderedTest = TestUtils.renderIntoDocument(<TestComponent />);
const input = ReactDOM.findDOMNode(renderedTest.refs.date.refs.input.refs.htmlInput);
TestUtils.Simulate.change(input, {target: {value: validDateString}});
});
it('should give the provided value', () => {
expect(moment(renderedTest.refs.date.getValue()).isSame(moment.utc(validDateString, 'DDMMYY').toISOString())).to.be.true;
});
});

describe('when the user enters a partially valid input with multiples formats and checkOnlyOnBlur', () => {
const invalidDateString = '020320';
let renderedTest;
class TestComponent extends Component {
constructor() {
Expand All @@ -175,42 +231,56 @@ describe('The input date', () => {
};

render() {
return <InputDate onChange={this.onDateChange} ref='date' value={this.state.value} />;
return <InputDate name="testdate" onChange={this.onDateChange} format={['DD/MM/YYYY', 'DDMMYY', 'DDMMYYYY']} checkOnlyOnBlur ref='date' value={this.state.value} />;
}
}
before(() => {
renderedTest = TestUtils.renderIntoDocument(<TestComponent />);
const input = ReactDOM.findDOMNode(renderedTest.refs.date.refs.input.refs.htmlInput);
TestUtils.Simulate.change(input, {target: {value: invalidDateString}});
});
it('should give a null value', () => {
expect(renderedTest.refs.date.getValue()).to.be.null;
it('should give the provided value', () => {
expect(moment(renderedTest.refs.date.getValue()).isSame(moment.utc(invalidDateString, 'DDMMYY').toISOString())).to.be.true;
});
it('but still let the invalid value in the input', () => {
expect(ReactDOM.findDOMNode(renderedTest.refs.date.refs.input.refs.htmlInput).value).to.equal(invalidDateString);
});
});
// The onBlur function is no more used on the input-date component
describe.skip('when blurred with a valid date', () => {
const validDate = moment.utc('10/10/2015').toISOString();
const onChangeSpy = sinon.spy();

describe('when the user enters an invalid input', () => {
const invalidDateString = 'Lol invalid';
let renderedTest;
class TestComponent extends Component {
constructor() {
super();
this.state = {
value: null
};
}

onDateChange = (value) => {
this.setState({value});
};

render() {
return <InputDate onChange={(value) => console.log('BLUR',value)} ref='date' value={validDate} />;
return <InputDate name="testdate" onChange={this.onDateChange} ref='date' value={this.state.value} />;
}
}
let renderedTest;
before(() => {
renderedTest = TestUtils.renderIntoDocument(<TestComponent />);
const input = ReactDOM.findDOMNode(renderedTest.refs.date.refs.input.refs.htmlInput);
TestUtils.Simulate.blur(input);
TestUtils.Simulate.change(input, {target: {value: invalidDateString}});
});
it('should call the onChange prop with the corresponding ISOString', () => {
expect(onChangeSpy).to.have.been.calledWith(validDate);
it('should give a null value', () => {
expect(renderedTest.refs.date.getValue()).to.be.null;
});
it('but still let the invalid value in the input', () => {
expect(ReactDOM.findDOMNode(renderedTest.refs.date.refs.input.refs.htmlInput).value).to.equal(invalidDateString);
});
});

describe('when a date is chosen in the date picker', () => {
const validDate = moment.utc('10/10/2015').toISOString();
const validDate = moment.utc('2015-10-10T00:00:00.000Z').toISOString();
const onChangeSpy = sinon.spy();
let renderedTest;
before(done => {
Expand All @@ -222,7 +292,7 @@ describe('The input date', () => {
};
class TestComponent extends Component {
render() {
return <InputDate onChange={onChange(done)} ref='date' value={validDate} />;
return <InputDate name="testdate" onChange={onChange(done)} ref='date' value={validDate} />;
}
}
renderedTest = TestUtils.renderIntoDocument(<TestComponent />);
Expand All @@ -232,7 +302,7 @@ describe('The input date', () => {
TestUtils.Simulate.click(firstDay);
});
it('should call the onChange prop with the corresponding ISOString', () => {
expect(onChangeSpy).to.have.been.calledWith((moment.utc('09/27/2015')).toISOString());
expect(onChangeSpy).to.have.been.calledWith( moment.utc('2015-09-27T00:00:00.000Z').toISOString());
});
});
});
Loading

0 comments on commit e9d4e8a

Please sign in to comment.