@pie-lib/config-ui 11.30.3-next.2 → 11.30.4-next.0

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

@@ -1,13 +1,19 @@
 import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { ChoiceConfiguration } from '../index';
-import renderer from 'react-test-renderer';
-import { shallow } from 'enzyme';
-import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
 
-jest.mock('@pie-lib/editable-html', () => () => <div />);
-
-Enzyme.configure({ adapter: new Adapter() });
+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',
@@ -15,7 +21,7 @@ const defaultFeedback = {
 };
 
 const data = {
-  checked: true,
+  correct: true,
   value: 'foo',
   label: 'Foo',
   feedback: {
@@ -27,66 +33,202 @@ const classes = {
   choiceConfiguration: 'choiceConfiguration',
 };
 
-describe('index - snapshot', () => {
-  it('renders correctly with default props', () => {
-    const tree = renderer
-      .create(<ChoiceConfiguration classes={classes} defaultFeedback={defaultFeedback} data={data} />)
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('renders correctly when feedback is not allowed', () => {
-    const tree = renderer
-      .create(
-        <ChoiceConfiguration allowFeedBack={false} classes={classes} defaultFeedback={defaultFeedback} data={data} />,
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('renders correctly when delete is not allowed', () => {
-    const tree = renderer
-      .create(
-        <ChoiceConfiguration allowDelete={false} classes={classes} defaultFeedback={defaultFeedback} data={data} />,
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
+describe('ChoiceConfiguration', () => {
+  const onChange = jest.fn();
+
+  beforeEach(() => {
+    onChange.mockClear();
   });
-});
 
-describe('index - logic', () => {
-  let wrapper, instance, onChange;
+  describe('rendering', () => {
+    it('renders correctly with default props', () => {
+      const { container } = render(
+        <ChoiceConfiguration classes={classes} defaultFeedback={defaultFeedback} data={data} onChange={onChange} />,
+      );
+      expect(container.firstChild).toBeInTheDocument();
+    });
 
-  beforeEach(() => {
-    onChange = jest.fn();
+    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();
+    });
 
-    wrapper = shallow(
-      <ChoiceConfiguration classes={classes} defaultFeedback={defaultFeedback} data={data} onChange={onChange} />,
-    );
-    instance = wrapper.instance();
+    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('onCheckedChange', () => {
-    it('calls onChange', () => {
-      instance.onLabelChange('new label');
-      expect(onChange.mock.calls.length).toBe(1);
-      expect(onChange.mock.calls[0][0]).toMatchObject({ label: 'new label' });
+  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('onFeedbackTypeChange', () => {
-    it('calls onChange', () => {
-      instance.onFeedbackTypeChange('default');
-      expect(onChange.mock.calls[0][0]).toMatchObject({
-        feedback: { type: 'default' },
-      });
+  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('onFeedbackValueChange', () => {
-    it('calls onChange', () => {
-      instance.onFeedbackValueChange('new feedback');
-      expect(onChange.mock.calls[0][0]).toMatchObject({
-        feedback: { value: 'new feedback' },
-      });
+  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>
     );