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

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

@@ -1,6 +1,6 @@
-import { TokenSelect } from '../index';
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
+import { TokenSelect } from '../index';
 
 describe('token-select', () => {
   const defaultProps = {
@@ -115,6 +115,268 @@ describe('token-select', () => {
       const { container } = render(<TokenSelect {...defaultProps} maxNoOfSelections={5} />);
       expect(container.firstChild).toBeInTheDocument();
     });
+
+    it('renders with highlightChoices enabled', () => {
+      const { container } = render(<TokenSelect {...defaultProps} highlightChoices={true} />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('strips HTML tags from token text', () => {
+      const tokens = [
+        {
+          text: '<b>bold text</b>',
+          start: 0,
+          end: 16,
+          predefined: true,
+          selectable: true,
+          selected: false,
+        },
+      ];
+      const { container } = render(<TokenSelect {...defaultProps} tokens={tokens} />);
+      expect(container.textContent).toContain('bold text');
+      expect(container.innerHTML).not.toContain('<b>');
+    });
+
+    it('renders with custom className', () => {
+      const { container } = render(<TokenSelect {...defaultProps} className="custom-token-select" />);
+      expect(container.firstChild).toHaveClass('custom-token-select');
+    });
+
+    it('renders tokens with correct and incorrect states', () => {
+      const tokens = [
+        {
+          text: 'correct',
+          start: 0,
+          end: 7,
+          predefined: true,
+          selectable: true,
+          selected: true,
+          correct: true,
+        },
+        {
+          text: 'incorrect',
+          start: 8,
+          end: 17,
+          predefined: true,
+          selectable: true,
+          selected: true,
+          correct: false,
+        },
+      ];
+      const { container } = render(<TokenSelect {...defaultProps} tokens={tokens} />);
+      expect(container.firstChild).toBeInTheDocument();
+      const checkIcon = container.querySelector('svg[data-testid="CheckIcon"]');
+      const closeIcon = container.querySelector('svg[data-testid="CloseIcon"]');
+      expect(checkIcon).toBeInTheDocument();
+      expect(closeIcon).toBeInTheDocument();
+    });
+
+    it('renders tokens with isMissing state', () => {
+      const tokens = [
+        {
+          text: 'missing answer',
+          start: 0,
+          end: 14,
+          predefined: true,
+          selectable: true,
+          selected: false,
+          isMissing: true,
+        },
+      ];
+      const { container } = render(<TokenSelect {...defaultProps} tokens={tokens} />);
+      expect(container.firstChild).toBeInTheDocument();
+      const closeIcon = container.querySelector('svg[data-testid="CloseIcon"]');
+      expect(closeIcon).toBeInTheDocument();
+    });
+  });
+
+  describe('token interaction', () => {
+    it('calls onChange when clicking a selectable token', () => {
+      const onChange = jest.fn();
+      const tokens = [
+        {
+          text: 'foo bar',
+          start: 0,
+          end: 7,
+          predefined: true,
+          selectable: true,
+          selected: false,
+        },
+      ];
+      const { container } = render(<TokenSelect {...defaultProps} tokens={tokens} onChange={onChange} />);
+
+      const tokenElement = container.querySelector('.tokenRootClass');
+      if (tokenElement) {
+        fireEvent.click(tokenElement);
+        expect(onChange).toHaveBeenCalled();
+        const updatedTokens = onChange.mock.calls[0][0];
+        expect(updatedTokens[0].selected).toBe(true);
+      }
+    });
+
+    it('handles maxNoOfSelections of 1 by deselecting previous token', () => {
+      const onChange = jest.fn();
+      const tokens = [
+        {
+          text: 'first',
+          start: 0,
+          end: 5,
+          predefined: true,
+          selectable: true,
+          selected: true,
+        },
+        {
+          text: 'second',
+          start: 6,
+          end: 12,
+          predefined: true,
+          selectable: true,
+          selected: false,
+        },
+      ];
+      const { container } = render(
+        <TokenSelect {...defaultProps} tokens={tokens} onChange={onChange} maxNoOfSelections={1} />,
+      );
+
+      const tokenElements = container.querySelectorAll('.tokenRootClass');
+      if (tokenElements.length > 1) {
+        fireEvent.click(tokenElements[1]);
+        expect(onChange).toHaveBeenCalled();
+        const updatedTokens = onChange.mock.calls[0][0];
+        expect(updatedTokens[0].selected).toBe(false);
+        expect(updatedTokens[1].selected).toBe(true);
+      }
+    });
+
+    it('prevents selecting more tokens when maxNoOfSelections is reached', () => {
+      const onChange = jest.fn();
+      const tokens = [
+        {
+          text: 'first',
+          start: 0,
+          end: 5,
+          predefined: true,
+          selectable: true,
+          selected: true,
+        },
+        {
+          text: 'second',
+          start: 6,
+          end: 12,
+          predefined: true,
+          selectable: true,
+          selected: true,
+        },
+        {
+          text: 'third',
+          start: 13,
+          end: 18,
+          predefined: true,
+          selectable: true,
+          selected: false,
+        },
+      ];
+      const { container } = render(
+        <TokenSelect {...defaultProps} tokens={tokens} onChange={onChange} maxNoOfSelections={2} />,
+      );
+
+      const tokenElements = container.querySelectorAll('.tokenRootClass');
+      if (tokenElements.length > 2) {
+        fireEvent.click(tokenElements[2]);
+        // onChange should not be called because max is reached
+        expect(onChange).not.toHaveBeenCalled();
+      }
+    });
+
+    it('does not toggle token when in animationsDisabled mode', () => {
+      const onChange = jest.fn();
+      const tokens = [
+        {
+          text: 'foo bar',
+          start: 0,
+          end: 7,
+          predefined: true,
+          selectable: true,
+          selected: false,
+        },
+      ];
+      const { container } = render(
+        <TokenSelect {...defaultProps} tokens={tokens} onChange={onChange} animationsDisabled={true} />,
+      );
+
+      const tokenElement = container.querySelector('.tokenRootClass');
+      if (tokenElement) {
+        fireEvent.click(tokenElement);
+        expect(onChange).not.toHaveBeenCalled();
+      }
+    });
+
+    it('does not toggle token when correct is defined', () => {
+      const onChange = jest.fn();
+      const tokens = [
+        {
+          text: 'foo bar',
+          start: 0,
+          end: 7,
+          predefined: true,
+          selectable: true,
+          selected: false,
+          correct: true,
+        },
+      ];
+      const { container } = render(<TokenSelect {...defaultProps} tokens={tokens} onChange={onChange} />);
+
+      const tokenElement = container.querySelector('.tokenRootClass');
+      if (tokenElement) {
+        fireEvent.click(tokenElement);
+        expect(onChange).not.toHaveBeenCalled();
+      }
+    });
+
+    it('does not toggle token when isMissing is true', () => {
+      const onChange = jest.fn();
+      const tokens = [
+        {
+          text: 'foo bar',
+          start: 0,
+          end: 7,
+          predefined: true,
+          selectable: true,
+          selected: false,
+          isMissing: true,
+        },
+      ];
+      const { container } = render(<TokenSelect {...defaultProps} tokens={tokens} onChange={onChange} />);
+
+      const tokenElement = container.querySelector('.tokenRootClass');
+      if (tokenElement) {
+        fireEvent.click(tokenElement);
+        expect(onChange).not.toHaveBeenCalled();
+      }
+    });
+
+    it('allows toggling token off when selected', () => {
+      const onChange = jest.fn();
+      const tokens = [
+        {
+          text: 'foo bar',
+          start: 0,
+          end: 7,
+          predefined: true,
+          selectable: true,
+          selected: true,
+        },
+      ];
+      const { container } = render(<TokenSelect {...defaultProps} tokens={tokens} onChange={onChange} />);
+
+      const tokenElement = container.querySelector('.tokenRootClass');
+      if (tokenElement) {
+        fireEvent.click(tokenElement);
+        expect(onChange).toHaveBeenCalled();
+        const updatedTokens = onChange.mock.calls[0][0];
+        expect(updatedTokens[0].selected).toBe(false);
+      }
+    });
   });
 
   // Note: Tests for internal methods (selectedCount, canSelectMore, toggleToken) are

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

@@ -1,6 +1,6 @@
-import { Token } from '../token';
 import React from 'react';
 import { render } from '@testing-library/react';
+import { Token } from '../token';
 
 describe('token', () => {
   const defaultProps = {
@@ -11,6 +11,10 @@ describe('token', () => {
     text: 'foo bar',
   };
 
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   describe('rendering', () => {
     it('renders with text', () => {
       const { container } = render(<Token {...defaultProps} />);
@@ -26,5 +30,207 @@ describe('token', () => {
       const { container } = render(<Token {...defaultProps} text="line1\nline2\nline3" />);
       expect(container.firstChild).toBeInTheDocument();
     });
+
+    it('renders with custom className', () => {
+      const { container } = render(<Token {...defaultProps} className="custom-class" />);
+      expect(container.querySelector('.custom-class')).toBeInTheDocument();
+    });
+
+    it('renders with data-indexkey attribute', () => {
+      const { container } = render(<Token {...defaultProps} index={5} />);
+      const token = container.querySelector('[data-indexkey]');
+      expect(token).toHaveAttribute('data-indexkey', '5');
+    });
+
+    it('renders empty text gracefully', () => {
+      const { container } = render(<Token {...defaultProps} text="" />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders null text gracefully', () => {
+      const { container } = render(<Token {...defaultProps} text={null} />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('selectable state', () => {
+    it('applies selectable class when selectable is true', () => {
+      const { container } = render(<Token {...defaultProps} selectable={true} />);
+      expect(container.querySelector('.selectable')).toBeInTheDocument();
+    });
+
+    it('does not apply selectable class when selectable is false', () => {
+      const { container } = render(<Token {...defaultProps} selectable={false} />);
+      expect(container.querySelector('.selectable')).not.toBeInTheDocument();
+    });
+
+    it('does not apply selectable class when disabled', () => {
+      const { container } = render(<Token {...defaultProps} selectable={true} disabled={true} />);
+      expect(container.querySelector('.selectable')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('selected state', () => {
+    it('applies selected class when selected is true', () => {
+      const { container } = render(<Token {...defaultProps} selected={true} />);
+      expect(container.querySelector('.selected')).toBeInTheDocument();
+    });
+
+    it('does not apply selected class when selected is false', () => {
+      const { container } = render(<Token {...defaultProps} selected={false} />);
+      expect(container.querySelector('.selected')).not.toBeInTheDocument();
+    });
+
+    it('applies disabledBlack class when selected and disabled without correct prop', () => {
+      const { container } = render(<Token {...defaultProps} selected={true} disabled={true} />);
+      expect(container.querySelector('.disabledBlack')).toBeInTheDocument();
+    });
+  });
+
+  describe('disabled state', () => {
+    it('applies disabled class when disabled is true', () => {
+      const { container } = render(<Token {...defaultProps} disabled={true} />);
+      expect(container.querySelector('.disabled')).toBeInTheDocument();
+    });
+
+    it('does not apply disabled class when disabled is false', () => {
+      const { container } = render(<Token {...defaultProps} disabled={false} />);
+      expect(container.querySelector('.disabled')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('highlight state', () => {
+    it('applies highlight class when highlight is true and selectable', () => {
+      const { container } = render(<Token {...defaultProps} highlight={true} selectable={true} />);
+      expect(container.querySelector('.highlight')).toBeInTheDocument();
+    });
+
+    it('does not apply highlight class when not selectable', () => {
+      const { container } = render(<Token {...defaultProps} highlight={true} selectable={false} />);
+      expect(container.querySelector('.highlight')).not.toBeInTheDocument();
+    });
+
+    it('does not apply highlight class when disabled', () => {
+      const { container } = render(<Token {...defaultProps} highlight={true} selectable={true} disabled={true} />);
+      expect(container.querySelector('.highlight')).not.toBeInTheDocument();
+    });
+
+    it('does not apply highlight class when selected', () => {
+      const { container } = render(<Token {...defaultProps} highlight={true} selectable={true} selected={true} />);
+      expect(container.querySelector('.highlight')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('correct/incorrect state', () => {
+    it('applies custom class when correct is true', () => {
+      const { container } = render(<Token {...defaultProps} correct={true} />);
+      expect(container.querySelector('.custom')).toBeInTheDocument();
+    });
+
+    it('applies custom class when correct is false', () => {
+      const { container } = render(<Token {...defaultProps} correct={false} />);
+      expect(container.querySelector('.custom')).toBeInTheDocument();
+    });
+
+    it('renders check icon when correct is true', () => {
+      const { container } = render(<Token {...defaultProps} correct={true} />);
+      const checkIcon = container.querySelector('svg[data-testid="CheckIcon"]');
+      expect(checkIcon).toBeInTheDocument();
+    });
+
+    it('renders close icon when correct is false', () => {
+      const { container } = render(<Token {...defaultProps} correct={false} />);
+      const closeIcon = container.querySelector('svg[data-testid="CloseIcon"]');
+      expect(closeIcon).toBeInTheDocument();
+    });
+
+    it('wraps token in correct container when correct is true', () => {
+      const { container } = render(<Token {...defaultProps} correct={true} />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('wraps token in incorrect container when correct is false', () => {
+      const { container } = render(<Token {...defaultProps} correct={false} />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('missing state', () => {
+    it('applies missing class when isMissing is true', () => {
+      const { container } = render(<Token {...defaultProps} isMissing={true} />);
+      expect(container.querySelector('.missing')).toBeInTheDocument();
+    });
+
+    it('renders close icon when isMissing is true', () => {
+      const { container } = render(<Token {...defaultProps} isMissing={true} />);
+      const closeIcon = container.querySelector('svg[data-testid="CloseIcon"]');
+      expect(closeIcon).toBeInTheDocument();
+    });
+
+    it('applies custom class when isMissing is true', () => {
+      const { container } = render(<Token {...defaultProps} isMissing={true} />);
+      expect(container.querySelector('.custom')).toBeInTheDocument();
+    });
+  });
+
+  describe('animations disabled state', () => {
+    it('applies print class when animationsDisabled is true', () => {
+      const { container } = render(<Token {...defaultProps} animationsDisabled={true} />);
+      expect(container.querySelector('.print')).toBeInTheDocument();
+    });
+
+    it('does not apply print class when animationsDisabled is false', () => {
+      const { container } = render(<Token {...defaultProps} animationsDisabled={false} />);
+      expect(container.querySelector('.print')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Wrapper component behavior', () => {
+    it('uses wrapper when correct is defined', () => {
+      const { container } = render(<Token {...defaultProps} correct={true} />);
+      const icon = container.querySelector('svg');
+      expect(icon).toBeInTheDocument();
+    });
+
+    it('uses wrapper when isMissing is true', () => {
+      const { container } = render(<Token {...defaultProps} isMissing={true} />);
+      const icon = container.querySelector('svg');
+      expect(icon).toBeInTheDocument();
+    });
+
+    it('does not use wrapper when correct is undefined and isMissing is false', () => {
+      const { container } = render(<Token {...defaultProps} />);
+      const icon = container.querySelector('svg');
+      expect(icon).not.toBeInTheDocument();
+    });
+  });
+
+  describe('className combinations', () => {
+    it('combines multiple state classes', () => {
+      const { container } = render(<Token {...defaultProps} selectable={true} selected={true} highlight={true} />);
+      expect(container.querySelector('.selected')).toBeInTheDocument();
+    });
+
+    it('applies correct precedence for disabled and selected', () => {
+      const { container } = render(<Token {...defaultProps} selectable={true} selected={true} disabled={true} />);
+      expect(container.querySelector('.disabledBlack')).toBeInTheDocument();
+    });
+
+    it('applies tokenRootClass to all tokens', () => {
+      const { container } = render(<Token {...defaultProps} />);
+      expect(container.querySelector('.tokenRootClass')).toBeInTheDocument();
+    });
+  });
+
+  describe('prop defaults', () => {
+    it('uses default value for selectable', () => {
+      const { container } = render(<Token text="test" />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('uses default value for text', () => {
+      const { container } = render(<Token />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
   });
 });

package/src/token-select/index.jsx

@@ -2,10 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Token, { TokenTypes } from './token';
 import { styled } from '@mui/material/styles';
-import clone from 'lodash/clone';
+import { clone, isEqual } from 'lodash-es';
 import debug from 'debug';
 import { noSelect } from '@pie-lib/style-utils';
-import isEqual from 'lodash/isEqual';
 
 const log = debug('@pie-lib:text-select:token-select');
 

package/src/token-select/token.jsx

@@ -209,11 +209,7 @@ export class Token extends React.Component {
     const TokenComponent = Component || StyledToken;
 
     return (
-      <Wrapper
-        useWrapper={correct !== undefined || isMissing}
-        Container={Container}
-        Icon={Icon}
-      >
+      <Wrapper useWrapper={correct !== undefined || isMissing} Container={Container} Icon={Icon}>
         <TokenComponent
           className={className}
           dangerouslySetInnerHTML={{ __html: (text || '').replace(/\n/g, '<br>') }}

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

@@ -1,4 +1,4 @@
-import { normalize, sentences, words, paragraphs, sort, intersection } from '../builder';
+import { intersection, normalize, paragraphs, sentences, sort, words } from '../builder';
 
 const token = (start, end, text) => ({ start, end, text });
 

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

@@ -1,6 +1,6 @@
 import { Controls } from '../controls';
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 
 describe('controls', () => {
   const defaultProps = {