How to use the test-drive-react.change function in test-drive-react
To help you get started, we’ve selected a few test-drive-react examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
wix-playground / stylable-components / test / components / birthday-picker.spec.tsx View on Github 
it('Emits onChange when going from valid to valid state', async function() {
const onChange = sinon.spy();
const {select, waitForDom} = clientRenderer.render(
);
await waitForDom(() => {
expect(select('BIRTHDAY_PICKER')).to.be.present();
});
change(select('BIRTHDAY_PICKER_DAY'), '27');
return waitForDom(() => {
expect(onChange).to.have.been.calledOnce.and.calledWith(new Date('1986-04-27T00:00Z'));
});
});it('Displays the date and allows changing it', async function() {
const {select, waitForDom} = clientRenderer.render();
await waitForDom(() => {
expect(select('BIRTHDAY_PICKER')).to.be.present();
});
change(select('BIRTHDAY_PICKER_YEAR'), '2002');
change(select('BIRTHDAY_PICKER_MONTH'), '10');
change(select('BIRTHDAY_PICKER_DAY'), '12');
await waitForDom(() => {
expect(select('BIRTHDAY_PICKER_DEMO_RESULT')).to.contain.text('Selected date: 2002-10-12');
});
change(select('BIRTHDAY_PICKER_DAY'), '');
return waitForDom(() => {
expect(select('BIRTHDAY_PICKER_DEMO_RESULT')).to.contain.text('Selected date: 2002-10-12');
});
});it('Emits onChange when going from invalid to valid state', async function() {
const onChange = sinon.spy();
const {select, waitForDom} = clientRenderer.render(
);
await waitForDom(() => {
expect(select('BIRTHDAY_PICKER')).to.be.present();
});
change(select('BIRTHDAY_PICKER_YEAR'), '1986');
change(select('BIRTHDAY_PICKER_MONTH'), '4');
change(select('BIRTHDAY_PICKER_DAY'), '26');
return waitForDom(() => {
expect(onChange).to.have.been.calledOnce.and.calledWith(new Date('1986-04-26T00:00Z'));
});
});it('Emits onChange when going from invalid to valid state', async function() {
const onChange = sinon.spy();
const {select, waitForDom} = clientRenderer.render(
);
await waitForDom(() => {
expect(select('BIRTHDAY_PICKER')).to.be.present();
});
change(select('BIRTHDAY_PICKER_YEAR'), '1986');
change(select('BIRTHDAY_PICKER_MONTH'), '4');
change(select('BIRTHDAY_PICKER_DAY'), '26');
return waitForDom(() => {
expect(onChange).to.have.been.calledOnce.and.calledWith(new Date('1986-04-26T00:00Z'));
});
});it('Displays the date and allows changing it', async function() {
const {select, waitForDom} = clientRenderer.render();
await waitForDom(() => {
expect(select('BIRTHDAY_PICKER')).to.be.present();
});
change(select('BIRTHDAY_PICKER_YEAR'), '2002');
change(select('BIRTHDAY_PICKER_MONTH'), '10');
change(select('BIRTHDAY_PICKER_DAY'), '12');
await waitForDom(() => {
expect(select('BIRTHDAY_PICKER_DEMO_RESULT')).to.contain.text('Selected date: 2002-10-12');
});
change(select('BIRTHDAY_PICKER_DAY'), '');
return waitForDom(() => {
expect(select('BIRTHDAY_PICKER_DEMO_RESULT')).to.contain.text('Selected date: 2002-10-12');
});
});it('Displays the date and allows changing it', async function() {
const {select, waitForDom} = clientRenderer.render();
await waitForDom(() => {
expect(select('BIRTHDAY_PICKER')).to.be.present();
});
change(select('BIRTHDAY_PICKER_YEAR'), '2002');
change(select('BIRTHDAY_PICKER_MONTH'), '10');
change(select('BIRTHDAY_PICKER_DAY'), '12');
await waitForDom(() => {
expect(select('BIRTHDAY_PICKER_DEMO_RESULT')).to.contain.text('Selected date: 2002-10-12');
});
change(select('BIRTHDAY_PICKER_DAY'), '');
return waitForDom(() => {
expect(select('BIRTHDAY_PICKER_DEMO_RESULT')).to.contain.text('Selected date: 2002-10-12');
});
});it('Emits onChange when going from invalid to valid state', async function() {
const onChange = sinon.spy();
const {select, waitForDom} = clientRenderer.render(
);
await waitForDom(() => {
expect(select('BIRTHDAY_PICKER')).to.be.present();
});
change(select('BIRTHDAY_PICKER_YEAR'), '1986');
change(select('BIRTHDAY_PICKER_MONTH'), '4');
change(select('BIRTHDAY_PICKER_DAY'), '26');
return waitForDom(() => {
expect(onChange).to.have.been.calledOnce.and.calledWith(new Date('1986-04-26T00:00Z'));
});
});it('Does not emit onChange when going from invalid to invalid state', async function() {
const onChange = sinon.spy();
const {select, waitForDom} = clientRenderer.render(
);
await waitForDom(() => {
expect(select('BIRTHDAY_PICKER')).to.be.present();
});
change(select('BIRTHDAY_PICKER_MONTH'), '3');
return waitForDom(() => {
expect(onChange).to.have.not.been.called;
});
});it('Displays the date and allows changing it', async function() {
const {select, waitForDom} = clientRenderer.render();
await waitForDom(() => {
expect(select('BIRTHDAY_PICKER')).to.be.present();
});
change(select('BIRTHDAY_PICKER_YEAR'), '2002');
change(select('BIRTHDAY_PICKER_MONTH'), '10');
change(select('BIRTHDAY_PICKER_DAY'), '12');
await waitForDom(() => {
expect(select('BIRTHDAY_PICKER_DEMO_RESULT')).to.contain.text('Selected date: 2002-10-12');
});
change(select('BIRTHDAY_PICKER_DAY'), '');
return waitForDom(() => {
expect(select('BIRTHDAY_PICKER_DEMO_RESULT')).to.contain.text('Selected date: 2002-10-12');
});
});test-drive-react
Opinionated library for Test-Driven Development of React Components.
Package Health Score
70 / 100Popular test-drive-react functions
- test-drive-react.change
- test-drive-react.ClientRenderer
- test-drive-react.expect
- test-drive-react.selectDom
- test-drive-react.simulate.blur
- test-drive-react.simulate.change
- test-drive-react.simulate.click
- test-drive-react.simulate.focus
- test-drive-react.simulate.input
- test-drive-react.simulate.keyDown
- test-drive-react.simulate.mouseDown
- test-drive-react.simulate.touchStart
- test-drive-react.sinon.match
- test-drive-react.sinon.sandbox
- test-drive-react.sinon.spy
- test-drive-react.trigger.change
- test-drive-react.waitForDom.bind