@pie-element/drawing-response 10.3.4-next.3 → 11.0.0-beta.1

package/configure/src/__tests__/image-container.test.jsx

@@ -1,5 +1,6 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 
 import { ImageContainer } from '../image-container';
 
@@ -15,38 +16,69 @@ jest.mock('@pie-lib/config-ui', () => ({
   },
 }));
 
+const theme = createTheme();
+
 describe('ImageContainer', () => {
   const onUpdateImageDimension = jest.fn();
   const onImageUpload = jest.fn();
-  let wrapper;
 
   beforeEach(() => {
-    const props = {
-      classes: {},
+    jest.clearAllMocks();
+  });
+
+  const renderImageContainer = (props = {}) => {
+    const defaultProps = {
       imageUrl: 'url',
       onUpdateImageDimension,
       onImageUpload,
+      ...props,
     };
-    wrapper = () => shallow(<ImageContainer {...props} />);
-  });
+    return render(
+      <ThemeProvider theme={theme}>
+        <ImageContainer {...defaultProps} />
+      </ThemeProvider>
+    );
+  };
+
+  describe('rendering', () => {
+    it('renders "Replace Image" button when imageUrl is provided', () => {
+      renderImageContainer({ imageUrl: 'http://example.com/image.png' });
+      expect(screen.getByRole('button', { name: /replace image/i })).toBeInTheDocument();
+    });
+
+    it('renders "Upload Image" button when no imageUrl', () => {
+      renderImageContainer({ imageUrl: '' });
+      // Should have two "Upload Image" buttons - one in toolbar, one in center
+      const uploadButtons = screen.getAllByRole('button', { name: /upload image/i });
+      expect(uploadButtons.length).toBeGreaterThanOrEqual(1);
+    });
+
+    it('shows drag and drop instruction when no image', () => {
+      renderImageContainer({ imageUrl: '' });
+      expect(screen.getByText(/drag and drop or upload image from computer/i)).toBeInTheDocument();
+    });
 
-  describe('snapshot', () => {
-    it('renders', () => {
-      expect(wrapper()).toMatchSnapshot();
+    it('renders the image when imageUrl is provided', () => {
+      const { container } = renderImageContainer({ imageUrl: 'http://example.com/test.png' });
+      // Image has alt="" so it has role="presentation", query by tag instead
+      const image = container.querySelector('img');
+      expect(image).toBeInTheDocument();
+      expect(image).toHaveAttribute('src', 'http://example.com/test.png');
+    });
+
+    it('does not show drag and drop instruction when image exists', () => {
+      renderImageContainer({ imageUrl: 'http://example.com/image.png' });
+      expect(screen.queryByText(/drag and drop or upload image from computer/i)).not.toBeInTheDocument();
     });
   });
 
   describe('logic', () => {
-    let w;
     let oldFileReader;
+    let dummyFileReader;
 
     beforeAll(() => {
-      const dummyFileReader = {};
-
-      w = wrapper();
-      w.instance().resize = { addEventListener: jest.fn() };
-
       oldFileReader = window.FileReader;
+      dummyFileReader = {};
 
       dummyFileReader.readAsDataURL = (result) => {
         dummyFileReader.result = result;
@@ -55,22 +87,35 @@ describe('ImageContainer', () => {
       window.FileReader = jest.fn(() => dummyFileReader);
     });
 
+    afterAll(() => {
+      window.FileReader = oldFileReader;
+    });
+
     it('handleFileRead calls onImageUpload', () => {
-      w.instance().handleFileRead('file');
+      const testInstance = new ImageContainer({ imageUrl: 'url', onUpdateImageDimension, onImageUpload });
+      testInstance.resize = { addEventListener: jest.fn() };
+
+      testInstance.handleFileRead('file');
 
       expect(onImageUpload).toBeCalled();
       expect(onImageUpload).toHaveBeenCalledTimes(1);
     });
 
     it('handleUploadImage calls handleFileRead which calls onImageUpload', () => {
-      w.instance().handleUploadImage({ target: { files: ['file'] }, preventDefault: jest.fn() });
+      const testInstance = new ImageContainer({ imageUrl: 'url', onUpdateImageDimension, onImageUpload });
+      testInstance.resize = { addEventListener: jest.fn() };
+
+      testInstance.handleUploadImage({ target: { files: ['file'] }, preventDefault: jest.fn() });
 
       expect(onImageUpload).toBeCalled();
-      expect(onImageUpload).toHaveBeenCalledTimes(2);
+      expect(onImageUpload).toHaveBeenCalledTimes(1);
     });
 
     it('handleOnDrop calls handleFileRead which calls onImageUpload if item is file and image', () => {
-      w.instance().handleOnDrop({
+      const testInstance = new ImageContainer({ imageUrl: 'url', onUpdateImageDimension, onImageUpload });
+      testInstance.resize = { addEventListener: jest.fn() };
+
+      testInstance.handleOnDrop({
         preventDefault: jest.fn(),
         dataTransfer: {
           items: [
@@ -84,11 +129,14 @@ describe('ImageContainer', () => {
       });
 
       expect(onImageUpload).toBeCalledWith({ type: 'image', key: 'item' });
-      expect(onImageUpload).toHaveBeenCalledTimes(3);
+      expect(onImageUpload).toHaveBeenCalledTimes(1);
     });
 
     it("handleOnDrop calls handleFileRead which doesn't call onImageUpload if item is file but not image", () => {
-      w.instance().handleOnDrop({
+      const testInstance = new ImageContainer({ imageUrl: 'url', onUpdateImageDimension, onImageUpload });
+      testInstance.resize = { addEventListener: jest.fn() };
+
+      testInstance.handleOnDrop({
         preventDefault: jest.fn(),
         dataTransfer: {
           items: [
@@ -101,12 +149,16 @@ describe('ImageContainer', () => {
         },
       });
 
-      // same times number as in previous test, meaning that is was not called again
-      expect(onImageUpload).toHaveBeenCalledTimes(3);
+      // Should not be called since 'jpg' doesn't start with 'image'
+      expect(onImageUpload).not.toHaveBeenCalled();
     });
 
     it('handleOnDrop calls handleFileRead which calls onImageUpload if item is not file, but file is image', () => {
-      w.instance().handleOnDrop({
+      jest.clearAllMocks();
+      const testInstance = new ImageContainer({ imageUrl: 'url', onUpdateImageDimension, onImageUpload });
+      testInstance.resize = { addEventListener: jest.fn() };
+
+      testInstance.handleOnDrop({
         preventDefault: jest.fn(),
         dataTransfer: {
           items: [
@@ -120,11 +172,15 @@ describe('ImageContainer', () => {
       });
 
       expect(onImageUpload).toBeCalledWith({ type: 'image', key: 'file' });
-      expect(onImageUpload).toHaveBeenCalledTimes(4);
+      expect(onImageUpload).toHaveBeenCalledTimes(1);
     });
 
     it("handleOnDrop calls handleFileRead which doesn't call onImageUpload if item is not file and file is not image", () => {
-      w.instance().handleOnDrop({
+      jest.clearAllMocks();
+      const testInstance = new ImageContainer({ imageUrl: 'url', onUpdateImageDimension, onImageUpload });
+      testInstance.resize = { addEventListener: jest.fn() };
+
+      testInstance.handleOnDrop({
         preventDefault: jest.fn(),
         dataTransfer: {
           items: [
@@ -137,12 +193,15 @@ describe('ImageContainer', () => {
         },
       });
 
-      // same times number as in previous test, meaning that is was not called again
-      expect(onImageUpload).toHaveBeenCalledTimes(4);
+      // Should not be called since file type is 'something else', not 'image'
+      expect(onImageUpload).not.toHaveBeenCalled();
     });
 
     it('handleOnImageLoad calls onUpdateImageDimension', () => {
-      w.instance().handleOnImageLoad({
+      const testInstance = new ImageContainer({ imageUrl: 'url', onUpdateImageDimension, onImageUpload });
+      testInstance.resize = { addEventListener: jest.fn() };
+
+      testInstance.handleOnImageLoad({
         target: { offsetHeight: 50, offsetWidth: 50, naturalWidth: 50, naturalHeight: 50 },
       });
 
@@ -152,16 +211,21 @@ describe('ImageContainer', () => {
       });
     });
 
-    it('stopResizing calls onUpdateImageDimension', () => {
-      w.instance().handleOnImageLoad({
-        target: { offsetHeight: 50, offsetWidth: 50, naturalWidth: 50, naturalHeight: 50 },
-      });
+    it('stopResizing calls onUpdateImageDimension with state dimensions', () => {
+      jest.clearAllMocks();
+      const testInstance = new ImageContainer({ imageUrl: 'url', onUpdateImageDimension, onImageUpload });
+      testInstance.resize = { addEventListener: jest.fn() };
 
-      expect(onUpdateImageDimension).toHaveBeenCalledWith(w.instance().state.dimensions);
-    });
+      // Set state dimensions directly
+      testInstance.state = { ...testInstance.state, dimensions: { height: 75, width: 100 } };
 
-    afterAll(() => {
-      window.FileReader = oldFileReader;
+      // Call stopResizing which should use the dimensions from state
+      testInstance.stopResizing();
+
+      expect(onUpdateImageDimension).toHaveBeenCalledWith({
+        height: 75,
+        width: 100,
+      });
     });
   });
 });

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 jest.mock('@pie-lib/config-ui', () => ({
   choiceUtils: {
@@ -9,9 +9,20 @@ jest.mock('@pie-lib/config-ui', () => ({
     Panel: (props) => <div {...props} />,
     toggle: jest.fn(),
     radio: jest.fn(),
+    dropdown: jest.fn(),
   },
+  layout: {
+    ConfigLayout: (props) => <div>{props.children}</div>,
+  },
+  InputContainer: (props) => <div {...props}>{props.children}</div>,
 }));
 
+jest.mock('@pie-lib/editable-html-tip-tap', () => (props) => <div {...props} />);
+
+jest.mock('@mui/material/Typography', () => (props) => <div {...props}>{props.children}</div>);
+
+jest.mock('../image-container', () => (props) => <div {...props} />);
+
 const model = () => ({
   promptEnabled: true,
   prompt: 'This is the question prompt',
@@ -22,8 +33,13 @@ const model = () => ({
   },
 });
 
-jest.mock('react-dom', () => ({
-  render: jest.fn(),
+const mockRender = jest.fn();
+const mockUnmount = jest.fn();
+jest.mock('react-dom/client', () => ({
+  createRoot: jest.fn(() => ({
+    render: mockRender,
+    unmount: mockUnmount,
+  })),
 }));
 
 describe('index', () => {
@@ -34,17 +50,23 @@ describe('index', () => {
 
   beforeAll(() => {
     Def = require('../index').default;
+    // Register the custom element if not already registered
+    if (!customElements.get('drawing-response-configure')) {
+      customElements.define('drawing-response-configure', Def);
+    }
   });
 
   beforeEach(() => {
-    el = new Def();
+    // Create custom element using document.createElement to properly initialize
+    el = document.createElement('drawing-response-configure');
     el.model = initialModel;
     el.onModelChanged = onModelChanged;
   });
 
   describe('set model', () => {
     it('calls ReactDOM.render', () => {
-      expect(ReactDOM.render).toHaveBeenCalled();
+      expect(createRoot).toHaveBeenCalled();
+      expect(mockRender).toHaveBeenCalled();
     });
   });
 });

package/configure/src/__tests__/root.test.jsx

@@ -1,5 +1,6 @@
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 
 import { Root } from '../root';
 import defaults from '../defaults';
@@ -14,8 +15,15 @@ jest.mock('@pie-lib/config-ui', () => ({
   layout: {
     ConfigLayout: (props) => <div>{props.children}</div>,
   },
+  InputContainer: (props) => <div {...props}>{props.children}</div>,
 }));
 
+jest.mock('@pie-lib/editable-html-tip-tap', () => (props) => <div {...props} />);
+
+jest.mock('../image-container', () => (props) => <div data-testid="image-container" {...props} />);
+
+const theme = createTheme();
+
 const model = {
   prompt: 'Test Prompt',
   promptEnabled: true,
@@ -29,40 +37,46 @@ const model = {
 describe('Root', () => {
   const onConfigurationChanged = jest.fn();
   const onModelChanged = jest.fn();
-  let wrapper;
 
   beforeEach(() => {
-    const props = {
-      classes: {},
+    jest.clearAllMocks();
+  });
+
+  const renderRoot = (props = {}) => {
+    const defaultProps = {
       model,
       configuration: defaults.configuration,
       onConfigurationChanged,
       onModelChanged,
+      ...props,
     };
-    wrapper = () => shallow(<Root {...props} />);
-  });
-
-  describe('snapshot', () => {
-    it('renders', () => {
-      expect(wrapper()).toMatchSnapshot();
-    });
-  });
+    return render(
+      <ThemeProvider theme={theme}>
+        <Root {...defaultProps} />
+      </ThemeProvider>
+    );
+  };
 
   describe('logic', () => {
-    let w;
+    it('onPromptChanged calls onModelChanged', () => {
+      const { container } = renderRoot();
+      // Get the Root component instance by finding the component ref
+      const rootInstance = container.querySelector('[data-testid]')?.parentElement?.__reactFiber$?.return?.stateNode;
 
-    beforeAll(() => {
-      w = wrapper();
-    });
+      // Since we can't easily access instance methods in RTL, we'll verify the behavior
+      // by checking that the handler is correctly bound
+      expect(onModelChanged).not.toHaveBeenCalled();
 
-    it('onPromptChanged calls onModelChanged', () => {
-      w.instance().onPromptChanged('New Prompt');
+      // Create a new Root instance to test the method directly
+      const testInstance = new Root({ model, onModelChanged, configuration: defaults.configuration, onConfigurationChanged });
+      testInstance.onPromptChanged('New Prompt');
 
       expect(onModelChanged).toHaveBeenCalledWith(expect.objectContaining({ prompt: 'New Prompt' }));
     });
 
     it('onTeacherInstructionsChanged calls onModelChanged', () => {
-      w.instance().onTeacherInstructionsChanged('New Teacher Instructions');
+      const testInstance = new Root({ model, onModelChanged, configuration: defaults.configuration, onConfigurationChanged });
+      testInstance.onTeacherInstructionsChanged('New Teacher Instructions');
 
       expect(onModelChanged).toHaveBeenCalledWith(
         expect.objectContaining({ teacherInstructions: 'New Teacher Instructions' }),
@@ -70,7 +84,8 @@ describe('Root', () => {
     });
 
     it('onUpdateImageDimension calls onModelChanged', () => {
-      w.instance().onUpdateImageDimension({
+      const testInstance = new Root({ model, onModelChanged, configuration: defaults.configuration, onConfigurationChanged });
+      testInstance.onUpdateImageDimension({
         height: 200,
         width: 200,
       });
@@ -86,7 +101,8 @@ describe('Root', () => {
     });
 
     it('onImageUpload calls onModelChanged', () => {
-      w.instance().onImageUpload('url');
+      const testInstance = new Root({ model, onModelChanged, configuration: defaults.configuration, onConfigurationChanged });
+      testInstance.onImageUpload('url');
 
       expect(onModelChanged).toHaveBeenCalledWith(expect.objectContaining({ imageUrl: 'url' }));
     });

package/configure/src/button.jsx

@@ -1,43 +1,33 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
-import Button from '@material-ui/core/Button';
+import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
 
-const RawButton = ({ classes, className, label, onClick, disabled }) => (
-  <Button
+const StyledButton = styled(Button)({
+  marginLeft: 8,
+});
+
+const CustomButton = ({ label, onClick, disabled }) => (
+  <StyledButton
     onClick={onClick}
     disabled={disabled}
-    className={classNames(classes.addButton, className)}
     size="small"
-    variant="contained"
-    color="default"
-  >
+    variant="contained">
     {label}
-  </Button>
+  </StyledButton>
 );
 
-RawButton.propTypes = {
-  classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
+CustomButton.propTypes = {
   disabled: PropTypes.bool,
   label: PropTypes.string,
   onClick: PropTypes.func,
 };
 
-RawButton.defaultProps = {
+CustomButton.defaultProps = {
   className: '',
   disabled: false,
   label: 'Add',
-  onClick: () => {},
+  onClick: () => { },
 };
 
-const styles = () => ({
-  addButton: {
-    marginLeft: 8,
-  },
-});
-
-const ButtonStyled = withStyles(styles)(RawButton);
-
-export default ButtonStyled;
+export default CustomButton;