@reltio/components 1.4.2018 → 1.4.2019

package/cjs/InlineAttributesPager/components/InlineSimpleAttributesBlock/InlineSimpleAttributesBlock.test.js

@@ -10,38 +10,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var enzyme_1 = require("enzyme");
 var InlineSimpleAttributesBlock_1 = require("./InlineSimpleAttributesBlock");
-var reactDnd = __importStar(require("react-dnd"));
-jest.mock('react-dnd', function () { return (__assign(__assign({}, jest.requireActual('react-dnd')), { useDrop: jest.fn() })); });
+var core_1 = require("@dnd-kit/core");
+var react_2 = require("@testing-library/react");
+jest.mock('@dnd-kit/core', function () { return (__assign(__assign({}, jest.requireActual('@dnd-kit/core')), { useDndMonitor: jest.fn() })); });
 describe('InlineSimpleAttributesBlock tests', function () {
     var attributeType = {
         uri: 'configuration/entityTypes/HCP/attributes/Simple',
@@ -101,43 +78,52 @@ describe('InlineSimpleAttributesBlock tests', function () {
         onEdit: jest.fn(),
         onDelete: jest.fn()
     };
-    var props = __assign({ attributeValues: attributeValues, crosswalksMap: crosswalksMap, parentUri: 'entities/1', onAdd: jest.fn(), emptyTempAttributeUris: [] }, commonProps);
-    var useDropMock = jest.spyOn(reactDnd, 'useDrop').mockReturnValue([{}, function () { return null; }]);
+    var defaultProps = __assign({ attributeValues: attributeValues, crosswalksMap: crosswalksMap, parentUri: 'entities/1', onAdd: jest.fn(), emptyTempAttributeUris: [] }, commonProps);
+    var getDragEvent = function (draggingData, attributeType) { return ({
+        active: {
+            data: {
+                current: __assign({}, draggingData)
+            }
+        },
+        over: {
+            id: attributeType.uri
+        }
+    }); };
+    var setUp = function (props) {
+        if (props === void 0) { props = defaultProps; }
+        var Providers = function (_a) {
+            var children = _a.children;
+            return react_1.default.createElement(core_1.DndContext, null, children);
+        };
+        return (0, react_2.render)(react_1.default.createElement(InlineSimpleAttributesBlock_1.InlineSimpleAttributesBlock, __assign({}, props)), { wrapper: Providers });
+    };
     it('should render values for each crosswalk', function () {
-        var wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(InlineSimpleAttributesBlock_1.InlineSimpleAttributesBlock, __assign({}, props)));
-        var attributes = wrapper.find('InlineSimpleAttribute');
-        expect(attributes.length).toBe(3);
-        attributes.forEach(function (attribute) {
-            expect(attribute.props()).toMatchObject(commonProps);
-        });
-        expect(attributes.at(0).prop('attributeValue')).toBe(attributeValues[0]);
-        expect(attributes.at(0).prop('crosswalk')).toBe(crosswalks[0]);
-        expect(attributes.at(1).prop('attributeValue')).toBe(attributeValues[1]);
-        expect(attributes.at(1).prop('crosswalk')).toBe(crosswalks[0]);
-        expect(attributes.at(2).prop('attributeValue')).toBe(attributeValues[1]);
-        expect(attributes.at(2).prop('crosswalk')).toBe(crosswalks[1]);
+        setUp();
+        expect(react_2.screen.getByText(attributeValues[0].value)).toBeInTheDocument();
+        expect(react_2.screen.getAllByText(attributeValues[1].value)).toHaveLength(2);
     });
-    describe('dnd', function () {
-        afterEach(function () {
-            useDropMock.mockClear();
-        });
-        it('should accept Crosswalk drag items', function () {
-            (0, enzyme_1.shallow)(react_1.default.createElement(InlineSimpleAttributesBlock_1.InlineSimpleAttributesBlock, __assign({}, props)));
-            var accept = useDropMock.mock.calls[0][0].accept;
-            expect(accept).toEqual('Crosswalk');
+    describe('dnd behavior', function () {
+        var onDragOver, onDragEnd;
+        beforeAll(function () {
+            core_1.useDndMonitor.mockImplementation(function (listeners) {
+                onDragOver = listeners.onDragOver;
+                onDragEnd = listeners.onDragEnd;
+            });
         });
         it('should not allow drop relation crosswalk on entity attribute', function () {
-            (0, enzyme_1.shallow)(react_1.default.createElement(InlineSimpleAttributesBlock_1.InlineSimpleAttributesBlock, __assign({}, props)));
-            var canDrop = useDropMock.mock.calls[0][0].canDrop;
-            expect(canDrop({
-                type: 'Crosswalk',
-                crosswalk: {
-                    uri: 'entities/1/crosswalks/1',
-                    ownerType: 'relation',
-                    type: 'configuration/sources/FB',
-                    value: '123'
-                }
-            }, {})).toBe(false);
+            setUp();
+            (0, react_2.act)(function () {
+                onDragOver(getDragEvent({
+                    type: 'Crosswalk',
+                    crosswalk: {
+                        uri: 'entities/1/crosswalks/1',
+                        ownerType: 'relation',
+                        type: 'configuration/sources/FB',
+                        value: '123'
+                    }
+                }, defaultProps.attributeType));
+            });
+            expect(react_2.screen.queryByText('Drop here')).not.toBeInTheDocument();
         });
         it('should allow drop relation crosswalk on relation attribute', function () {
             var attributeType = {
@@ -160,26 +146,31 @@ describe('InlineSimpleAttributesBlock tests', function () {
                     ov: false
                 }
             ];
-            (0, enzyme_1.shallow)(react_1.default.createElement(InlineSimpleAttributesBlock_1.InlineSimpleAttributesBlock, __assign({}, props, { attributeType: attributeType, attributeValues: attributeValues })));
-            var canDrop = useDropMock.mock.calls[0][0].canDrop;
-            expect(canDrop({
-                type: 'Crosswalk',
-                crosswalk: {
-                    uri: 'relations/1/crosswalks/1',
-                    ownerType: 'entity',
-                    type: 'configuration/sources/FB',
-                    value: '123'
-                }
-            }, {})).toBe(true);
-            expect(canDrop({
-                type: 'Crosswalk',
-                crosswalk: {
-                    uri: 'entities/1/crosswalks/1',
-                    ownerType: 'relation',
-                    type: 'configuration/sources/FB',
-                    value: '123'
-                }
-            }, {})).toBe(true);
+            setUp(__assign(__assign({}, defaultProps), { attributeType: attributeType, attributeValues: attributeValues }));
+            (0, react_2.act)(function () {
+                onDragOver(getDragEvent({
+                    type: 'Crosswalk',
+                    crosswalk: {
+                        uri: 'relations/1/crosswalks/1',
+                        ownerType: 'entity',
+                        type: 'configuration/sources/FB',
+                        value: '123'
+                    }
+                }, attributeType));
+            });
+            expect(react_2.screen.getByText('Drop here')).toBeInTheDocument();
+            (0, react_2.act)(function () {
+                onDragOver(getDragEvent({
+                    type: 'Crosswalk',
+                    crosswalk: {
+                        uri: 'entities/1/crosswalks/1',
+                        ownerType: 'relation',
+                        type: 'configuration/sources/FB',
+                        value: '123'
+                    }
+                }, attributeType));
+            });
+            expect(react_2.screen.getByText('Drop here')).toBeInTheDocument();
         });
         it('should not allow drop entity crosswalk on relation attribute', function () {
             var attributeType = {
@@ -202,76 +193,70 @@ describe('InlineSimpleAttributesBlock tests', function () {
                     ov: false
                 }
             ];
-            (0, enzyme_1.shallow)(react_1.default.createElement(InlineSimpleAttributesBlock_1.InlineSimpleAttributesBlock, __assign({}, props, { attributeType: attributeType, attributeValues: attributeValues })));
-            var canDrop = useDropMock.mock.calls[0][0].canDrop;
-            expect(canDrop({
-                type: 'Crosswalk',
-                crosswalk: {
-                    uri: 'entities/1/crosswalks/1',
-                    ownerType: 'entity',
-                    type: 'configuration/sources/FB',
-                    value: '123'
-                }
-            }, {})).toBe(false);
+            setUp(__assign(__assign({}, defaultProps), { attributeType: attributeType, attributeValues: attributeValues }));
+            (0, react_2.act)(function () {
+                onDragOver(getDragEvent({
+                    type: 'Crosswalk',
+                    crosswalk: {
+                        uri: 'entities/1/crosswalks/1',
+                        ownerType: 'entity',
+                        type: 'configuration/sources/FB',
+                        value: '123'
+                    }
+                }, attributeType));
+            });
+            expect(react_2.screen.queryByText('Drop here')).not.toBeInTheDocument();
         });
         it('should not allow drop crosswalk on entity attribute without permission to create', function () {
             var readOnlyAttrType = __assign(__assign({}, attributeType), { access: ['READ'] });
-            (0, enzyme_1.shallow)(react_1.default.createElement(InlineSimpleAttributesBlock_1.InlineSimpleAttributesBlock, __assign({}, props, { attributeType: readOnlyAttrType })));
-            var canDrop = useDropMock.mock.calls[0][0].canDrop;
-            expect(canDrop({
-                type: 'Crosswalk',
-                crosswalk: {
-                    uri: 'entities/1/crosswalks/1',
-                    ownerType: 'entity',
-                    type: 'configuration/sources/FB',
-                    value: '123'
-                }
-            }, {})).toBe(false);
+            setUp(__assign(__assign({}, defaultProps), { attributeType: readOnlyAttrType, attributeValues: attributeValues }));
+            (0, react_2.act)(function () {
+                onDragOver(getDragEvent({
+                    type: 'Crosswalk',
+                    crosswalk: {
+                        uri: 'entities/1/crosswalks/1',
+                        ownerType: 'entity',
+                        type: 'configuration/sources/FB',
+                        value: '123'
+                    }
+                }, readOnlyAttrType));
+            });
+            expect(react_2.screen.queryByText('Drop here')).not.toBeInTheDocument();
         });
         it('should not allow drop crosswalk on attribute if parent attribute can not be edited', function () {
-            (0, enzyme_1.shallow)(react_1.default.createElement(InlineSimpleAttributesBlock_1.InlineSimpleAttributesBlock, __assign({}, props, { disableEdit: true })));
-            var canDrop = useDropMock.mock.calls[0][0].canDrop;
-            expect(canDrop({
-                type: 'Crosswalk',
-                crosswalk: {
-                    uri: 'entities/1/crosswalks/1',
-                    ownerType: 'entity',
-                    type: 'configuration/sources/FB',
-                    value: '123'
-                }
-            }, {})).toBe(false);
-        });
-        it('should render drop indicator if crosswalks is over and can be dropped', function () {
-            var wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(InlineSimpleAttributesBlock_1.InlineSimpleAttributesBlock, __assign({}, props)));
-            var _a = useDropMock.mock.calls[0][0], canDrop = _a.canDrop, collect = _a.collect;
-            expect(canDrop({
-                type: 'Crosswalk',
-                crosswalk: {
-                    uri: 'entities/1/crosswalks/1',
-                    ownerType: 'entity',
-                    type: 'configuration/sources/FB',
-                    value: '123'
-                }
-            }, {})).toBe(true);
-            expect(wrapper.find('.dropIndicator')).toHaveLength(0);
-            collect({ isOver: function () { return true; }, canDrop: function () { return true; } });
-            expect(wrapper.find('.dropIndicator')).toHaveLength(0);
+            setUp(__assign(__assign({}, defaultProps), { disableEdit: true }));
+            (0, react_2.act)(function () {
+                onDragOver(getDragEvent({
+                    type: 'Crosswalk',
+                    crosswalk: {
+                        uri: 'entities/1/crosswalks/1',
+                        ownerType: 'entity',
+                        type: 'configuration/sources/FB',
+                        value: '123'
+                    }
+                }, defaultProps.attributeType));
+            });
+            expect(react_2.screen.queryByText('Drop here')).not.toBeInTheDocument();
         });
         it('should call props.onAdd on crosswalk drop', function () {
-            (0, enzyme_1.shallow)(react_1.default.createElement(InlineSimpleAttributesBlock_1.InlineSimpleAttributesBlock, __assign({}, props)));
-            var drop = useDropMock.mock.calls[0][0].drop;
+            setUp();
             var crosswalk = {
                 uri: 'entities/1/crosswalks/1',
                 ownerType: 'entity',
                 type: 'configuration/sources/FB',
                 value: '123'
             };
-            drop({ crosswalk: crosswalk, type: 'Crosswalk' }, {});
-            expect(props.onAdd).toHaveBeenCalledWith({
-                parentUri: props.parentUri,
-                attributeType: props.attributeType,
+            (0, react_2.act)(function () {
+                onDragEnd(getDragEvent({
+                    type: 'Crosswalk',
+                    crosswalk: crosswalk
+                }, defaultProps.attributeType));
+            });
+            expect(defaultProps.onAdd).toHaveBeenCalledWith({
+                parentUri: defaultProps.parentUri,
+                attributeType: defaultProps.attributeType,
                 crosswalk: crosswalk,
-                index: props.attributeValues.length
+                index: defaultProps.attributeValues.length
             });
         });
     });

package/cjs/InlineSimpleAttribute/InlineSimpleAttribute.js

@@ -65,7 +65,7 @@ var InlineSimpleAttribute = function (_a) {
     var showIgnore = !isTemporary && ((!isReadingMode && hasBasicPermission) || attributeValue.ignored);
     var showMaskingSwitcher = (isUnmaskingNeeded && !isTemporary && !isReadingMode) || isUnmasking;
     (0, react_1.useEffect)(function () {
-        if (isTemporary && !isEmpty) {
+        if (isTemporary && isEmpty) {
             setEditingMode();
         }
     }, [isEmpty]);

package/cjs/LineChart/helpers.d.ts

@@ -3,8 +3,8 @@ import { LineChartOptions } from '@reltio/mdm-sdk';
 import { CartesianGridProps, LineChart, LineProps, TooltipProps, XAxisProps, YAxisProps } from 'recharts';
 type LineChartSettings = {
     lineChart: React.ComponentProps<typeof LineChart>;
-    xAxis: XAxisProps;
-    yAxis: YAxisProps;
+    xAxis: Omit<XAxisProps, 'ref'>;
+    yAxis: Omit<YAxisProps, 'ref'>;
     cartesianGrid: Omit<CartesianGridProps, 'ref'>;
     tooltip: TooltipProps<number, string>;
     line: Omit<LineProps, 'ref'>;

package/cjs/PieChart/PieChart.test.js

@@ -114,11 +114,15 @@ describe('PieChart', function () {
         expect(wrapper.find(recharts_1.Pie).prop('innerRadius')).toBe('50%');
     });
     it('should call props.onItemClick on sector click', function () {
+        jest.useFakeTimers();
         var onItemClick = jest.fn();
         var wrapper = (0, enzyme_1.mount)(react_1.default.createElement(PieChart_1.PieChart, { width: 600, height: 300, data: data, onItemClick: onItemClick }));
+        jest.runAllTimers();
+        wrapper.update();
         var sector = wrapper.find('.recharts-pie-sector').first();
         sector.simulate('click');
         expect(onItemClick).toHaveBeenCalledWith('1');
+        jest.useRealTimers();
     });
     it('should render chart legend with percents correctly', function () {
         var legendPayload = [

package/cjs/UploadImageDialog/UploadImageDialog.specs.js

@@ -53,8 +53,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@testing-library/react");
 var user_event_1 = __importDefault(require("@testing-library/user-event"));
-var react_dnd_test_backend_1 = __importDefault(require("react-dnd-test-backend"));
-var react_dnd_1 = require("react-dnd");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var constants_1 = require("./constants");
 var UploadImageDialog_1 = require("./UploadImageDialog");
@@ -73,8 +71,7 @@ describe('UploadImageDialog tests', function () {
         var props = { onClose: onClose, onUpload: onUpload, open: true };
         var Providers = function (_a) {
             var children = _a.children;
-            return (react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: { imageServicePath: imageServicePath, environment: environment, tenant: tenant } },
-                react_1.default.createElement(react_dnd_1.DndProvider, { backend: react_dnd_test_backend_1.default }, children)));
+            return (react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: { imageServicePath: imageServicePath, environment: environment, tenant: tenant } }, children));
         };
         return __assign({ user: user }, (0, react_2.render)(react_1.default.createElement(UploadImageDialog_1.UploadImageDialog, __assign({}, props)), { wrapper: Providers }));
     };

package/cjs/UploadImageDialog/components/TargetBox/TargetBox.js

@@ -1,40 +1,74 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TargetBox = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var react_dnd_1 = require("react-dnd");
-var react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
 var Typography_1 = __importDefault(require("@mui/material/Typography"));
 var SelectImageButton_1 = require("../SelectImageButton");
 var UploadIcon_1 = __importDefault(require("../../../icons/UploadIcon"));
 var constants_1 = require("../../constants");
 var styles_1 = require("./styles");
+var ACCEPTABLE_FILE_TYPE = 'Files';
 var TargetBox = function (_a) {
     var _b;
     var onAppendFile = _a.onAppendFile, className = _a.className;
     var styles = (0, styles_1.useStyles)();
-    var _c = (0, react_dnd_1.useDrop)({
-        accept: [react_dnd_html5_backend_1.NativeTypes.FILE],
-        drop: function (item) {
-            if (item) {
-                // TODO remove after update react-dnd
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                onAppendFile(item.files[0]);
-            }
-        },
-        collect: function (monitor) { return ({
-            isOver: monitor.isOver(),
-            canDrop: monitor.canDrop()
-        }); }
-    }), _d = _c[0], canDrop = _d.canDrop, isOver = _d.isOver, drop = _c[1];
-    var isActive = canDrop && isOver;
-    return (react_1.default.createElement("div", { ref: drop, className: (0, classnames_1.default)(styles.root, (_b = {}, _b[styles.isActive] = isActive, _b), className) },
+    var _c = (0, react_1.useState)(false), isActive = _c[0], setIsActive = _c[1];
+    var handleDragOver = (0, react_1.useCallback)(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var filesType = e.dataTransfer.types[0];
+        var isValidType = filesType === ACCEPTABLE_FILE_TYPE;
+        e.dataTransfer.dropEffect = isValidType ? 'copy' : 'none';
+        setIsActive(isValidType);
+    }, []);
+    var handleDragLeave = (0, react_1.useCallback)(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var relatedTarget = e.relatedTarget;
+        var isLeave = relatedTarget && !e.currentTarget.contains(relatedTarget);
+        if (isLeave || !relatedTarget) {
+            setIsActive(false);
+        }
+    }, []);
+    var handleDrop = (0, react_1.useCallback)(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsActive(false);
+        var filesType = e.dataTransfer.types[0];
+        if (filesType === ACCEPTABLE_FILE_TYPE) {
+            var file = e.dataTransfer.files[0];
+            onAppendFile(file);
+        }
+    }, [onAppendFile]);
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.root, (_b = {}, _b[styles.isActive] = isActive, _b), className), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop },
         react_1.default.createElement(UploadIcon_1.default, { className: styles.icon }),
         react_1.default.createElement(Typography_1.default, { className: styles.title }, ui_i18n_1.default.text('Drag an image here')),
         react_1.default.createElement(Typography_1.default, { className: styles.description }, ui_i18n_1.default.text('Acceptable image types would include JPG, PNG, TIFF, GIF, BMP. Maximum image size: ${MAX_IMAGE_SIZE}Mb', {

package/cjs/UploadImageDialog/components/TargetBox/TargetBox.specs.d.ts

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom';

package/cjs/UploadImageDialog/components/TargetBox/TargetBox.specs.js

@@ -4,24 +4,65 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var enzyme_1 = require("enzyme");
-var react_dnd_1 = require("react-dnd");
-var react_dnd_test_backend_1 = __importDefault(require("react-dnd-test-backend"));
-var SelectImageButton_1 = require("../SelectImageButton");
+var react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
 var TargetBox_1 = require("./TargetBox");
-describe('TargetBox tests', function () {
-    var onAppendFile;
-    beforeEach(function () {
-        onAppendFile = jest.fn();
+var mockOnAppendFile = jest.fn();
+var setUp = function () {
+    return (0, react_2.render)(react_1.default.createElement(TargetBox_1.TargetBox, { onAppendFile: mockOnAppendFile }));
+};
+describe('TargetBox', function () {
+    afterEach(function () {
+        jest.clearAllMocks();
+    });
+    it('should renders well', function () {
+        var getByText = setUp().getByText;
+        expect(getByText('Drag an image here')).toBeInTheDocument();
+    });
+    it('should activates drag state on drag over with acceptable file type', function () {
+        var container = setUp().container;
+        var dropZone = container.firstChild;
+        react_2.fireEvent.dragOver(dropZone, {
+            dataTransfer: { types: ['Files'], dropEffect: 'copy' }
+        });
+        expect(dropZone).toHaveClass('isActive');
+    });
+    it('should does not activate drag state with unacceptable file type', function () {
+        var container = setUp().container;
+        var dropZone = container.firstChild;
+        react_2.fireEvent.dragOver(dropZone, {
+            dataTransfer: { types: ['Text'], dropEffect: 'none' }
+        });
+        expect(dropZone).not.toHaveClass('isActive');
+    });
+    it('should deactivates drag state on drag leave', function () {
+        var container = setUp().container;
+        var dropZone = container.firstChild;
+        react_2.fireEvent.dragOver(dropZone, { dataTransfer: { types: ['Files'] } });
+        expect(dropZone).toHaveClass('isActive');
+        react_2.fireEvent.dragLeave(dropZone);
+        expect(dropZone).not.toHaveClass('isActive');
     });
-    it('should not pass .isActive className to root element if dnd zone is not active', function () {
-        var component = (0, enzyme_1.mount)(react_1.default.createElement(react_dnd_1.DndProvider, { backend: react_dnd_test_backend_1.default },
-            react_1.default.createElement(TargetBox_1.TargetBox, { onAppendFile: onAppendFile })));
-        expect(component.find('.root').prop('className')).toBe('root');
+    it('should calls onAppendFile with the dropped file', function () {
+        var file = new File(['test content'], 'test.png', { type: 'image/png' });
+        var container = setUp().container;
+        var dropZone = container.firstChild;
+        react_2.fireEvent.drop(dropZone, {
+            dataTransfer: {
+                files: [file],
+                types: ['Files']
+            }
+        });
+        expect(mockOnAppendFile).toHaveBeenCalledWith(file);
     });
-    it('should onAppendFile prop correctly to SelectImageButton', function () {
-        var component = (0, enzyme_1.mount)(react_1.default.createElement(react_dnd_1.DndProvider, { backend: react_dnd_test_backend_1.default },
-            react_1.default.createElement(TargetBox_1.TargetBox, { onAppendFile: onAppendFile })));
-        expect(component.find(SelectImageButton_1.SelectImageButton).prop('onAppendFile')).toEqual(onAppendFile);
+    it('should does not call onAppendFile if dropped item is not of file type', function () {
+        var container = setUp().container;
+        var dropZone = container.firstChild;
+        react_2.fireEvent.drop(dropZone, {
+            dataTransfer: {
+                types: ['Text']
+            }
+        });
+        expect(mockOnAppendFile).not.toHaveBeenCalled();
     });
 });

package/cjs/UploadImageDialog/components/TargetBox/styles.js

@@ -12,7 +12,8 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     icon: {
         width: '190px',
         height: '190px',
-        marginBottom: '24px'
+        marginBottom: '24px',
+        pointerEvents: 'none'
     },
     title: {
         marginBottom: '8px',

package/cjs/VerticalHeadingsTable/DndVerticalHeadingsTable.test.d.ts

@@ -0,0 +1 @@
+export {};