Как протестировать keyDown и изменение url?

Question

[cester]

Как протестировать такой код?

componentWillReceiveProps(nextProps) {
    if (nextProps.keydown.event) {
      const loc = nextProps.location.pathname;
      const his = nextProps.history;
      const k = nextProps.keydown.event.which;
      if (k === 39 && loc=== '/index') {
        his.push('/index/loc1');
      } else if (k === 39 && loc === '/index/loc1') {
        his.push('/index/loc2');
      } else if (k === 37 && loc === '/index/loc1') {
        his.push('/index');
      } else if (k === 37 && loc === '/index/loc2') {
        his.push('/index/loc1');
      }
    }
  }

Для тестов использую jest/enzyme.
Этот код делает следующее:
по стрелочками вправо / влево переключаются табы и меняется url.
Вопрос, может ли jest/enzyme отследить keydown и изменение url?
Буду благодарен за простой пример.

Answer 1

[Andrew Ghostuhin]

Jest

const map = {};
Window.addEventListener = jest.genMockFn().mockImpl((event, cb) => {
  map[event] = cb;
});

map.event(...args);

Enzyme

import { mount } from 'enzyme';
...
describe('Editor', function () {
  it('dispatch COMMAND_SAVE when command+s key pressesd', function () {
    const dispatchSpy = sinon.spy();
    dispatchSpy.withArgs(COMMAND_SAVE);

    // 1. use `mount` API for Full DOM Rendering
    const wrapper = mount(<Editor dispatch={dispatchSpy} />);

    // 2. find a DOM element with '.public-DraftEditor-content' classname
    const ed = wrapper.find('.public-DraftEditor-content');

    // 3. dispatch the 'keyDown' event with `simulate` API
    ed.simulate('keyDown', {
      keyCode: KeyCode.KEY_S,
      metaKey: false, // is IS_OSX=true, this should be true
      ctrlKey: true,
      altKey: false,
    });

    assert.equal(dispatchSpy.calledOnce, true);
    assert.equal(dispatchSpy.withArgs(COMMAND_SAVE).calledOnce, true);
  });
});

Comments

[fronter-up]

А как без sinon.spy()?
Как это тестировать?
his.push('/index/loc1');

[Andrew Ghostuhin]

А что тебя тут смутило? В чём конкретно вопрос-то?

[fronter-up]

Andrew Ghostuhin, У меня просто похожая проблема.
Вопрос в том, что я не догоняю как правильно тестировать этот кусок кода.
Надо отлавливать изменение урл на каждый вариант, или просто запускать экшн?
Пока остоновился на этом

it('test keyDown 39', () => {
    const props = {
      title: 'some title',
      history: {
        push: jest.fn(),
      },
    };
    const enzymeWrapper = mount(<Layout {...props} />);
    enzymeWrapper.simulate('keydown', {
      which: 37,
    });

    expect(props.history.push).toHaveBeenCalledTimes(1);
  });

Только начинаю разбираться с тестами.

[cester]

Как сделать без использования sinon?
И нужно ли тестировать то что изменяються роуты?
У меня сейчас ошибка

Invariant Violation: You should not use <Route> or withRouter() outside a <Router>

[Andrew Ghostuhin]

fronter-up, на каждый объект, да

[Andrew Ghostuhin]

cester, https://github.com/alexilyaev/react-router/commit/... - уже пофиксили, обновись

[cester]

Andrew Ghostuhin,

it('test keyDown , switching tabs', () => {
    const A_KEY = 39;
    const props = {
      history: {
        hash: '',
        key: '',
        pathname: '/bob',
        search: '',
        push: jest.fn(),
      },
    };
    const enzymeWrapper = mount(
      <MemoryRouter
        initialEntries={['/', '/q1', '/q2']}
        initialIndex={1}
      >
        <Main{...props} />
      </MemoryRouter>,
    );
    enzymeWrapper.simulate('keyDown', [{
      which: A_KEY,
    }]);

    expect(props.history.push).toHaveBeenCalledTimes(1);
  });

Что здесь еще не хватает?
Сейчас ошибка

expect(jest.fn()).toHaveBeenCalledTimes(1)

Expected mock function to have been called one time, but it was called zero times.

[Andrew Ghostuhin]

cester, ну так и загугли, совсем-то не ленись...

[cester]

Andrew Ghostuhin, не могу я нагуглить это!!
Сам тест правильно написан?

[Andrew Ghostuhin]

cester, ещё раз скажешь, что что-то не гуглится - отправлю на тебя жалобу
https://www.google.ru/search?q=Expected+mock+funct...

[cester]

Andrew Ghostuhin, Если я написал, что не гуглиться, значит, этот запрос не дал результата для меня.

[Andrew Ghostuhin]

cester, это как раз твой случай, первые ссылки...

[cester]

Andrew Ghostuhin, не мой.
Извините, если вы в этом профи, напишите пожалуйста, как оно должно быть

[Andrew Ghostuhin]

cester, гуглить надо лучше
toBeCalledWith на это поменяй и обнови jest, там PR был вмержен уже с пару месяцев назад который правит это дерьмо...
P.S: https://github.com/facebook/jest/pull/1423