@reltio/components 1.4.2071 → 1.4.2073

package/cjs/UploadFileButton/UploadFileButton.test.js

@@ -0,0 +1,204 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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 react_2 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
+var ErrorPopup_1 = require("../ErrorPopup");
+var test_utils_1 = require("../test-utils");
+var UploadFileButton_1 = require("./UploadFileButton");
+describe('UploadFileButton tests', function () {
+    var defaultProps = {
+        onCancel: jest.fn(),
+        onError: jest.fn(),
+        onUpload: jest.fn().mockResolvedValue({ link: 'link' }),
+        supportedFileTypes: ['.txt', '.csv']
+    };
+    var setUp = function (props) {
+        if (props === void 0) { props = {}; }
+        var user = user_event_1.default.setup();
+        return __assign({ user: user }, (0, react_2.render)(react_1.default.createElement(UploadFileButton_1.UploadFileButton, __assign({}, defaultProps, props))));
+    };
+    beforeEach(function () {
+        jest.clearAllMocks();
+    });
+    describe('init mode behavior', function () {
+        it('should show upload button by default', function () {
+            setUp();
+            expect(react_2.screen.getByRole('button', { name: 'Select File' })).toBeInTheDocument();
+        });
+        it('should set correct properties for input', function () {
+            setUp();
+            expect(react_2.screen.getByText('Select File')).toBeInTheDocument();
+            var fileUploader = react_2.screen.getByTestId('file-uploader');
+            expect(fileUploader).toHaveAttribute('accept', '.txt,.csv');
+            expect(fileUploader).toHaveAttribute('type', 'file');
+        });
+        it('should call onUpload', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user, file;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setUp().user;
+                        file = new File(['file'], 'file.csv', { type: 'text/csv' });
+                        return [4 /*yield*/, user.upload(react_2.screen.getByTestId('file-uploader'), file)];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onUpload).toHaveBeenCalledWith(file);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should invoke onError on file upload error', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var errorMessage, onUpload, user, file;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        errorMessage = 'Error';
+                        onUpload = jest.fn().mockRejectedValue(errorMessage);
+                        user = setUp({ onUpload: onUpload }).user;
+                        file = new File(['file'], 'file.csv', { type: 'text/csv' });
+                        return [4 /*yield*/, user.upload(react_2.screen.getByTestId('file-uploader'), file)];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onError).toHaveBeenCalledWith(errorMessage);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should use default onError prop if it is not specified', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var errorMessage, addErrorSpy, onUpload, user, file;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        errorMessage = 'Error';
+                        addErrorSpy = jest.spyOn(ErrorPopup_1.ErrorPopup, 'addError');
+                        onUpload = jest.fn().mockRejectedValue(errorMessage);
+                        user = setUp({ onUpload: onUpload, onError: undefined }).user;
+                        file = new File(['file'], 'file.csv', { type: 'text/csv' });
+                        return [4 /*yield*/, user.upload(react_2.screen.getByTestId('file-uploader'), file)];
+                    case 1:
+                        _a.sent();
+                        expect(addErrorSpy).toHaveBeenCalledWith({
+                            title: 'File upload error',
+                            message: errorMessage
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should use errorMessage for error popup if it available', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var errorObject, addErrorSpy, onUpload, user, file;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        errorObject = { errorMessage: 'errorMessage text' };
+                        addErrorSpy = jest.spyOn(ErrorPopup_1.ErrorPopup, 'addError');
+                        onUpload = jest.fn().mockRejectedValue(errorObject);
+                        user = setUp({ onUpload: onUpload, onError: undefined }).user;
+                        file = new File(['file'], 'file.csv', { type: 'text/csv' });
+                        return [4 /*yield*/, user.upload(react_2.screen.getByTestId('file-uploader'), file)];
+                    case 1:
+                        _a.sent();
+                        expect(addErrorSpy).toHaveBeenCalledWith({
+                            title: 'File upload error',
+                            message: errorObject.errorMessage
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('uploaded mode behavior', function () {
+        it('should show link and cancel button after file uploading', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var user, file;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        user = setUp().user;
+                        file = new File(['file'], 'file.csv', { type: 'text/csv' });
+                        return [4 /*yield*/, user.upload(react_2.screen.getByTestId('file-uploader'), file)];
+                    case 1:
+                        _a.sent();
+                        expect(react_2.screen.getByText('file.csv').tagName).toBe('A');
+                        expect((0, test_utils_1.getMuiIconByName)('Cancel')).toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should show link and cancel button in uploaded mode', function () {
+            setUp({ link: 'link', filename: 'filename' });
+            var link = react_2.screen.getByRole('link');
+            expect(link).toHaveTextContent('filename');
+            expect(link).toHaveAttribute('href', 'link');
+            expect((0, test_utils_1.getMuiIconByName)('Cancel')).toBeInTheDocument();
+        });
+        it('should render text instead of link if isValidLink prop is false', function () {
+            setUp({ link: 'link', filename: 'filename', isValidLink: false });
+            expect(react_2.screen.getByText('filename')).not.toHaveAttribute('href');
+            expect(react_2.screen.queryByRole('link')).not.toBeInTheDocument();
+        });
+        it('should invoke onCancel on cancel icon click', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        setUp({ link: 'link', filename: 'filename' });
+                        return [4 /*yield*/, user_event_1.default.click((0, test_utils_1.getMuiIconByName)('Cancel'))];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onCancel).toHaveBeenCalled();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+});

package/cjs/UploadImageDialog/UploadImageDialog.test.js

@@ -90,6 +90,7 @@ describe('UploadImageDialog tests', function () {
         setUp();
         expect(react_2.screen.getByText('Drag an image here')).toBeInTheDocument();
         expect(react_2.screen.getByText("Acceptable image types would include JPG, PNG, TIFF, GIF, BMP. Maximum image size: ".concat(constants_1.MAX_IMAGE_SIZE, "Mb"))).toBeInTheDocument();
+        expect(react_2.screen.getByTestId('divider-with-text')).toHaveTextContent('or');
         expect(react_2.screen.getByPlaceholderText('Paste an image URL here')).toBeInTheDocument();
         expect(react_2.screen.getByText('Select image')).toBeInTheDocument();
         expect(react_2.screen.getByText('Send')).toBeInTheDocument();

package/cjs/UploadImageDialog/components/DividerWithText/DividerWithText.js

@@ -12,7 +12,7 @@ var styles_1 = require("./styles");
 var DividerWithText = function (_a) {
     var children = _a.children, className = _a.className;
     var styles = (0, styles_1.useStyles)();
-    return (react_1.default.createElement(Box_1.default, { className: (0, classnames_1.default)(styles.root, className) },
+    return (react_1.default.createElement(Box_1.default, { "data-reltio-id": "divider-with-text", className: (0, classnames_1.default)(styles.root, className) },
         react_1.default.createElement(Box_1.default, { className: styles.border }),
         react_1.default.createElement(Typography_1.default, { className: styles.text }, children),
         react_1.default.createElement(Box_1.default, { className: styles.border })));

package/cjs/UploadImageDialog/components/ErrorSnackbar/ErrorSnackbar.test.js

@@ -1,35 +1,93 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 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 Snackbar_1 = __importDefault(require("@mui/material/Snackbar"));
-var enzyme_1 = require("enzyme");
+var react_2 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
 var ErrorSnackbar_1 = require("./ErrorSnackbar");
 describe('ErrorSnackbar tests', function () {
+    var setUp = function (props) {
+        if (props === void 0) { props = {}; }
+        var user = user_event_1.default.setup();
+        return __assign({ user: user }, (0, react_2.render)(react_1.default.createElement(ErrorSnackbar_1.ErrorSnackbar, __assign({ error: null }, props))));
+    };
     it('should render correctly with error is "null"', function () {
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ErrorSnackbar_1.ErrorSnackbar, { error: null }));
-        expect(component.find(Snackbar_1.default).props()).toMatchObject({
-            open: false,
-            message: null
-        });
+        var container = setUp({ error: null }).container;
+        expect(container).toBeEmptyDOMElement();
     });
     it('should render correctly with error is not "null"', function () {
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ErrorSnackbar_1.ErrorSnackbar, { error: "Some error" }));
-        expect(component.find(Snackbar_1.default).props()).toMatchObject({
-            open: true,
-            message: 'Some error'
-        });
-    });
-    it('onClose handler work correctly', function () {
-        var onClose = jest.fn();
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ErrorSnackbar_1.ErrorSnackbar, { error: "Some error", onClose: onClose }));
-        var closeEvent = {};
-        component.find(Snackbar_1.default).prop('onClose')(closeEvent, 'clickaway');
-        expect(onClose).toHaveBeenCalledTimes(1);
-        var action = component.find(Snackbar_1.default).prop('action');
-        action.props.onClick();
-        expect(onClose).toHaveBeenCalledTimes(2);
+        setUp({ error: 'Some error' });
+        expect(react_2.screen.getByRole('alert')).toBeInTheDocument();
+        expect(react_2.screen.getByText('Some error')).toBeInTheDocument();
+        expect(react_2.screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
     });
+    it('onClose handler work correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onClose, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onClose = jest.fn();
+                    user = setUp({ error: 'Some error', onClose: onClose }).user;
+                    expect(onClose).toHaveBeenCalledTimes(0);
+                    return [4 /*yield*/, user.click(react_2.screen.getByRole('button', { name: 'Close' }))];
+                case 1:
+                    _a.sent();
+                    expect(onClose).toHaveBeenCalledTimes(1);
+                    return [4 /*yield*/, user.click(react_2.screen.getByRole('presentation').parentElement)];
+                case 2:
+                    _a.sent();
+                    expect(onClose).toHaveBeenCalledTimes(2);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });

package/cjs/UploadImageDialog/components/ImageByUrlField/ImageByUrlField.js

@@ -62,6 +62,6 @@ var ImageByUrlField = function (_a) {
         react_1.default.createElement(Paper_1.default, { className: styles.paper },
             react_1.default.createElement(InputBase_1.default, { value: value, onChange: handleChange, classes: { root: styles.inputRoot, input: styles.input }, placeholder: ui_i18n_1.default.text('Paste an image URL here') }),
             react_1.default.createElement(Button_1.default, { disabled: Boolean(error) || isEmptyField(value), variant: "outlined", color: "primary", onClick: handleSend }, ui_i18n_1.default.text('Send'))),
-        error && react_1.default.createElement(Typography_1.default, { className: styles.errorMessage }, error)));
+        error && (react_1.default.createElement(Typography_1.default, { "data-reltio-id": "url-error-message", className: styles.errorMessage }, error))));
 };
 exports.ImageByUrlField = ImageByUrlField;

package/cjs/UploadImageDialog/components/ImageByUrlField/ImageByUrlField.test.js

@@ -1,64 +1,177 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 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 InputBase_1 = __importDefault(require("@mui/material/InputBase"));
-var Button_1 = __importDefault(require("@mui/material/Button"));
+var react_2 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
 var ImageByUrlField_1 = require("./ImageByUrlField");
 describe('ImageByUrlField tests', function () {
-    var onSend;
+    var defaultProps = { onSend: jest.fn() };
     beforeEach(function () {
-        onSend = jest.fn();
+        jest.clearAllMocks();
     });
+    var setUp = function (props) {
+        if (props === void 0) { props = {}; }
+        var user = user_event_1.default.setup();
+        return __assign({ user: user }, (0, react_2.render)(react_1.default.createElement(ImageByUrlField_1.ImageByUrlField, __assign({}, defaultProps, props))));
+    };
     it('should not render error message if error is null', function () {
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ImageByUrlField_1.ImageByUrlField, { onSend: onSend }));
-        expect(component.find('.errorMessage')).toHaveLength(0);
-    });
-    it('should not render error message if value is correct', function () {
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ImageByUrlField_1.ImageByUrlField, { onSend: onSend }));
-        component.find(InputBase_1.default).simulate('change', { target: { value: 'https://reltio.com' } });
-        expect(component.find('.errorMessage')).toHaveLength(0);
-    });
-    it('should not render error message if value is empty string', function () {
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ImageByUrlField_1.ImageByUrlField, { onSend: onSend }));
-        component.find(InputBase_1.default).simulate('change', { target: { value: '' } });
-        expect(component.find('.errorMessage')).toHaveLength(0);
-    });
-    it('should render error message if value is not correct', function () {
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ImageByUrlField_1.ImageByUrlField, { onSend: onSend }));
-        component.find(InputBase_1.default).simulate('change', { target: { value: 'wrong url' } });
-        expect(component.find('.errorMessage').text()).toBe('URL is not correct');
-    });
-    it('should update input value', function () {
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ImageByUrlField_1.ImageByUrlField, { onSend: onSend }));
-        expect(component.find(InputBase_1.default).prop('value')).toBe('');
-        component.find(InputBase_1.default).simulate('change', { target: { value: 'value' } });
-        expect(component.find(InputBase_1.default).prop('value')).toBe('value');
+        setUp();
+        expect(react_2.screen.queryByTestId('url-error-message')).not.toBeInTheDocument();
     });
+    it('should not render error message if value is correct', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, user.type(react_2.screen.getByRole('textbox'), 'https://reltio.com')];
+                case 1:
+                    _a.sent();
+                    expect(react_2.screen.queryByTestId('url-error-message')).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should not render error message if value is empty string', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, user.clear(react_2.screen.getByRole('textbox'))];
+                case 1:
+                    _a.sent();
+                    expect(react_2.screen.queryByTestId('url-error-message')).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should render error message if value is not correct', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, user.type(react_2.screen.getByRole('textbox'), 'wrong url')];
+                case 1:
+                    _a.sent();
+                    expect(react_2.screen.getByTestId('url-error-message')).toHaveTextContent('URL is not correct');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should update input value', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, user.type(react_2.screen.getByRole('textbox'), 'value')];
+                case 1:
+                    _a.sent();
+                    expect(react_2.screen.getByRole('textbox')).toHaveValue('value');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
     it('should disable Send button if value is empty string', function () {
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ImageByUrlField_1.ImageByUrlField, { onSend: onSend }));
-        expect(component.find(InputBase_1.default).prop('value')).toBe('');
-        expect(component.find(Button_1.default).prop('disabled')).toBe(true);
-    });
-    it('should disable Send button if value is incorrect url', function () {
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ImageByUrlField_1.ImageByUrlField, { onSend: onSend }));
-        component.find(InputBase_1.default).simulate('change', { target: { value: 'wrong url' } });
-        expect(component.find(Button_1.default).prop('disabled')).toBe(true);
-    });
-    it('should not disable Send button if value is correct url', function () {
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ImageByUrlField_1.ImageByUrlField, { onSend: onSend }));
-        component.find(InputBase_1.default).simulate('change', { target: { value: 'https://reltio.com' } });
-        expect(component.find(Button_1.default).prop('disabled')).toBe(false);
-    });
-    it('onSend handler should work correctly', function () {
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ImageByUrlField_1.ImageByUrlField, { onSend: onSend }));
-        component.find(InputBase_1.default).simulate('change', { target: { value: 'https://reltio.com' } });
-        expect(component.find(InputBase_1.default).prop('value')).toBe('https://reltio.com');
-        component.find(Button_1.default).simulate('click');
-        expect(onSend).toHaveBeenCalledWith('https://reltio.com');
-        expect(component.find(InputBase_1.default).prop('value')).toBe('');
+        setUp();
+        expect(react_2.screen.getByRole('textbox')).toHaveValue('');
+        expect(react_2.screen.getByRole('button', { name: 'Send' })).toBeDisabled();
     });
+    it('should disable Send button if value is incorrect url', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, user.type(react_2.screen.getByRole('textbox'), 'wrong url')];
+                case 1:
+                    _a.sent();
+                    expect(react_2.screen.getByRole('button', { name: 'Send' })).toBeDisabled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should not disable Send button if value is correct url', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, user.type(react_2.screen.getByRole('textbox'), 'https://reltio.com')];
+                case 1:
+                    _a.sent();
+                    expect(react_2.screen.getByRole('button', { name: 'Send' })).not.toBeDisabled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('onSend handler should work correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, user.type(react_2.screen.getByRole('textbox'), 'https://reltio.com')];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(react_2.screen.getByRole('button', { name: 'Send' }))];
+                case 2:
+                    _a.sent();
+                    expect(defaultProps.onSend).toHaveBeenCalledWith('https://reltio.com');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });

package/cjs/ValueChip/ValueChip.test.js

@@ -4,36 +4,20 @@ 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 Chip_1 = __importDefault(require("@mui/material/Chip"));
-var ExpandedValueTooltip_1 = require("../ExpandedValueTooltip");
+var react_2 = require("@testing-library/react");
 var ValueChip_1 = require("./ValueChip");
 describe('ValueChip tests', function () {
     it('should render main parts', function () {
         var label = '123';
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ValueChip_1.ValueChip, { label: label }));
-        var chip = component.find(Chip_1.default);
-        expect(chip.length).toBe(1);
-        var chipLabel = new enzyme_1.ReactWrapper(chip.prop('label'));
-        var valueTooltip = chipLabel.find(ExpandedValueTooltip_1.ExpandedValueTooltip);
-        expect(valueTooltip.length).toBe(1);
-        expect(valueTooltip.prop('value')).toBe(label);
-        expect(valueTooltip.text()).toBe(label);
-        expect(chipLabel.find('.count')).toHaveLength(0);
+        var container = (0, react_2.render)(react_1.default.createElement(ValueChip_1.ValueChip, { label: label })).container;
+        expect(react_2.screen.getByText('123')).toBeInTheDocument();
+        expect(container.querySelector('.count')).toBeNull();
     });
     it('should render main parts with count', function () {
         var label = '123';
         var count = '15K';
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ValueChip_1.ValueChip, { label: label, count: count }));
-        var chip = component.find(Chip_1.default);
-        expect(chip.length).toBe(1);
-        var chipLabel = new enzyme_1.ReactWrapper(chip.prop('label'));
-        var valueTooltip = chipLabel.find(ExpandedValueTooltip_1.ExpandedValueTooltip);
-        expect(valueTooltip.length).toBe(1);
-        expect(valueTooltip.prop('value')).toBe(label);
-        expect(valueTooltip.text()).toBe(label);
-        var countComponent = chipLabel.find('.count');
-        expect(countComponent).toHaveLength(1);
-        expect(countComponent.text()).toBe(count);
+        (0, react_2.render)(react_1.default.createElement(ValueChip_1.ValueChip, { label: label, count: count }));
+        expect(react_2.screen.getByText('123')).toBeInTheDocument();
+        expect(react_2.screen.getByText('15K')).toHaveClass('count');
     });
 });