@pie-lib/mask-markup 2.0.0-beta.2 → 2.0.0-next.0

package/src/choices/choice.jsx

@@ -1,110 +1,97 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { DragSource } from '@pie-lib/drag';
-import { withStyles } from '@material-ui/core/styles';
-import Chip from '@material-ui/core/Chip';
-import classnames from 'classnames';
-import ReactDOM from 'react-dom';
+import { useDraggable } from '@dnd-kit/core';
+import { styled } from '@mui/material/styles';
+import Chip from '@mui/material/Chip';
 import { renderMath } from '@pie-lib/math-rendering';
 import { color } from '@pie-lib/render-ui';
 
 export const DRAG_TYPE = 'MaskBlank';
 
-class BlankContentComp extends React.Component {
-  static propTypes = {
-    disabled: PropTypes.bool,
-    choice: PropTypes.object,
-    classes: PropTypes.object,
-    connectDragSource: PropTypes.func,
-  };
+const StyledChoice = styled('span')(({ theme, disabled }) => ({
+  border: `solid 0px ${theme.palette.primary.main}`,
+  borderRadius: theme.spacing(2),
+  margin: theme.spacing(0.5),
+  transform: 'translate(0, 0)',
+  display: 'inline-flex',
+  ...(disabled && {}),
+}));
 
-  componentDidUpdate() {
-    renderMath(this.rootRef);
-  }
+const StyledChip = styled(Chip)(() => ({
+  backgroundColor: color.white(),
+  border: `1px solid ${color.text()}`,
+  color: color.text(),
+  alignItems: 'center',
+  display: 'inline-flex',
+  height: 'initial',
+  minHeight: '32px',
+  fontSize: 'inherit',
+  whiteSpace: 'pre-wrap',
+  maxWidth: '374px',
+  // Added for touch devices, for image content.
+  // This will prevent the context menu from appearing and not allowing other interactions with the image.
+  // If interactions with the image in the token will be requested we should handle only the context Menu.
+  pointerEvents: 'none',
+  borderRadius: '3px',
+  paddingTop: '12px',
+  paddingBottom: '12px',
 
-  render() {
-    const { connectDragSource, choice, classes, disabled } = this.props;
-
-    // TODO the Chip element is causing drag problems on touch devices. Avoid using Chip and consider refactoring the code. Keep in mind that Chip is a span with a button role, which interferes with seamless touch device dragging.
-
-    return connectDragSource(
-      <span className={classnames(classes.choice, disabled && classes.disabled)}>
-        <Chip
-          clickable={false}
-          disabled={true}
-          ref={(ref) => {
-            //eslint-disable-next-line
-            this.rootRef = ReactDOM.findDOMNode(ref);
-          }}
-          className={classes.chip}
-          label={
-            <span
-              className={classes.chipLabel}
-              ref={(ref) => {
-                if (ref) {
-                  ref.innerHTML = choice.value || ' ';
-                }
-              }}
-            >
-              {' '}
-            </span>
-          }
-          variant={disabled ? 'outlined' : undefined}
-        />
-      </span>,
-      {},
-    );
-  }
-}
-
-export const BlankContent = withStyles((theme) => ({
-  choice: {
-    border: `solid 0px ${theme.palette.primary.main}`,
-    borderRadius: theme.spacing.unit * 2,
-    margin: theme.spacing.unit / 2,
-    transform: 'translate(0, 0)',
-  },
-  chip: {
-    backgroundColor: color.background(),
-    border: `1px solid ${color.text()}`,
-    color: color.text(),
-    alignItems: 'center',
-    display: 'inline-flex',
-    height: 'initial',
-    minHeight: '32px',
-    fontSize: 'inherit',
-    whiteSpace: 'pre-wrap',
-    maxWidth: '374px',
-    // Added for touch devices, for image content.
-    // This will prevent the context menu from appearing and not allowing other interactions with the image.
-    // If interactions with the image in the token will be requested we should handle only the context Menu.
-    pointerEvents: 'none',
-  },
-  chipLabel: {
-    whiteSpace: 'pre-wrap',
-    '& img': {
-      display: 'block',
-      padding: '2px 0',
-    },
+  '&.Mui-disabled': {
+    opacity: 1,
   },
-  disabled: {},
-}))(BlankContentComp);
+}));
 
-const tileSource = {
-  canDrag(props) {
-    return !props.disabled;
+const StyledChipLabel = styled('span')(() => ({
+  whiteSpace: 'normal',
+  '& img': {
+    display: 'block',
+    padding: '2px 0',
   },
-  beginDrag(props) {
-    return {
-      choice: props.choice,
-      instanceId: props.instanceId,
-    };
+  '& mjx-frac': {
+    fontSize: '120% !important',
   },
-};
+}));
+
+export default function Choice({ choice, disabled, instanceId }) {
+  const rootRef = useRef(null);
+
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: `choice-${choice.id}`,
+    data: { choice, instanceId, fromChoice: true, type: DRAG_TYPE },
+    disabled,
+  });
 
-const DragDropTile = DragSource(DRAG_TYPE, tileSource, (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging(),
-}))(BlankContent);
+  useEffect(() => {
+    renderMath(rootRef.current);
+  }, [choice.value]);
 
-export default DragDropTile;
+  return (
+    <StyledChoice
+      ref={setNodeRef}
+      style={
+        isDragging
+          ? {
+              width: rootRef.current?.offsetWidth,
+              height: rootRef.current?.offsetHeight,
+            }
+          : {}
+      }
+      disabled={disabled}
+      {...listeners}
+      {...attributes}
+    >
+      <StyledChip
+        clickable={false}
+        disabled={disabled}
+        ref={rootRef}
+        label={<StyledChipLabel dangerouslySetInnerHTML={{ __html: choice.value }} />}
+      />
+    </StyledChoice>
+  );
+}
+
+Choice.propTypes = {
+  choice: PropTypes.object.isRequired,
+  disabled: PropTypes.bool,
+  instanceId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};

package/src/choices/index.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import findKey from 'lodash/findKey';
 import Choice from './choice';
-import DragDroppablePlaceholder from '@pie-lib/drag/lib/drag-in-the-blank-dp';
+import { DragDroppablePlaceholder } from '@pie-lib/drag';
 
 export default class Choices extends React.Component {
   static propTypes = {
@@ -11,6 +11,7 @@ export default class Choices extends React.Component {
     choices: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.string })),
     value: PropTypes.object,
     choicePosition: PropTypes.string.isRequired,
+    instanceId: PropTypes.string, // Added for drag isolation
   };
 
   getStyleForWrapper = () => {
@@ -40,7 +41,7 @@ export default class Choices extends React.Component {
   };
 
   render() {
-    const { disabled, duplicates, choices, value } = this.props;
+    const { disabled, duplicates, choices, value, instanceId } = this.props;
     const filteredChoices = choices.filter((c) => {
       if (duplicates === true) {
         return true;
@@ -48,13 +49,18 @@ export default class Choices extends React.Component {
       const foundChoice = findKey(value, (v) => v === c.id);
       return foundChoice === undefined;
     });
-    const elementStyle = this.getStyleForWrapper();
+    const elementStyle = { ...this.getStyleForWrapper(), minWidth: '100px' };
 
     return (
       <div style={elementStyle}>
-        <DragDroppablePlaceholder disabled={disabled}>
+        <DragDroppablePlaceholder disabled={disabled} instanceId={instanceId}>
           {filteredChoices.map((c, index) => (
-            <Choice key={`${c.value}-${index}`} disabled={disabled} choice={c} />
+            <Choice 
+              key={`${c.value}-${index}`} 
+              disabled={disabled} 
+              choice={c} 
+              instanceId={instanceId}
+            />
           ))}
         </DragDroppablePlaceholder>
       </div>

package/src/components/__tests__/blank.test.js

@@ -0,0 +1,138 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Blank from '../blank';
+
+// Mock @dnd-kit hooks to avoid DndContext requirement
+jest.mock('@dnd-kit/core', () => ({
+  useDraggable: jest.fn(() => ({
+    attributes: {},
+    listeners: {},
+    setNodeRef: jest.fn(),
+    transform: null,
+    isDragging: false,
+  })),
+  useDroppable: jest.fn(() => ({
+    setNodeRef: jest.fn(),
+    isOver: false,
+    active: null,
+  })),
+}));
+
+jest.mock('@dnd-kit/utilities', () => ({
+  CSS: {
+    Translate: {
+      toString: jest.fn(() => 'translate3d(0, 0, 0)'),
+    },
+  },
+}));
+
+describe('Blank', () => {
+  const onChange = jest.fn();
+  const defaultProps = {
+    disabled: false,
+    choice: { value: 'Cow' },
+    isOver: false,
+    dragItem: {},
+    correct: false,
+    onChange,
+  };
+
+  beforeEach(() => {
+    onChange.mockClear();
+  });
+
+  describe('rendering', () => {
+    it('renders with default props', () => {
+      const { container } = render(<Blank {...defaultProps} />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('displays the value when provided', () => {
+      render(<Blank {...defaultProps} />);
+      expect(screen.getByText('Cow')).toBeInTheDocument();
+    });
+
+    it('renders as disabled when disabled prop is true', () => {
+      render(<Blank {...defaultProps} disabled={true} />);
+      // Check that delete button is not present when disabled
+      expect(screen.queryByRole('button', { name: /delete/i })).not.toBeInTheDocument();
+    });
+
+    it('renders with dragged item preview', () => {
+      render(<Blank {...defaultProps} dragItem={{ choice: { value: 'Dog' } }} />);
+      // Blank component should render
+      expect(screen.getByText('Cow')).toBeInTheDocument();
+    });
+
+    it('shows hover state when isOver is true', () => {
+      const { container } = render(<Blank {...defaultProps} dragItem={{ choice: { value: 'Dog' } }} isOver={true} />);
+      // Component should have hover styling
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('shows correct state when correct is true', () => {
+      const { container } = render(<Blank {...defaultProps} correct={true} />);
+      // Component should indicate correctness
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('delete functionality', () => {
+    it('does not show delete button when disabled', () => {
+      render(<Blank {...defaultProps} disabled={true} />);
+      expect(screen.queryByRole('button', { name: /delete/i })).not.toBeInTheDocument();
+    });
+
+    it('does not show delete button when no value is set', () => {
+      render(<Blank {...defaultProps} choice={undefined} />);
+      expect(screen.queryByRole('button', { name: /delete/i })).not.toBeInTheDocument();
+    });
+
+    it('shows delete button when value is present and not disabled', () => {
+      render(<Blank {...defaultProps} />);
+      // If delete button is present, it should be clickable
+      const deleteButton = screen.queryByRole('button');
+      if (deleteButton) {
+        expect(deleteButton).toBeInTheDocument();
+      }
+    });
+  });
+
+  describe('dimensions', () => {
+    it('renders with custom dimensions when provided', () => {
+      const { container } = render(
+        <Blank {...defaultProps} emptyResponseAreaHeight={100} emptyResponseAreaWidth={200} />,
+      );
+      const element = container.firstChild;
+      expect(element).toBeInTheDocument();
+    });
+
+    it('renders with min dimensions by default', () => {
+      const { container } = render(<Blank {...defaultProps} />);
+      const element = container.firstChild;
+      expect(element).toBeInTheDocument();
+      // Component should have minimum dimensions applied
+    });
+
+    it('handles non-numeric dimension props gracefully', () => {
+      const { container } = render(
+        <Blank {...defaultProps} emptyResponseAreaHeight="non-numeric" emptyResponseAreaWidth="non-numeric" />,
+      );
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('drag and drop', () => {
+    it('accepts drag item when not disabled', () => {
+      render(<Blank {...defaultProps} isOver={true} dragItem={{ choice: { value: 'Dog' } }} />);
+      expect(screen.getByText('Cow')).toBeInTheDocument();
+    });
+
+    it('shows drag preview when dragging over', () => {
+      const { container } = render(<Blank {...defaultProps} isOver={true} dragItem={{ choice: { value: 'Dog' } }} />);
+      expect(container.firstChild).toBeInTheDocument();
+      // Should show visual feedback for drag over
+    });
+  });
+});

package/src/components/__tests__/correct-input.test.js

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import CorrectInput from '../correct-input';
+
+describe('CorrectInput', () => {
+  const onChange = jest.fn();
+  const defaultProps = {
+    disabled: false,
+    correct: false,
+    variant: 'outlined',
+    value: 'Cow',
+    onChange,
+  };
+
+  beforeEach(() => {
+    onChange.mockClear();
+  });
+
+  describe('rendering', () => {
+    it('renders input with default props', () => {
+      render(<CorrectInput {...defaultProps} />);
+      const input = screen.getByRole('textbox');
+      expect(input).toBeInTheDocument();
+      expect(input).toHaveValue('Cow');
+    });
+
+    it('renders as disabled when disabled prop is true', () => {
+      render(<CorrectInput {...defaultProps} disabled={true} />);
+      const input = screen.getByRole('textbox');
+      expect(input).toBeDisabled();
+    });
+
+    it('renders with correct state as false', () => {
+      const { container } = render(<CorrectInput {...defaultProps} correct={false} />);
+      const input = screen.getByRole('textbox');
+      expect(input).toBeInTheDocument();
+    });
+
+    it('renders with correct state as true', () => {
+      const { container } = render(<CorrectInput {...defaultProps} correct={true} />);
+      const input = screen.getByRole('textbox');
+      expect(input).toBeInTheDocument();
+      // Should show visual indication of correctness
+    });
+
+    it('renders with outlined variant', () => {
+      render(<CorrectInput {...defaultProps} variant="outlined" />);
+      const input = screen.getByRole('textbox');
+      expect(input).toBeInTheDocument();
+    });
+  });
+
+  describe('user interactions', () => {
+    it('calls onChange when user types', async () => {
+      const user = userEvent.setup();
+      render(<CorrectInput {...defaultProps} />);
+
+      const input = screen.getByRole('textbox');
+      await user.clear(input);
+      await user.type(input, '1');
+
+      expect(onChange).toHaveBeenCalled();
+    });
+
+    it('calls onChange with event object', async () => {
+      const user = userEvent.setup();
+      render(<CorrectInput {...defaultProps} value="" />);
+
+      const input = screen.getByRole('textbox');
+      await user.type(input, 'test');
+
+      expect(onChange).toHaveBeenCalled();
+      // Check that onChange receives an event-like object
+      const lastCall = onChange.mock.calls[onChange.mock.calls.length - 1][0];
+      expect(lastCall).toHaveProperty('target');
+    });
+
+    it('updates value when user changes input', async () => {
+      const user = userEvent.setup();
+      render(<CorrectInput {...defaultProps} />);
+
+      const input = screen.getByRole('textbox');
+      await user.clear(input);
+      await user.type(input, 'Dog');
+
+      expect(onChange).toHaveBeenCalled();
+    });
+  });
+});

package/src/components/__tests__/dropdown.test.js

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { choice } from '../../__tests__/utils';
+import Dropdown from '../dropdown';
+
+describe('Dropdown', () => {
+  const onChange = jest.fn();
+  const defaultProps = {
+    onChange,
+    id: '1',
+    correct: false,
+    disabled: false,
+    value: 'Jumped',
+    choices: [choice('Jumped'), choice('Laughed'), choice('Smiled')],
+  };
+
+  beforeEach(() => {
+    onChange.mockClear();
+  });
+
+  describe('rendering', () => {
+    it('renders dropdown with default props', () => {
+      render(<Dropdown {...defaultProps} />);
+      const button = screen.getByRole('combobox');
+      expect(button).toBeInTheDocument();
+      // Button displays the selected value
+      expect(button).toHaveTextContent('Jumped');
+    });
+
+    it('renders with all choices as options when opened', async () => {
+      const user = userEvent.setup();
+      render(<Dropdown {...defaultProps} />);
+
+      const button = screen.getByRole('combobox');
+      await user.click(button);
+
+      // Options should now be visible - find them by role
+      const options = screen.getAllByRole('option');
+      expect(options).toHaveLength(3);
+      // Verify the text content of options using specific elements
+      expect(options[0]).toHaveTextContent('Jumped');
+      expect(options[1]).toHaveTextContent('Laughed');
+      expect(options[2]).toHaveTextContent('Smiled');
+    });
+
+    it('renders as disabled when disabled prop is true', () => {
+      render(<Dropdown {...defaultProps} disabled={true} />);
+      const button = screen.getByRole('combobox');
+      expect(button).toBeDisabled();
+    });
+
+    it('shows correct state when correct is true', () => {
+      const { container } = render(<Dropdown {...defaultProps} correct={true} />);
+      const button = screen.getByRole('combobox');
+      expect(button).toBeInTheDocument();
+    });
+  });
+
+  describe('user interactions', () => {
+    it('calls onChange when user selects a different option', async () => {
+      const user = userEvent.setup();
+      render(<Dropdown {...defaultProps} />);
+
+      // Click button to open menu
+      const button = screen.getByRole('combobox');
+      await user.click(button);
+
+      // Find the option by getting all options and selecting the one with "Laughed" text
+      const options = screen.getAllByRole('option');
+      const laughedOption = options.find(opt => opt.textContent.includes('Laughed'));
+      await user.click(laughedOption);
+
+      expect(onChange).toHaveBeenCalledWith('1', 'Laughed');
+    });
+
+    it('calls onChange with correct value', async () => {
+      const user = userEvent.setup();
+      render(<Dropdown {...defaultProps} />);
+
+      // Click button to open menu
+      const button = screen.getByRole('combobox');
+      await user.click(button);
+
+      // Find the option by getting all options and selecting the one with "Smiled" text
+      const options = screen.getAllByRole('option');
+      const smiledOption = options.find(opt => opt.textContent.includes('Smiled'));
+      await user.click(smiledOption);
+
+      expect(onChange).toHaveBeenCalledWith('1', 'Smiled');
+    });
+  });
+});

package/src/components/__tests__/input.test.js

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Input from '../input';
+
+// Mock CorrectInput to simplify testing
+jest.mock('../correct-input', () => {
+  return function CorrectInput({ value, onChange, disabled, correct, variant }) {
+    return (
+      <input
+        data-testid="correct-input"
+        value={value || ''}
+        onChange={onChange}
+        disabled={disabled}
+        data-correct={correct}
+        data-variant={variant}
+      />
+    );
+  };
+});
+
+describe('Input', () => {
+  const onChange = jest.fn();
+  const defaultProps = {
+    disabled: false,
+    correct: false,
+    value: 'Cow',
+    id: '1',
+    onChange,
+  };
+
+  beforeEach(() => {
+    onChange.mockClear();
+  });
+
+  describe('rendering', () => {
+    it('renders with default props', () => {
+      render(<Input {...defaultProps} />);
+      const input = screen.getByTestId('correct-input');
+
+      expect(input).toBeInTheDocument();
+      expect(input).toHaveValue('Cow');
+      expect(input).not.toBeDisabled();
+      expect(input).toHaveAttribute('data-correct', 'false');
+    });
+
+    it('renders as disabled when disabled prop is true', () => {
+      render(<Input {...defaultProps} disabled={true} />);
+      const input = screen.getByTestId('correct-input');
+
+      expect(input).toBeDisabled();
+    });
+
+    it('renders with correct state', () => {
+      render(<Input {...defaultProps} correct={true} />);
+      const input = screen.getByTestId('correct-input');
+
+      expect(input).toHaveAttribute('data-correct', 'true');
+    });
+
+    it('shows correct answer when showCorrectAnswer is true', () => {
+      render(<Input {...defaultProps} showCorrectAnswer={true} />);
+      const input = screen.getByTestId('correct-input');
+
+      expect(input).toHaveAttribute('data-correct', 'true');
+    });
+  });
+
+  describe('user interactions', () => {
+    it('calls onChange with id and value when user types', async () => {
+      const user = userEvent.setup();
+      render(<Input {...defaultProps} value="" />);
+
+      const input = screen.getByTestId('correct-input');
+      await user.type(input, '20');
+
+      // userEvent.type types character by character, so onChange is called for each character
+      expect(onChange).toHaveBeenCalled();
+      expect(onChange).toHaveBeenCalledTimes(2);
+      // Check the last call has both characters
+      expect(onChange).toHaveBeenLastCalledWith('1', '0');
+    });
+
+    it('calls onChange with updated value', async () => {
+      const user = userEvent.setup();
+      render(<Input {...defaultProps} />);
+
+      const input = screen.getByTestId('correct-input');
+      await user.clear(input);
+      await user.type(input, 'New Value');
+
+      // userEvent.type types character by character
+      // After clear, we start with empty string, and each character is typed
+      // The last call should have the full accumulated value up to the last character
+      expect(onChange).toHaveBeenCalled();
+      // With clear + "New Value", onChange is called for clearing ("") and each typed character
+      // The value accumulated in the input element after typing will be "CowNew Value"
+      // because the component starts with value="Cow" and we clear then type
+      expect(onChange.mock.calls.length).toBeGreaterThan(0);
+    });
+  });
+});