含酶的键盘按键未更新反应成分

时间:2019-08-16 14:15:58

标签: unit-testing events keyboard enzyme keydown

我正在编写单元测试。 react组件起作用。我需要为此编写一个单元测试。但是,当我确实按下键时。 react组件不会自我更新。它保持不变。

我不确定该怎么做

const keyPressOptions=(num)=>{
      const tabKey = 9;
      const enterKey = 13;
      const escapeKey = 27;
      const leftArrowKey = 37;
      const upArrowKey = 38;
      const rightArrowKey = 39;
      const downArrowKey = 40;
      var ckeycode=0;
      var ccode="goodbye"
      var ckey="goodbye"
      var ccharCode=0
      var cwhich=0;

      switch (num) {
        case tabKey:
          var ckeycode = 9;
          var ccode = "Tab";
          var ckey = "Tab";
          var ccharCode = 9
          var cwhich = 9;
          break;
        case enterKey:
          var ckeycode = 13;
          var ccode = "Enter";
          var ckey = "Enter";
          var ccharCode = 13;
          var cwhich = 13;
          break;
        case escapeKey:
          var ckeycode = 27;
          var ccode = "escape";
          var ckey = "escape";
          var ccharCode = 27
          var cwhich = 27;
          break;
        case leftArrowKey:
          var ckeycode = 37;
          var ccode = "left";
          var ckey = "left";
          var ccharCode = 37;
          var cwhich = 37;
          break;
        case upArrowKey:
          var ckeycode = 38;
          var ccode = "up";
          var ckey = "up";
          var ccharCode = 38;
          var cwhich = 38;
          break;
        case rightArrowKey:
          var ckeycode = 39;
          var ccode = "right";
          var ckey = "right";
          var ccharCode = 39;
          var cwhich = 39;
          break;
        case downArrowKey:
          var ckeycode = 40;
          var ccode = "down";
          var ckey = "down";
          var ccharCode = 40;
          var cwhich = 40;
          break;
        default:
          break;
      }
      return new KeyboardEvent('keydown', {
        altKey:false,
        bubbles: true,
        cancelBubble: false, 
        cancelable: true,
        charCode: ccharCode,
        code: ccode,
        composed: true,
        ctrlKey: false,
        currentTarget: null,
        defaultPrevented: true,
        detail: 0,
        eventPhase: 0,
        isComposing: false,
        isTrusted: true,
        key: ckey,
        keyCode: ckeycode,
        location: 0,
        metaKey: false,
        repeat: false,
        returnValue: false,
        shiftKey: false,
        type: "keydown",
        which: cwhich});

    }
 it('test initKeyBoardNavigation function', () => {


      const wrapper = mount(
          <DatePicker
              heading="Start Date"

              dateFormat="yyyy.mm.dd"
              foeId="508 Datepicker Id"
              foeTitle="508 Datepicker Title"
          />
      )
      wrapper.find('.field').simulate('click'); 
      expect(wrapper.exists('.picker.with-label')).toEqual(true);
      //select date and dispacth event
      const dateButton = wrapper.find('.calendar-row').at(4).children().at(2);
      //dateButton.simulate('focus');
      var ev= keyPressOptions(escapeKey);
      //document.body.dispatchEvent(ev);
      dateButton.getDOMNode().dispatchEvent(ev);

      //update page to check action
      //wrapper.update()
      expect(wrapper.exists('.picker.with-label')).toEqual(false);

})

expect(wrapper.exists('。picker.with-label'))。toEqual(false);假定返回false,但返回true。我发送了escapeKey按键,它将使“ .picker.with-label”类消失。但是,它仍然存在于包装器中。

0 个答案:

没有答案