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

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

@@ -1,6 +1,6 @@
-import { Tokenizer } from '../index';
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
+import { Tokenizer } from '../index';
 
 const tokens = () => [
   {
@@ -18,6 +18,10 @@ describe('tokenizer', () => {
     tokens: tokens(),
   };
 
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   describe('rendering', () => {
     it('renders with default props', () => {
       const { container } = render(<Tokenizer {...defaultProps} />);
@@ -37,11 +41,289 @@ describe('tokenizer', () => {
       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();
+    });
   });
 
-  // Note: Tests for internal methods (tokenIndex, tokenClick, selectToken, buildTokens,
-  // clear, toggleCorrectMode, setCorrect, removeToken) are implementation details and
-  // cannot be directly tested with RTL. The original tests used wrapper.instance() to
-  // test these methods, which tests implementation rather than user-facing behavior.
-  // The tokenization logic and user interactions should be tested through integration/e2e tests.
+  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();
+    });
+  });
 });

package/src/tokenizer/__tests__/selection-utils.test.js

@@ -3,6 +3,7 @@ import { clearSelection, getCaretCharacterOffsetWithin } from '../selection-util
 describe('selection-utils', () => {
   let selection;
   let range;
+
   beforeEach(() => {
     selection = {
       removeAllRanges: jest.fn(),
@@ -14,13 +15,131 @@ describe('selection-utils', () => {
   });
 
   describe('clearSelection', () => {
-    it('calls removeAllRanges', () => {
+    it('calls removeAllRanges and addRange with document.getSelection', () => {
+      const mockRange = {};
+      global.document.createRange = jest.fn().mockReturnValue(mockRange);
+
       clearSelection();
+
       expect(selection.removeAllRanges).toBeCalled();
+      expect(selection.addRange).toHaveBeenCalledWith(mockRange);
+    });
+
+    it('uses window.getSelection if document.getSelection is not available', () => {
+      global.document.getSelection = undefined;
+      const windowSelection = {
+        removeAllRanges: jest.fn(),
+        addRange: jest.fn(),
+      };
+      global.window.getSelection = jest.fn().mockReturnValue(windowSelection);
+      const mockRange = {};
+      global.document.createRange = jest.fn().mockReturnValue(mockRange);
+
+      clearSelection();
+
+      expect(windowSelection.removeAllRanges).toBeCalled();
+      expect(windowSelection.addRange).toHaveBeenCalledWith(mockRange);
+    });
+
+    it('uses window.getSelection().empty() if removeAllRanges is not available', () => {
+      global.document.getSelection = undefined;
+      const windowSelection = {
+        empty: jest.fn(),
+      };
+      global.window.getSelection = jest.fn().mockReturnValue(windowSelection);
+
+      clearSelection();
+
+      expect(windowSelection.empty).toBeCalled();
+    });
+
+    it('uses document.selection.empty() for IE8- compatibility', () => {
+      global.document.getSelection = undefined;
+      global.window.getSelection = undefined;
+      const docSelection = {
+        empty: jest.fn(),
+      };
+      global.document.selection = docSelection;
+
+      clearSelection();
+
+      expect(docSelection.empty).toBeCalled();
+
+      delete global.document.selection;
     });
   });
 
-  xdescribe('getCaretCharacterOffsetWithin', () => {
-    it('TODO', () => {});
+  describe('getCaretCharacterOffsetWithin', () => {
+    let element;
+    let mockRange;
+    let mockSelection;
+
+    beforeEach(() => {
+      element = {
+        ownerDocument: global.document,
+      };
+
+      mockRange = {
+        toString: jest.fn().mockReturnValue(''),
+        cloneRange: jest.fn(),
+        endContainer: {},
+        endOffset: 0,
+      };
+
+      const clonedRange = {
+        selectNodeContents: jest.fn(),
+        setEnd: jest.fn(),
+        toString: jest.fn().mockReturnValue('some text'),
+      };
+
+      mockRange.cloneRange.mockReturnValue(clonedRange);
+
+      mockSelection = {
+        rangeCount: 1,
+        getRangeAt: jest.fn().mockReturnValue(mockRange),
+      };
+
+      global.window.getSelection = jest.fn().mockReturnValue(mockSelection);
+    });
+
+    it('returns 0 when rangeCount is 0', () => {
+      mockSelection.rangeCount = 0;
+
+      const offset = getCaretCharacterOffsetWithin(element);
+
+      expect(offset).toBe(0);
+    });
+
+    it('returns caret offset for unselected text', () => {
+      mockRange.toString.mockReturnValue('');
+      const clonedRange = mockRange.cloneRange();
+      clonedRange.toString.mockReturnValue('hello');
+
+      const offset = getCaretCharacterOffsetWithin(element);
+
+      expect(offset).toBe(5);
+    });
+
+    it('returns caret offset when text is selected', () => {
+      mockRange.toString.mockReturnValue('world');
+      const clonedRange = mockRange.cloneRange();
+      clonedRange.toString.mockReturnValue('hello world');
+
+      const offset = getCaretCharacterOffsetWithin(element);
+
+      expect(offset).toBe(6); // 11 - 5 = 6
+    });
+
+    it('returns 0 when selection type is Control in IE', () => {
+      global.window.getSelection = undefined;
+      const docSelection = {
+        type: 'Control',
+      };
+      element.ownerDocument.selection = docSelection;
+
+      const offset = getCaretCharacterOffsetWithin(element);
+
+      expect(offset).toBe(0);
+    });
   });
 });