@reltio/components 1.4.2044 → 1.4.2046

package/FileTypeEditor/FileTypeEditor.test.js

@@ -46,83 +46,114 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import React from 'react';
-import { shallow } from 'enzyme';
-import { UploadFileButton } from '../UploadFileButton';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { uploadFileForSearch } from '@reltio/mdm-sdk';
 import { FileTypeEditor } from './FileTypeEditor';
-jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { uploadFileForSearch: function (file) {
-        return Promise.resolve({
-            downloadLink: file.name,
-            path: file.name,
-            expirationDate: '2021-10-27T10:39:14.374+0000'
-        });
-    } })); });
+import { getMuiIconByName } from '../test-utils';
+jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { uploadFileForSearch: jest.fn() })); });
+var defaultProps = {
+    onChange: jest.fn(),
+    onError: jest.fn()
+};
+var setUp = function (props) {
+    if (props === void 0) { props = defaultProps; }
+    var user = userEvent.setup();
+    return __assign(__assign({}, render(React.createElement(FileTypeEditor, __assign({}, props)))), { user: user });
+};
 describe('File Type editor tests', function () {
-    it('should render UploadFileButton', function () {
-        var wrapper = shallow(React.createElement(FileTypeEditor, { onChange: jest.fn() }));
-        expect(wrapper.find(UploadFileButton)).toHaveLength(1);
+    beforeEach(function () {
+        jest.spyOn(Date, 'now').mockReturnValue(new Date('2024-01-05T16:00:00.374+0000').getTime());
+        uploadFileForSearch.mockResolvedValue({
+            downloadLink: 'https://reltio.com/file.csv',
+            path: 'path',
+            expirationDate: '2024-01-05T16:00:00.374+0000'
+        });
     });
-    it('should pass value into UploadFileButton', function () {
-        var value = { downloadLink: 'downloadLink', expirationDate: 1234567890, filename: 'file', link: 'link' };
-        var wrapper = shallow(React.createElement(FileTypeEditor, { value: value, onChange: jest.fn() }));
-        wrapper.update();
-        var uploadFileButton = wrapper.find(UploadFileButton);
-        expect(uploadFileButton.prop('link')).toBe(value.downloadLink);
-        expect(uploadFileButton.prop('filename')).toBe(value.filename);
-        expect(uploadFileButton.prop('supportedFileTypes')).toEqual(['.txt', '.csv']);
+    afterEach(function () {
+        jest.clearAllMocks();
     });
-    it('should call onChange with correct parameters on file upload', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var onChange, wrapper, uploadFileButton;
+    it('should render correctly', function () {
+        setUp();
+        screen.getByText('Select File');
+        expect(screen.getByTestId('file-uploader')).toHaveAttribute('accept', '.txt,.csv');
+    });
+    it('should upload file correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, file;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    onChange = jest.fn();
-                    wrapper = shallow(React.createElement(FileTypeEditor, { onChange: onChange }));
-                    wrapper.update();
-                    uploadFileButton = wrapper.find(UploadFileButton);
-                    uploadFileButton.prop('onUpload')({ name: 'file' });
-                    return [4 /*yield*/, Promise.resolve()];
+                    user = setUp().user;
+                    file = new File(['file'], 'file.csv', { type: 'text/csv' });
+                    return [4 /*yield*/, user.upload(screen.getByTestId('file-uploader'), [file])];
                 case 1:
                     _a.sent();
-                    expect(onChange).toHaveBeenCalledWith({
-                        filename: 'file',
-                        downloadLink: 'file',
-                        link: 'file',
-                        expirationDate: 1635331154374
+                    expect(uploadFileForSearch).toHaveBeenCalledWith(file);
+                    expect(defaultProps.onChange).toHaveBeenCalledWith({
+                        downloadLink: 'https://reltio.com/file.csv',
+                        expirationDate: 1704470400374,
+                        filename: 'file.csv',
+                        link: 'path'
                     });
                     return [2 /*return*/];
             }
         });
     }); });
-    it('should call onChange with empty params on cancel action', function () {
-        var onChange = jest.fn();
-        var wrapper = shallow(React.createElement(FileTypeEditor, { onChange: onChange }));
-        wrapper.update();
-        var uploadFileButton = wrapper.find(UploadFileButton);
-        uploadFileButton.prop('onCancel')();
-        expect(onChange).toHaveBeenCalledWith(null);
-    });
-    it('should call onError with error message on file upload error', function () {
-        var onError = jest.fn();
-        var wrapper = shallow(React.createElement(FileTypeEditor, { onError: onError, onChange: jest.fn() }));
-        wrapper.update();
-        var uploadFileButton = wrapper.find(UploadFileButton);
-        var ERROR_MESSAGE = new Error('Error');
-        uploadFileButton.prop('onError')(ERROR_MESSAGE);
-        expect(onError).toHaveBeenCalledWith(ERROR_MESSAGE);
-    });
-    it('should not have default value for onError prop', function () {
-        var wrapper = shallow(React.createElement(FileTypeEditor, { onChange: jest.fn() }));
-        wrapper.update();
-        var uploadFileButton = wrapper.find(UploadFileButton);
-        expect(uploadFileButton.prop('onError')).toBeUndefined();
-    });
-    it('should pass isValidLink prop to UploadFileButton correctly', function () {
-        var value = { downloadLink: 'downloadLink', expirationDate: 1234567890, filename: 'file', link: 'link' };
-        var wrapper = shallow(React.createElement(FileTypeEditor, { value: value, onChange: jest.fn() }));
-        expect(wrapper.find(UploadFileButton).prop('isValidLink')).toBe(false);
-        wrapper.setProps({
-            value: __assign(__assign({}, value), { expirationDate: 12312312314324 })
+    it('should cancel upload correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    props = __assign(__assign({}, defaultProps), { value: { downloadLink: 'https://reltio.com/file.csv' } });
+                    user = setUp(props).user;
+                    return [4 /*yield*/, user.click(getMuiIconByName('Cancel'))];
+                case 1:
+                    _a.sent();
+                    expect(props.onChange).toHaveBeenCalledWith(null);
+                    return [2 /*return*/];
+            }
         });
-        expect(wrapper.find(UploadFileButton).prop('isValidLink')).toBe(true);
-    });
+    }); });
+    it('should handle error correctly in case if upload request has been rejected', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, file;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    uploadFileForSearch.mockRejectedValue({ errorMessage: 'Something went wrong' });
+                    user = setUp().user;
+                    file = new File(['file'], 'file.csv', { type: 'text/csv' });
+                    return [4 /*yield*/, user.upload(screen.getByTestId('file-uploader'), [file])];
+                case 1:
+                    _a.sent();
+                    expect(defaultProps.onError).toHaveBeenCalledWith({ errorMessage: 'Something went wrong' });
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should render label as link if link is valid', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props;
+        return __generator(this, function (_a) {
+            props = __assign(__assign({}, defaultProps), { value: {
+                    downloadLink: 'https://reltio.com/file.csv',
+                    filename: 'file.csv',
+                    expirationDate: new Date('2025-01-05T16:00:00.374+0000').getTime()
+                } });
+            setUp(props);
+            expect(screen.getByText('file.csv')).toHaveAttribute('href', 'https://reltio.com/file.csv');
+            return [2 /*return*/];
+        });
+    }); });
+    it('should render label as plain text if link is not valid', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props;
+        return __generator(this, function (_a) {
+            props = __assign(__assign({}, defaultProps), { value: {
+                    downloadLink: 'https://reltio.com/file.csv',
+                    filename: 'file.csv',
+                    expirationDate: new Date('2023-01-05T16:00:00.374+0000').getTime()
+                } });
+            setUp(props);
+            expect(screen.getByText('file.csv')).not.toHaveAttribute('href');
+            return [2 /*return*/];
+        });
+    }); });
 });

package/FilterValueEditor/FilterValueEditor.test.js

@@ -9,172 +9,198 @@ var __assign = (this && this.__assign) || function () {
     };
     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 };
+    }
+};
 import React from 'react';
-import { shallow } from 'enzyme';
-import { DataTypes, FilterOptions, DateRangeValue } from '@reltio/mdm-sdk';
-import { DataTypeValueEditor } from '../DataTypeValueEditor';
-import { DateRangeEditor } from '../DateRangeEditor';
-import { RangeDataTypeValueEditor } from './components/RangeDataTypeValueEditor';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { DataTypes, DateRangeValue, FilterOptions } from '@reltio/mdm-sdk';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
 import { FilterValueEditor } from './FilterValueEditor';
-var toLocalDate = function (timestamp) {
-    var date = new Date(timestamp);
-    return new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
+var defaultProps = {
+    filter: { fieldName: 'entity.label', filter: FilterOptions.EQUALS, values: ['test label'] },
+    dataTypeDefinition: { type: DataTypes.TYPE_STRING },
+    TextFieldProps: {},
+    onChange: jest.fn()
 };
-describe('FilterValueEditor', function () {
-    it('should render DataTypeValueEditor with correct props (not range value)', function () {
-        var props = {
-            filter: { fieldName: 'entity.label', filter: FilterOptions.EQUALS, values: ['Label1'] },
-            onChange: jest.fn(),
-            dataTypeDefinition: {
-                type: DataTypes.TYPE_STRING
-            },
-            orientation: 'horizontal'
-        };
-        var wrapper = shallow(React.createElement(FilterValueEditor, __assign({}, props)));
-        var editor = wrapper.find(DataTypeValueEditor);
-        expect(editor).toHaveLength(1);
-        expect(editor.props()).toMatchObject({
-            value: props.filter.values[0],
-            dataTypeDefinition: props.dataTypeDefinition,
-            fieldName: props.filter.fieldName
-        });
-        expect(editor.prop('orientation')).toBeUndefined();
-        editor.prop('onChange')('Label2');
-        expect(props.onChange).toHaveBeenCalledWith(['Label2']);
+var setUp = function (props) {
+    if (props === void 0) { props = defaultProps; }
+    var user = userEvent.setup();
+    var Providers = function (_a) {
+        var children = _a.children;
+        return (React.createElement(LocalizationProvider, { dateAdapter: AdapterMoment }, children));
+    };
+    return __assign(__assign({}, render(React.createElement(FilterValueEditor, __assign({}, props)), { wrapper: Providers })), { user: user });
+};
+describe('Filter value editor', function () {
+    afterEach(function () {
+        jest.clearAllMocks();
     });
-    it('should render RangeDataTypeValueEditor if filter is type of range (not date range)', function () {
-        var props = {
-            filter: { fieldName: 'relation.attributes.int', filter: FilterOptions.IN_RANGE, values: [['1', '2']] },
-            onChange: jest.fn(),
-            dataTypeDefinition: {
-                type: DataTypes.TYPE_INT
-            },
-            orientation: 'horizontal'
-        };
-        var wrapper = shallow(React.createElement(FilterValueEditor, __assign({}, props)));
-        var editor = wrapper.find(RangeDataTypeValueEditor);
-        expect(editor).toHaveLength(1);
-        expect(editor.props()).toMatchObject({
-            value: ['1', '2'],
-            dataTypeDefinition: props.dataTypeDefinition,
-            fieldName: props.filter.fieldName,
-            orientation: 'horizontal'
+    it('should render data type value editor with correct props (not range value)', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, input;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    screen.getByText('test label');
+                    input = screen.getByRole('textbox');
+                    return [4 /*yield*/, user.type(input, 'new label{Enter}')];
+                case 1:
+                    _a.sent();
+                    expect(defaultProps.onChange).toHaveBeenCalledWith([['test label', 'new label']]);
+                    return [2 /*return*/];
+            }
         });
-        editor.prop('onChange')(['1', '3']);
-        expect(props.onChange).toHaveBeenLastCalledWith([['1', '3']]);
-    });
-    it('should render DateRangeEditor if filter is type of date range with special value)', function () {
-        var props = {
-            filter: {
-                fieldName: 'relation.attributes.date',
-                filter: FilterOptions.WITHIN,
-                values: [DateRangeValue.LAST_MONTH]
-            },
-            onChange: jest.fn(),
-            dataTypeDefinition: {
-                type: DataTypes.TYPE_DATE
+    }); });
+    it('should render range data type value editor with horizontal orientation if filter is type of range (not date range)', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props, user, inputs;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    props = __assign(__assign({}, defaultProps), { orientation: 'horizontal', filter: { fieldName: 'relation.attributes.int', filter: FilterOptions.IN_RANGE, values: [['1', '2']] }, dataTypeDefinition: { type: DataTypes.TYPE_INT } });
+                    user = setUp(props).user;
+                    screen.getByTestId('horizontal-range-data-type-value-editor');
+                    inputs = screen.getAllByRole('textbox');
+                    expect(inputs[0]).toHaveValue('1');
+                    expect(inputs[1]).toHaveValue('2');
+                    return [4 /*yield*/, user.type(inputs[1], '{Backspace}3{Enter}')];
+                case 1:
+                    _a.sent();
+                    expect(props.onChange).toHaveBeenCalledWith([['1', '3']]);
+                    return [2 /*return*/];
             }
-        };
-        var wrapper = shallow(React.createElement(FilterValueEditor, __assign({}, props)));
-        var editor = wrapper.find(DateRangeEditor);
-        expect(editor).toHaveLength(1);
-        expect(editor.props()).toMatchObject({
-            values: DateRangeValue.LAST_MONTH,
-            dataTypeDefinition: props.dataTypeDefinition
         });
-    });
-    it('should render DateRangeEditor if filter is type of date range)', function () {
-        var values = [1568937600000, 1568938000000];
-        var expectedValues = [toLocalDate(values[0]), toLocalDate(values[1])];
-        var props = {
-            filter: { fieldName: 'relation.attributes.date', filter: FilterOptions.WITHIN, values: [values] },
-            onChange: jest.fn(),
-            dataTypeDefinition: {
-                type: DataTypes.TYPE_DATE
+    }); });
+    it('should render range data type value editor with vertical orientation if filter is type of range (not date range)', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props, user, inputs;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    props = __assign(__assign({}, defaultProps), { orientation: 'vertical', filter: { fieldName: 'relation.attributes.int', filter: FilterOptions.IN_RANGE, values: [['1', '2']] }, dataTypeDefinition: { type: DataTypes.TYPE_INT } });
+                    user = setUp(props).user;
+                    screen.getByTestId('vertical-range-data-type-value-editor');
+                    screen.getByText('From');
+                    screen.getByText('To');
+                    inputs = screen.getAllByRole('textbox');
+                    expect(inputs[0]).toHaveValue('1');
+                    expect(inputs[1]).toHaveValue('2');
+                    return [4 /*yield*/, user.type(inputs[1], '{Backspace}8{Enter}')];
+                case 1:
+                    _a.sent();
+                    expect(props.onChange).toHaveBeenCalledWith([['1', '8']]);
+                    return [2 /*return*/];
             }
-        };
-        var wrapper = shallow(React.createElement(FilterValueEditor, __assign({}, props)));
-        var editor = wrapper.find(DateRangeEditor);
-        expect(editor).toHaveLength(1);
-        expect(editor.props()).toMatchObject({
-            values: expectedValues,
-            dataTypeDefinition: props.dataTypeDefinition
         });
-    });
-    it('should not provide TextFieldProps prop to DateRangeEditor', function () {
-        var values = [1568937600000, 1568938000000];
-        var props = {
-            filter: { fieldName: 'relation.attributes.date', filter: FilterOptions.WITHIN, values: [values] },
-            onChange: jest.fn(),
-            dataTypeDefinition: {
-                type: DataTypes.TYPE_DATE
-            },
-            TextFieldProps: {
-                InputProps: {
-                    classes: {
-                        root: 'rootclass'
-                    }
-                }
+    }); });
+    it('should render date range editor if filter is type of date range with special value', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props, user, input;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    props = __assign(__assign({}, defaultProps), { filter: {
+                            fieldName: 'relation.attributes.date',
+                            filter: FilterOptions.WITHIN,
+                            values: [DateRangeValue.LAST_MONTH]
+                        }, dataTypeDefinition: { type: DataTypes.TYPE_DATE } });
+                    user = setUp(props).user;
+                    screen.getByText('Date Range');
+                    input = screen.getByRole('textbox');
+                    expect(input).toHaveAttribute('value', 'Last month');
+                    return [4 /*yield*/, user.click(input)];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByText('Last 7 days'))];
+                case 2:
+                    _a.sent();
+                    expect(props.onChange).toHaveBeenCalledWith(['lastWeek']);
+                    return [2 /*return*/];
             }
-        };
-        var wrapper = shallow(React.createElement(FilterValueEditor, __assign({}, props)));
-        var editor = wrapper.find(DateRangeEditor);
-        expect(editor).toHaveLength(1);
-        expect(editor.prop('TextFieldProps')).toBe(undefined);
-    });
-    it('should work correctly with activeness date filters', function () {
-        var props = {
-            filter: {
-                fieldName: 'relation.activeness.startDate',
-                values: [1568937600000],
-                filter: FilterOptions.BEFORE
-            },
-            dataTypeDefinition: {
-                type: DataTypes.TYPE_ACTIVENESS_DATE
-            },
-            onChange: jest.fn()
-        };
-        var wrapper = shallow(React.createElement(FilterValueEditor, __assign({}, props)));
-        var editor = wrapper.find(DataTypeValueEditor);
-        expect(editor.prop('value')).toEqual(new Date(1568937600000));
-        editor.prop('onChange')(new Date('2019-09-03T00:00:00+05:00'));
-        expect(props.onChange).toHaveBeenCalledWith([1567450800000]);
-    });
-    it('should work correctly with date filters', function () {
-        var props = {
-            filter: {
-                fieldName: 'relation.attributes.date',
-                values: ['2019-09-01'],
-                filter: FilterOptions.ON
-            },
-            dataTypeDefinition: {
-                type: DataTypes.TYPE_DATE
-            },
-            onChange: jest.fn()
-        };
-        var wrapper = shallow(React.createElement(FilterValueEditor, __assign({}, props)));
-        var editor = wrapper.find(DataTypeValueEditor);
-        var expectedTimestamp = toLocalDate(props.filter.values[0]);
-        expect(editor.prop('value')).toEqual(expectedTimestamp);
-        editor.prop('onChange')(new Date(2019, 8, 3));
-        expect(props.onChange).toHaveBeenCalledWith([1567468800000]);
-    });
-    it('should work correctly with timestamp filters', function () {
-        var props = {
-            filter: {
-                fieldName: 'relation.attributes.timestamp',
-                values: [1568937600000],
-                filter: FilterOptions.LT
-            },
-            dataTypeDefinition: {
-                type: DataTypes.TYPE_TIMESTAMP
-            },
-            onChange: jest.fn()
-        };
-        var wrapper = shallow(React.createElement(FilterValueEditor, __assign({}, props)));
-        var editor = wrapper.find(DataTypeValueEditor);
-        expect(editor.prop('value')).toEqual(new Date(1568937600000));
-        editor.prop('onChange')(new Date(1568938000000));
-        expect(props.onChange).toHaveBeenCalledWith([1568938000000]);
+        });
+    }); });
+    it('should render date range editor if filter is type of date range', function () {
+        var values = [new Date('09/20/2019 04:00:00 AM').valueOf(), new Date('09/25/2019 04:00:00 AM').valueOf()];
+        var props = __assign(__assign({}, defaultProps), { filter: { fieldName: 'relation.attributes.date', filter: FilterOptions.WITHIN, values: [values] }, dataTypeDefinition: { type: DataTypes.TYPE_DATE } });
+        setUp(props);
+        screen.getByText('Date Range');
+        expect(screen.getByRole('textbox')).toHaveAttribute('value', '09/20/2019 — 09/25/2019');
     });
+    it('should work correctly with activeness date filters', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props, user, input;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    props = __assign(__assign({}, defaultProps), { filter: {
+                            fieldName: 'relation.activeness.startDate',
+                            values: [new Date('09/20/2019').valueOf()],
+                            filter: FilterOptions.BEFORE
+                        }, dataTypeDefinition: { type: DataTypes.TYPE_ACTIVENESS_DATE } });
+                    user = setUp(props).user;
+                    input = screen.getByRole('textbox');
+                    expect(input).toHaveValue('09/20/2019');
+                    screen.getByLabelText('Choose date, selected date is Sep 20, 2019');
+                    return [4 /*yield*/, user.type(input, '05')];
+                case 1:
+                    _a.sent();
+                    expect(props.onChange).toHaveBeenCalledWith([new Date('05/20/2019').valueOf()]);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should work correctly with timestamp filters', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props, user, input;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    props = __assign(__assign({}, defaultProps), { filter: {
+                            fieldName: 'relation.attributes.timestamp',
+                            values: [new Date('09/20/2019 04:00:00 AM').valueOf()],
+                            filter: FilterOptions.LT
+                        }, dataTypeDefinition: { type: DataTypes.TYPE_TIMESTAMP } });
+                    user = setUp(props).user;
+                    input = screen.getByRole('textbox');
+                    expect(input).toHaveValue('09/20/2019 04:00:00 AM');
+                    screen.getByLabelText('Choose date, selected date is Sep 20, 2019');
+                    return [4 /*yield*/, user.type(input, '02')];
+                case 1:
+                    _a.sent();
+                    expect(props.onChange).toHaveBeenCalledWith([new Date('02/20/2019 04:00:00 AM').valueOf()]);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });

package/FilterValueEditor/components/RangeDataTypeValueEditor/RangeDataTypeValueEditor.js

@@ -37,13 +37,13 @@ export var RangeDataTypeValueEditor = function (_a) {
     var fromEditor = (React.createElement(DataTypeValueEditor, __assign({ id: rangeEditorFromId.current, value: value[0], onChange: pipe(update(0, __, value), onChange) }, otherProps)));
     var toEditor = (React.createElement(DataTypeValueEditor, __assign({ id: rangeEditorToId.current, value: value[1], onChange: pipe(update(1, __, value), onChange) }, otherProps)));
     if (orientation === 'horizontal') {
-        return (React.createElement("div", { className: styles['range-inline-editor'] },
+        return (React.createElement("div", { "data-reltio-id": "horizontal-range-data-type-value-editor", className: styles['range-inline-editor'] },
             fromEditor,
             React.createElement("div", { className: styles['range-editor__dash'] }, '—'),
             toEditor));
     }
     else {
-        return (React.createElement("div", { className: styles['range-editor'] },
+        return (React.createElement("div", { "data-reltio-id": "vertical-range-data-type-value-editor", className: styles['range-editor'] },
             React.createElement(FormControl, { variant: "standard", fullWidth: true, className: styles['range-editor__control'] },
                 React.createElement(InputLabel, { htmlFor: rangeEditorFromId.current, shrink: true }, i18n.text('From')),
                 fromEditor),