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

package/src/token-select/__tests__/token.test.jsx

@@ -0,0 +1,33 @@
+import { Token } from '../token';
+import { shallow } from 'enzyme';
+import React from 'react';
+
+describe('token', () => {
+  describe('snapshot', () => {
+    it('renders', () => {
+      const w = shallow(
+        <Token
+          classes={{
+            token: 'token',
+            selectable: 'selectable',
+          }}
+          text={'foo bar'}
+        />,
+      );
+      expect(w).toMatchSnapshot();
+    });
+
+    it('renders with brs', () => {
+      const w = shallow(
+        <Token
+          classes={{
+            token: 'token',
+            selectable: 'selectable',
+          }}
+          text={'foo \nbar'}
+        />,
+      );
+      expect(w).toMatchSnapshot();
+    });
+  });
+});

package/src/token-select/index.jsx

@@ -58,7 +58,9 @@ export class TokenSelect extends React.Component {
     const targetedTokenIndex = targetSpanWrapper && targetSpanWrapper.dataset && targetSpanWrapper.dataset.indexkey;
     const t = targetedTokenIndex && tokensCloned[targetedTokenIndex];
 
-    if (t && t.correct === undefined && !animationsDisabled) {
+    // don't toggle if we are in print mode, token correctness is defined or if it's missing
+    // (missing means that it was evaluated as correct and not selected)
+    if (t && t.correct === undefined && !animationsDisabled && !t.isMissing) {
       const { onChange, maxNoOfSelections } = this.props;
       const selected = !t.selected;
 

package/src/token-select/token.jsx

@@ -115,10 +115,6 @@ export default withStyles((theme) => {
     token: {
       cursor: 'pointer',
       textIndent: 0,
-      padding: theme.spacing.unit / 2,
-      paddingRight: 0,
-      paddingLeft: 0,
-      transition: 'background-color 100ms ease-in',
     },
     disabled: {
       cursor: 'inherit',
@@ -134,6 +130,7 @@ export default withStyles((theme) => {
       [theme.breakpoints.up(769)]: {
         '&:hover': {
           backgroundColor: color.primaryLight(),
+          color: theme.palette.common.black,
           '& > *': {
             backgroundColor: color.primaryLight(),
           },
@@ -141,47 +138,42 @@ export default withStyles((theme) => {
       },
     },
     selected: {
-      lineHeight: 2,
-      marginTop: theme.spacing.unit / 2,
       backgroundColor: color.primaryLight(),
+      color: theme.palette.common.black,
+      lineHeight: `${theme.spacing.unit * 3}px`,
       '& > *': {
         backgroundColor: color.primaryLight(),
       },
     },
     highlight: {
       border: `dashed 2px ${color.disabled()}`,
-      lineHeight: 2,
-      boxSizing: 'border-box',
-      marginTop: theme.spacing.unit / 2,
-      display: 'inline-block',
-      padding: theme.spacing.unit,
+      lineHeight: `${theme.spacing.unit * 3}px`,
     },
     print: {
       border: `dashed 2px ${color.disabled()}`,
-      lineHeight: 2,
-      boxSizing: 'border-box',
-      marginTop: theme.spacing.unit / 2,
-      display: 'inline-block',
-      padding: theme.spacing.unit,
+      lineHeight: `${theme.spacing.unit * 3}px`,
       color: color.text(),
     },
-
     custom: {
       display: 'initial',
     },
     correct: {
       backgroundColor: color.correctSecondary(),
       border: `${color.correct()} solid 2px`,
-      lineHeight: `${theme.spacing.unit * 4}px`,
+      color: theme.palette.common.black,
+      lineHeight: `${theme.spacing.unit * 3}px`,
     },
     incorrect: {
       backgroundColor: color.incorrectSecondary(),
       border: `${color.missing()} solid 2px`,
-      lineHeight: `${theme.spacing.unit * 4}px`,
+      color: theme.palette.common.black,
+      lineHeight: `${theme.spacing.unit * 3}px`,
     },
     missing: {
       backgroundColor: color.incorrectSecondary(),
       border: `${color.missing()} dashed 2px`,
+      color: theme.palette.common.black,
+      lineHeight: `${theme.spacing.unit * 3}px`,
       textDecoration: `line-through ${color.missing()}`,
     },
     incorrectIcon: {
@@ -189,7 +181,6 @@ export default withStyles((theme) => {
       fontSize: 'larger',
       color: color.missing(),
     },
-
     correctIcon: {
       verticalAlign: 'middle',
       fontSize: 'larger',

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', () => {});
+  });
+});