@pie-lib/mask-markup 3.1.0-beta.7 → 3.1.0-beta.9

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

@@ -1,232 +0,0 @@
-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(),
-}));
-
-// Collect the CSS rules emotion/MUI injected into the document (jsdom uses insertRule).
-const collectEmotionRules = () => {
-  const rules = [];
-  for (const sheet of Array.from(document.styleSheets)) {
-    try {
-      for (const rule of Array.from(sheet.cssRules)) {
-        rules.push(rule.cssText);
-      }
-    } catch (e) {
-      /* inaccessible stylesheet */
-    }
-  }
-  return rules;
-};
-
-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('129px');
-      expect(chip.style.height).toBe('49px');
-
-      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('fraction math styling', () => {
-    it('enlarges numerator/denominator digits adjacent to a fraction to 120%', () => {
-      render(<Blank {...defaultProps} />);
-      const rule = collectEmotionRules().find((r) => r.includes('mjx-mn') && r.includes('mjx-mfrac'));
-      expect(rule).toBeDefined();
-      expect(rule).toMatch(/mjx-mn:has\(~\s*mjx-mfrac\)/);
-      expect(rule).toMatch(/mjx-mfrac\s*~\s*mjx-mn/);
-      expect(rule).toMatch(/font-size:\s*120%\s*!important/i);
-    });
-
-    it('keeps the existing mjx-frac 120% rule', () => {
-      render(<Blank {...defaultProps} />);
-      const rule = collectEmotionRules().find((r) => /(^|[^-])mjx-frac/.test(r) && !r.includes('mjx-mfrac'));
-      expect(rule).toBeDefined();
-      expect(rule).toMatch(/font-size:\s*120%\s*!important/i);
-    });
-  });
-
-  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

@@ -1,90 +0,0 @@
-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

@@ -1,129 +0,0 @@
-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

@@ -1,102 +0,0 @@
-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);
-    });
-  });
-});