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

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.