Controlled-components-snippet5.js

test('when maxLength is 1, input should reject any keypress',()=>{
  //assuming we have a div in our test environment with the id #test-app
  const onChangeCalls = [];
  myComponent("#test-app","my-label","A",{maxLength:1},(value)=>calls.push(value));
  const input = document.querySelector("#test-app input");
  //this test is a simplified version, to really simulate an input event, you'll need to
  //change the target value, call more events and react like the browser.
  input.dispatchEvent(new Event('keypress',{bubbles:true,cancelable:true,key:"B"}))
  expect(calls.length).toEqual(0);
  expect(input.value).toEqual("A");
})