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

package/src/__tests__/mask.test.js

@@ -1,381 +0,0 @@
-import * as React from 'react';
-import { render, screen } from '@testing-library/react';
-import Mask from '../mask';
-
-describe('Mask', () => {
-  // Don't mock renderChildren - let the component render naturally
-  const onChange = jest.fn();
-  const defaultProps = {
-    onChange,
-    layout: {
-      nodes: [
-        {
-          object: 'text',
-          leaves: [
-            {
-              text: 'Foo',
-            },
-          ],
-        },
-      ],
-    },
-    value: {},
-  };
-
-  beforeEach(() => {
-    onChange.mockClear();
-  });
-
-  describe('rendering', () => {
-    it('renders with default props', () => {
-      const { container } = render(<Mask {...defaultProps} />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders text content', () => {
-      render(<Mask {...defaultProps} />);
-      expect(screen.getByText('Foo')).toBeInTheDocument();
-    });
-
-    it('renders a paragraph element', () => {
-      const { container } = render(
-        <Mask
-          {...defaultProps}
-          layout={{
-            nodes: [
-              {
-                type: 'p',
-                nodes: [
-                  {
-                    object: 'text',
-                    leaves: [
-                      {
-                        text: 'Foo',
-                      },
-                    ],
-                  },
-                ],
-              },
-            ],
-          }}
-        />,
-      );
-
-      // Paragraph is rendered as a styled div, not a <p> tag
-      expect(screen.getByText('Foo')).toBeInTheDocument();
-    });
-
-    it('renders nested div and paragraph', () => {
-      const { container } = render(
-        <Mask
-          {...defaultProps}
-          layout={{
-            nodes: [
-              {
-                type: 'div',
-                data: {
-                  attributes: {},
-                },
-                nodes: [
-                  {
-                    type: 'p',
-                    data: {
-                      attributes: {},
-                    },
-                    nodes: [
-                      {
-                        object: 'text',
-                        leaves: [
-                          {
-                            text: 'Foo',
-                          },
-                        ],
-                      },
-                    ],
-                  },
-                ],
-              },
-            ],
-          }}
-        />,
-      );
-
-      expect(container.querySelector('div')).toBeInTheDocument();
-      // Paragraph is rendered as a styled div, not a <p> tag
-      expect(screen.getByText('Foo')).toBeInTheDocument();
-    });
-
-    it('renders text with italic marks', () => {
-      const { container } = render(
-        <Mask
-          {...defaultProps}
-          layout={{
-            nodes: [
-              {
-                leaves: [{ text: 'Foo ' }],
-                object: 'text',
-              },
-              {
-                leaves: [
-                  {
-                    marks: [
-                      {
-                        data: undefined,
-                        type: 'italic',
-                      },
-                    ],
-                    text: 'x',
-                  },
-                ],
-                object: 'text',
-              },
-              {
-                leaves: [{ text: ' bar' }],
-                object: 'text',
-              },
-            ],
-            object: 'block',
-            type: 'div',
-          }}
-        />,
-      );
-
-      // Text "Foo " is split with spaces, use regex
-      expect(screen.getByText(/Foo/)).toBeInTheDocument();
-      expect(screen.getByText('x')).toBeInTheDocument();
-      expect(screen.getByText(/bar/)).toBeInTheDocument();
-      // Check for italic/em element
-      const em = container.querySelector('em, i');
-      expect(em).toBeInTheDocument();
-      expect(em.textContent).toBe('x');
-    });
-
-    it('renders tbody without extra space', () => {
-      const da = () => ({ data: { attributes: {} } });
-      const { container } = render(
-        <Mask
-          {...defaultProps}
-          layout={{
-            nodes: [
-              {
-                type: 'table',
-                ...da(),
-                nodes: [
-                  {
-                    type: 'tbody',
-                    ...da(),
-                    nodes: [
-                      {
-                        object: 'text',
-                        leaves: [{ text: ' ' }],
-                      },
-                      { type: 'tr', ...da(), nodes: [] },
-                    ],
-                  },
-                ],
-              },
-            ],
-          }}
-        />,
-      );
-
-      expect(container.querySelector('table')).toBeInTheDocument();
-      expect(container.querySelector('tbody')).toBeInTheDocument();
-      expect(container.querySelector('tr')).toBeInTheDocument();
-    });
-  });
-
-  describe('spacer rendering for DnD components', () => {
-    it('adds spacers before and after DnD blank components', () => {
-      const mockRenderChildren = jest.fn((n) => {
-        if (n.data?.dataset?.component === 'blank') {
-          return <span data-testid="blank-component">Blank</span>;
-        }
-        return null;
-      });
-
-      const { container } = render(
-        <Mask
-          {...defaultProps}
-          renderChildren={mockRenderChildren}
-          layout={{
-            nodes: [
-              {
-                type: 'div',
-                data: {
-                  dataset: { component: 'blank' },
-                  attributes: {},
-                },
-                nodes: [],
-              },
-            ],
-          }}
-        />,
-      );
-
-      // Check that renderChildren was called and spacers are present
-      // Count all children in the container - should be: spacer + blank + spacer = 3 elements
-      const maskContainer = container.firstChild;
-      expect(maskContainer.childNodes.length).toBe(3);
-      expect(screen.getByTestId('blank-component')).toBeInTheDocument();
-    });
-
-    it('does not add spacers for non-DnD components', () => {
-      const mockRenderChildren = jest.fn((n) => {
-        return <span data-testid="regular-component">Regular</span>;
-      });
-
-      const { container } = render(
-        <Mask
-          {...defaultProps}
-          renderChildren={mockRenderChildren}
-          layout={{
-            nodes: [
-              {
-                type: 'div',
-                data: {
-                  attributes: {},
-                },
-                nodes: [],
-              },
-            ],
-          }}
-        />,
-      );
-
-      // Should not have spacers - only the regular component
-      const maskContainer = container.firstChild;
-      expect(maskContainer.childNodes.length).toBe(1);
-      expect(screen.getByTestId('regular-component')).toBeInTheDocument();
-    });
-
-    it('adds spacers regardless of parent node type', () => {
-      const mockRenderChildren = jest.fn((n) => {
-        if (n.data?.dataset?.component === 'blank') {
-          return <span data-testid="blank-in-td">Blank in TD</span>;
-        }
-        return null;
-      });
-
-      const { container } = render(
-        <Mask
-          {...defaultProps}
-          renderChildren={mockRenderChildren}
-          elementType="drag-in-the-blank"
-          layout={{
-            nodes: [
-              {
-                type: 'table',
-                data: { attributes: {} },
-                nodes: [
-                  {
-                    type: 'tbody',
-                    data: { attributes: {} },
-                    nodes: [
-                      {
-                        type: 'tr',
-                        data: { attributes: {} },
-                        nodes: [
-                          {
-                            type: 'td',
-                            data: { attributes: {} },
-                            nodes: [
-                              {
-                                type: 'div',
-                                data: {
-                                  dataset: { component: 'blank' },
-                                  attributes: {},
-                                },
-                                nodes: [],
-                              },
-                            ],
-                          },
-                        ],
-                      },
-                    ],
-                  },
-                ],
-              },
-            ],
-          }}
-        />,
-      );
-
-      // Should have spacers even inside td element
-      const td = container.querySelector('td');
-      expect(td.childNodes.length).toBe(3); // spacer + blank + spacer
-      expect(screen.getByTestId('blank-in-td')).toBeInTheDocument();
-    });
-
-    it('does not add spacers for text content', () => {
-      const { container } = render(
-        <Mask
-          {...defaultProps}
-          elementType="drag-in-the-blank"
-          layout={{
-            nodes: [
-              {
-                object: 'text',
-                leaves: [
-                  {
-                    text: 'Some text',
-                  },
-                ],
-              },
-            ],
-          }}
-        />,
-      );
-
-      // Should not have spacers for plain text - just text node
-      const maskContainer = container.firstChild;
-      expect(maskContainer.childNodes.length).toBe(1);
-      expect(maskContainer.childNodes[0].nodeType).toBe(Node.TEXT_NODE);
-      expect(screen.getByText('Some text')).toBeInTheDocument();
-    });
-
-    it('handles multiple DnD components with correct spacer placement', () => {
-      const mockRenderChildren = jest.fn((n) => {
-        if (n.data?.dataset?.component === 'blank') {
-          return <span data-testid={`blank-${n.data.testId}`}>Blank</span>;
-        }
-        return null;
-      });
-
-      const { container } = render(
-        <Mask
-          {...defaultProps}
-          renderChildren={mockRenderChildren}
-          layout={{
-            nodes: [
-              {
-                type: 'div',
-                data: {
-                  dataset: { component: 'blank' },
-                  attributes: {},
-                  testId: '1',
-                },
-                nodes: [],
-              },
-              {
-                type: 'div',
-                data: {
-                  dataset: { component: 'blank' },
-                  attributes: {},
-                  testId: '2',
-                },
-                nodes: [],
-              },
-            ],
-          }}
-        />,
-      );
-
-      // Should have 2 spacers per component = 4 spacers + 2 blanks = 6 total children
-      const maskContainer = container.firstChild;
-      expect(maskContainer.childNodes.length).toBe(6);
-      expect(screen.getByTestId('blank-1')).toBeInTheDocument();
-      expect(screen.getByTestId('blank-2')).toBeInTheDocument();
-    });
-  });
-});

package/src/__tests__/serialization.test.js

@@ -1,54 +0,0 @@
-import { deserialize } from '../serialization';
-
-describe('serialization', () => {
-  it('ignores comments', () => {
-    const out = deserialize(`<!-- hi -->`);
-    expect(out.document.nodes[0]).toEqual(expect.objectContaining({ type: 'span' }));
-  });
-
-  it('ignores comments', () => {
-    const out = deserialize(`<!-- hi --><div>foo</div>`);
-    expect(out.document.nodes[0]).toEqual(
-      expect.objectContaining({
-        type: 'div',
-        nodes: [
-          expect.objectContaining({
-            object: 'text',
-            leaves: [{ text: 'foo' }],
-          }),
-        ],
-      }),
-    );
-  });
-
-  it('deserializes an em', () => {
-    const out = deserialize(`<!-- hi --><div> <em>x</em> </div>`);
-    expect(out.document.nodes[0]).toEqual(
-      expect.objectContaining({
-        type: 'div',
-        nodes: [
-          expect.objectContaining({
-            object: 'text',
-          }),
-          expect.objectContaining({
-            leaves: [
-              {
-                marks: [
-                  {
-                    data: undefined,
-                    type: 'italic',
-                  },
-                ],
-                text: 'x',
-              },
-            ],
-            object: 'text',
-          }),
-          expect.objectContaining({
-            object: 'text',
-          }),
-        ],
-      }),
-    );
-  });
-});

package/src/__tests__/utils.js

@@ -1 +0,0 @@
-export const choice = (v, id) => ({ label: v, value: v, id });

package/src/__tests__/with-mask.test.js

@@ -1,76 +0,0 @@
-import * as React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { withMask } from '../with-mask';
-
-describe('WithMask', () => {
-  const onChange = jest.fn();
-  const defaultProps = {
-    markup: '<p>Foo bar {{0}} over the moon;</p>',
-    value: {
-      0: 'blank',
-    },
-    onChange,
-  };
-
-  const Masked = withMask('foo', (props) => (node) => {
-    const dataset = node.data ? node.data.dataset || {} : {};
-
-    if (dataset.component === 'foo') {
-      return <input type="text" data-testid="masked-input" defaultValue="Foo" onChange={props.onChange} />;
-    }
-  });
-
-  beforeEach(() => {
-    onChange.mockClear();
-  });
-
-  describe('rendering', () => {
-    it('renders with default props', () => {
-      const { container } = render(<Masked {...defaultProps} />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders markup content', () => {
-      render(<Masked {...defaultProps} />);
-      expect(screen.getByText(/Foo bar/)).toBeInTheDocument();
-    });
-
-    it('renders paragraph content', () => {
-      const { container } = render(<Masked {...defaultProps} />);
-      // Paragraph is rendered as a styled div, not a <p> tag
-      expect(container.firstChild).toBeInTheDocument();
-      expect(screen.getByText(/Foo bar/)).toBeInTheDocument();
-    });
-  });
-
-  describe('onChange handler', () => {
-    it('calls onChange when value changes', async () => {
-      const user = userEvent.setup();
-      render(<Masked {...defaultProps} />);
-
-      const input = screen.queryByTestId('masked-input');
-      if (input) {
-        await user.clear(input);
-        await user.type(input, 'ceva');
-
-        expect(onChange).toHaveBeenCalled();
-      }
-    });
-
-    it('passes event to onChange', async () => {
-      const user = userEvent.setup();
-      render(<Masked {...defaultProps} />);
-
-      const input = screen.queryByTestId('masked-input');
-      if (input) {
-        await user.clear(input);
-        await user.type(input, 'test');
-
-        expect(onChange).toHaveBeenCalled();
-        const lastCall = onChange.mock.calls[onChange.mock.calls.length - 1][0];
-        expect(lastCall).toHaveProperty('target');
-      }
-    });
-  });
-});

package/src/choices/__tests__/index.test.js

@@ -1,109 +0,0 @@
-import * as React from 'react';
-import { render, screen } from '@testing-library/react';
-import Choice from '../choice';
-import { choice } from '../../__tests__/utils';
-import Choices from '../index';
-
-// 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;
-};
-
-// Mock @dnd-kit hooks to avoid DndContext requirement
-jest.mock('@dnd-kit/core', () => ({
-  useDraggable: jest.fn(() => ({
-    attributes: {},
-    listeners: {},
-    setNodeRef: jest.fn(),
-    isDragging: false,
-  })),
-  useDroppable: jest.fn(() => ({
-    setNodeRef: jest.fn(),
-    isOver: false,
-    active: null,
-  })),
-}));
-
-describe('index', () => {
-  describe('Choices', () => {
-    const defaultProps = {
-      disabled: false,
-      choices: [choice('Jumped', '0'), choice('Laughed', '1'), choice('Spoon', '2')],
-      choicePosition: 'below',
-      instanceId: 'test-instance',
-    };
-
-    it('renders correctly with default props', () => {
-      const { container } = render(<Choices {...defaultProps} />);
-      expect(container.firstChild).toBeInTheDocument();
-      expect(screen.getByText('Jumped')).toBeInTheDocument();
-      expect(screen.getByText('Laughed')).toBeInTheDocument();
-      expect(screen.getByText('Spoon')).toBeInTheDocument();
-    });
-
-    it('renders correctly with disabled prop as true', () => {
-      const { container } = render(<Choices {...defaultProps} disabled={true} />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders without duplicates', () => {
-      const { container } = render(<Choices {...defaultProps} duplicates={undefined} value={{ 0: '0', 1: '1' }} />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders with duplicates', () => {
-      const { container } = render(<Choices {...defaultProps} duplicates={true} value={{ 0: '0', 1: '1' }} />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-  });
-
-  describe('Choice', () => {
-    const defaultProps = {
-      disabled: false,
-      choice: choice('Label', '1'),
-      instanceId: 'test-instance',
-    };
-
-    describe('render', () => {
-      it('renders correctly with default props', () => {
-        const { container } = render(<Choice {...defaultProps} />);
-        expect(container.firstChild).toBeInTheDocument();
-        expect(screen.getByText('Label')).toBeInTheDocument();
-      });
-
-      it('renders correctly with disabled prop as true', () => {
-        const { container } = render(<Choice {...defaultProps} disabled={true} />);
-        expect(container.firstChild).toBeInTheDocument();
-      });
-    });
-
-    describe('fraction math styling', () => {
-      it('enlarges numerator/denominator digits adjacent to a fraction to 120%', () => {
-        render(<Choice {...defaultProps} />);
-        // The new rule targets mjx-mn digits that sit next to an mjx-mfrac.
-        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(<Choice {...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);
-      });
-    });
-  });
-});