@pie-lib/config-ui 12.0.0-beta.5 → 12.0.0-next.0

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

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

@@ -0,0 +1,234 @@
+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', () => ({
+  __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);
+    });
+  });
+});

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

@@ -1,7 +1,7 @@
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import ActionFeedback from '@material-ui/icons/Feedback';
-import IconButton from '@material-ui/core/IconButton';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import ActionFeedback from '@mui/icons-material/Feedback';
+import IconButton from '@mui/material/IconButton';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -40,7 +40,7 @@ export class IconMenu extends React.Component {
     return (
       <div>
         <div onClick={this.handleClick}>{this.props.iconButtonElement}</div>
-        <Menu id="simple-menu" anchorEl={this.state.anchorEl} open={this.state.open} onClose={this.handleRequestClose}>
+        <Menu id="simple-menu" anchorEl={this.state.anchorEl} open={this.state.open} onClose={this.handleRequestClose} transitionDuration={{ enter: 225, exit: 195 }}>
           {keys.map((k, index) => (
             <MenuItem key={index} onClick={handleMenuClick(k)}>
               {opts[k]}
@@ -70,7 +70,7 @@ export default class FeedbackMenu extends React.Component {
     const tooltip = t === 'custom' ? 'Custom Feedback' : t === 'default' ? 'Default Feedback' : 'Feedback disabled';
 
     const icon = (
-      <IconButton className={classes.icon} aria-label={tooltip}>
+      <IconButton className={classes.icon} aria-label={tooltip} size="large">
         <ActionFeedback color={iconColor} />
       </IconButton>
     );