@contentful/field-editor-slug 1.2.0 → 1.3.0

package/dist/cjs/SlugEditor.js

@@ -0,0 +1,139 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SlugEditor", {
+    enumerable: true,
+    get: function() {
+        return SlugEditor;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _fieldeditorshared = require("@contentful/field-editor-shared");
+const _SlugEditorField = require("./SlugEditorField");
+const _TrackingFieldConnector = require("./TrackingFieldConnector");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function isSupportedFieldTypes(val) {
+    return val === 'Symbol';
+}
+function FieldConnectorCallback({ Component , value , disabled , setValue , errors , titleValue , isOptionalLocaleWithFallback , locale , createdAt , performUniqueCheck  }) {
+    const safeSetValue = _react.useCallback(async (...args)=>{
+        try {
+            await setValue(...args);
+        } catch (e) {}
+    }, [
+        setValue
+    ]);
+    return _react.createElement("div", {
+        "data-test-id": "slug-editor"
+    }, _react.createElement(Component, {
+        locale: locale,
+        createdAt: createdAt,
+        performUniqueCheck: performUniqueCheck,
+        hasError: errors.length > 0,
+        value: value,
+        isOptionalLocaleWithFallback: isOptionalLocaleWithFallback,
+        isDisabled: disabled,
+        titleValue: titleValue,
+        setValue: safeSetValue
+    }));
+}
+function SlugEditor(props) {
+    const { field , parameters  } = props;
+    const { locales , entry , space  } = props.baseSdk;
+    if (!isSupportedFieldTypes(field.type)) {
+        throw new Error(`"${field.type}" field type is not supported by SlugEditor`);
+    }
+    const trackingFieldId = parameters?.instance?.trackingFieldId ?? undefined;
+    const entrySys = entry.getSys();
+    const isLocaleOptional = locales.optional[field.locale];
+    const localeFallbackCode = locales.fallbacks[field.locale];
+    const isOptionalFieldLocale = Boolean(!field.required || isLocaleOptional);
+    const isOptionalLocaleWithFallback = Boolean(isOptionalFieldLocale && localeFallbackCode && locales.available.includes(localeFallbackCode));
+    const performUniqueCheck = _react.useCallback((value)=>{
+        const searchQuery = {
+            content_type: entrySys?.contentType?.sys?.id,
+            [`fields.${field.id}.${field.locale}`]: value,
+            'sys.id[ne]': entrySys.id,
+            'sys.publishedAt[exists]': true,
+            limit: 0
+        };
+        return space.getEntries(searchQuery).then((res)=>{
+            return res.total === 0;
+        });
+    }, [
+        entrySys?.contentType?.sys?.id,
+        field.id,
+        field.locale,
+        entrySys.id,
+        space
+    ]);
+    return _react.createElement(_TrackingFieldConnector.TrackingFieldConnector, {
+        sdk: props.baseSdk,
+        field: field,
+        defaultLocale: locales.default,
+        isOptionalLocaleWithFallback: isOptionalLocaleWithFallback,
+        trackingFieldId: trackingFieldId
+    }, ({ titleValue , isPublished , isSame  })=>_react.createElement(_fieldeditorshared.FieldConnector, {
+            field: field,
+            isInitiallyDisabled: props.isInitiallyDisabled,
+            throttle: 0
+        }, ({ value , errors , disabled , setValue , externalReset  })=>{
+            const shouldTrackTitle = isPublished === false && isSame === false;
+            const Component = shouldTrackTitle ? _SlugEditorField.SlugEditorField : _SlugEditorField.SlugEditorFieldStatic;
+            return _react.createElement(FieldConnectorCallback, {
+                Component: Component,
+                titleValue: titleValue,
+                value: value,
+                errors: errors,
+                disabled: disabled,
+                setValue: setValue,
+                isOptionalLocaleWithFallback: isOptionalLocaleWithFallback,
+                createdAt: entrySys.createdAt,
+                locale: field.locale,
+                performUniqueCheck: performUniqueCheck,
+                key: `slug-editor-${externalReset}`
+            });
+        }));
+}
+SlugEditor.defaultProps = {
+    isInitiallyDisabled: true
+};

package/dist/cjs/SlugEditor.test.js

@@ -0,0 +1,508 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _react = _interop_require_wildcard(require("react"));
+const _fieldeditortestutils = require("@contentful/field-editor-test-utils");
+const _react1 = require("@testing-library/react");
+const _identity = _interop_require_default(require("lodash/identity"));
+require("@testing-library/jest-dom/extend-expect");
+const _SlugEditor = require("./SlugEditor");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+(0, _react1.configure)({
+    testIdAttribute: 'data-test-id'
+});
+jest.mock('lodash/throttle', ()=>({
+        default: _identity.default
+    }), {
+    virtual: true
+});
+jest.mock('use-debounce', ()=>({
+        useDebounce: (text)=>[
+                text
+            ]
+    }));
+function createMocks(initialValues = {}) {
+    const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((field)=>({
+            ...field,
+            id: 'slug-id',
+            onValueChanged: jest.fn().mockImplementation(field.onValueChanged),
+            setValue: jest.fn().mockImplementation(field.setValue)
+        }), initialValues.field || '');
+    const [titleField] = (0, _fieldeditortestutils.createFakeFieldAPI)((field)=>({
+            ...field,
+            id: 'title-id',
+            setValue: jest.fn().mockImplementation(field.setValue),
+            getValue: jest.fn().mockImplementation(field.getValue),
+            onValueChanged: jest.fn().mockImplementation(field.onValueChanged)
+        }), initialValues.titleField || '');
+    const [descriptionField] = (0, _fieldeditortestutils.createFakeFieldAPI)((field)=>({
+            ...field,
+            id: 'description-id',
+            setValue: jest.fn().mockImplementation(field.setValue),
+            getValue: jest.fn().mockImplementation(field.getValue),
+            onValueChanged: jest.fn().mockImplementation(field.onValueChanged)
+        }), initialValues.descriptionField || '');
+    const sdk = {
+        locales: (0, _fieldeditortestutils.createFakeLocalesAPI)(),
+        space: {
+            getEntries: jest.fn().mockResolvedValue({
+                total: 0
+            })
+        },
+        entry: {
+            getSys: jest.fn().mockReturnValue({
+                id: 'entry-id',
+                publishedVersion: undefined,
+                createdAt: '2020-01-24T15:33:47.906Z',
+                contentType: {
+                    sys: {
+                        id: 'content-type-id'
+                    }
+                }
+            }),
+            onSysChanged: jest.fn(),
+            fields: {
+                'title-id': titleField,
+                'entry-id': field,
+                'description-id': descriptionField
+            }
+        },
+        contentType: {
+            displayField: 'title-id'
+        }
+    };
+    return {
+        field,
+        titleField,
+        descriptionField,
+        sdk
+    };
+}
+describe('SlugEditor', ()=>{
+    afterEach(_react1.cleanup);
+    describe('should not subscribe to title changes', ()=>{
+        it('when entry is published', async ()=>{
+            const { field , titleField , sdk  } = createMocks();
+            sdk.entry.getSys.mockReturnValue({
+                publishedVersion: 2
+            });
+            (0, _react1.render)(_react.createElement(_SlugEditor.SlugEditor, {
+                field: field,
+                baseSdk: sdk,
+                isInitiallyDisabled: false
+            }));
+            await (0, _react1.wait)();
+            expect(field.setValue).not.toHaveBeenCalled();
+            expect(titleField.onValueChanged).toHaveBeenCalledWith('en-US', expect.any(Function));
+            expect(sdk.space.getEntries).not.toHaveBeenCalled();
+            expect(sdk.entry.fields['title-id'].getValue).toHaveBeenCalledTimes(1);
+            expect(sdk.entry.getSys).toHaveBeenCalledTimes(2);
+        });
+        it('when title and slug are the same field', async ()=>{
+            const { field , titleField , sdk  } = createMocks();
+            sdk.contentType.displayField = 'entry-id';
+            (0, _react1.render)(_react.createElement(_SlugEditor.SlugEditor, {
+                field: field,
+                baseSdk: sdk,
+                isInitiallyDisabled: false
+            }));
+            await (0, _react1.wait)();
+            expect(titleField.onValueChanged).not.toHaveBeenCalled();
+            expect(field.setValue).not.toHaveBeenCalled();
+        });
+        it('when a saved slug is different from a title at the render', async ()=>{
+            const { field , titleField , sdk  } = createMocks({
+                titleField: 'Hello world!',
+                field: 'something-different'
+            });
+            (0, _react1.render)(_react.createElement(_SlugEditor.SlugEditor, {
+                field: field,
+                baseSdk: sdk,
+                isInitiallyDisabled: false
+            }));
+            await (0, _react1.wait)();
+            expect(titleField.onValueChanged).toHaveBeenCalledWith('en-US', expect.any(Function));
+            expect(field.setValue).not.toHaveBeenCalled();
+        });
+    });
+    describe('should check for uniqueness', ()=>{
+        it('if it is published', async ()=>{
+            const { field , titleField , sdk  } = createMocks({
+                titleField: 'Slug value',
+                field: 'slug-value'
+            });
+            sdk.entry.getSys.mockReturnValue({
+                id: 'entry-id',
+                publishedVersion: 2,
+                contentType: {
+                    sys: {
+                        id: 'content-type-id'
+                    }
+                }
+            });
+            sdk.space.getEntries.mockResolvedValue({
+                total: 0
+            });
+            const { queryByTestId , queryByText  } = (0, _react1.render)(_react.createElement(_SlugEditor.SlugEditor, {
+                field: field,
+                baseSdk: sdk,
+                isInitiallyDisabled: false
+            }));
+            await (0, _react1.wait)();
+            expect(titleField.onValueChanged).toHaveBeenCalledWith('en-US', expect.any(Function));
+            expect(sdk.space.getEntries).toHaveBeenLastCalledWith({
+                content_type: 'content-type-id',
+                'fields.slug-id.en-US': 'slug-value',
+                limit: 0,
+                'sys.id[ne]': 'entry-id',
+                'sys.publishedAt[exists]': true
+            });
+            expect(sdk.space.getEntries).toHaveBeenCalledTimes(1);
+            expect(queryByTestId('slug-editor-spinner')).not.toBeInTheDocument();
+            expect(queryByText('This slug has already been published in another entry')).not.toBeInTheDocument();
+        });
+        it('if it is not published', async ()=>{
+            const { field , titleField , sdk  } = createMocks({
+                titleField: 'Slug value',
+                field: 'slug-value'
+            });
+            sdk.entry.getSys.mockReturnValue({
+                id: 'entry-id',
+                publishedVersion: undefined,
+                contentType: {
+                    sys: {
+                        id: 'content-type-id'
+                    }
+                }
+            });
+            sdk.space.getEntries.mockResolvedValue({
+                total: 2
+            });
+            const { queryByTestId , queryByText , getByTestId  } = (0, _react1.render)(_react.createElement(_SlugEditor.SlugEditor, {
+                field: field,
+                baseSdk: sdk,
+                isInitiallyDisabled: false
+            }));
+            await (0, _react1.wait)();
+            expect(titleField.onValueChanged).toHaveBeenCalledWith('en-US', expect.any(Function));
+            expect(sdk.space.getEntries).toHaveBeenLastCalledWith({
+                content_type: 'content-type-id',
+                'fields.slug-id.en-US': 'slug-value',
+                limit: 0,
+                'sys.id[ne]': 'entry-id',
+                'sys.publishedAt[exists]': true
+            });
+            expect(sdk.space.getEntries).toHaveBeenCalledTimes(1);
+            expect(queryByTestId('slug-editor-spinner')).not.toBeInTheDocument();
+            expect(queryByText('This slug has already been published in another entry')).toBeInTheDocument();
+            expect(getByTestId('cf-ui-text-input')).toHaveValue('slug-value');
+            sdk.space.getEntries.mockResolvedValue({
+                total: 0
+            });
+            _react1.fireEvent.change(getByTestId('cf-ui-text-input'), {
+                target: {
+                    value: '123'
+                }
+            });
+            await (0, _react1.wait)();
+            expect(field.setValue).toHaveBeenCalledTimes(1);
+            expect(field.setValue).toHaveBeenCalledWith('123');
+            expect(sdk.space.getEntries).toHaveBeenCalledTimes(2);
+            expect(sdk.space.getEntries).toHaveBeenLastCalledWith({
+                content_type: 'content-type-id',
+                'fields.slug-id.en-US': '123',
+                limit: 0,
+                'sys.id[ne]': 'entry-id',
+                'sys.publishedAt[exists]': true
+            });
+            expect(queryByText('This slug has already been published in another entry')).not.toBeInTheDocument();
+        });
+    });
+    describe('should react to title changes', ()=>{
+        it('when field is disabled', async ()=>{
+            const { field , titleField , sdk  } = createMocks({
+                field: '',
+                titleField: ''
+            });
+            (0, _react1.render)(_react.createElement(_SlugEditor.SlugEditor, {
+                field: field,
+                baseSdk: sdk,
+                isInitiallyDisabled: true
+            }));
+            await (0, _react1.wait)();
+            expect(field.setValue).toHaveBeenCalled();
+            expect(titleField.onValueChanged).toHaveBeenCalledWith('en-US', expect.any(Function));
+            expect(sdk.space.getEntries).toHaveBeenCalled();
+            expect(sdk.entry.fields['title-id'].getValue).toHaveBeenCalledTimes(1);
+            expect(sdk.entry.getSys).toHaveBeenCalledTimes(2);
+        });
+        it('should generate unique value with date if title is empty', async ()=>{
+            const { field , titleField , sdk  } = createMocks({
+                field: '',
+                titleField: ''
+            });
+            (0, _react1.render)(_react.createElement(_SlugEditor.SlugEditor, {
+                field: field,
+                baseSdk: sdk,
+                isInitiallyDisabled: false
+            }));
+            await (0, _react1.wait)();
+            expect(titleField.onValueChanged).toHaveBeenCalledWith('en-US', expect.any(Function));
+            expect(field.setValue).toHaveBeenCalledTimes(1);
+            expect(field.setValue).toHaveBeenLastCalledWith('untitled-entry-2020-01-24-at-15-33-47');
+            await sdk.entry.fields['title-id'].setValue('Hello world!');
+            await (0, _react1.wait)();
+            expect(field.setValue).toHaveBeenCalledTimes(2);
+            expect(field.setValue).toHaveBeenLastCalledWith('hello-world');
+            expect(sdk.space.getEntries).toHaveBeenCalledTimes(2);
+            await sdk.entry.fields['title-id'].setValue('фраза написанная по русски');
+            await (0, _react1.wait)();
+            expect(field.setValue).toHaveBeenCalledTimes(3);
+            expect(field.setValue).toHaveBeenLastCalledWith('fraza-napisannaya-po-russki');
+            expect(sdk.space.getEntries).toHaveBeenCalledTimes(3);
+        });
+        it('should generate value from title if it is not empty', async ()=>{
+            const { field , titleField , sdk  } = createMocks({
+                field: '',
+                titleField: 'This is initial title value'
+            });
+            (0, _react1.render)(_react.createElement(_SlugEditor.SlugEditor, {
+                field: field,
+                baseSdk: sdk,
+                isInitiallyDisabled: false
+            }));
+            await (0, _react1.wait)();
+            expect(titleField.onValueChanged).toHaveBeenCalledWith('en-US', expect.any(Function));
+            expect(field.setValue).toHaveBeenCalledTimes(1);
+            expect(field.setValue).toHaveBeenLastCalledWith('this-is-initial-title-value');
+            await sdk.entry.fields['title-id'].setValue('Hello world!');
+            await (0, _react1.wait)();
+            expect(field.setValue).toHaveBeenCalledTimes(2);
+            expect(field.setValue).toHaveBeenLastCalledWith('hello-world');
+            expect(sdk.space.getEntries).toHaveBeenCalledTimes(2);
+        });
+        it('should stop tracking value after user intentionally changes slug value', async ()=>{
+            const { field , titleField , sdk  } = createMocks({
+                field: '',
+                titleField: ''
+            });
+            const { getByTestId  } = (0, _react1.render)(_react.createElement(_SlugEditor.SlugEditor, {
+                field: field,
+                baseSdk: sdk,
+                isInitiallyDisabled: false
+            }));
+            await (0, _react1.wait)();
+            await sdk.entry.fields['title-id'].setValue('Hello world!');
+            await (0, _react1.wait)();
+            expect(titleField.onValueChanged).toHaveBeenCalledWith('en-US', expect.any(Function));
+            expect(field.setValue).toHaveBeenCalledTimes(2);
+            expect(field.setValue).toHaveBeenCalledWith('untitled-entry-2020-01-24-at-15-33-47');
+            expect(field.setValue).toHaveBeenLastCalledWith('hello-world');
+            expect(sdk.space.getEntries).toHaveBeenCalledTimes(2);
+            _react1.fireEvent.change(getByTestId('cf-ui-text-input'), {
+                target: {
+                    value: 'new-custom-slug'
+                }
+            });
+            await (0, _react1.wait)();
+            expect(field.setValue).toHaveBeenCalledTimes(3);
+            expect(field.setValue).toHaveBeenLastCalledWith('new-custom-slug');
+            await sdk.entry.fields['title-id'].setValue('I decided to update my title');
+            await (0, _react1.wait)();
+            expect(field.setValue).toHaveBeenCalledTimes(3);
+            await sdk.entry.fields['title-id'].setValue('I decided to update my title again');
+            await (0, _react1.wait)();
+            expect(field.setValue).toHaveBeenCalledTimes(3);
+        });
+        it('should start tracking again after potential slug equals real one', async ()=>{
+            const { field , sdk  } = createMocks({
+                field: '',
+                titleField: ''
+            });
+            const { getByTestId  } = (0, _react1.render)(_react.createElement(_SlugEditor.SlugEditor, {
+                field: field,
+                baseSdk: sdk,
+                isInitiallyDisabled: false
+            }));
+            await (0, _react1.wait)();
+            await sdk.entry.fields['title-id'].setValue('ABC DEF');
+            await (0, _react1.wait)();
+            expect(field.setValue).toHaveBeenLastCalledWith('abc-def');
+            expect(field.setValue).toHaveBeenCalledTimes(2);
+            _react1.fireEvent.change(getByTestId('cf-ui-text-input'), {
+                target: {
+                    value: 'abc'
+                }
+            });
+            await sdk.entry.fields['title-id'].setValue('ABC D');
+            await (0, _react1.wait)();
+            expect(field.setValue).toHaveBeenLastCalledWith('abc');
+            expect(field.setValue).toHaveBeenCalledTimes(3);
+            await sdk.entry.fields['title-id'].setValue('ABC');
+            await sdk.entry.fields['title-id'].setValue('ABC ABC');
+            await (0, _react1.wait)();
+            expect(field.setValue).toHaveBeenLastCalledWith('abc-abc');
+            expect(field.setValue).toHaveBeenCalledTimes(4);
+            await (0, _react1.wait)();
+        });
+    });
+    describe('for non default locales', ()=>{
+        it('locale is not optional and has no fallback then it should track default locale changes & current locale changes', async ()=>{
+            const { sdk , field , titleField  } = createMocks();
+            field.locale = 'ru-RU';
+            field.required = false;
+            sdk.locales.available = [
+                'de-DE',
+                'ru-RU'
+            ];
+            sdk.locales.default = 'de-DE';
+            sdk.locales.optional = {
+                'de-DE': false,
+                'ru-RU': false
+            };
+            sdk.locales.fallbacks = {
+                'de-DE': undefined,
+                'ru-RU': undefined
+            };
+            (0, _react1.render)(_react.createElement(_SlugEditor.SlugEditor, {
+                field: field,
+                baseSdk: sdk,
+                isInitiallyDisabled: false
+            }));
+            await (0, _react1.wait)();
+            expect(field.setValue).toHaveBeenCalledWith('untitled-entry-2020-01-24-at-15-33-47');
+            expect(titleField.onValueChanged).toHaveBeenCalledWith('ru-RU', expect.any(Function));
+            expect(titleField.onValueChanged).toHaveBeenCalledWith('de-DE', expect.any(Function));
+        });
+        it('locale is optional and has a fallback then it should track only current locale changes', async ()=>{
+            const { sdk , field , titleField  } = createMocks();
+            field.locale = 'ru-RU';
+            field.required = false;
+            sdk.locales.available = [
+                'de-DE',
+                'ru-RU'
+            ];
+            sdk.locales.default = 'de-DE';
+            sdk.locales.optional = {
+                'de-DE': false,
+                'ru-RU': true
+            };
+            sdk.locales.fallbacks = {
+                'de-DE': undefined,
+                'ru-RU': 'de-DE'
+            };
+            (0, _react1.render)(_react.createElement(_SlugEditor.SlugEditor, {
+                field: field,
+                baseSdk: sdk,
+                isInitiallyDisabled: false
+            }));
+            await (0, _react1.wait)();
+            expect(field.setValue).not.toHaveBeenCalled();
+            expect(titleField.onValueChanged).toHaveBeenCalledWith('ru-RU', expect.any(Function));
+            expect(titleField.onValueChanged).not.toHaveBeenCalledWith('de-DE', expect.any(Function));
+        });
+    });
+    it('slug suggestion is limited to 75 symbols', async ()=>{
+        const { field , sdk  } = createMocks({
+            field: '',
+            titleField: ''
+        });
+        (0, _react1.render)(_react.createElement(_SlugEditor.SlugEditor, {
+            field: field,
+            baseSdk: sdk,
+            isInitiallyDisabled: false
+        }));
+        await (0, _react1.wait)();
+        await sdk.entry.fields['title-id'].setValue('a'.repeat(80));
+        await (0, _react1.wait)();
+        const expectedSlug = 'a'.repeat(75);
+        expect(field.setValue).toHaveBeenLastCalledWith(expectedSlug);
+    });
+    it('slug suggestion does not contain cut-off words', async ()=>{
+        const { field , sdk  } = createMocks({
+            field: '',
+            titleField: ''
+        });
+        (0, _react1.render)(_react.createElement(_SlugEditor.SlugEditor, {
+            field: field,
+            baseSdk: sdk,
+            isInitiallyDisabled: false
+        }));
+        await (0, _react1.wait)();
+        await sdk.entry.fields['title-id'].setValue(`one two three ${'a'.repeat(80)}`);
+        await (0, _react1.wait)();
+        const expectedSlug = 'one-two-three';
+        expect(field.setValue).toHaveBeenLastCalledWith(expectedSlug);
+    });
+    it('should subscribe for changes in custom field id', async ()=>{
+        const { field , titleField , descriptionField , sdk  } = createMocks({
+            field: '',
+            titleField: 'This is initial title value',
+            descriptionField: 'This is initial description value'
+        });
+        (0, _react1.render)(_react.createElement(_SlugEditor.SlugEditor, {
+            field: field,
+            baseSdk: sdk,
+            isInitiallyDisabled: false,
+            parameters: {
+                instance: {
+                    trackingFieldId: 'description-id'
+                }
+            }
+        }));
+        await (0, _react1.wait)();
+        expect(titleField.onValueChanged).not.toHaveBeenCalled();
+        expect(descriptionField.onValueChanged).toHaveBeenCalledWith('en-US', expect.any(Function));
+        expect(field.setValue).toHaveBeenCalledTimes(1);
+        expect(field.setValue).toHaveBeenLastCalledWith('this-is-initial-description-value');
+        await sdk.entry.fields['description-id'].setValue('Hello world!');
+        await (0, _react1.wait)();
+        expect(field.setValue).toHaveBeenCalledTimes(2);
+        expect(field.setValue).toHaveBeenLastCalledWith('hello-world');
+        expect(sdk.space.getEntries).toHaveBeenCalledTimes(2);
+    });
+});