@pie-lib/mask-markup 3.0.4-next.33 → 3.0.4-next.34

package/src/choices/index.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { findKey } from 'lodash-es';
+import Choice from './choice';
+import { DragDroppablePlaceholder } from '@pie-lib/drag';
+
+export default class Choices extends React.Component {
+  static propTypes = {
+    disabled: PropTypes.bool,
+    duplicates: PropTypes.bool,
+    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 = () => {
+    const { choicePosition } = this.props;
+
+    switch (choicePosition) {
+      case 'above':
+        return {
+          margin: '0 0 40px 0',
+        };
+
+      case 'below':
+        return {
+          margin: '40px 0 0 0',
+        };
+
+      case 'right':
+        return {
+          margin: '0 0 0 40px',
+        };
+
+      default:
+        return {
+          margin: '0 40px 0 0',
+        };
+    }
+  };
+
+  render() {
+    const { disabled, duplicates, choices, value, instanceId } = this.props;
+    const filteredChoices = choices.filter((c) => {
+      if (duplicates === true) {
+        return true;
+      }
+      const foundChoice = findKey(value, (v) => v === c.id);
+      return foundChoice === undefined;
+    });
+    const elementStyle = { ...this.getStyleForWrapper(), minWidth: '100px' };
+
+    return (
+      <div style={elementStyle}>
+        <DragDroppablePlaceholder disabled={disabled} instanceId={instanceId}>
+          {filteredChoices.map((c, index) => (
+            <Choice key={`${c.value}-${index}`} disabled={disabled} choice={c} instanceId={instanceId} />
+          ))}
+        </DragDroppablePlaceholder>
+      </div>
+    );
+  }
+}

package/src/componentize.js

@@ -0,0 +1,13 @@
+const REGEX = /\{\{(\d+)\}\}/g;
+
+export default (s, t) => {
+  if (!s) {
+    return { markup: '' };
+  }
+
+  const markup = s.replace(REGEX, (match, g) => {
+    return `<span data-component="${t}" data-id="${g}"></span>`;
+  });
+
+  return { markup };
+};

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

@@ -0,0 +1,199 @@
+import * as React from 'react';
+import { render, screen, act } from '@testing-library/react';
+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)'),
+    },
+  },
+}));
+
+jest.mock('@pie-lib/math-rendering', () => ({
+  renderMath: jest.fn(),
+}));
+
+describe('Blank', () => {
+  const { renderMath } = require('@pie-lib/math-rendering');
+  const onChange = jest.fn();
+  const defaultProps = {
+    disabled: false,
+    choice: { value: 'Cow' },
+    isOver: false,
+    dragItem: {},
+    correct: false,
+    onChange,
+  };
+
+  beforeEach(() => {
+    onChange.mockClear();
+    renderMath.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();
+    });
+
+    it('computes chip dimensions based on content when no emptyResponseArea size is provided', () => {
+      jest.useFakeTimers();
+      // Mock getBoundingClientRect to simulate measured content size
+      const rectSpy = jest
+        .spyOn(HTMLElement.prototype, 'getBoundingClientRect')
+        .mockReturnValue({ width: 100, height: 20, top: 0, left: 0, right: 100, bottom: 20 });
+
+      const { container } = render(
+        <Blank
+          {...defaultProps}
+          // Force measurement path that uses getMeasureNode / updateDimensions
+          emptyResponseAreaHeight={0}
+          emptyResponseAreaWidth={0}
+        />,
+      );
+
+      // Let the internal timeout in handleElements / updateDimensions run
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      const wrapper = container.firstChild; // StyledContent
+      const chip = wrapper && wrapper.firstChild; // StyledChip (rootRef)
+
+      // Width and height should include padding (24px) around measured content
+      expect(chip.style.width).toBe('124px');
+      expect(chip.style.height).toBe('44px');
+
+      rectSpy.mockRestore();
+      jest.useRealTimers();
+    });
+  });
+
+  describe('math rendering', () => {
+    it('calls renderMath on mount when choice has content', () => {
+      render(<Blank {...defaultProps} />);
+      expect(renderMath).toHaveBeenCalled();
+    });
+
+    it('calls renderMath again when correct changes', () => {
+      const { rerender } = render(<Blank {...defaultProps} correct={false} />);
+      const callsAfterMount = renderMath.mock.calls.length;
+      expect(callsAfterMount).toBeGreaterThan(0);
+
+      rerender(<Blank {...defaultProps} correct={true} />);
+      expect(renderMath.mock.calls.length).toBeGreaterThan(callsAfterMount);
+    });
+
+    it('does not call renderMath again when correct is unchanged', () => {
+      const { rerender } = render(<Blank {...defaultProps} correct={true} />);
+      const callsAfterMount = renderMath.mock.calls.length;
+
+      rerender(<Blank {...defaultProps} correct={true} />);
+      expect(renderMath.mock.calls.length).toBe(callsAfterMount);
+    });
+  });
+
+  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,129 @@
+import * as React from 'react';
+import { render, screen, waitFor } 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('focuses the selected option when the menu opens', async () => {
+      const user = userEvent.setup();
+      render(<Dropdown {...defaultProps} />);
+
+      const button = screen.getByRole('combobox');
+      await user.click(button);
+
+      await waitFor(() => {
+        expect(document.getElementById('dropdown-option-1-0')).toHaveFocus();
+      });
+      expect(button).toHaveAttribute('aria-activedescendant', 'dropdown-option-1-0');
+    });
+
+    it('focuses a non-first selected option when the menu opens', async () => {
+      const user = userEvent.setup();
+      render(<Dropdown {...defaultProps} value="Laughed" />);
+
+      const button = screen.getByRole('combobox');
+      await user.click(button);
+
+      await waitFor(() => {
+        expect(document.getElementById('dropdown-option-1-1')).toHaveFocus();
+      });
+      expect(button).toHaveAttribute('aria-activedescendant', 'dropdown-option-1-1');
+    });
+
+    it('does not highlight an option when no value is selected', async () => {
+      const user = userEvent.setup();
+      render(<Dropdown {...defaultProps} value={undefined} />);
+
+      const button = screen.getByRole('combobox');
+      await user.click(button);
+
+      expect(button).not.toHaveAttribute('aria-activedescendant');
+    });
+
+    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);
+    });
+  });
+});