@pie-lib/text-select 1.12.8 → 1.14.0-beta.0

package/src/tokenizer/__tests__/__snapshots__/controls.test.jsx.snap

@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`controls snapshot renders 1`] = `
+<div>
+  <div>
+    <WithStyles(Button)
+      className="button"
+      color="primary"
+      disabled={false}
+      onClick={[MockFunction]}
+      size="small"
+    >
+      Words
+    </WithStyles(Button)>
+    <WithStyles(Button)
+      className="button"
+      color="primary"
+      disabled={false}
+      onClick={[MockFunction]}
+      size="small"
+    >
+      Sentences
+    </WithStyles(Button)>
+    <WithStyles(Button)
+      className="button"
+      color="primary"
+      disabled={false}
+      onClick={[MockFunction]}
+      size="small"
+    >
+      Paragraphs
+    </WithStyles(Button)>
+    <WithStyles(Button)
+      className="button"
+      color="secondary"
+      disabled={false}
+      onClick={[MockFunction]}
+      size="small"
+    >
+      Clear
+    </WithStyles(Button)>
+  </div>
+  <WithStyles(WithFormControlContext(FormControlLabel))
+    control={
+      <WithStyles(Switch)
+        checked={false}
+        classes={
+          Object {
+            "bar": "",
+            "checked": undefined,
+          }
+        }
+        onChange={[MockFunction]}
+      />
+    }
+    label="Set correct answers"
+  />
+</div>
+`;

package/src/tokenizer/__tests__/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`tokenizer snapshot renders 1`] = `
+<div
+  className=""
+>
+  <WithStyles(Controls)
+    onClear={[Function]}
+    onParagraphs={[Function]}
+    onSentences={[Function]}
+    onToggleCorrectMode={[Function]}
+    onWords={[Function]}
+    setCorrectMode={false}
+  />
+  <TokenText
+    className=""
+    onSelectToken={[Function]}
+    onTokenClick={[Function]}
+    text="foo"
+    tokens={
+      Array [
+        Object {
+          "end": 1,
+          "start": 0,
+          "text": "f",
+        },
+      ]
+    }
+  />
+</div>
+`;

package/src/tokenizer/__tests__/__snapshots__/token-text.test.jsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`token-text snapshot renders 1`] = `
+<div
+  onClick={[Function]}
+>
+  <WithStyles(Component)
+    end={13}
+    key="0"
+    onClick={[Function]}
+    predefined={true}
+    start={0}
+    text="lorem
+foo bar"
+  />
+</div>
+`;

package/src/tokenizer/__tests__/builder.test.js

@@ -0,0 +1,256 @@
+import { normalize, sentences, words, paragraphs, sort, intersection } from '../builder';
+
+const token = (start, end, text) => ({ start, end, text });
+
+const selection = (start, end) => ({ start, end });
+
+const o = (strings, ...exp) => {
+  return strings.reduce((acc, v, index) => {
+    const e = exp[index];
+    const s = typeof e === 'object' ? JSON.stringify(e) : e;
+    return `${acc}${v}${s || ''}`;
+  }, '');
+};
+
+describe('builder', () => {
+  describe('intersection', () => {
+    const assert = (selection, tokens, expected) => {
+      it(o`${selection}, ${tokens} => ${expected}`, () => {
+        const received = intersection(selection, tokens);
+        expect(received.results).toEqual(expected);
+      });
+    };
+
+    assert(selection(2, 3), [token(0, 1)], []);
+    assert(selection(1, 2), [token(0, 1)], []);
+    assert(selection(0, 1), [token(0, 1)], [{ token: token(0, 1), type: 'exact-fit' }]);
+    assert(selection(0, 2), [token(0, 1)], [{ token: token(0, 1), type: 'within-selection' }]);
+    assert(selection(0, 2), [token(1, 2)], [{ token: token(1, 2), type: 'within-selection' }]);
+    assert(
+      selection(0, 10),
+      [token(1, 2), token(2, 3)],
+      [
+        { token: token(1, 2), type: 'within-selection' },
+        { token: token(2, 3), type: 'within-selection' },
+      ],
+    );
+    assert(
+      selection(0, 10),
+      [token(1, 2), token(2, 11)],
+      [
+        { token: token(1, 2), type: 'within-selection' },
+        { token: token(2, 11), type: 'overlap' },
+      ],
+    );
+  });
+
+  describe('sort', () => {
+    it('sorts', () => {
+      const out = sort([token(1, 2), token(0, 1)]);
+      expect(out).toEqual([token(0, 1), token(1, 2)]);
+    });
+    it('sorts', () => {
+      const out = sort([token(0, 1), token(1, 2)]);
+      expect(out).toEqual([token(0, 1), token(1, 2)]);
+    });
+    xit('sorts', () => {
+      expect(() => sort([token(0, 2), token(1, 2)])).toThrow(Error);
+    });
+  });
+  describe('normalize', () => {
+    const assert = (input, tokens, expected) => {
+      it(`${input} + ${JSON.stringify(tokens)} -> ${JSON.stringify(expected)}`, () => {
+        const out = normalize(input, tokens);
+        expect(out).toEqual(expected);
+      });
+    };
+    assert(
+      null,
+      [],
+      [
+        {
+          text: '',
+          start: 0,
+          end: 0,
+        },
+      ],
+    );
+    assert(
+      'abcde',
+      [
+        { text: 'b', start: 1, end: 2 },
+        { text: 'd', start: 3, end: 4 },
+      ],
+      [
+        { text: 'a', start: 0, end: 1 },
+        { text: 'b', start: 1, end: 2, predefined: true },
+        { text: 'c', start: 2, end: 3 },
+        { text: 'd', start: 3, end: 4, predefined: true },
+        { text: 'e', start: 4, end: 5 },
+      ],
+    );
+    assert(
+      'abc',
+      [{ text: 'c', start: 2, end: 3 }],
+      [
+        { text: 'ab', start: 0, end: 2 },
+        { text: 'c', start: 2, end: 3, predefined: true },
+      ],
+    );
+
+    assert(
+      'abc',
+      [
+        { text: 'c', start: 2, end: 3 },
+        { text: 'b', start: 1, end: 2 },
+      ],
+      [
+        { text: 'a', start: 0, end: 1 },
+        { text: 'b', start: 1, end: 2, predefined: true },
+        { text: 'c', start: 2, end: 3, predefined: true },
+      ],
+    );
+
+    assert(
+      'abc',
+      [{ text: 'a', start: 0, end: 1 }],
+      [
+        { text: 'a', start: 0, end: 1, predefined: true },
+        { text: 'bc', start: 1, end: 3 },
+      ],
+    );
+
+    assert(
+      'abcd',
+      [
+        { text: 'b', start: 1, end: 2 },
+        { text: 'c', start: 2, end: 3 },
+        { text: 'd', start: 3, end: 4 },
+      ],
+      [
+        { text: 'a', start: 0, end: 1 },
+        { text: 'b', start: 1, end: 2, predefined: true },
+        { text: 'c', start: 2, end: 3, predefined: true },
+        { text: 'd', start: 3, end: 4, predefined: true },
+      ],
+    );
+    assert(
+      'abcde',
+      [
+        { text: 'b', start: 1, end: 2 },
+        { text: 'c', start: 2, end: 3 },
+        { text: 'd', start: 3, end: 4 },
+      ],
+      [
+        { text: 'a', start: 0, end: 1 },
+        { text: 'b', start: 1, end: 2, predefined: true },
+        { text: 'c', start: 2, end: 3, predefined: true },
+        { text: 'd', start: 3, end: 4, predefined: true },
+        { text: 'e', start: 4, end: 5 },
+      ],
+    );
+
+    // same token defined multiple times
+    assert(
+      'abcde',
+      [
+        { text: 'c', start: 2, end: 3 },
+        { text: 'b', start: 1, end: 2 },
+        { text: 'c', start: 2, end: 3 },
+        { text: 'd', start: 3, end: 4 },
+        { text: 'c', start: 2, end: 3 },
+      ],
+      [
+        { text: 'a', start: 0, end: 1 },
+        { text: 'b', start: 1, end: 2, predefined: true },
+        { text: 'c', start: 2, end: 3, predefined: true },
+        { text: 'd', start: 3, end: 4, predefined: true },
+        { text: 'e', start: 4, end: 5 },
+      ],
+    );
+  });
+
+  describe('words', () => {
+    it('works', () => {
+      const out = words('foo. bar');
+      expect(out).toEqual([
+        {
+          text: 'foo.',
+          start: 0,
+          end: 4,
+        },
+        {
+          text: 'bar',
+          start: 5,
+          end: 8,
+        },
+      ]);
+    });
+  });
+
+  describe('sentences', () => {
+    it('foobar', () => {
+      const text = 'This is foo. This is bar.';
+      const out = sentences(text);
+      expect(out[0]).toEqual({ text: 'This is foo.', start: 0, end: 12 });
+      expect(out[1]).toEqual({ text: 'This is bar.', start: 13, end: 25 });
+    });
+
+    it('works', () => {
+      const text =
+        'On Jan. 20, former Sen. Barack Obama became the 44th President of the USA. Millions attended the Inauguration.';
+
+      const out = sentences(text);
+      expect(out.length).toEqual(2);
+    });
+
+    it('works for sentences separated by \n', () => {
+      const text = 'This is foo\nThis is bar';
+      const out = sentences(text);
+      expect(out[0]).toEqual({ text: 'This is foo', start: 0, end: 11 });
+      expect(out[1]).toEqual({ text: 'This is bar', start: 12, end: 23 });
+    });
+
+    it('works for sentences ending in one-character-words', () => {
+      const text =
+        "This is Sentence 1. This is Sentence 2. This is Sentence 3. This is Sentence 4. Dr. A. said he'll call in 5.";
+
+      const out = sentences(text);
+
+      expect(out.length).toEqual(5);
+
+      expect(out).toEqual([
+        { text: 'This is Sentence 1.', start: 0, end: 19 },
+        { text: 'This is Sentence 2.', start: 20, end: 39 },
+        { text: 'This is Sentence 3.', start: 40, end: 59 },
+        { text: 'This is Sentence 4.', start: 60, end: 79 },
+        { text: "Dr. A. said he'll call in 5.", start: 80, end: 108 },
+      ]);
+    });
+  });
+
+  describe('paragraphs', () => {
+    it('foobar', () => {
+      const text = 'This is foo. This is bar.\nThis is foobar. This is barfoo.';
+      const out = paragraphs(text);
+      expect(out[0]).toEqual({
+        text: 'This is foo. This is bar.',
+        start: 0,
+        end: 25,
+      });
+      expect(out[1]).toEqual({
+        text: 'This is foobar. This is barfoo.',
+        start: 26,
+        end: 57,
+      });
+    });
+    it('works', () => {
+      const text =
+        'On Jan. 20, former Sen. Barack Obama became the 44th President of the USA. Millions attended the Inauguration.' +
+        '\\ndadadadadadadadada.';
+
+      const out = paragraphs(text);
+      expect(out.length).toEqual(1);
+    });
+  });
+});

package/src/tokenizer/__tests__/controls.test.jsx

@@ -0,0 +1,25 @@
+import { Controls } from '../controls';
+import React from 'react';
+import { shallow, configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });
+
+describe('controls', () => {
+  describe('snapshot', () => {
+    it('renders', () => {
+      const w = shallow(
+        <Controls
+          classes={{ button: 'button' }}
+          onClear={jest.fn()}
+          onWords={jest.fn()}
+          onSentences={jest.fn()}
+          onParagraphs={jest.fn()}
+          setCorrectMode={false}
+          onToggleCorrectMode={jest.fn()}
+        />,
+      );
+      expect(w).toMatchSnapshot();
+    });
+  });
+});

package/src/tokenizer/__tests__/index.test.jsx

@@ -0,0 +1,140 @@
+import { Tokenizer } from '../index';
+import React from 'react';
+import { shallow } from 'enzyme';
+import { words, sentences, paragraphs } from '../builder';
+
+const tokens = () => [
+  {
+    start: 0,
+    end: 1,
+    text: 'f',
+  },
+];
+
+const eff = () => tokens()[0];
+
+jest.mock('../builder', () => ({
+  words: jest.fn().mockReturnValue([{ start: 0, end: 3, text: 'foo' }]),
+  sentences: jest.fn().mockReturnValue([{ start: 0, end: 3, text: 'foo' }]),
+  paragraphs: jest.fn().mockReturnValue([{ start: 0, end: 3, text: 'foo' }]),
+}));
+describe('tokenizer', () => {
+  describe('snapshot', () => {
+    it('renders', () => {
+      const w = shallow(<Tokenizer text="foo" classes={{}} onChange={jest.fn()} tokens={tokens()} />);
+      expect(w).toMatchSnapshot();
+    });
+  });
+
+  describe('logic', () => {
+    let w;
+    let onChange;
+
+    beforeEach(() => {
+      onChange = jest.fn();
+      w = shallow(<Tokenizer text="foo" classes={{}} onChange={onChange} tokens={tokens()} />);
+    });
+    describe('tokenIndex', () => {
+      it('returns 0', () => {
+        const index = w.instance().tokenIndex(eff());
+        expect(index).toEqual(0);
+      });
+
+      it('returns -1', () => {
+        const index = w.instance().tokenIndex({ start: 2, end: 3, text: 'f' });
+        expect(index).toEqual(-1);
+      });
+    });
+
+    describe('tokenClick', () => {
+      let i;
+
+      beforeEach(() => {
+        i = w.instance();
+        i.setCorrect = jest.fn();
+        i.removeToken = jest.fn();
+      });
+
+      it('calls removeToken if setCorrectMode == false', () => {
+        i.tokenClick(eff());
+        expect(i.setCorrect).not.toBeCalled();
+        expect(i.removeToken).toBeCalled();
+      });
+
+      it('calls setCorrect if setCorrectMode == true', () => {
+        i.setState({ setCorrectMode: true });
+        i.tokenClick(eff());
+        expect(i.setCorrect).toBeCalled();
+        expect(i.removeToken).not.toBeCalled();
+      });
+    });
+
+    describe('selectToken', () => {
+      it('calls onChange', () => {
+        w.instance().selectToken({ start: 1, end: 3, text: 'oo' }, [{ start: 0, end: 1, text: 'f' }]);
+        expect(onChange).toBeCalledWith([{ start: 1, end: 3, text: 'oo' }], '');
+      });
+    });
+
+    describe('buildParagraphsTokens', () => {
+      it('calls paragraphs', () => {
+        w.instance().buildTokens('paragraph', paragraphs);
+        expect(paragraphs).toBeCalledWith('foo');
+      });
+    });
+
+    describe('buildSentenceTokens', () => {
+      it('calls sentences', () => {
+        w.instance().buildTokens('sentence', sentences);
+        expect(sentences).toBeCalledWith('foo');
+      });
+    });
+
+    describe('buildWordTokens', () => {
+      it('calls words', () => {
+        w.instance().buildTokens('word', words);
+        expect(words).toBeCalledWith('foo');
+      });
+    });
+
+    describe('clear', () => {
+      it('calls onChange with an empty array', () => {
+        w.instance().clear();
+        expect(onChange).toBeCalledWith([], '');
+      });
+    });
+
+    describe('toggleCorrectMode', () => {
+      it('set state', () => {
+        w.setState({ setCorrectMode: true });
+        w.instance().toggleCorrectMode();
+        expect(w.state('setCorrectMode')).toEqual(false);
+      });
+    });
+
+    describe('setCorrect', () => {
+      it('calls onChange', () => {
+        w.instance().setCorrect({ start: 0, end: 1, text: 'f' });
+        expect(onChange).toBeCalledWith([{ start: 0, end: 1, text: 'f', correct: true }], '');
+      });
+      it('calls onChange w/ correct: false', () => {
+        w.setProps({
+          tokens: [{ start: 0, end: 1, text: 'f', correct: true }],
+        });
+        w.instance().setCorrect({ start: 0, end: 1, text: 'f' });
+        expect(onChange).toBeCalledWith([{ start: 0, end: 1, text: 'f', correct: false }], '');
+      });
+    });
+
+    describe('removeToken', () => {
+      it('calls onChange', () => {
+        w.instance().removeToken({ start: 0, end: 1, text: 'f' });
+        expect(onChange).toBeCalledWith([], '');
+      });
+      it('does not call onChange if it cant find the token', () => {
+        w.instance().removeToken({ start: 2, end: 3, text: 'a' });
+        expect(onChange).not.toBeCalled();
+      });
+    });
+  });
+});

package/src/tokenizer/__tests__/selection-utils.test.js

@@ -0,0 +1,26 @@
+import { clearSelection, getCaretCharacterOffsetWithin } from '../selection-utils';
+
+describe('selection-utils', () => {
+  let selection;
+  let range;
+  beforeEach(() => {
+    selection = {
+      removeAllRanges: jest.fn(),
+      addRange: jest.fn(),
+      getRangeAt: jest.fn().mockReturnValue(range),
+    };
+    global.document.getSelection = jest.fn().mockReturnValue(selection);
+    global.document.createRange = jest.fn();
+  });
+
+  describe('clearSelection', () => {
+    it('calls removeAllRanges', () => {
+      clearSelection();
+      expect(selection.removeAllRanges).toBeCalled();
+    });
+  });
+
+  xdescribe('getCaretCharacterOffsetWithin', () => {
+    it('TODO', () => {});
+  });
+});

package/src/tokenizer/__tests__/token-text.test.jsx

@@ -0,0 +1,136 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import TokenText from '../token-text';
+import { intersection } from '../builder';
+import { clearSelection, getCaretCharacterOffsetWithin } from '../selection-utils';
+
+jest.mock('../selection-utils', () => ({
+  clearSelection: jest.fn(),
+  getCaretCharacterOffsetWithin: jest.fn().mockReturnValue(10),
+}));
+
+jest.mock('../builder', () => ({
+  intersection: jest.fn().mockReturnValue({
+    hasOverlap: jest.fn().mockReturnValue(false),
+    surroundedTokens: jest.fn().mockReturnValue([]),
+  }),
+  normalize: jest.fn().mockReturnValue([
+    {
+      text: `lorem\nfoo bar`,
+      start: 0,
+      end: 13,
+      predefined: true,
+    },
+  ]),
+}));
+
+const tokens = () => [
+  {
+    start: 0,
+    end: 7,
+    text: `lorem\nfoo bar`,
+  },
+];
+
+const mkEvent = () => ({
+  preventDefault: jest.fn(),
+});
+
+describe('token-text', () => {
+  describe('snapshot', () => {
+    it('renders', () => {
+      const w = shallow(
+        <TokenText onTokenClick={jest.fn()} onSelectToken={jest.fn()} text={`lorem\nfoo bar`} tokens={tokens()} />,
+      );
+      expect(w).toMatchSnapshot();
+    });
+  });
+
+  describe('logic', () => {
+    let w;
+    let onSelectToken;
+    let onTokenClick;
+    beforeEach(() => {
+      global.window.getSelection = jest.fn().mockReturnValue({
+        toString: () => 'bar',
+      });
+
+      onSelectToken = jest.fn();
+      onTokenClick = jest.fn();
+
+      w = shallow(
+        <TokenText
+          onTokenClick={onTokenClick}
+          onSelectToken={onSelectToken}
+          text={`lorem\nfoo bar`}
+          tokens={tokens()}
+        />,
+      );
+    });
+
+    describe('mouseup', () => {
+      it('calls event.preventDefault', () => {
+        const event = mkEvent();
+        w.instance().onClick(event);
+        expect(event.preventDefault).toBeCalled();
+      });
+
+      it('calls getCaretCharacterOffsetWithin', () => {
+        const event = mkEvent();
+        w.instance().root = {};
+        w.instance().onClick(event);
+        expect(getCaretCharacterOffsetWithin).toBeCalledWith({});
+      });
+
+      it('calls clear selection if there is an overlap', () => {
+        intersection.mockReturnValue({
+          hasOverlap: true,
+        });
+        const event = mkEvent();
+        w.instance().root = {};
+        w.instance().onClick(event);
+        expect(clearSelection).toBeCalled();
+        expect(onSelectToken).not.toBeCalled();
+      });
+
+      it('calls onSelectToken', () => {
+        const event = mkEvent();
+        intersection.mockReturnValue({
+          hasOverlap: false,
+          surroundedTokens: [],
+        });
+        w.instance().root = {};
+        w.instance().onClick(event);
+        expect(onSelectToken).toBeCalledWith({ text: 'bar', start: 10, end: 13 }, []);
+      });
+
+      it('does not call onSelectToken for ["\n", " ", "\t"]', () => {
+        const event = mkEvent();
+
+        intersection.mockReturnValue({
+          hasOverlap: false,
+          surroundedTokens: [],
+        });
+        w.instance().root = {};
+
+        global.window.getSelection = jest.fn().mockReturnValue({
+          toString: () => '\n',
+        });
+        w.instance().onClick(event);
+        expect(onSelectToken).not.toBeCalled();
+
+        global.window.getSelection = jest.fn().mockReturnValue({
+          toString: () => ' ',
+        });
+        w.instance().onClick(event);
+        expect(onSelectToken).not.toBeCalled();
+
+        global.window.getSelection = jest.fn().mockReturnValue({
+          toString: () => '\t',
+        });
+        w.instance().onClick(event);
+        expect(onSelectToken).not.toBeCalled();
+      });
+    });
+  });
+});