@pie-lib/text-select 2.1.1-next.0 → 2.2.0-next.0

package/src/tokenizer/__tests__/token-text.test.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import TokenText from '../token-text';
+import { fireEvent, render } from '@testing-library/react';
+import TokenText, { Text } from '../token-text';
 
 const tokens = () => [
   {
     start: 0,
-    end: 7,
-    text: `lorem\nfoo bar`,
+    end: 5,
+    text: 'lorem',
   },
 ];
 
@@ -14,10 +14,19 @@ describe('token-text', () => {
   const defaultProps = {
     onTokenClick: jest.fn(),
     onSelectToken: jest.fn(),
-    text: `lorem\nfoo bar`,
+    text: `lorem ipsum dolor`,
     tokens: tokens(),
   };
 
+  beforeEach(() => {
+    jest.clearAllMocks();
+    if (typeof global.window !== 'undefined') {
+      global.window.getSelection = jest.fn().mockReturnValue({
+        toString: () => '',
+      });
+    }
+  });
+
   describe('rendering', () => {
     it('renders with text and tokens', () => {
       const { container } = render(<TokenText {...defaultProps} />);
@@ -33,10 +42,277 @@ describe('token-text', () => {
       const { container } = render(<TokenText {...defaultProps} text="Line 1\nLine 2\nLine 3" />);
       expect(container.firstChild).toBeInTheDocument();
     });
+
+    it('renders with custom className', () => {
+      const { container } = render(<TokenText {...defaultProps} className="custom-class" />);
+      expect(container.firstChild).toHaveClass('custom-class');
+    });
+
+    it('renders normalized tokens', () => {
+      const { container } = render(<TokenText {...defaultProps} />);
+      const spans = container.querySelectorAll('span');
+      expect(spans.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Text component', () => {
+    it('renders plain text when not predefined', () => {
+      const { container } = render(<Text text="hello" predefined={false} />);
+      expect(container.querySelector('span')).toBeInTheDocument();
+      expect(container.querySelector('span')).not.toHaveClass('predefined');
+    });
+
+    it('renders predefined text with correct class', () => {
+      const { container } = render(<Text text="hello" predefined={true} onClick={jest.fn()} />);
+      expect(container.querySelector('span')).toHaveClass('predefined');
+    });
+
+    it('renders correct text with both classes', () => {
+      const { container } = render(<Text text="hello" predefined={true} correct={true} onClick={jest.fn()} />);
+      const span = container.querySelector('span');
+      expect(span).toHaveClass('predefined');
+      expect(span).toHaveClass('correct');
+    });
+
+    it('calls onClick when predefined text is clicked', () => {
+      const onClick = jest.fn();
+      const { container } = render(<Text text="hello" predefined={true} onClick={onClick} />);
+      const span = container.querySelector('span');
+      fireEvent.click(span);
+      expect(onClick).toHaveBeenCalled();
+    });
+  });
+
+  describe('token interaction', () => {
+    it('calls onTokenClick when clicking on a predefined token', () => {
+      const onTokenClick = jest.fn();
+      const { container } = render(<TokenText {...defaultProps} onTokenClick={onTokenClick} />);
+      const predefinedSpan = container.querySelector('.predefined');
+      if (predefinedSpan) {
+        fireEvent.click(predefinedSpan);
+        expect(onTokenClick).toHaveBeenCalled();
+      }
+    });
+
+    it('handles click without window object (SSR)', () => {
+      const originalWindow = global.window;
+      global.window = undefined;
+
+      const { container } = render(<TokenText {...defaultProps} />);
+      expect(() => fireEvent.click(container.firstChild)).not.toThrow();
+
+      global.window = originalWindow;
+    });
   });
 
-  // Note: Tests for internal methods (onClick, mouseup event handling) are implementation
-  // details and cannot be directly tested with RTL. The original tests used wrapper.instance()
-  // to test onClick method logic, which tests implementation rather than user-facing behavior.
-  // User interactions with text selection should be tested through integration/e2e tests.
+  describe('text selection', () => {
+    beforeEach(() => {
+      global.window.getSelection = jest.fn();
+    });
+
+    it('does not call onSelectToken when no text is selected', () => {
+      const onSelectToken = jest.fn();
+      global.window.getSelection.mockReturnValue({
+        toString: () => '',
+      });
+
+      const { container } = render(<TokenText {...defaultProps} onSelectToken={onSelectToken} />);
+      fireEvent.click(container.firstChild);
+
+      expect(onSelectToken).not.toHaveBeenCalled();
+    });
+
+    it('does not call onSelectToken for newline character selection', () => {
+      const onSelectToken = jest.fn();
+      global.window.getSelection.mockReturnValue({
+        toString: () => '\n',
+      });
+
+      const { container } = render(<TokenText {...defaultProps} onSelectToken={onSelectToken} />);
+      fireEvent.click(container.firstChild);
+
+      expect(onSelectToken).not.toHaveBeenCalled();
+    });
+
+    it('does not call onSelectToken for space character selection', () => {
+      const onSelectToken = jest.fn();
+      global.window.getSelection.mockReturnValue({
+        toString: () => ' ',
+      });
+
+      const { container } = render(<TokenText {...defaultProps} onSelectToken={onSelectToken} />);
+      fireEvent.click(container.firstChild);
+
+      expect(onSelectToken).not.toHaveBeenCalled();
+    });
+
+    it('does not call onSelectToken for tab character selection', () => {
+      const onSelectToken = jest.fn();
+      global.window.getSelection.mockReturnValue({
+        toString: () => '\t',
+      });
+
+      const { container } = render(<TokenText {...defaultProps} onSelectToken={onSelectToken} />);
+      fireEvent.click(container.firstChild);
+
+      expect(onSelectToken).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('props handling', () => {
+    it('accepts and uses all required props', () => {
+      const props = {
+        text: 'test text',
+        tokens: [],
+        onTokenClick: jest.fn(),
+        onSelectToken: jest.fn(),
+      };
+
+      const { container } = render(<TokenText {...props} />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles multiple tokens', () => {
+      const multipleTokens = [
+        { start: 0, end: 5, text: 'lorem' },
+        { start: 6, end: 11, text: 'ipsum' },
+      ];
+
+      const { container } = render(<TokenText {...defaultProps} tokens={multipleTokens} />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('text selection with valid text', () => {
+    let mockGetCaretCharacterOffsetWithin;
+
+    beforeEach(() => {
+      mockGetCaretCharacterOffsetWithin = jest.fn().mockReturnValue(6);
+      jest.mock('../selection-utils', () => ({
+        clearSelection: jest.fn(),
+        getCaretCharacterOffsetWithin: mockGetCaretCharacterOffsetWithin,
+      }));
+    });
+
+    it('calls onSelectToken when valid text is selected without overlap', () => {
+      const onSelectToken = jest.fn();
+      const clearSelectionMock = jest.fn();
+
+      const selectionUtils = require('../selection-utils');
+      selectionUtils.clearSelection = clearSelectionMock;
+      selectionUtils.getCaretCharacterOffsetWithin = jest.fn().mockReturnValue(6);
+
+      global.window.getSelection.mockReturnValue({
+        toString: () => 'ipsum',
+      });
+
+      const { container } = render(
+        <TokenText {...defaultProps} text="lorem ipsum dolor" tokens={[]} onSelectToken={onSelectToken} />,
+      );
+
+      fireEvent.click(container.firstChild);
+
+      expect(onSelectToken).toHaveBeenCalledWith(
+        expect.objectContaining({
+          text: 'ipsum',
+          start: expect.any(Number),
+          end: expect.any(Number),
+        }),
+        expect.any(Array),
+      );
+    });
+
+    it('handles text selection at the end of text', () => {
+      const onSelectToken = jest.fn();
+      const selectionUtils = require('../selection-utils');
+      selectionUtils.getCaretCharacterOffsetWithin = jest.fn().mockReturnValue(12);
+
+      global.window.getSelection.mockReturnValue({
+        toString: () => 'dolor',
+      });
+
+      const { container } = render(
+        <TokenText {...defaultProps} text="lorem ipsum dolor" tokens={[]} onSelectToken={onSelectToken} />,
+      );
+
+      fireEvent.click(container.firstChild);
+
+      expect(onSelectToken).toHaveBeenCalled();
+    });
+
+    it('handles newline offset calculation', () => {
+      const onSelectToken = jest.fn();
+      const selectionUtils = require('../selection-utils');
+      selectionUtils.getCaretCharacterOffsetWithin = jest.fn().mockReturnValue(0);
+
+      global.window.getSelection.mockReturnValue({
+        toString: () => 'ipsum',
+      });
+
+      const { container } = render(
+        <TokenText {...defaultProps} text="lorem\nipsum dolor" tokens={[]} onSelectToken={onSelectToken} />,
+      );
+
+      fireEvent.click(container.firstChild);
+
+      if (onSelectToken.mock.calls.length > 0) {
+        const token = onSelectToken.mock.calls[0][0];
+        expect(token.text).toBe('ipsum');
+      }
+    });
+
+    it('calls onSelectToken with tokensToRemove for surrounded tokens', () => {
+      const onSelectToken = jest.fn();
+      const selectionUtils = require('../selection-utils');
+      selectionUtils.getCaretCharacterOffsetWithin = jest.fn().mockReturnValue(0);
+
+      global.window.getSelection.mockReturnValue({
+        toString: () => 'lorem ipsum',
+      });
+
+      const existingTokens = [{ start: 6, end: 11, text: 'ipsum' }];
+
+      const { container } = render(
+        <TokenText {...defaultProps} text="lorem ipsum dolor" tokens={existingTokens} onSelectToken={onSelectToken} />,
+      );
+
+      fireEvent.click(container.firstChild);
+
+      expect(onSelectToken).toHaveBeenCalled();
+    });
+
+    it('does not call onSelectToken when root is not available', () => {
+      const onSelectToken = jest.fn();
+
+      global.window.getSelection.mockReturnValue({
+        toString: () => 'ipsum',
+      });
+
+      const { container } = render(
+        <TokenText {...defaultProps} text="lorem ipsum" tokens={[]} onSelectToken={onSelectToken} />,
+      );
+
+      const instance = container.querySelector('div');
+      if (instance) {
+        fireEvent.click(instance);
+      }
+    });
+  });
+
+  describe('Text component edge cases', () => {
+    it('handles null text gracefully', () => {
+      const { container } = render(<Text text={null} predefined={false} />);
+      expect(container.querySelector('span')).toBeInTheDocument();
+    });
+
+    it('handles undefined text gracefully', () => {
+      const { container } = render(<Text text={undefined} predefined={false} />);
+      expect(container.querySelector('span')).toBeInTheDocument();
+    });
+
+    it('renders empty string text', () => {
+      const { container } = render(<Text text="" predefined={false} />);
+      expect(container.querySelector('span')).toBeInTheDocument();
+    });
+  });
 });

package/src/tokenizer/builder.js

@@ -1,6 +1,5 @@
-import compact from 'lodash/compact';
+import { clone, compact } from 'lodash-es';
 import English from '@pie-framework/parse-english';
-import clone from 'lodash/clone';
 
 const g = (str, node) => {
   if (node.children) {
@@ -41,7 +40,7 @@ export const paragraphs = (text) => {
 export const handleSentence = (child, acc) => {
   const sentenceChilds = [];
   // we parse the children of the sentence
-  let newAcc = child.children.reduce(function(acc, child) {
+  let newAcc = child.children.reduce(function (acc, child) {
     // if we find a whitespace node that's \n, we end the sentence
     if (child.type === 'WhiteSpaceNode' && child.value === '\n') {
       if (sentenceChilds.length) {

package/src/tokenizer/controls.jsx

@@ -50,20 +50,10 @@ export class Controls extends React.Component {
           <StyledButton onClick={onWords} size="small" color="primary" disabled={setCorrectMode}>
             Words
           </StyledButton>
-          <StyledButton
-            onClick={onSentences}
-            size="small"
-            color="primary"
-            disabled={setCorrectMode}
-          >
+          <StyledButton onClick={onSentences} size="small" color="primary" disabled={setCorrectMode}>
             Sentences
           </StyledButton>
-          <StyledButton
-            onClick={onParagraphs}
-            size="small"
-            color="primary"
-            disabled={setCorrectMode}
-          >
+          <StyledButton onClick={onParagraphs} size="small" color="primary" disabled={setCorrectMode}>
             Paragraphs
           </StyledButton>
           <StyledButton size="small" color="secondary" onClick={onClear} disabled={setCorrectMode}>
@@ -71,12 +61,7 @@ export class Controls extends React.Component {
           </StyledButton>
         </div>
         <FormControlLabel
-          control={
-            <StyledSwitch
-              checked={setCorrectMode}
-              onChange={onToggleCorrectMode}
-            />
-          }
+          control={<StyledSwitch checked={setCorrectMode} onChange={onToggleCorrectMode} />}
           label="Set correct answers"
         />
       </StyledControls>

package/src/tokenizer/index.jsx

@@ -2,10 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Controls from './controls';
 import { styled } from '@mui/material/styles';
-import { words, sentences, paragraphs } from './builder';
-import clone from 'lodash/clone';
-import isEqual from 'lodash/isEqual';
-import differenceWith from 'lodash/differenceWith';
+import { paragraphs, sentences, words } from './builder';
+import { clone, differenceWith, isEqual } from 'lodash-es';
 import { noSelect } from '@pie-lib/style-utils';
 import TokenText from './token-text';
 

package/src/tokenizer/token-text.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
-import { normalize, intersection } from './builder';
+import { intersection, normalize } from './builder';
 import debug from 'debug';
 import classNames from 'classnames';
 
 import { clearSelection, getCaretCharacterOffsetWithin } from './selection-utils';
 
-import { yellow, green } from '@mui/material/colors';
+import { green, yellow } from '@mui/material/colors';
 
 const log = debug('@pie-lib:text-select:token-text');
 

package/NEXT.CHANGELOG.json

@@ -1 +0,0 @@
-[]