@pie-lib/config-ui 11.30.2 → 11.30.3-next.155

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

@@ -1,24 +1,110 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { NChoice } from '../two-choice';
 
 describe('NChoice', () => {
-  it('renders n choice radio buttons vertical correctly', () => {
-    const tree = renderer
-      .create(
-        <NChoice
-          direction="vertical"
-          header="n-choice-vertical"
-          value={'left'}
-          onChange={jest.fn()}
-          opts={[
-            { label: 'left', value: 'left' },
-            { label: 'center', value: 'center' },
-            { label: 'right', value: 'right' },
-          ]}
-        />,
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
+  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

@@ -0,0 +1,145 @@
+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/alert-dialog.jsx

@@ -1,14 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@material-ui/core';
-import { withStyles } from '@material-ui/core/styles';
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@mui/material';
+import { styled } from '@mui/material/styles';
 
-const AlertDialog = ({ text, title, onClose, onConfirm, open, onCloseText, onConfirmText, classes }) => (
-  <Dialog open={open} onClose={onClose}>
-    {title && <DialogTitle className={classes.heading}>{title}</DialogTitle>}
+const StyledDialogTitle = styled(DialogTitle)(() => ({
+  fontSize: 'max(1.25rem, 18px)',
+}));
+
+const StyledDialogContentText = styled(DialogContentText)(() => ({
+  fontSize: 'max(1rem, 14px)',
+}));
+
+const AlertDialog = ({ text, title, onClose, onConfirm, open, onCloseText, onConfirmText, disableAutoFocus, disableEnforceFocus, disableRestoreFocus }) => (
+  <Dialog open={open} disableAutoFocus={disableAutoFocus} disableEnforceFocus={disableEnforceFocus} disableRestoreFocus={disableRestoreFocus} onClose={onClose}>
+    {title && <StyledDialogTitle>{title}</StyledDialogTitle>}
     {text && (
       <DialogContent>
-        <DialogContentText className={classes.subheading}>{text}</DialogContentText>
+        <StyledDialogContentText>{text}</StyledDialogContentText>
       </DialogContent>
     )}
     <DialogActions>
@@ -29,6 +37,9 @@ const AlertDialog = ({ text, title, onClose, onConfirm, open, onCloseText, onCon
 AlertDialog.defaultProps = {
   onCloseText: 'CANCEL',
   onConfirmText: 'OK',
+  disableAutoFocus: false,
+  disableEnforceFocus: false,
+  disableRestoreFocus: false,
 };
 
 AlertDialog.propTypes = {
@@ -39,18 +50,9 @@ AlertDialog.propTypes = {
   open: PropTypes.bool,
   onConfirmText: PropTypes.string,
   onCloseText: PropTypes.string,
-  classes: PropTypes.object,
+  disableAutoFocus: PropTypes.bool,
+  disableEnforceFocus: PropTypes.bool,
+  disableRestoreFocus: PropTypes.bool,
 };
 
-const styles = () => ({
-  heading: {
-    '& h2': {
-      fontSize: 'max(1.25rem, 18px)',
-    },
-  },
-  subheading: {
-    fontSize: 'max(1rem, 14px)',
-  },
-});
-
-export default withStyles(styles)(AlertDialog);
+export default AlertDialog;

package/src/checkbox.jsx

@@ -1,27 +1,50 @@
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import MuiCheckbox from '@material-ui/core/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import MuiCheckbox from '@mui/material/Checkbox';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
-import grey from '@material-ui/core/colors/grey';
+import { styled } from '@mui/material/styles';
 import { color } from '@pie-lib/render-ui';
+import { grey } from '@mui/material/colors';
 
-const Checkbox = ({ mini, checked, onChange, value, label, classes, error }) => (
-  <FormControlLabel
-    className={classNames(classes.mini)}
-    classes={{
-      label: classNames(classes.label, { [classes.miniLabel]: mini }),
-    }}
+const StyledFormControlLabel = styled(FormControlLabel)(({ theme, mini }) => ({
+  margin: 0,
+  marginLeft: 0,
+  padding: 0,
+  '& .MuiFormControlLabel-label': {
+    fontSize: theme.typography.fontSize - 1,
+    transform: 'translate(-4%, 2%)',
+    color: 'rgba(0,0,0,1.0)',
+    ...(mini && {
+      marginLeft: theme.spacing(1),
+      color: grey[700],
+      fontSize: theme.typography.fontSize - 3,
+    }),
+  },
+}));
+
+const StyledCheckbox = styled(MuiCheckbox)(({ theme, mini, error }) => ({
+  color: `${color.tertiary()} !important`,
+  ...(mini && {
+    margin: 0,
+    padding: 0,
+    width: theme.spacing(3),
+    height: theme.spacing(3),
+  }),
+  ...(error && {
+    color: `${theme.palette.error.main} !important`,
+  }),
+}));
+
+const Checkbox = ({ mini, checked, onChange, value, label, error }) => (
+  <StyledFormControlLabel
+    mini={mini}
     control={
-      <MuiCheckbox
+      <StyledCheckbox
         checked={checked}
         onChange={onChange}
         value={value}
-        className={classNames(classes.customColor, {
-          [classes.miniCheckbox]: mini,
-          [classes.error]: error,
-        })}
+        mini={mini}
+        error={error}
       />
     }
     label={label}
@@ -30,44 +53,17 @@ const Checkbox = ({ mini, checked, onChange, value, label, classes, error }) =>
 
 Checkbox.propTypes = {
   mini: PropTypes.bool,
-  classes: PropTypes.object.isRequired,
   checked: PropTypes.bool.isRequired,
   onChange: PropTypes.func.isRequired,
   value: PropTypes.string,
   label: PropTypes.string.isRequired,
+  error: PropTypes.bool,
 };
 
 Checkbox.defaultProps = {
   value: '',
   mini: false,
+  error: false,
 };
 
-export default withStyles((theme) => ({
-  label: {
-    fontSize: theme.typography.fontSize - 1,
-    transform: 'translate(-4%, 2%)',
-    color: 'rgba(0,0,0,1.0)',
-  },
-  miniCheckbox: {
-    margin: 0,
-    padding: 0,
-    width: theme.spacing.unit * 3,
-    height: theme.spacing.unit * 3,
-  },
-  miniLabel: {
-    marginLeft: theme.spacing.unit,
-    color: grey[700],
-    fontSize: theme.typography.fontSize - 3,
-  },
-  mini: {
-    margin: 0,
-    marginLeft: 0,
-    padding: 0,
-  },
-  error: {
-    color: theme.palette.error.main,
-  },
-  customColor: {
-    color: `${color.tertiary()} !important`,
-  },
-}))(Checkbox);
+export default Checkbox;

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

@@ -1,10 +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';
-import renderer from 'react-test-renderer';
 
 describe('feedback-menu', () => {
-  it('renders correctly', () => {
-    const tree = renderer.create(<FeedbackMenu onChange={jest.fn()} />).toJSON();
-    expect(tree).toMatchSnapshot();
+  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();
+    });
   });
 });