client/src/components/__tests__/NoteInput.test.js
author ymh <ymh.work@gmail.com>
Mon, 08 Oct 2018 18:35:47 +0200
changeset 168 ea92f4fe783d
parent 14 df6780e48eb5
permissions -rw-r--r--
- move SlateEditor and dependencies to its own folder - remove Immutable - remove redux-persist-immutable - remobe redux-immutable - update libraries - added tests on store manipulations (accessor and reducers)

// import React from 'react';
// import { shallow, mount } from 'enzyme';
// import NoteInput from '../NoteInput';
// import { Plain } from 'slate'

// const setup = (propOverrides, doMount=false) => {
//   const props = Object.assign({
//       addNote: jest.fn(),
//       session: { _id: 'abcd' },
//       autoSubmit: false,
//       setAutoSubmit: jest.fn(),
//       annotationCategories: []
//   }, propOverrides);

//   const renderFn = doMount?mount:shallow;
//   const wrapper = renderFn(<NoteInput {...props} />);

//   return {
//     props,
//     wrapper,
//   }
// };

// Element.focus() doesn't work
// @see https://stackoverflow.com/questions/42213522/mocking-document-createrange-for-jest
beforeAll(() => {
  window.getSelection = () => {
    return {
      removeAllRanges: () => {},
      addRange: () => {}
    };
  };

  window.Range = function Range() {};

  const createContextualFragment = (html) => {
    const div = document.createElement('div');
    div.innerHTML = html;
    return div.children[0]; // so hokey it's not even funny
  };

  Range.prototype.createContextualFragment = (html) => createContextualFragment(html);

  // HACK: Polyfil that allows codemirror to render in a JSDOM env.
  window.document.createRange = function createRange() {
    return {
      setEnd: () => {},
      setStart: () => {},
      getBoundingClientRect: () => {
        return { right: 0 };
      },
      compareBoundaryPoints: () => {
        return 0;
      },
      getClientRects: () => [],
      createContextualFragment,
    };
  };
});

describe('Notes container Component', () => {
  test('render', () => {
    //pass
  });
  // test('render', () => {
  //   const { wrapper } = setup({}, true);
  //   expect(wrapper.exists()).toBe(true)
  // });


  // test('button is disabled when there is no text', () => {
  //   const { props, wrapper } = setup({}, true);
  //   const button = wrapper.find('button');

  //   expect(button.prop('disabled')).toBe(true);
  // });

  // test('button is not disabled when there is text', () => {
  //   const { props, wrapper } = setup({}, true);
  //   const button = wrapper.find('button');
  //   const editor = wrapper.find('SlateEditor').find('Editor').node;

  //   // FIXME simulate('change') doesn't work
  //   editor.onChange(Plain.deserialize('Hello world'));

  //   expect(button.prop('disabled')).toBe(false);
  // });

  // test('click button', () => {
  //     const { props, wrapper } = setup({}, true);
  //     wrapper.find('button').simulate('click');
  //     expect(props.addNote.mock.calls.length).toBe(1);
  // });

  // test('note value on clickbutton', () => {
  //     const { props, wrapper } = setup({}, true);
  //     // This does nothing... must find a way to make it work
  //     wrapper.find('SlateEditor').simulate('change', {target: {value: 'note text'}});
  //     wrapper.find('button').simulate('click');
  //     expect(props.addNote.mock.calls.length).toBe(1);
  //     // cf. previous comment
  //     //expect(props.addNote.mock.calls[0]).toEqual(['note text']);
  // });

});