@configuratorware/configurator-frontendgui 1.57.13 → 1.57.14

package/src/App/Services/__tests__/DesignerService.test.js

@@ -176,6 +176,117 @@ describe('Services/DesignerService', () => {
         );
     });
 
+    test('createColorizedTextContent uses styleColors when provided', () => {
+        const storeService = new (class StoreService {
+            static serviceName = 'StoreService';
+            state = {
+                fonts: [
+                    {
+                        name: 'Lobster',
+                        family: 'Lobster',
+                        isDefault: true,
+                    },
+                ],
+                designArea: { selectedDesignArea: {}, filteredDesignAreas: [] },
+                configurator: { configuration: { designdata: {} } },
+            };
+            dispatch = jest.fn();
+        })();
+        ServiceLocator.provide(storeService);
+        ServiceLocator.provide(new DesignDataService());
+
+        const service = new DesignerService();
+        const colorData = {
+            identifier: '{"color":"blue","palette":"default"}',
+            value: '#0078b8',
+        };
+        const text = service.createColorizedTextContent('bulknames', 1, {
+            withPlaceholder: false,
+            styleColors: [colorData],
+        });
+        expect(text).toContain('color: #0078b8');
+        expect(text).toContain('data-color=\'{"color":"blue","palette":"default"}\'');
+    });
+
+    test('createColorizedTextContent uses toolbar font selection when provided', () => {
+        const storeService = new (class StoreService {
+            static serviceName = 'StoreService';
+            state = {
+                fonts: [
+                    {
+                        name: 'Lobster',
+                        family: 'Lobster',
+                        isDefault: true,
+                    },
+                ],
+                designArea: { selectedDesignArea: {}, filteredDesignAreas: [] },
+                configurator: { configuration: { designdata: {} } },
+            };
+            dispatch = jest.fn();
+        })();
+        ServiceLocator.provide(storeService);
+        ServiceLocator.provide(new DesignDataService());
+
+        const service = new DesignerService();
+        const text = service.createColorizedTextContent('bulknames', 1, {
+            withPlaceholder: false,
+            fontItem: { family: 'Courier New' },
+            isBold: true,
+            isItalic: true,
+        });
+        expect(text).toContain('font-family: "Courier New";');
+        expect(text).toContain('font-weight: bold;');
+        expect(text).toContain('font-style: italic;');
+    });
+
+    test('bulk name toggle on and off keeps the same color and font styling', () => {
+        const storeService = new (class StoreService {
+            static serviceName = 'StoreService';
+            state = {
+                fonts: [
+                    {
+                        name: 'Lobster',
+                        family: 'Lobster',
+                        isDefault: true,
+                    },
+                ],
+                designArea: { selectedDesignArea: {}, filteredDesignAreas: [] },
+                configurator: { configuration: { designdata: {} } },
+            };
+            dispatch = jest.fn();
+        })();
+        ServiceLocator.provide(storeService);
+        ServiceLocator.provide(new DesignDataService());
+
+        const service = new DesignerService();
+        const styleColors = [
+            {
+                identifier: '{"color":"blue","palette":"default"}',
+                value: '#0078b8',
+            },
+        ];
+        const fontOptions = {
+            styleColors,
+            fontItem: { family: 'Georgia' },
+            isBold: true,
+            isItalic: false,
+        };
+        const bulkOn = service.createColorizedTextContent('Name1,Name2', 1, {
+            withPlaceholder: false,
+            ...fontOptions,
+        });
+        const bulkOff = service.createColorizedTextContent('Replace me', 1, {
+            withPlaceholder: true,
+            ...fontOptions,
+        });
+
+        const sharedStyle = 'color: #0078b8; font-family: "Georgia"; font-weight: bold; font-style: normal;';
+        expect(bulkOn).toContain(sharedStyle);
+        expect(bulkOff).toContain(sharedStyle);
+        expect(bulkOff).toContain('data-placeholder="true"');
+        expect(bulkOn).not.toContain('data-placeholder="true"');
+    });
+
     describe('changeTextFontItem', () => {
         const createTextMock = (overrides = {}) => ({
             type: 'Text',

package/src/App/Shared/Components/AmountInput/__tests__/AmountInput.blur.test.js

@@ -0,0 +1,249 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import AmountInput from 'App/Shared/Components/AmountInput';
+import ProductVariant from 'App/Shared/Components/ProductVariant';
+
+const sleep = ms => new Promise(r => setTimeout(r, ms));
+
+// records every value the input renders, to detect a visible revert ("flash")
+const recordRenders = wrapper => {
+    const instance = wrapper
+        .find('AmountInput')
+        .first()
+        .instance();
+    const values = [];
+    const render = instance.render.bind(instance);
+    instance.render = () => {
+        values.push(instance.state.value);
+        return render();
+    };
+    return values;
+};
+
+// mimics Shared/Containers/ProductVariant: amounts live in the parent ("redux"),
+// handleChange -> setSelectedAmount, handleMultipleAmountInputsChange -> setSelectedAmounts
+class Harness extends React.Component {
+    state = { amounts: this.props.initialAmounts };
+    calls = [];
+    handleChange = (variant, size, value) => {
+        this.calls.push(['handleChange', (size || variant).identifier, value]);
+        this.setState(s => ({ amounts: { ...s.amounts, [(size || variant).identifier]: +value } }));
+    };
+    handleMultipleAmountInputsChange = (variant, sizes) => {
+        this.calls.push(['confirm', sizes]);
+        this.setState(s => ({ amounts: { ...s.amounts, ...sizes } }));
+    };
+    render() {
+        const { amounts } = this.state;
+        const amountData = this.props.variants.map(v => ({
+            ...v,
+            amount: amounts[v.identifier] || 0,
+            sizes: v.sizes.map(size => ({ ...size, amount: amounts[size.identifier] || 0 })),
+        }));
+        return (
+            <ProductVariant
+                amountData={amountData}
+                handleChange={this.handleChange}
+                handleMultipleAmountInputsChange={this.handleMultipleAmountInputsChange}
+            />
+        );
+    }
+}
+
+const singleVariant = [{ identifier: 'mug', title: 'mug', url: '', sizes: [] }];
+const multiSizeVariant = [
+    {
+        identifier: 'shirt_red',
+        title: 'red',
+        url: '',
+        sizes: [
+            { identifier: 'shirt_red_s', size: 'Größe S', label: 'Größe S' },
+            { identifier: 'shirt_red_m', size: 'Größe M', label: 'Größe M' },
+        ],
+    },
+];
+
+const typeAndBlur = async (input, typed) => {
+    input().simulate('focus');
+    if (typed !== undefined) {
+        input().simulate('change', { target: { value: typed } });
+        await sleep(20);
+    }
+    input().simulate('blur', { target: { value: typed } });
+};
+
+describe('ProductVariant, variant without sizes (amount input with value label)', () => {
+    const setup = () => {
+        const wrapper = mount(<Harness variants={singleVariant} initialAmounts={{ mug: 5 }} />);
+        const harness = wrapper.find(Harness).instance();
+        const input = () => wrapper.find('input').first();
+        return { wrapper, harness, input };
+    };
+
+    test('L1 focus + blur without editing keeps the label and sends no change', async () => {
+        const { wrapper, harness, input } = setup();
+        expect(input().prop('value')).toMatch(/^5 /);
+        await typeAndBlur(input);
+        wrapper.update();
+        expect(input().prop('value')).toMatch(/^5 /);
+        expect(harness.calls).toEqual([]);
+    });
+
+    test('L2 editing shows the new amount with label after blur', async () => {
+        const { wrapper, harness, input } = setup();
+        await typeAndBlur(input, '6');
+        wrapper.update();
+        expect(input().prop('value')).toMatch(/^6 /);
+        expect(harness.state.amounts).toEqual({ mug: 6 });
+    });
+
+    test('L3 editing sends the amount exactly once', async () => {
+        const { harness, input } = setup();
+        await typeAndBlur(input, '6');
+        expect(harness.calls).toEqual([['handleChange', 'mug', 6]]);
+    });
+});
+
+describe('ProductVariant, variant with several sizes (amounts confirmed via button)', () => {
+    const setup = () => {
+        const wrapper = mount(<Harness variants={multiSizeVariant} initialAmounts={{}} />);
+        wrapper
+            .find('button')
+            .first()
+            .simulate('click'); // "choose size"
+        const harness = wrapper.find(Harness).instance();
+        const input = () => wrapper.find('input').first();
+        return { wrapper, harness, input };
+    };
+
+    test('M1 typed size amount stays visible after blur', async () => {
+        const { wrapper, input } = setup();
+        const renders = recordRenders(wrapper);
+        await typeAndBlur(input, '3');
+        wrapper.update();
+        expect(input().prop('value')).toBe(3);
+        expect(renders.slice(renders.indexOf(3))).not.toContain(0); // no flash back to the old amount
+    });
+
+    test('M2 refocus + blur without editing keeps the typed amount', async () => {
+        const { wrapper, input } = setup();
+        await typeAndBlur(input, '3');
+        await typeAndBlur(input);
+        wrapper.update();
+        expect(input().prop('value')).toBe(3);
+    });
+
+    test('M3 confirm commits the typed amount', async () => {
+        const { wrapper, harness, input } = setup();
+        await typeAndBlur(input, '3');
+        wrapper
+            .find('button')
+            .last()
+            .simulate('click'); // "confirm selection"
+        expect(harness.state.amounts).toEqual({ shirt_red_s: 3 });
+    });
+});
+
+describe('AmountInput with debounce (CalculationWidget / AmountSelection)', () => {
+    class Controlled extends React.Component {
+        state = { value: 5 };
+        calls = [];
+        render() {
+            return (
+                <AmountInput
+                    value={this.state.value}
+                    onChangeDebounceWait={400}
+                    onChange={value => {
+                        this.calls.push(value);
+                        this.setState({ value });
+                    }}
+                />
+            );
+        }
+    }
+    const setup = () => {
+        const wrapper = mount(<Controlled />);
+        const parent = wrapper.find(Controlled).instance();
+        const input = () => wrapper.find('input');
+        return { wrapper, parent, input };
+    };
+
+    test('D1 quick blur commits typed value once, without flashing the old value', async () => {
+        const { wrapper, parent, input } = setup();
+        const renders = recordRenders(wrapper);
+        input().simulate('focus');
+        input().simulate('change', { target: { value: '50' } });
+        input().simulate('blur', { target: { value: '50' } });
+        await sleep(500);
+        wrapper.update();
+        expect(parent.calls).toEqual([50]);
+        expect(input().prop('value')).toBe(50);
+        expect(renders.slice(renders.indexOf(50))).not.toContain(5);
+    });
+
+    test('D2 blur after debounce fired does not send a duplicate', async () => {
+        const { parent, input } = setup();
+        input().simulate('focus');
+        input().simulate('change', { target: { value: '50' } });
+        await sleep(500);
+        input().simulate('blur', { target: { value: '50' } });
+        await sleep(500);
+        expect(parent.calls).toEqual([50]);
+    });
+
+    test('D3 focus + blur without editing sends nothing', async () => {
+        const { parent, input } = setup();
+        input().simulate('focus');
+        input().simulate('blur', { target: { value: '5' } });
+        await sleep(500);
+        expect(parent.calls).toEqual([]);
+    });
+
+    test('D4 emptied field falls back to min on blur', async () => {
+        const { wrapper, parent, input } = setup();
+        input().simulate('focus');
+        input().simulate('change', { target: { value: '' } });
+        input().simulate('blur', { target: { value: '' } });
+        await sleep(500);
+        wrapper.update();
+        expect(parent.calls[parent.calls.length - 1]).toBe(0);
+        expect(input().prop('value')).toBe(0);
+    });
+
+    test('D5 values above max are clamped', async () => {
+        const { wrapper, parent, input } = setup();
+        input().simulate('focus');
+        input().simulate('change', { target: { value: '99999999' } });
+        input().simulate('blur', { target: { value: '99999999' } });
+        await sleep(500);
+        wrapper.update();
+        expect(parent.calls).toEqual([999999]);
+        expect(input().prop('value')).toBe(999999);
+    });
+
+    test('D6 readOnly input picks up prop changes while focused', () => {
+        const wrapper = mount(<AmountInput value={5} readOnly onChange={jest.fn()} />);
+        wrapper.find('input').simulate('focus');
+        wrapper.setProps({ value: 8 });
+        wrapper.update();
+        expect(wrapper.find('input').prop('value')).toBe(8);
+    });
+
+    describe('ProductVariant, clearing an amount to retype it', () => {
+        it('never sends 0 for a variant without sizes', async () => {
+            const wrapper = mount(<Harness variants={singleVariant} initialAmounts={{ mug: 5 }} />);
+            const harness = wrapper.find(Harness).instance();
+            const input = () => wrapper.find('input').first();
+
+            input().simulate('focus');
+            input().simulate('change', { target: { value: '' } });
+            await sleep(20);
+            input().simulate('change', { target: { value: '6' } });
+            await sleep(20);
+            input().simulate('blur');
+
+            expect(harness.calls).not.toContainEqual(['handleChange', 'mug', 0]);
+            expect(harness.calls).toContainEqual(['handleChange', 'mug', 6]);
+        });
+    });
+});

package/src/App/Shared/Components/AmountInput/__tests__/AmountInput.retyp.test.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import AmountInput from 'App/Shared/Components/AmountInput';
+
+const sleep = ms => new Promise(r => setTimeout(r, ms));
+
+describe('AmountInput, clearing the field to retype', () => {
+    const setup = () => {
+        const onChange = jest.fn();
+        const wrapper = mount(<AmountInput value={2} onChange={onChange} onChangeDebounceWait={10} />);
+        const input = () => wrapper.find('input').first();
+        input().simulate('focus');
+        return { wrapper, onChange, input };
+    };
+
+    it('does not send 0 while the field is empty and the user retypes', async () => {
+        const { onChange, input } = setup();
+
+        input().simulate('change', { target: { value: '' } });
+        await sleep(30);
+        input().simulate('change', { target: { value: '3' } });
+        await sleep(30);
+        input().simulate('blur');
+
+        expect(onChange).not.toHaveBeenCalledWith(0);
+        expect(onChange).toHaveBeenCalledWith(3);
+    });
+
+    it('commits 0 on blur when the field stays empty', async () => {
+        const { onChange, input } = setup();
+
+        input().simulate('change', { target: { value: '' } });
+        await sleep(30);
+        input().simulate('blur');
+
+        expect(onChange.mock.calls).toEqual([[0]]);
+    });
+
+    it('commits 0 on unmount when the field is left empty', async () => {
+        const { wrapper, onChange, input } = setup();
+
+        input().simulate('change', { target: { value: '' } });
+        await sleep(30);
+        wrapper.unmount();
+
+        expect(onChange.mock.calls).toEqual([[0]]);
+    });
+
+    it('still sends a typed 0 right away', async () => {
+        const { onChange, input } = setup();
+
+        input().simulate('change', { target: { value: '0' } });
+        await sleep(30);
+
+        expect(onChange).toHaveBeenCalledWith(0);
+    });
+});

package/src/App/Shared/Components/AmountInput/__tests__/index.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import AmountInput from '../index';
+
+describe('Shared/Components/AmountInput', () => {
+    test('typed value survives blur before debounce', async () => {
+        const onChange = jest.fn();
+        const wrapper = mount(<AmountInput value={5} onChange={onChange} onChangeDebounceWait={400} />);
+        const input = wrapper.find('input');
+        input.simulate('focus');
+        input.simulate('change', { target: { value: '50' } });
+        input.simulate('blur', { target: { value: '50' } });
+        await new Promise(r => setTimeout(r, 500));
+        expect(onChange).toHaveBeenCalledWith(50);
+    });
+});

package/src/App/Shared/Components/AmountInput/index.js

@@ -58,7 +58,7 @@ const styles = theme => ({
 
 class AmountInput extends React.Component {
     static propTypes = {
-        value: PropTypes.string,
+        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
         classes: PropTypes.object,
         inputProps: PropTypes.object,
         rootProps: PropTypes.string,
@@ -91,29 +91,22 @@ class AmountInput extends React.Component {
     };
 
     componentDidMount() {
-        const {
-            props: { value },
-        } = this;
-        this.setState({ value });
+        this.setState({ value: this.props.value });
     }
 
     componentDidUpdate(prevProps) {
-        const {
-            props: { value },
-        } = this;
-        if (prevProps.value !== value && !this.state.changeInprogress) {
-            this.updateDebounced();
+        const { value, readOnly } = this.props;
+        if (prevProps.value !== value && (readOnly || !this.state.changeInprogress)) {
+            this.setState({ value });
         }
     }
 
-    updateDebounced = debounce(() => {
-        const {
-            props: { value },
-        } = this;
-        if (value !== this.state.value) {
-            this.setState({ value });
+    componentWillUnmount() {
+        this.onChangeDebounced.cancel();
+        if (this.hasPendingChange) {
+            this.props.onChange(this.state.value === '' ? this.props.min : this.state.value);
         }
-    }, 500);
+    }
 
     validateKey = event => {
         const regEx = /^[0-9\b]+$/;
@@ -124,41 +117,52 @@ class AmountInput extends React.Component {
         }
     };
 
+    hasPendingChange = false;
+
+    // An empty field means the user is retyping: committing 0 here would drop data tied to the amount
+    // (e.g. bulk names). It is committed on blur or unmount instead.
     onChangeDebounced = debounce(() => {
-        this.props.onChange(this.state.value === '' ? 0 : this.state.value);
+        if (this.state.value === '') {
+            return;
+        }
+        this.hasPendingChange = false;
+        this.props.onChange(this.state.value);
     }, this.props.onChangeDebounceWait);
 
     onChange = ({ target: { value: inputValue } }) => {
         const { min, max } = this.props;
-        const value = !inputValue ? inputValue : Math.min(max, Math.max(min, parseInt(inputValue)));
-        this.setState(
-            {
-                value: isNaN(value) ? '' : value,
-            },
-            this.onChangeDebounced
-        );
+        const value = !inputValue ? inputValue : Math.min(max, Math.max(min, parseInt(inputValue, 10)));
+        this.hasPendingChange = true;
+        this.setState({ value: Number.isNaN(value) ? '' : value }, this.onChangeDebounced);
     };
 
     onBlur = event => {
-        const {
-            target: { value },
-        } = event;
-        const { onChange, onBlur, min, hasValueLabel } = this.props;
-        this.setState({ changeInprogress: false });
-        if (value === '') {
-            const initialValue = min;
-            this.setState({ value: initialValue });
-            onChange(initialValue);
+        const { onChange, onBlur, min, readOnly, hasValueLabel } = this.props;
+
+        if (readOnly) {
+            this.setState({ changeInprogress: false, value: this.props.value });
+            onBlur && onBlur(event);
+            return;
         }
-        if (hasValueLabel) {
-            this.updateDebounced();
+
+        this.onChangeDebounced.cancel();
+        const isCleared = this.state.value === '';
+        const shouldCommit = this.hasPendingChange || isCleared;
+        const committedValue = isCleared ? min : this.state.value;
+        this.hasPendingChange = false;
+
+        this.setState({ changeInprogress: false, value: hasValueLabel ? this.props.value : committedValue });
+        if (shouldCommit) {
+            onChange(committedValue);
         }
         onBlur && onBlur(event);
     };
 
     onFocus = event => {
-        const { onFocus } = this.props;
-        this.setState({ changeInprogress: true });
+        const { onFocus, readOnly } = this.props;
+        if (!readOnly) {
+            this.setState({ changeInprogress: true });
+        }
         onFocus && onFocus(event);
     };
 

package/src/App/Shared/Components/ProductVariant/index.js

@@ -374,8 +374,8 @@ class ProductVariant extends React.Component {
                                     {get(variant, 'sizes.length', 0) === 0 && (
                                         <AmountInput
                                             value={variant.amount + ' ' + t('amountSelection.amount')}
-                                            hasValueLabel={true}
                                             amountLabel={t('productVariant.amountLabel')}
+                                            hasValueLabel={true}
                                             onChange={this.handleChange(variant)}
                                             onClick={this.handleBulkNameForm(variant)}
                                             error={hasError(variant.identifier, error)}