@pie-lib/text-select 3.0.3-next.38 → 3.0.3-next.51

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

@@ -0,0 +1,256 @@
+import { intersection, normalize, paragraphs, sentences, sort, words } 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,27 @@
+import { Controls } from '../controls';
+import React from 'react';
+import { render } from '@testing-library/react';
+
+describe('controls', () => {
+  const defaultProps = {
+    classes: { button: 'button' },
+    onClear: jest.fn(),
+    onWords: jest.fn(),
+    onSentences: jest.fn(),
+    onParagraphs: jest.fn(),
+    setCorrectMode: false,
+    onToggleCorrectMode: jest.fn(),
+  };
+
+  describe('rendering', () => {
+    it('renders with all controls', () => {
+      const { container } = render(<Controls {...defaultProps} />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders in setCorrectMode', () => {
+      const { container } = render(<Controls {...defaultProps} setCorrectMode={true} />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+});

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

@@ -0,0 +1,329 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { Tokenizer } from '../index';
+
+const tokens = () => [
+  {
+    start: 0,
+    end: 1,
+    text: 'f',
+  },
+];
+
+describe('tokenizer', () => {
+  const defaultProps = {
+    text: 'foo',
+    classes: {},
+    onChange: jest.fn(),
+    tokens: tokens(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('rendering', () => {
+    it('renders with default props', () => {
+      const { container } = render(<Tokenizer {...defaultProps} />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with empty tokens', () => {
+      const { container } = render(<Tokenizer {...defaultProps} tokens={[]} />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with multiple tokens', () => {
+      const multipleTokens = [
+        { start: 0, end: 3, text: 'foo' },
+        { start: 4, end: 7, text: 'bar' },
+      ];
+      const { container } = render(<Tokenizer {...defaultProps} tokens={multipleTokens} />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders Controls component', () => {
+      const { getByText } = render(<Tokenizer {...defaultProps} />);
+      expect(getByText(/clear/i)).toBeInTheDocument();
+    });
+
+    it('renders TokenText with text content', () => {
+      const { container } = render(<Tokenizer {...defaultProps} text="Hello world" />);
+      expect(container.textContent).toContain('Hello world');
+    });
+  });
+
+  describe('control interactions', () => {
+    it('calls onChange when clear button is clicked', () => {
+      const onChange = jest.fn();
+      const { getByText } = render(<Tokenizer {...defaultProps} onChange={onChange} />);
+
+      const clearButton = getByText(/clear/i);
+      fireEvent.click(clearButton);
+
+      expect(onChange).toHaveBeenCalledWith([], '');
+    });
+
+    it('calls onChange when words button is clicked', () => {
+      const onChange = jest.fn();
+      const { getByText } = render(<Tokenizer {...defaultProps} text="hello world" onChange={onChange} />);
+
+      const wordsButton = getByText(/words/i);
+      fireEvent.click(wordsButton);
+
+      expect(onChange).toHaveBeenCalled();
+      expect(onChange.mock.calls[0][1]).toBe('words');
+    });
+
+    it('calls onChange when sentences button is clicked', () => {
+      const onChange = jest.fn();
+      const { getByText } = render(<Tokenizer {...defaultProps} text="Hello. World." onChange={onChange} />);
+
+      const sentencesButton = getByText(/sentences/i);
+      fireEvent.click(sentencesButton);
+
+      expect(onChange).toHaveBeenCalled();
+      expect(onChange.mock.calls[0][1]).toBe('sentence');
+    });
+
+    it('calls onChange when paragraphs button is clicked', () => {
+      const onChange = jest.fn();
+      const { getByText } = render(<Tokenizer {...defaultProps} text="Para 1\n\nPara 2" onChange={onChange} />);
+
+      const paragraphsButton = getByText(/paragraphs/i);
+      fireEvent.click(paragraphsButton);
+
+      expect(onChange).toHaveBeenCalled();
+      expect(onChange.mock.calls[0][1]).toBe('paragraphs');
+    });
+  });
+
+  describe('correct mode toggle', () => {
+    it('toggles correct mode when toggle button is clicked', () => {
+      const { container } = render(<Tokenizer {...defaultProps} />);
+      const toggleButton = container.querySelector('[type="checkbox"]');
+
+      expect(toggleButton).not.toBeChecked();
+
+      fireEvent.click(toggleButton);
+      expect(toggleButton).toBeChecked();
+
+      fireEvent.click(toggleButton);
+      expect(toggleButton).not.toBeChecked();
+    });
+  });
+
+  describe('token handling', () => {
+    it('renders with tokens containing correct property', () => {
+      const tokensWithCorrect = [
+        { start: 0, end: 3, text: 'foo', correct: true },
+        { start: 4, end: 7, text: 'bar', correct: false },
+      ];
+      const { container } = render(<Tokenizer {...defaultProps} tokens={tokensWithCorrect} />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles tokens with overlapping positions', () => {
+      const overlappingTokens = [
+        { start: 0, end: 5, text: 'hello' },
+        { start: 3, end: 8, text: 'low' },
+      ];
+      const { container } = render(<Tokenizer {...defaultProps} tokens={overlappingTokens} />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('text variations', () => {
+    it('handles multiline text', () => {
+      const multilineText = 'Line 1\nLine 2\nLine 3';
+      const { container } = render(<Tokenizer {...defaultProps} text={multilineText} />);
+      expect(container.textContent).toContain('Line 1');
+      expect(container.textContent).toContain('Line 2');
+      expect(container.textContent).toContain('Line 3');
+    });
+
+    it('handles empty text', () => {
+      const { container } = render(<Tokenizer {...defaultProps} text="" tokens={[]} />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles text with special characters', () => {
+      const specialText = 'Hello! @#$ %^& *() world?';
+      const { container } = render(<Tokenizer {...defaultProps} text={specialText} />);
+      expect(container.textContent).toContain(specialText);
+    });
+  });
+
+  describe('token click interactions', () => {
+    it('removes token when clicked in normal mode', () => {
+      const onChange = jest.fn();
+      const tokensWithPredefined = [{ start: 0, end: 5, text: 'hello', predefined: true }];
+      const { container } = render(
+        <Tokenizer {...defaultProps} text="hello world" tokens={tokensWithPredefined} onChange={onChange} />,
+      );
+
+      const predefinedToken = container.querySelector('.predefined');
+      if (predefinedToken) {
+        fireEvent.click(predefinedToken);
+        expect(onChange).toHaveBeenCalled();
+        expect(onChange.mock.calls[0][0]).toEqual([]);
+      }
+    });
+
+    it('toggles correct property when token clicked in correct mode', () => {
+      const onChange = jest.fn();
+      const tokensWithPredefined = [{ start: 0, end: 5, text: 'hello', predefined: true, correct: false }];
+      const { container } = render(
+        <Tokenizer {...defaultProps} text="hello world" tokens={tokensWithPredefined} onChange={onChange} />,
+      );
+
+      const toggleButton = container.querySelector('[type="checkbox"]');
+      fireEvent.click(toggleButton);
+      onChange.mockClear();
+
+      const predefinedToken = container.querySelector('.predefined');
+      if (predefinedToken) {
+        fireEvent.click(predefinedToken);
+        expect(onChange).toHaveBeenCalled();
+        const updatedToken = onChange.mock.calls[0][0][0];
+        expect(updatedToken.correct).toBe(true);
+      }
+    });
+
+    it('toggles correct from true to false when clicked in correct mode', () => {
+      const onChange = jest.fn();
+      const tokensWithPredefined = [{ start: 0, end: 5, text: 'hello', predefined: true, correct: true }];
+      const { container } = render(
+        <Tokenizer {...defaultProps} text="hello world" tokens={tokensWithPredefined} onChange={onChange} />,
+      );
+
+      const toggleButton = container.querySelector('[type="checkbox"]');
+      fireEvent.click(toggleButton);
+      onChange.mockClear();
+
+      const predefinedToken = container.querySelector('.predefined');
+      if (predefinedToken) {
+        fireEvent.click(predefinedToken);
+        expect(onChange).toHaveBeenCalled();
+        const updatedToken = onChange.mock.calls[0][0][0];
+        expect(updatedToken.correct).toBe(false);
+      }
+    });
+
+    it('does not modify tokens when clicking non-existent token', () => {
+      const onChange = jest.fn();
+      const { container } = render(<Tokenizer {...defaultProps} text="hello world" tokens={[]} onChange={onChange} />);
+
+      fireEvent.click(container.querySelector('div > div'));
+
+      expect(onChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('token removal', () => {
+    it('removes multiple different tokens', () => {
+      const onChange = jest.fn();
+      const multipleTokens = [
+        { start: 0, end: 5, text: 'hello', predefined: true },
+        { start: 6, end: 11, text: 'world', predefined: true },
+      ];
+      const { container } = render(
+        <Tokenizer {...defaultProps} text="hello world" tokens={multipleTokens} onChange={onChange} />,
+      );
+
+      const predefinedTokens = container.querySelectorAll('.predefined');
+      expect(predefinedTokens.length).toBeGreaterThan(0);
+
+      fireEvent.click(predefinedTokens[0]);
+      expect(onChange).toHaveBeenCalled();
+      expect(onChange.mock.calls[0][0].length).toBe(1); // One token left
+    });
+
+    it('handles removing token by matching text, start, and end', () => {
+      const onChange = jest.fn();
+      const tokensWithSameText = [
+        { start: 0, end: 5, text: 'hello', predefined: true },
+        { start: 12, end: 17, text: 'hello', predefined: true },
+      ];
+      const { container } = render(
+        <Tokenizer {...defaultProps} text="hello world hello" tokens={tokensWithSameText} onChange={onChange} />,
+      );
+
+      const predefinedTokens = container.querySelectorAll('.predefined');
+      if (predefinedTokens.length > 0) {
+        fireEvent.click(predefinedTokens[0]);
+        expect(onChange).toHaveBeenCalled();
+        expect(onChange.mock.calls[0][0].length).toBe(1);
+      }
+    });
+  });
+
+  describe('text selection and token creation', () => {
+    beforeEach(() => {
+      if (typeof global.window !== 'undefined') {
+        global.window.getSelection = jest.fn().mockReturnValue({
+          toString: () => '',
+        });
+      }
+    });
+
+    it('creates new token when text is selected', () => {
+      const onChange = jest.fn();
+      const { container } = render(<Tokenizer {...defaultProps} text="hello world" tokens={[]} onChange={onChange} />);
+
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('selectToken removes overlapping tokens when creating new token', () => {
+      const onChange = jest.fn();
+      const existingTokens = [{ start: 0, end: 5, text: 'hello' }];
+      const { container } = render(
+        <Tokenizer {...defaultProps} text="hello world" tokens={existingTokens} onChange={onChange} />,
+      );
+
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('mode state management', () => {
+    it('maintains mode state after buildTokens', () => {
+      const onChange = jest.fn();
+      const { getByText } = render(<Tokenizer {...defaultProps} text="hello world test" onChange={onChange} />);
+
+      const wordsButton = getByText(/words/i);
+      fireEvent.click(wordsButton);
+
+      expect(onChange).toHaveBeenCalled();
+      expect(onChange.mock.calls[0][1]).toBe('words');
+
+      onChange.mockClear();
+      fireEvent.click(wordsButton);
+      expect(onChange).toHaveBeenCalled();
+    });
+
+    it('maintains mode state after clear', () => {
+      const onChange = jest.fn();
+      const { getByText } = render(<Tokenizer {...defaultProps} text="hello world" onChange={onChange} />);
+
+      fireEvent.click(getByText(/words/i));
+      onChange.mockClear();
+
+      fireEvent.click(getByText(/clear/i));
+      expect(onChange).toHaveBeenCalledWith([], '');
+    });
+  });
+
+  describe('disabled state styling', () => {
+    it('applies disabled styling when in correct mode', () => {
+      const { container } = render(<Tokenizer {...defaultProps} />);
+
+      const styledDiv = container.querySelector('div > div');
+      expect(styledDiv).toBeInTheDocument();
+
+      const toggleButton = container.querySelector('[type="checkbox"]');
+      fireEvent.click(toggleButton);
+
+      expect(styledDiv).toBeInTheDocument();
+    });
+  });
+});