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

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

@@ -0,0 +1,34 @@
+import TextSelect from '../text-select';
+import { shallow } from 'enzyme';
+import React from 'react';
+import toJson from 'enzyme-to-json';
+describe('text-select', () => {
+  describe('snapshot', () => {
+    it('renders', () => {
+      const w = shallow(
+        <TextSelect text="foo" tokens={[]} selectedTokens={[]} onChange={jest.fn()} maxNoOfSelections={4} />,
+      );
+      expect(w).toMatchSnapshot();
+    });
+  });
+
+  describe('logic', () => {
+    let w, onChange;
+    beforeEach(() => {
+      onChange = jest.fn();
+      w = shallow(<TextSelect text="foo" tokens={[]} selectedTokens={[]} onChange={onChange} />);
+    });
+
+    describe('change', () => {
+      it('calls onChange', () => {
+        const changeArgs = [
+          { start: 0, end: 1, selected: true },
+          { start: 1, end: 2 },
+        ];
+
+        w.instance().change(changeArgs);
+        expect(onChange).toBeCalledWith([{ start: 0, end: 1 }]);
+      });
+    });
+  });
+});

package/src/__tests__/utils.test.jsx

@@ -0,0 +1,27 @@
+import { prepareText } from '../utils';
+
+describe('logic', () => {
+  it('returns text if no html elements', () => {
+    const formattedText = prepareText(`foo bar`);
+
+    expect(formattedText).toEqual('foo bar');
+  });
+
+  it('replaces br with new lines', () => {
+    const formattedText = prepareText(`<p>foo<br>bar</p>`);
+
+    expect(formattedText).toEqual('foo\nbar');
+  });
+
+  it('replaces p with 2 new lines', () => {
+    const formattedText = prepareText(`<p>foo<br>bar</p><p>bar<br>foo</p>`);
+
+    expect(formattedText).toEqual('foo\nbar\n\nbar\nfoo');
+  });
+
+  it('adds p if there are no paragraphs', () => {
+    const formattedText = prepareText(`foo<br>bar<br>foo`);
+
+    expect(formattedText).toEqual('foo\nbar\nfoo');
+  });
+});

package/src/index.js

@@ -1,3 +1,4 @@
+import Controls from './tokenizer/controls';
 import Tokenizer from './tokenizer';
 import TokenSelect, { TokenTypes } from './token-select';
 import TextSelect from './text-select';
@@ -5,4 +6,4 @@ import { Legend } from './legend';
 import Token from './token-select/token';
 import { prepareText } from './utils';
 
-export { TextSelect, TokenTypes, Tokenizer, TokenSelect, Token, prepareText, Legend };
+export { Controls, TextSelect, TokenTypes, Tokenizer, TokenSelect, Token, prepareText, Legend };

package/src/token-select/__tests__/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`token-select snapshot renders 1`] = `
+<div
+  className=""
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<p><span class=\\"tokenRootClass Token-token-1 Token-selectable-5\\" data-indexkey=\\"0\\" data-reactroot=\\"\\">foo bar</span></p>",
+    }
+  }
+  onClick={[Function]}
+/>
+`;
+
+exports[`token-select snapshot renders in view mode with selected tokens 1`] = `
+<div
+  className=""
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<p><span class=\\"Token-token-1 Token-selected-6 Token-disabledBlack-3\\" data-indexkey=\\"0\\" data-reactroot=\\"\\">foo,</span><br><span class=\\"Token-token-1 Token-selected-6 Token-disabledBlack-3\\" data-indexkey=\\"2\\" data-reactroot=\\"\\">bar</span></p>",
+    }
+  }
+  onClick={[Function]}
+/>
+`;
+
+exports[`token-select snapshot renders paragraphs properly 1`] = `
+<div
+  className=""
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<p><span class=\\"tokenRootClass Token-token-1 Token-selectable-5\\" data-indexkey=\\"0\\" data-reactroot=\\"\\">foo,</span></p><p><span class=\\"tokenRootClass Token-token-1 Token-selectable-5\\" data-indexkey=\\"2\\" data-reactroot=\\"\\">bar</span></p>",
+    }
+  }
+  onClick={[Function]}
+/>
+`;
+
+exports[`token-select snapshot renders sentences properly 1`] = `
+<div
+  className=""
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<p><span class=\\"tokenRootClass Token-token-1 Token-selectable-5\\" data-indexkey=\\"0\\" data-reactroot=\\"\\">foo,</span><br><span class=\\"tokenRootClass Token-token-1 Token-selectable-5\\" data-indexkey=\\"2\\" data-reactroot=\\"\\">bar</span></p>",
+    }
+  }
+  onClick={[Function]}
+/>
+`;

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

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`token snapshot renders 1`] = `
+<Wrapper
+  useWrapper={false}
+>
+  <span
+    className="tokenRootClass token"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "foo bar",
+      }
+    }
+  />
+</Wrapper>
+`;
+
+exports[`token snapshot renders with brs 1`] = `
+<Wrapper
+  useWrapper={false}
+>
+  <span
+    className="tokenRootClass token"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "foo <br>bar",
+      }
+    }
+  />
+</Wrapper>
+`;

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

@@ -0,0 +1,257 @@
+import { TokenSelect } from '../index';
+import React from 'react';
+import { shallow } from 'enzyme';
+
+describe('token-select', () => {
+  describe('snapshot', () => {
+    it('renders', () => {
+      const w = shallow(
+        <TokenSelect
+          tokens={[
+            {
+              text: 'foo bar',
+              start: 0,
+              end: 7,
+              predefined: true,
+              selectable: true,
+              selected: false,
+            },
+          ]}
+          classes={{}}
+          onChange={jest.fn()}
+        />,
+      );
+      expect(w).toMatchSnapshot();
+    });
+
+    it('renders sentences properly', () => {
+      const w = shallow(
+        <TokenSelect
+          tokens={[
+            {
+              text: 'foo,',
+              start: 0,
+              end: 4,
+              predefined: true,
+              selectable: true,
+              selected: false,
+            },
+            {
+              text: '\n',
+              start: 4,
+              end: 5,
+              selected: false,
+            },
+            {
+              text: 'bar',
+              start: 5,
+              end: 8,
+              predefined: true,
+              selectable: true,
+              selected: false,
+            },
+          ]}
+          classes={{}}
+          onChange={jest.fn()}
+        />,
+      );
+      expect(w).toMatchSnapshot();
+    });
+
+    it('renders paragraphs properly', () => {
+      const w = shallow(
+        <TokenSelect
+          tokens={[
+            {
+              text: 'foo,',
+              start: 0,
+              end: 4,
+              predefined: true,
+              selectable: true,
+              selected: false,
+            },
+            {
+              text: '\n\n',
+              start: 4,
+              end: 5,
+              selected: false,
+            },
+            {
+              text: 'bar',
+              start: 5,
+              end: 8,
+              predefined: true,
+              selectable: true,
+              selected: false,
+            },
+          ]}
+          classes={{}}
+          onChange={jest.fn()}
+        />,
+      );
+      expect(w).toMatchSnapshot();
+    });
+
+    it('renders in view mode with selected tokens', () => {
+      const w = shallow(
+        <TokenSelect
+          disabled
+          tokens={[
+            {
+              text: 'foo,',
+              start: 0,
+              end: 4,
+              predefined: true,
+              selectable: true,
+              selected: true,
+            },
+            {
+              text: '\n',
+              start: 4,
+              end: 5,
+              selected: false,
+            },
+            {
+              text: 'bar',
+              start: 5,
+              end: 8,
+              predefined: true,
+              selectable: true,
+              selected: true,
+            },
+          ]}
+          classes={{}}
+          onChange={jest.fn()}
+        />,
+      );
+      expect(w).toMatchSnapshot();
+    });
+  });
+
+  describe('logic', () => {
+    let w, onChange;
+    beforeEach(() => {
+      onChange = jest.fn();
+      w = shallow(
+        <TokenSelect
+          tokens={[
+            {
+              text: 'foo',
+              start: 0,
+              end: 3,
+            },
+            {
+              text: 'bar',
+              start: 4,
+              end: 7,
+            },
+          ]}
+          classes={{}}
+          onChange={onChange}
+        />,
+      );
+    });
+    describe('selectedCount', () => {
+      it('returns the correct count', () => {
+        expect(w.instance().selectedCount()).toEqual(0);
+      });
+
+      it('returns the correct count for 1 selected', () => {
+        w.setProps({ tokens: [{ selected: true }] });
+        expect(w.instance().selectedCount()).toEqual(1);
+      });
+    });
+
+    describe('canSelectMore', () => {
+      it('returns true for undefined max selections', () => {
+        w.setProps({ maxNoOfSelections: undefined });
+        expect(w.instance().canSelectMore(10)).toEqual(true);
+      });
+      it('returns true for 0 max selections', () => {
+        w.setProps({ maxNoOfSelections: 0 });
+        expect(w.instance().canSelectMore(10)).toEqual(true);
+      });
+      it('returns true for -1 max selections', () => {
+        w.setProps({ maxNoOfSelections: -1 });
+        expect(w.instance().canSelectMore(10)).toEqual(true);
+      });
+      it('returns true for 5 max selections and count 4', () => {
+        w.setProps({ maxNoOfSelections: 5 });
+        expect(w.instance().canSelectMore(4)).toEqual(true);
+      });
+
+      it('returns true for 5 max selections and count 5', () => {
+        w.setProps({ maxNoOfSelections: 5 });
+        expect(w.instance().canSelectMore(5)).toEqual(false);
+      });
+
+      it('returns false for 5 max selections and count 6', () => {
+        w.setProps({ maxNoOfSelections: 5 });
+        expect(w.instance().canSelectMore(6)).toEqual(false);
+      });
+
+      it('returns true for 1 max selections and count 1', () => {
+        w.setProps({ maxNoOfSelections: 1 });
+        expect(w.instance().canSelectMore(1)).toEqual(true);
+      });
+    });
+
+    describe('toggleToken', () => {
+      it('return if clicked target is not selectable', () => {
+        w.setProps({ maxNoOfSelections: 1, tokens: [{ selected: true }] });
+
+        const closest = jest.fn().mockReturnValue(null);
+        const mockedEvent = { target: { closest } };
+
+        w.instance().toggleToken(mockedEvent);
+
+        expect(onChange).not.toBeCalled();
+      });
+
+      it('calls onChange', () => {
+        w.setProps({ maxNoOfSelections: 0, tokens: [{ selected: true }] });
+
+        const closest = jest.fn().mockReturnValue({
+          dataset: {
+            indexkey: '0',
+          },
+        });
+        const mockedEvent = { target: { closest } };
+
+        w.instance().toggleToken(mockedEvent);
+
+        expect(onChange).toBeCalled();
+      });
+
+      it('returns if max tokens have been selected', () => {
+        w.setProps({ maxNoOfSelections: 0, tokens: [{ selected: true }] });
+
+        const closest = jest.fn().mockReturnValue({
+          dataset: {
+            indexkey: '0',
+          },
+        });
+        const mockedEvent = { target: { closest } };
+
+        w.instance().toggleToken(mockedEvent);
+
+        expect(onChange).not.toBeCalledWith([{ selected: true }]);
+      });
+
+      it('calls onChange if maxNoOfSelections is 1 and selectedCount is 1', () => {
+        w.setProps({ maxNoOfSelections: 1, tokens: [{ selected: true }] });
+
+        const closest = jest.fn().mockReturnValue({
+          dataset: {
+            indexkey: '0',
+          },
+        });
+        const mockedEvent = { target: { closest } };
+
+        w.instance().toggleToken(mockedEvent);
+
+        expect(onChange).toBeCalled();
+      });
+    });
+  });
+});

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>
+`;