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

package/src/drawing-response/__tests__/drawing-main.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 import cloneDeep from 'lodash/cloneDeep';
 import FreePathDrawable from '../drawable-free-path';
 import LineDrawable from '../drawable-line';
@@ -9,6 +10,24 @@ import EraserDrawable from '../drawable-eraser';
 import DrawableText from '../drawable-text';
 import { DrawableMain } from '../drawable-main';
 
+jest.mock('react-konva', () => ({
+  Stage: (props) => <div data-testid="konva-stage" {...props}>{props.children}</div>,
+  Layer: (props) => <div data-testid="konva-layer" {...props}>{props.children}</div>,
+  Circle: (props) => <circle data-testid="konva-circle" {...props} />,
+  Line: (props) => <line data-testid="konva-line" {...props} />,
+  Arrow: (props) => <line data-testid="konva-arrow" {...props} />,
+  Rect: (props) => <rect data-testid="konva-rect" {...props} />,
+  Group: (props) => <g data-testid="konva-group" {...props}>{props.children}</g>,
+  Text: (props) => <text data-testid="konva-text" {...props}>{props.children}</text>,
+  Transformer: (props) => <g data-testid="konva-transformer" {...props} />,
+}));
+
+jest.mock('../drawable-transformer', () => {
+  return (props) => <g data-testid="drawable-transformer" {...props} />;
+});
+
+const theme = createTheme();
+
 const drawableClasses = {
   FreePathDrawable,
   LineDrawable,
@@ -20,27 +39,17 @@ const drawableClasses = {
 
 describe('DrawingResponse', () => {
   let element;
-  let wrapper;
-
-  const mkWrapper = (type, props, WrapperEl) => {
-    element = new drawableClasses[type](props);
-
-    let content = element.render(props);
-
-    if (WrapperEl) {
-      content = <WrapperEl>{content}</WrapperEl>;
-    }
-
-    return shallow(content);
-  };
 
   describe('DrawableMain', () => {
     let onSessionChange = jest.fn();
     const TextEntry = new DrawableText();
 
-    const wrapperMain = (extras, renderOpts) => {
-      const defaults = {
-        classes: {},
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    const renderDrawableMain = (props = {}) => {
+      const defaultProps = {
         disabled: false,
         className: 'className',
         onSessionChange,
@@ -53,25 +62,15 @@ describe('DrawingResponse', () => {
         session: {},
         toolActive: { type: 'Select', label: 'Select', icon: 'mdiCursorDefault' },
         TextEntry,
+        ...props,
       };
-      const props = { ...defaults, ...extras };
-      return shallow(<DrawableMain {...props} />, {
-        ...renderOpts,
-      });
+      return render(
+        <ThemeProvider theme={theme}>
+          <DrawableMain {...defaultProps} />
+        </ThemeProvider>
+      );
     };
 
-    describe('snapshot', () => {
-      it('renders', () => {
-        const w = wrapperMain();
-        expect(w).toMatchSnapshot();
-      });
-
-      it('renders disabled', () => {
-        const w = wrapperMain({ disabled: true });
-        expect(w).toMatchSnapshot();
-      });
-    });
-
     describe('logic', () => {
       const handleSessionChange = jest.fn();
       const forceUpdate = jest.fn();
@@ -87,26 +86,80 @@ describe('DrawingResponse', () => {
         createdAt: new Date(),
       };
 
-      it('handleUndo', () => {
-        const w = wrapperMain();
+      it('handleUndo removes the last drawable', () => {
+        const testInstance = new DrawableMain({
+          onSessionChange,
+          imageDimensions: {},
+          imageUrl: 'url',
+          drawableDimensions: { height: 350, width: 353 },
+          fillColor: 'white',
+          outlineColor: 'black',
+          paintColor: 'red',
+          session: {},
+          toolActive: { type: 'Select', label: 'Select', icon: 'mdiCursorDefault' },
+          TextEntry,
+        });
+
+        const drawable1 = new RectangleDrawable(props);
+        const drawable2 = new RectangleDrawable(props);
+
+        // Set initial state
+        testInstance.state = { drawables: [drawable1, drawable2], newDrawable: [], textIsSelected: false };
+
+        // Spy on setState
+        const setStateSpy = jest.spyOn(testInstance, 'setState');
 
-        w.setState({ drawables: [new RectangleDrawable(props), new RectangleDrawable(props)] });
-        w.instance().handleUndo();
+        // First undo - should remove drawable2
+        testInstance.handleUndo();
 
-        expect(w.state('drawables').length).toEqual(1);
+        expect(setStateSpy).toHaveBeenCalledWith(
+          { drawables: [drawable1] },
+          testInstance.handleSessionChange
+        );
 
-        w.instance().handleUndo();
+        // Update state to reflect what would have happened
+        testInstance.state.drawables = [drawable1];
+        setStateSpy.mockClear();
 
-        expect(w.state('drawables')).toEqual([]);
+        // Second undo - should remove drawable1
+        testInstance.handleUndo();
+
+        expect(setStateSpy).toHaveBeenCalledWith(
+          { drawables: [] },
+          testInstance.handleSessionChange
+        );
       });
 
-      it('handleClearAll', () => {
-        const w = wrapperMain();
+      it('handleClearAll removes all drawables', () => {
+        const testInstance = new DrawableMain({
+          onSessionChange,
+          imageDimensions: {},
+          imageUrl: 'url',
+          drawableDimensions: { height: 350, width: 353 },
+          fillColor: 'white',
+          outlineColor: 'black',
+          paintColor: 'red',
+          session: {},
+          toolActive: { type: 'Select', label: 'Select', icon: 'mdiCursorDefault' },
+          TextEntry,
+        });
+
+        const drawable1 = new RectangleDrawable(props);
+        const drawable2 = new RectangleDrawable(props);
+
+        // Set initial state
+        testInstance.state = { drawables: [drawable1, drawable2], newDrawable: [], textIsSelected: false };
+
+        // Spy on setState
+        const setStateSpy = jest.spyOn(testInstance, 'setState');
 
-        w.setState({ drawables: [new RectangleDrawable(props), new RectangleDrawable(props)] });
-        w.instance().handleClearAll();
+        testInstance.handleClearAll();
 
-        expect(w.state('drawables')).toEqual([]);
+        expect(setStateSpy).toHaveBeenCalledWith(
+          { drawables: [], updatedAt: expect.any(Date) },
+          testInstance.handleSessionChange
+        );
+        expect(TextEntry.all).toEqual([]);
       });
     });
   });
@@ -128,21 +181,10 @@ describe('DrawingResponse', () => {
         y: 200,
         createdAt: new Date(),
       };
-      wrapper = mkWrapper('CircleDrawable', props);
-    });
-
-    describe('snapshot', () => {
-      it('renders', () => {
-        expect(wrapper).toMatchSnapshot();
-      });
+      element = new CircleDrawable(props);
     });
 
     describe('logic', () => {
-      it('calls forceUpdate', () => {
-        wrapper.simulate('click');
-        expect(forceUpdate).toHaveBeenCalled();
-      });
-
       it('changes x and y', () => {
         element.registerMovement(400, 400);
 
@@ -200,13 +242,7 @@ describe('DrawingResponse', () => {
         starty: 200,
         createdAt: new Date(),
       };
-      wrapper = mkWrapper('EraserDrawable', props);
-    });
-
-    describe('snapshot', () => {
-      it('renders', () => {
-        expect(wrapper).toMatchSnapshot();
-      });
+      element = new EraserDrawable(props);
     });
 
     describe('logic', () => {
@@ -266,21 +302,10 @@ describe('DrawingResponse', () => {
         starty: 200,
         createdAt: new Date(),
       };
-      wrapper = mkWrapper('FreePathDrawable', props);
-    });
-
-    describe('snapshot', () => {
-      it('renders', () => {
-        expect(wrapper).toMatchSnapshot();
-      });
+      element = new FreePathDrawable(props);
     });
 
     describe('logic', () => {
-      it('calls forceUpdate', () => {
-        wrapper.simulate('click');
-        expect(forceUpdate).toHaveBeenCalled();
-      });
-
       it('changes points', () => {
         element.registerMovement(400, 400);
 
@@ -288,8 +313,6 @@ describe('DrawingResponse', () => {
       });
 
       it('changes session when needed', () => {
-        const spy = jest.spyOn(element, 'handleDragEnd');
-
         const event = {
           target: {
             getX: jest.fn().mockReturnValue(300),
@@ -340,21 +363,10 @@ describe('DrawingResponse', () => {
         y: 200,
         createdAt: new Date(),
       };
-      wrapper = mkWrapper('LineDrawable', props);
-    });
-
-    describe('snapshot', () => {
-      it('renders', () => {
-        expect(wrapper).toMatchSnapshot();
-      });
+      element = new LineDrawable(props);
     });
 
     describe('logic', () => {
-      it('calls forceUpdate', () => {
-        wrapper.simulate('click');
-        expect(forceUpdate).toHaveBeenCalled();
-      });
-
       it('changes x and y', () => {
         element.registerMovement(400, 400);
 
@@ -411,21 +423,10 @@ describe('DrawingResponse', () => {
         y: 300,
         createdAt: new Date(),
       };
-      wrapper = mkWrapper('RectangleDrawable', props);
-    });
-
-    describe('snapshot', () => {
-      it('renders', () => {
-        expect(wrapper).toMatchSnapshot();
-      });
+      element = new RectangleDrawable(props);
     });
 
     describe('logic', () => {
-      it('calls forceUpdate', () => {
-        wrapper.simulate('click');
-        expect(forceUpdate).toHaveBeenCalled();
-      });
-
       it('changes x and y', () => {
         element.registerMovement(400, 400);
 
@@ -510,37 +511,26 @@ describe('DrawingResponse', () => {
         y: 300,
         scale: 1,
       };
-      wrapper = mkWrapper('DrawableText', props, 'div');
-    });
-
-    describe('snapshot', () => {
-      it('renders', () => {
-        expect(wrapper).toMatchSnapshot();
-      });
-
-      it('renders textAreas', () => {
-        element = new drawableClasses['DrawableText'](props);
-
-        wrapper = shallow(<div>{element.renderTextareas()}</div>);
-
-        expect(wrapper).toMatchSnapshot();
-      });
+      element = new DrawableText(props);
     });
 
-    describe('snapshot when there is no value', () => {
+    describe('when there is no value', () => {
       beforeEach(() => {
         props.all.forEach((a) => {
           delete a.value;
         });
-        wrapper = mkWrapper('DrawableText', props, 'div');
+        element = new DrawableText(props);
       });
-      it('renders', () => {
-        expect(wrapper).toMatchSnapshot();
+      it('renders without crashing', () => {
+        const content = element.render(props);
+        const { container } = render(<div>{content}</div>);
+        expect(container).toBeInTheDocument();
       });
     });
 
     describe('logic', () => {
       it('shoud change the all property and call forceUpdate', () => {
+        element.setInitialProps(props);
         element.setAll([]);
 
         expect(element.all).toEqual([]);
@@ -549,6 +539,7 @@ describe('DrawingResponse', () => {
 
       describe('addNewTextEntry', () => {
         it('shoud add a new element and call the appropriate functions', () => {
+          element.setInitialProps(props);
           element.addNewTextEntry();
 
           expect(element.all.length).toEqual(2);
@@ -566,7 +557,6 @@ describe('DrawingResponse', () => {
             ]),
           );
 
-          expect(stage.on).toHaveBeenCalled();
           expect(handleSessionChange).toHaveBeenCalled();
         });
       });
@@ -589,6 +579,7 @@ describe('DrawingResponse', () => {
 
       describe('showOnltoggleTextareayTextNodes', () => {
         it('should change the item with the right id in the "all" array and call forceUpdate', () => {
+          element.setInitialProps(props);
           element.toggleTextarea('gcifqhhimf8k2d6g8hs', true);
 
           expect(element.all[0]).toEqual(
@@ -628,22 +619,25 @@ describe('DrawingResponse', () => {
       });
 
       describe('saveValue', () => {
-        it('should make the item with the right id default and call handleSessionChange', () => {
-          const textNode = {
-            text: jest.fn(),
-          };
+        it('should save the value and call handleSessionChange', () => {
+          element.setInitialProps(props);
           const textareaNode = {
             value: 'Foo bar',
           };
 
-          element.saveValue('gcifqhhimf8k2d6g8hs', textNode, textareaNode);
+          element.saveValue('gcifqhhimf8k2d6g8hs', textareaNode);
 
-          expect(textNode.text).toHaveBeenCalledWith('Foo bar');
+          expect(element.all[0].text).toEqual('Foo bar');
           expect(handleSessionChange).toHaveBeenCalled();
+          expect(forceUpdate).toHaveBeenCalled();
 
-          textareaNode.value = '';
+          // Reset mock
+          handleSessionChange.mockClear();
+          forceUpdate.mockClear();
 
-          element.saveValue('gcifqhhimf8k2d6g8hs', textNode, textareaNode);
+          // Test with empty value - should remove the item
+          textareaNode.value = '';
+          element.saveValue('gcifqhhimf8k2d6g8hs', textareaNode);
 
           expect(element.all).toEqual(
             expect.not.arrayContaining([
@@ -659,6 +653,7 @@ describe('DrawingResponse', () => {
 
       describe('handleMouseEvents', () => {
         it('should call the right functions on mouse down and up', () => {
+          element.setInitialProps(props);
           element.handleMouseDown();
           expect(toggleTextSelected).toHaveBeenCalledWith(true);
 
@@ -667,6 +662,7 @@ describe('DrawingResponse', () => {
         });
 
         it('should call the right functions onClick', () => {
+          element.setInitialProps(props);
           element.handleClick(null, 'gcifqhhimf8k2d6g8hs');
 
           expect(element.all).toEqual(
@@ -681,9 +677,15 @@ describe('DrawingResponse', () => {
         });
 
         it('should call the right functions onDblClick', () => {
+          element.setInitialProps(props);
+
+          // Call render to set up stage reference
+          element.render(props);
+
           const text = {
             id: 'gcifqhhimf8k2d6g8hs',
             isDefault: false,
+            text: 'foo bar',
           };
 
           const textNode = (element[`text_${text.id}`] = {
@@ -701,6 +703,7 @@ describe('DrawingResponse', () => {
             rotation: jest.fn().mockReturnValue(0),
             text: jest.fn().mockReturnValue('foo bar'),
             width: jest.fn().mockReturnValue(200),
+            getAbsolutePosition: jest.fn().mockReturnValue({ x: 200, y: 200 }),
           });
           const textareaNode = (element[`textarea_${text.id}`] = {
             focus: jest.fn(),
@@ -718,13 +721,12 @@ describe('DrawingResponse', () => {
           expect(toggleSpy).toHaveBeenCalledWith(text.id, true);
 
           expect(textareaNode.value).toEqual('foo bar');
-          expect(textareaNode.style).toEqual({
+          expect(textareaNode.style).toMatchObject({
             background: 'none',
             border: 'none',
             color: 'green',
             fontFamily: 'FooBarFamily',
             fontSize: '16px',
-            height: '208px',
             left: '200px',
             lineHeight: '40px',
             margin: '0px',
@@ -736,7 +738,6 @@ describe('DrawingResponse', () => {
             top: '200px',
             transformOrigin: 'left top',
             textAlign: 'center',
-            transform: 'translateY(-0px)',
             width: '200px',
           });
 
@@ -748,42 +749,60 @@ describe('DrawingResponse', () => {
           expect(textareaNode.addEventListener.mock.calls[1][0]).toEqual('blur');
 
           const event = {
-            keyCode: 13,
+            key: 'Enter',
             shiftKey: true,
           };
 
+          // Clear spy to ignore the initial toggleTextarea(id, true) call from handleDblClick
+          toggleSpy.mockClear();
+          saveValueSpy.mockClear();
+
           textareaNode.addEventListener.mock.calls[0][1](event);
 
-          // Make sure it's not called the second time
-          expect(toggleSpy).toHaveBeenCalledTimes(1);
+          // Make sure toggleTextarea and saveValue are not called when shift+enter is pressed
+          expect(toggleSpy).not.toHaveBeenCalled();
           expect(saveValueSpy).not.toHaveBeenCalled();
 
           event.shiftKey = false;
 
           textareaNode.addEventListener.mock.calls[0][1](event);
 
+          // Enter without shift calls saveValue, which in turn calls toggleTextarea
+          expect(saveValueSpy).toHaveBeenCalledWith('gcifqhhimf8k2d6g8hs', textareaNode);
           expect(toggleSpy).toHaveBeenCalledWith('gcifqhhimf8k2d6g8hs', false);
-          expect(saveValueSpy).toHaveBeenCalledWith('gcifqhhimf8k2d6g8hs', textNode, textareaNode);
 
-          event.keyCode = 27;
+          // Clear spy before testing Escape key
+          toggleSpy.mockClear();
+          saveValueSpy.mockClear();
+
+          event.key = 'Escape';
 
           textareaNode.addEventListener.mock.calls[0][1](event);
 
+          // Escape only calls toggleTextarea, not saveValue
           expect(toggleSpy).toHaveBeenCalledWith('gcifqhhimf8k2d6g8hs', false);
+          expect(saveValueSpy).not.toHaveBeenCalled();
 
           const showTextSpy = jest.spyOn(element, 'showOnlyTextNodes');
 
+          // Clear spies before testing stage click handler
+          toggleSpy.mockClear();
+          saveValueSpy.mockClear();
+
           event.target = stage;
 
           stage.on.mock.calls[0][1](event);
 
+          // Stage click handler only calls showOnlyTextNodes and forceUpdate, not saveValue
           expect(showTextSpy).toHaveBeenCalled();
-          expect(saveValueSpy).toHaveBeenCalledWith('gcifqhhimf8k2d6g8hs', textNode, textareaNode);
+          expect(forceUpdate).toHaveBeenCalled();
+          expect(saveValueSpy).not.toHaveBeenCalled();
         });
       });
 
       describe('handleTransform', () => {
         it('should change attrs when called', () => {
+          element.setInitialProps(props);
           const textNode = (element[`text_gcifqhhimf8k2d6g8hs`] = {
             setAttrs: jest.fn(),
             width: jest.fn().mockReturnValue(100),

package/src/drawing-response/button.jsx

@@ -1,56 +1,45 @@
 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, title }) => (
-  <Button
+const StyledButton = styled(Button)({
+  fontSize: '0.9em',
+  marginLeft: 8,
+  minWidth: 32,
+  height: 32,
+
+  '& span': {
+    '& svg': {
+      width: '1.3em !important',
+      height: '1.3em !important',
+    },
+  },
+});
+
+const CustomButton = ({ label, onClick, disabled, title }) => (
+  <StyledButton
     title={title}
     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.oneOfType([PropTypes.string, PropTypes.object]),
   onClick: PropTypes.func,
   title: PropTypes.string,
 };
 
-RawButton.defaultProps = {
-  className: '',
+CustomButton.defaultProps = {
   disabled: false,
   label: 'Add',
   onClick: () => {},
   title: '',
 };
 
-const styles = () => ({
-  addButton: {
-    fontSize: '0.9em',
-    marginLeft: 8,
-    minWidth: 32,
-    height: 32,
-
-    '& span': {
-      '& svg': {
-        width: '1.3em !important',
-        height: '1.3em !important',
-      },
-    },
-  },
-});
-
-const ButtonStyled = withStyles(styles)(RawButton);
-
-export default ButtonStyled;
+export default CustomButton;