@pie-lib/text-select 1.12.8-next.1 → 1.13.0-beta.1

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();
+      });
+    });
+  });
+});

package/src/tokenizer/controls.jsx

@@ -4,6 +4,8 @@ import Button from '@material-ui/core/Button';
 import { withStyles } from '@material-ui/core/styles';
 import Switch from '@material-ui/core/Switch';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
+import { color } from '@pie-lib/render-ui';
+import classNames from 'classnames';
 
 export class Controls extends React.Component {
   static propTypes = {
@@ -50,7 +52,18 @@ export class Controls extends React.Component {
           </Button>
         </div>
         <FormControlLabel
-          control={<Switch checked={setCorrectMode} onChange={onToggleCorrectMode} />}
+          control={
+            <Switch
+              classes={{
+                checked: classes.checkedThumb,
+                bar: classNames({
+                  [classes.checkedBar]: setCorrectMode,
+                }),
+              }}
+              checked={setCorrectMode}
+              onChange={onToggleCorrectMode}
+            />
+          }
           label="Set correct answers"
         />
       </div>
@@ -66,4 +79,10 @@ export default withStyles((theme) => ({
     alignItems: 'center',
     justifyContent: 'space-between',
   },
+  checkedThumb: {
+    color: `${color.tertiary()} !important`,
+  },
+  checkedBar: {
+    backgroundColor: `${color.tertiaryLight()} !important`,
+  },
 }))(Controls);

package/src/tokenizer/token-text.jsx

@@ -16,9 +16,18 @@ export const Text = withStyles(() => ({
     cursor: 'pointer',
     backgroundColor: yellow[100],
     border: `dashed 0px ${yellow[700]}`,
+    // we need this for nested tokenized elements like paragraphs, where p is inside span
+    '& *': {
+      cursor: 'pointer',
+      backgroundColor: yellow[100],
+      border: `dashed 0px ${yellow[700]}`,
+    },
   },
   correct: {
     backgroundColor: green[500],
+    '& *': {
+      backgroundColor: green[500],
+    },
   },
 }))(({ text, predefined, classes, onClick, correct }) => {
   const formattedText = (text || '').replace(/\n/g, '<br>');

package/README.md

@@ -1,3 +0,0 @@
-# text-select
-
-Some components for use with text selection.