@pie-lib/config-ui 13.1.0-beta.7 → 13.1.0-beta.9

package/src/__tests__/two-choice.test.js

@@ -1,110 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { NChoice } from '../two-choice';
-
-describe('NChoice', () => {
-  const onChange = jest.fn();
-
-  beforeEach(() => {
-    onChange.mockClear();
-  });
-
-  it('renders radio buttons with vertical direction', () => {
-    render(
-      <NChoice
-        direction="vertical"
-        header="n-choice-vertical"
-        value={'left'}
-        onChange={onChange}
-        opts={[
-          { label: 'left', value: 'left' },
-          { label: 'center', value: 'center' },
-          { label: 'right', value: 'right' },
-        ]}
-      />,
-    );
-
-    expect(screen.getByText('n-choice-vertical')).toBeInTheDocument();
-    expect(screen.getByLabelText('left')).toBeInTheDocument();
-    expect(screen.getByLabelText('center')).toBeInTheDocument();
-    expect(screen.getByLabelText('right')).toBeInTheDocument();
-  });
-
-  it('shows selected value as checked', () => {
-    render(
-      <NChoice
-        direction="vertical"
-        header="Options"
-        value={'center'}
-        onChange={onChange}
-        opts={[
-          { label: 'left', value: 'left' },
-          { label: 'center', value: 'center' },
-          { label: 'right', value: 'right' },
-        ]}
-      />,
-    );
-
-    const centerRadio = screen.getByLabelText('center');
-    expect(centerRadio).toBeChecked();
-    expect(screen.getByLabelText('left')).not.toBeChecked();
-    expect(screen.getByLabelText('right')).not.toBeChecked();
-  });
-
-  it('calls onChange when user selects a different option', async () => {
-    const user = userEvent.setup();
-    render(
-      <NChoice
-        direction="vertical"
-        header="Options"
-        value={'left'}
-        onChange={onChange}
-        opts={[
-          { label: 'left', value: 'left' },
-          { label: 'center', value: 'center' },
-          { label: 'right', value: 'right' },
-        ]}
-      />,
-    );
-
-    await user.click(screen.getByLabelText('center'));
-
-    expect(onChange).toHaveBeenCalledWith('center');
-  });
-
-  it('renders with horizontal direction', () => {
-    const { container } = render(
-      <NChoice
-        direction="horizontal"
-        header="Options"
-        value={'left'}
-        onChange={onChange}
-        opts={[
-          { label: 'left', value: 'left' },
-          { label: 'right', value: 'right' },
-        ]}
-      />,
-    );
-
-    // Check that all options are rendered
-    expect(screen.getByLabelText('left')).toBeInTheDocument();
-    expect(screen.getByLabelText('right')).toBeInTheDocument();
-  });
-
-  it('handles string options by converting them', () => {
-    render(
-      <NChoice
-        direction="vertical"
-        header="Options"
-        value={'option1'}
-        onChange={onChange}
-        opts={['option1', 'option2', 'option3']}
-      />,
-    );
-
-    expect(screen.getByLabelText('option1')).toBeInTheDocument();
-    expect(screen.getByLabelText('option2')).toBeInTheDocument();
-    expect(screen.getByLabelText('option3')).toBeInTheDocument();
-  });
-});

package/src/__tests__/with-stateful-model.test.jsx

@@ -1,139 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import withStatefulModel from '../with-stateful-model';
-
-const MockComponent = ({ model, onChange }) => (
-  <div>
-    <div data-testid="model-value">{JSON.stringify(model)}</div>
-    <button onClick={() => onChange({ ...model, updated: true })}>Update Model</button>
-  </div>
-);
-
-describe('withStatefulModel', () => {
-  it('wraps component and passes model and onChange', () => {
-    const WrappedComponent = withStatefulModel(MockComponent);
-    const model = { name: 'test' };
-    const onChange = jest.fn();
-
-    render(<WrappedComponent model={model} onChange={onChange} />);
-
-    expect(screen.getByTestId('model-value')).toBeInTheDocument();
-    expect(screen.getByText(JSON.stringify(model))).toBeInTheDocument();
-  });
-
-  it('manages local state with initial model prop', () => {
-    const WrappedComponent = withStatefulModel(MockComponent);
-    const model = { id: 1, name: 'test' };
-
-    render(<WrappedComponent model={model} onChange={jest.fn()} />);
-
-    expect(screen.getByText(JSON.stringify(model))).toBeInTheDocument();
-  });
-
-  it('calls onChange with updated model when component calls onChange', async () => {
-    const user = userEvent.setup();
-    const WrappedComponent = withStatefulModel(MockComponent);
-    const model = { name: 'test' };
-    const onChange = jest.fn();
-
-    render(<WrappedComponent model={model} onChange={onChange} />);
-
-    const updateButton = screen.getByRole('button', { name: /Update Model/i });
-    await user.click(updateButton);
-
-    expect(onChange).toHaveBeenCalled();
-    expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ updated: true }));
-  });
-
-  it('updates internal state when model prop changes', () => {
-    const WrappedComponent = withStatefulModel(MockComponent);
-    const initialModel = { name: 'initial' };
-    const updatedModel = { name: 'updated' };
-    const onChange = jest.fn();
-
-    const { rerender } = render(<WrappedComponent model={initialModel} onChange={onChange} />);
-
-    expect(screen.getByText(JSON.stringify(initialModel))).toBeInTheDocument();
-
-    rerender(<WrappedComponent model={updatedModel} onChange={onChange} />);
-
-    expect(screen.getByText(JSON.stringify(updatedModel))).toBeInTheDocument();
-  });
-
-  it('maintains state across multiple onChange calls', async () => {
-    const user = userEvent.setup();
-    const WrappedComponent = withStatefulModel(MockComponent);
-    const model = { count: 0 };
-    const onChange = jest.fn();
-
-    render(<WrappedComponent model={model} onChange={onChange} />);
-
-    const updateButton = screen.getByRole('button', { name: /Update Model/i });
-
-    await user.click(updateButton);
-    expect(onChange).toHaveBeenCalledTimes(1);
-
-    await user.click(updateButton);
-    expect(onChange).toHaveBeenCalledTimes(2);
-  });
-
-  it('passes updated model state to onChange callback', async () => {
-    const user = userEvent.setup();
-    const WrappedComponent = withStatefulModel(MockComponent);
-    const model = { value: 'original' };
-    const onChange = jest.fn();
-
-    render(<WrappedComponent model={model} onChange={onChange} />);
-
-    const updateButton = screen.getByRole('button', { name: /Update Model/i });
-    await user.click(updateButton);
-
-    const lastCall = onChange.mock.calls[onChange.mock.calls.length - 1];
-    expect(lastCall[0]).toHaveProperty('updated', true);
-    expect(lastCall[0]).toHaveProperty('value', 'original');
-  });
-
-  it('handles empty model object', () => {
-    const WrappedComponent = withStatefulModel(MockComponent);
-    const model = {};
-    const onChange = jest.fn();
-
-    render(<WrappedComponent model={model} onChange={onChange} />);
-
-    expect(screen.getByText(JSON.stringify(model))).toBeInTheDocument();
-  });
-
-  it('handles model with nested properties', () => {
-    const WrappedComponent = withStatefulModel(MockComponent);
-    const model = { user: { name: 'John', age: 30 }, settings: { theme: 'dark' } };
-    const onChange = jest.fn();
-
-    render(<WrappedComponent model={model} onChange={onChange} />);
-
-    expect(screen.getByText(JSON.stringify(model))).toBeInTheDocument();
-  });
-
-  it('requires model and onChange props', () => {
-    const WrappedComponent = withStatefulModel(MockComponent);
-
-    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
-
-    render(<WrappedComponent model={{ test: 'data' }} onChange={jest.fn()} />);
-
-    expect(screen.getByTestId('model-value')).toBeInTheDocument();
-
-    consoleSpy.mockRestore();
-  });
-
-  it('renders wrapped component with correct props structure', () => {
-    const WrappedComponent = withStatefulModel(MockComponent);
-    const model = { id: 1 };
-    const onChange = jest.fn();
-
-    const { container } = render(<WrappedComponent model={model} onChange={onChange} />);
-
-    expect(container.querySelector('[data-testid="model-value"]')).toBeInTheDocument();
-    expect(container.querySelector('button')).toBeInTheDocument();
-  });
-});

package/src/choice-configuration/__tests__/feedback-menu.test.jsx

@@ -1,151 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import FeedbackMenu from '../feedback-menu';
-
-describe('feedback-menu', () => {
-  const onChange = jest.fn();
-
-  beforeEach(() => {
-    onChange.mockClear();
-  });
-
-  describe('rendering', () => {
-    it('renders feedback menu with default options', () => {
-      const { container } = render(<FeedbackMenu onChange={onChange} classes={{}} />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders menu with feedback type selector', () => {
-      render(<FeedbackMenu onChange={onChange} value={{ type: 'default' }} classes={{}} />);
-      // Menu button should be in the document
-      expect(screen.getByRole('button')).toBeInTheDocument();
-    });
-
-    it('renders with no feedback type', () => {
-      render(<FeedbackMenu onChange={onChange} value={{ type: 'none' }} classes={{}} />);
-      expect(screen.getByRole('button')).toBeInTheDocument();
-    });
-
-    it('renders with custom feedback type', () => {
-      render(<FeedbackMenu onChange={onChange} value={{ type: 'custom' }} classes={{}} />);
-      expect(screen.getByRole('button')).toBeInTheDocument();
-    });
-
-    it('renders feedback icon button', () => {
-      render(<FeedbackMenu onChange={onChange} classes={{}} />);
-      const button = screen.getByRole('button');
-      expect(button).toBeInTheDocument();
-    });
-  });
-
-  describe('user interactions', () => {
-    it('opens menu when button is clicked', async () => {
-      const user = userEvent.setup();
-      render(<FeedbackMenu onChange={onChange} value={{ type: 'default' }} classes={{}} />);
-
-      const button = screen.getByRole('button');
-      await user.click(button);
-
-      // Menu items should appear
-      expect(screen.getByText('No Feedback')).toBeInTheDocument();
-      expect(screen.getByText('Default')).toBeInTheDocument();
-      expect(screen.getByText('Custom')).toBeInTheDocument();
-    });
-
-    it('calls onChange with "none" when No Feedback is selected', async () => {
-      const user = userEvent.setup();
-      render(<FeedbackMenu onChange={onChange} value={{ type: 'default' }} classes={{}} />);
-
-      const button = screen.getByRole('button');
-      await user.click(button);
-
-      const noFeedbackOption = screen.getByText('No Feedback');
-      await user.click(noFeedbackOption);
-
-      expect(onChange).toHaveBeenCalledWith('none');
-    });
-
-    it('calls onChange with "default" when Default is selected', async () => {
-      const user = userEvent.setup();
-      render(<FeedbackMenu onChange={onChange} value={{ type: 'none' }} classes={{}} />);
-
-      const button = screen.getByRole('button');
-      await user.click(button);
-
-      const defaultOption = screen.getByText('Default');
-      await user.click(defaultOption);
-
-      expect(onChange).toHaveBeenCalledWith('default');
-    });
-
-    it('calls onChange with "custom" when Custom is selected', async () => {
-      const user = userEvent.setup();
-      render(<FeedbackMenu onChange={onChange} value={{ type: 'none' }} classes={{}} />);
-
-      const button = screen.getByRole('button');
-      await user.click(button);
-
-      const customOption = screen.getByText('Custom');
-      await user.click(customOption);
-
-      expect(onChange).toHaveBeenCalledWith('custom');
-    });
-
-    it('closes menu after selection', async () => {
-      const user = userEvent.setup();
-      render(<FeedbackMenu onChange={onChange} value={{ type: 'default' }} classes={{}} />);
-
-      const button = screen.getByRole('button');
-      await user.click(button);
-
-      expect(screen.getByText('No Feedback')).toBeInTheDocument();
-
-      const noFeedbackOption = screen.getByText('No Feedback');
-      await user.click(noFeedbackOption);
-
-      // Menu should close after selection
-      expect(onChange).toHaveBeenCalledWith('none');
-    });
-  });
-
-  describe('feedback type indicators', () => {
-    it('shows correct icon color for default feedback', () => {
-      const { container } = render(<FeedbackMenu onChange={onChange} value={{ type: 'default' }} classes={{}} />);
-      // Icon should be present with primary color
-      expect(container.querySelector('svg')).toBeInTheDocument();
-    });
-
-    it('shows correct icon color for custom feedback', () => {
-      const { container } = render(<FeedbackMenu onChange={onChange} value={{ type: 'custom' }} classes={{}} />);
-      // Icon should be present with primary color
-      expect(container.querySelector('svg')).toBeInTheDocument();
-    });
-
-    it('shows correct icon color for disabled feedback', () => {
-      const { container } = render(<FeedbackMenu onChange={onChange} value={{ type: 'none' }} classes={{}} />);
-      // Icon should be present with disabled color
-      expect(container.querySelector('svg')).toBeInTheDocument();
-    });
-  });
-
-  describe('aria labels', () => {
-    it('has aria-label on button for default feedback', () => {
-      render(<FeedbackMenu onChange={onChange} value={{ type: 'default' }} classes={{}} />);
-      const button = screen.getByRole('button', { name: /Default Feedback/i });
-      expect(button).toBeInTheDocument();
-    });
-
-    it('has aria-label on button for custom feedback', () => {
-      render(<FeedbackMenu onChange={onChange} value={{ type: 'custom' }} classes={{}} />);
-      const button = screen.getByRole('button', { name: /Custom Feedback/i });
-      expect(button).toBeInTheDocument();
-    });
-
-    it('has aria-label on button for disabled feedback', () => {
-      render(<FeedbackMenu onChange={onChange} value={{ type: 'none' }} classes={{}} />);
-      const button = screen.getByRole('button', { name: /Feedback disabled/i });
-      expect(button).toBeInTheDocument();
-    });
-  });
-});

package/src/choice-configuration/__tests__/index.test.jsx

@@ -1,234 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { ChoiceConfiguration } from '../index';
-
-jest.mock('@pie-lib/editable-html-tip-tap', () => ({
-  __esModule: true,
-  default: ({ markup, onChange, disabled }) => (
-    <textarea
-      data-testid="editable-html"
-      defaultValue={markup || ''}
-      onChange={(e) => onChange(e.target.value)}
-      disabled={disabled}
-    />
-  ),
-}));
-
-const defaultFeedback = {
-  correct: 'Correct',
-  incorrect: 'Incorrect',
-};
-
-const data = {
-  correct: true,
-  value: 'foo',
-  label: 'Foo',
-  feedback: {
-    type: 'custom',
-  },
-};
-
-const classes = {
-  choiceConfiguration: 'choiceConfiguration',
-};
-
-describe('ChoiceConfiguration', () => {
-  const onChange = jest.fn();
-
-  beforeEach(() => {
-    onChange.mockClear();
-  });
-
-  describe('rendering', () => {
-    it('renders correctly with default props', () => {
-      const { container } = render(
-        <ChoiceConfiguration classes={classes} defaultFeedback={defaultFeedback} data={data} onChange={onChange} />,
-      );
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders with checked state', () => {
-      render(
-        <ChoiceConfiguration
-          classes={classes}
-          defaultFeedback={defaultFeedback}
-          data={data}
-          onChange={onChange}
-          mode="checkbox"
-        />,
-      );
-      const checkbox = screen.getByRole('checkbox');
-      expect(checkbox).toBeChecked();
-    });
-
-    it('renders without feedback when allowFeedBack is false', () => {
-      render(
-        <ChoiceConfiguration
-          allowFeedBack={false}
-          classes={classes}
-          defaultFeedback={defaultFeedback}
-          data={data}
-          onChange={onChange}
-        />,
-      );
-      expect(screen.queryByRole('button', { name: /feedback/i })).not.toBeInTheDocument();
-    });
-
-    it('renders without delete button when allowDelete is false', () => {
-      render(
-        <ChoiceConfiguration
-          allowDelete={false}
-          classes={classes}
-          defaultFeedback={defaultFeedback}
-          data={data}
-          onChange={onChange}
-        />,
-      );
-      expect(screen.queryByRole('button', { name: /delete/i })).not.toBeInTheDocument();
-    });
-  });
-
-  describe('user interactions', () => {
-    it('calls onChange when label is edited', async () => {
-      const user = userEvent.setup();
-      render(
-        <ChoiceConfiguration classes={classes} defaultFeedback={defaultFeedback} data={data} onChange={onChange} />,
-      );
-
-      const editableHtmlElements = screen.getAllByTestId('editable-html');
-      const editableHtml = editableHtmlElements[0];
-      await user.clear(editableHtml);
-      await user.type(editableHtml, 'new label');
-
-      expect(onChange).toHaveBeenCalled();
-      expect(onChange).toHaveBeenCalledWith(
-        expect.objectContaining({
-          label: expect.stringContaining('new label'),
-        }),
-      );
-    });
-
-    it('calls onChange when checkbox is toggled', async () => {
-      const user = userEvent.setup();
-      render(
-        <ChoiceConfiguration
-          classes={classes}
-          defaultFeedback={defaultFeedback}
-          data={{ ...data, correct: false }}
-          onChange={onChange}
-          mode="checkbox"
-        />,
-      );
-
-      const checkbox = screen.getByRole('checkbox');
-      await user.click(checkbox);
-
-      expect(onChange).toHaveBeenCalledWith(
-        expect.objectContaining({
-          correct: true,
-        }),
-      );
-    });
-  });
-
-  describe('prop variations', () => {
-    it('renders with radio mode instead of checkbox', () => {
-      render(
-        <ChoiceConfiguration
-          classes={classes}
-          defaultFeedback={defaultFeedback}
-          data={data}
-          onChange={onChange}
-          mode="radio"
-        />,
-      );
-      const radio = screen.getByRole('radio');
-      expect(radio).toBeInTheDocument();
-    });
-
-    it('renders with disabled state', () => {
-      render(
-        <ChoiceConfiguration
-          classes={classes}
-          defaultFeedback={defaultFeedback}
-          data={data}
-          onChange={onChange}
-          disabled={true}
-          mode="checkbox"
-        />,
-      );
-      const checkbox = screen.getByRole('checkbox');
-      expect(checkbox).toBeInTheDocument();
-    });
-
-    it('renders with custom feedback type', () => {
-      render(
-        <ChoiceConfiguration
-          classes={classes}
-          defaultFeedback={defaultFeedback}
-          data={{ ...data, feedback: { type: 'custom' } }}
-          onChange={onChange}
-          mode="checkbox"
-        />,
-      );
-      const editableElements = screen.getAllByTestId('editable-html');
-      expect(editableElements.length).toBeGreaterThan(0);
-    });
-
-    it('renders with incorrect answer', () => {
-      render(
-        <ChoiceConfiguration
-          classes={classes}
-          defaultFeedback={defaultFeedback}
-          data={{ ...data, correct: false }}
-          onChange={onChange}
-          mode="checkbox"
-        />,
-      );
-      const checkbox = screen.getByRole('checkbox');
-      expect(checkbox).not.toBeChecked();
-    });
-  });
-
-  describe('edge cases', () => {
-    it('handles data with empty label', () => {
-      render(
-        <ChoiceConfiguration
-          classes={classes}
-          defaultFeedback={defaultFeedback}
-          data={{ ...data, label: '' }}
-          onChange={onChange}
-        />,
-      );
-      const editableElements = screen.getAllByTestId('editable-html');
-      expect(editableElements.length).toBeGreaterThan(0);
-    });
-
-    it('handles multiple feedback types', () => {
-      const { rerender } = render(
-        <ChoiceConfiguration
-          classes={classes}
-          defaultFeedback={defaultFeedback}
-          data={{ ...data, feedback: { type: 'default' } }}
-          onChange={onChange}
-        />,
-      );
-
-      let editableElements = screen.getAllByTestId('editable-html');
-      expect(editableElements.length).toBeGreaterThan(0);
-
-      rerender(
-        <ChoiceConfiguration
-          classes={classes}
-          defaultFeedback={defaultFeedback}
-          data={{ ...data, feedback: { type: 'custom' } }}
-          onChange={onChange}
-        />,
-      );
-
-      editableElements = screen.getAllByTestId('editable-html');
-      expect(editableElements.length).toBeGreaterThan(0);
-    });
-  });
-});