@shopgate/pwa-ui-shared 7.31.5 → 7.31.6-beta.1

package/Form/Builder/spec.js

@@ -1,309 +0,0 @@
-/* eslint-disable extra-rules/no-single-line-objects */
-import React from 'react';
-import { mount } from 'enzyme';
-import FormBuilder from '.';
-import { jsx as _jsx } from "react/jsx-runtime";
-jest.mock('@shopgate/engage/components');
-describe('<FormBuilder />', () => {
-  it('should render empty form', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(FormBuilder, {
-      config: {
-        fields: {}
-      },
-      name: "foo",
-      handleUpdate: () => {}
-    }));
-    expect(wrapper).toMatchSnapshot();
-  });
-  it('should render two text fields', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(FormBuilder, {
-      config: {
-        fields: {
-          firstName: {
-            label: 'foo',
-            type: 'text',
-            visible: true
-          },
-          lastName: {
-            label: 'bar',
-            type: 'text',
-            visible: true
-          }
-        }
-      },
-      name: "foo",
-      handleUpdate: () => {}
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('TextField').length).toEqual(2);
-  });
-  it('should not render invisible field', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(FormBuilder, {
-      config: {
-        fields: {
-          firstName: {
-            label: 'foo',
-            type: 'text',
-            visible: false
-          }
-        }
-      },
-      name: "foo",
-      handleUpdate: () => {}
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('TextField').length).toEqual(0);
-  });
-  it('should hide element if setVisibilty rule applies', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(FormBuilder, {
-      config: {
-        fields: {
-          foo: {
-            label: 'foo',
-            type: 'text',
-            visible: true
-          },
-          bar: {
-            label: 'bar',
-            type: 'text',
-            actions: [{
-              type: 'setVisibility',
-              rules: [{
-                context: 'foo',
-                type: 'notIn',
-                data: ['abc']
-              }]
-            }]
-          }
-        }
-      },
-      name: "foo",
-      handleUpdate: () => {}
-    }));
-
-    // Both should be visible at the beginning.
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('TextField').length).toEqual(2);
-
-    // Simulate user input to the text field.
-    wrapper.find('input').first().simulate('change', {
-      target: {
-        value: 'abc'
-      }
-    });
-
-    // Second field should be hidden now.
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('TextField').length).toEqual(1);
-  });
-  it('should reset value when rule applies', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(FormBuilder, {
-      config: {
-        fields: {
-          foo: {
-            label: 'foo',
-            type: 'text',
-            visible: true,
-            default: 'default'
-          },
-          bar: {
-            label: 'bar',
-            type: 'text',
-            default: 'default',
-            actions: [{
-              type: 'setValue',
-              params: {
-                value: 'cheat',
-                type: 'fixed'
-              },
-              rules: [{
-                context: 'foo',
-                type: 'notIn',
-                data: ['default']
-              }]
-            }]
-          }
-        }
-      },
-      name: "foo",
-      handleUpdate: () => {}
-    }));
-
-    // Default values should be in the inputs.
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('TextField').length).toEqual(2);
-    expect(wrapper.find('input').at(0).props().value).toEqual('default');
-    expect(wrapper.find('input').at(1).props().value).toEqual('default');
-
-    // Simulate text input to trigger rule.
-    wrapper.find('input').first().simulate('change', {
-      target: {
-        value: 'abc'
-      }
-    });
-    wrapper.update();
-
-    // Second field should be hidden now.
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('TextField').length).toEqual(2);
-    expect(wrapper.find('input').at(0).props().value).toEqual('abc');
-    expect(wrapper.find('input').at(1).props().value).toEqual('cheat');
-  });
-  it('should call onChange callback when input is changed', () => {
-    const handleUpdate = jest.fn();
-    const wrapper = mount(/*#__PURE__*/_jsx(FormBuilder, {
-      config: {
-        fields: {
-          foo: {
-            label: 'foo',
-            type: 'text',
-            visible: true,
-            default: 'default'
-          }
-        }
-      },
-      name: "foo",
-      id: "foo",
-      handleUpdate: handleUpdate
-    }));
-
-    // Should call with initial state.
-    expect(wrapper).toMatchSnapshot();
-    expect(handleUpdate).toHaveBeenCalledWith({
-      foo: 'default'
-    }, false);
-    handleUpdate.mockClear();
-
-    // Update input
-    wrapper.find('input').first().simulate('change', {
-      target: {
-        value: 'abc'
-      }
-    });
-
-    // Should call with updated state.
-    expect(handleUpdate).toHaveBeenCalledWith({
-      foo: 'abc'
-    }, false);
-  });
-  describe('FormBuilder::elementChangeHandler', () => {
-    it('should take the updated state from action listener', () => {
-      const handleUpdate = jest.fn();
-      const ref = /*#__PURE__*/React.createRef();
-      mount(/*#__PURE__*/_jsx(FormBuilder, {
-        ref: ref,
-        validationErrors: [],
-        config: {
-          fields: {
-            foo: {
-              label: 'foo',
-              type: 'text',
-              visible: true,
-              default: 'default'
-            }
-          }
-        },
-        name: "foo",
-        id: "foo",
-        handleUpdate: handleUpdate
-      }));
-      ref.current.actionListener.notify = () => ({
-        formData: {
-          foo: 'bar'
-        },
-        errors: {},
-        elementVisibility: {
-          foo: true
-        }
-      });
-
-      // Trigger update
-      ref.current.elementChangeHandler('foo', 'bar');
-
-      // Test
-      expect(handleUpdate).toHaveBeenCalledWith({
-        foo: 'bar'
-      }, false);
-    });
-    it('should consider backend validations', () => {
-      // Create mocked Form builder.
-      const handleUpdate = jest.fn();
-      const ref = /*#__PURE__*/React.createRef();
-      mount(/*#__PURE__*/_jsx(FormBuilder, {
-        ref: ref,
-        validationErrors: [{}],
-        config: {
-          fields: {
-            foo: {
-              label: 'foo',
-              type: 'text',
-              visible: true,
-              default: 'default'
-            }
-          }
-        },
-        name: "foo",
-        id: "foo",
-        handleUpdate: handleUpdate
-      }));
-      ref.current.actionListener.notify = () => ({
-        formData: {
-          foo: 'bar'
-        },
-        errors: {},
-        elementVisibility: {
-          foo: true
-        }
-      });
-
-      // Trigger update
-      ref.current.elementChangeHandler('foo', 'bar');
-
-      // Test
-      expect(handleUpdate).toHaveBeenCalledWith({
-        foo: 'bar'
-      }, true);
-    });
-  });
-  describe('FormBuilder::elementSortFunc', () => {
-    const builder = new FormBuilder({
-      validationErrors: [{}],
-      config: {
-        fields: {}
-      },
-      handleUpdate: jest.fn()
-    });
-    const field1 = {
-      id: 'foo',
-      label: 'foo'
-    };
-    const field2 = {
-      id: 'foo2',
-      label: 'foo2'
-    };
-    it('should keep sortOrder for undefined', () => {
-      expect([field2, field1].sort(builder.elementSortFunc)).toEqual([field2, field1]);
-    });
-    it('should sort elements', () => {
-      const fields = [{
-        ...field1,
-        sortOrder: 2
-      }, {
-        ...field2,
-        sortOrder: 1
-      }];
-      expect(fields.sort(builder.elementSortFunc)).toEqual(fields.reverse());
-    });
-    it('should keep sortOrder', () => {
-      const fields = [{
-        ...field2,
-        sortOrder: 1
-      }, {
-        ...field1,
-        sortOrder: 2
-      }];
-      expect(fields.sort(builder.elementSortFunc)).toEqual([].concat(fields));
-    });
-  });
-});
-/* eslint-enable extra-rules/no-single-line-objects */

package/Form/InfoField/spec.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import InfoField from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-describe('<InfoField>', () => {
-  it('should render info field', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(InfoField, {
-      children: "Some info text"
-    }));
-    expect(wrapper).toMatchSnapshot();
-  });
-});

package/Form/Password/spec.js

@@ -1,39 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Password from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-const inputProps = {
-  name: 'test-input'
-};
-describe('<Password>', () => {
-  it('should render a password field', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(Password, {
-      ...inputProps
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('input[type="password"]').length).toBe(1);
-  });
-  it('should trigger the onChange callback', () => {
-    const onChangeMock = jest.fn();
-    const wrapper = mount(/*#__PURE__*/_jsx(Password, {
-      ...inputProps,
-      onChange: onChangeMock
-    }));
-    wrapper.find('input').simulate('change', {
-      target: {
-        value: 'a'
-      }
-    });
-    expect(onChangeMock).toHaveBeenCalledTimes(2);
-    expect(wrapper.find('input').props().value).toEqual('a');
-  });
-  it('should toggle password visibility', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(Password, {
-      ...inputProps
-    }));
-    const input = wrapper.find('ToggleIcon');
-    expect(wrapper.find('input[type="password"]').length).toBe(1);
-    input.simulate('click');
-    expect(wrapper.find('input[type="text"]').length).toBe(1);
-  });
-});

package/Form/RadioGroup/spec.js

@@ -1,97 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import RadioItem from "./components/Item";
-import RadioGroup from '.';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const defProps = {
-  name: 'radio'
-};
-jest.mock('@shopgate/engage/components');
-describe('<RadioGroup />', () => {
-  it('should render empty group', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(RadioGroup, {
-      ...defProps
-    }));
-    expect(wrapper).toMatchSnapshot();
-  });
-  it('should render column group with items', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(RadioGroup, {
-      ...defProps,
-      children: /*#__PURE__*/_jsx(RadioItem, {
-        name: "foo",
-        label: "foo"
-      })
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(RadioItem).length).toEqual(1);
-    expect(typeof wrapper.find(RadioItem).prop('onChange')).toEqual('function');
-  });
-  it('should render rows group with items', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(RadioGroup, {
-      ...defProps,
-      direction: "rows",
-      children: /*#__PURE__*/_jsx(RadioItem, {
-        name: "foo",
-        label: "foo"
-      })
-    }));
-    expect(wrapper).toMatchSnapshot();
-  });
-  it('should use default value', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(RadioGroup, {
-      ...defProps,
-      value: "foo",
-      children: /*#__PURE__*/_jsx(RadioItem, {
-        name: "foo",
-        label: "foo"
-      })
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(RadioItem).length).toEqual(1);
-    expect(wrapper.find(RadioItem).prop('checked')).toEqual(true);
-  });
-  it('should have on value at a time', () => {
-    const wrapper = mount(/*#__PURE__*/_jsxs(RadioGroup, {
-      ...defProps,
-      children: [/*#__PURE__*/_jsx(RadioItem, {
-        name: "foo",
-        label: "foo"
-      }), /*#__PURE__*/_jsx(RadioItem, {
-        name: "bar",
-        label: "bar"
-      })]
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(RadioItem).length).toEqual(2);
-    const radio1 = wrapper.find(RadioItem).at(0).find('input');
-    const radio2 = wrapper.find(RadioItem).at(1).find('input');
-
-    // First element value
-    radio1.simulate('change');
-    wrapper.update();
-    expect(wrapper.find(RadioItem).at(0).prop('checked')).toEqual(true);
-    expect(wrapper.find(RadioItem).at(1).prop('checked')).toEqual(false);
-
-    // Second element value
-    radio2.simulate('change');
-    wrapper.update();
-    expect(wrapper.find(RadioItem).at(0).prop('checked')).toEqual(false);
-    expect(wrapper.find(RadioItem).at(1).prop('checked')).toEqual(true);
-  });
-  it('should call onChange callback', () => {
-    const onChange = jest.fn();
-    const wrapper = mount(/*#__PURE__*/_jsx(RadioGroup, {
-      ...defProps,
-      onChange: onChange,
-      children: /*#__PURE__*/_jsx(RadioItem, {
-        name: "foo",
-        label: "foo"
-      })
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(RadioItem).length).toEqual(1);
-    const radio = wrapper.find(RadioItem).at(0).find('input');
-    radio.simulate('change');
-    expect(onChange).toHaveBeenCalledWith('foo');
-  });
-});

package/Form/Select/spec.js

@@ -1,39 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Select from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-const inputProps = {
-  name: 'test-name'
-};
-describe('<Select />', () => {
-  // Simple tests for snapshots
-  const tests = {
-    'should render select with no options': {},
-    // eslint-disable-next-line extra-rules/no-single-line-objects
-    'should render select with 2 options': {
-      options: {
-        DE: 'Germany',
-        US: 'United states'
-      }
-    },
-    // eslint-disable-next-line extra-rules/no-single-line-objects
-    'should render select with 1 selected option': {
-      options: {
-        DE: 'Germany',
-        US: 'United states'
-      },
-      value: 'DE'
-    }
-  };
-  Object.keys(tests).forEach(test => {
-    it(test, () => {
-      const testFixtures = tests[test];
-      // eslint-disable-next-line extra-rules/no-single-line-objects
-      const wrapper = mount(/*#__PURE__*/_jsx(Select, {
-        ...inputProps,
-        ...testFixtures
-      }));
-      expect(wrapper).toMatchSnapshot();
-    });
-  });
-});

package/Form/SelectContextChoices/spec.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import SelectContextChoices from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-jest.mock('@shopgate/engage/a11y/components');
-jest.mock('@shopgate/engage/components');
-describe('<SelectContextChoices />', () => {
-  // Simple tests for snapshots
-  const tests = {
-    'should render select with no options': {},
-    // eslint-disable-next-line extra-rules/no-single-line-objects
-    'should render select with 2 options': {
-      options: {
-        DE: 'Germany',
-        US: 'United states'
-      }
-    },
-    // eslint-disable-next-line extra-rules/no-single-line-objects
-    'should render select with 1 selected option': {
-      options: {
-        DE: 'Germany',
-        US: 'United states'
-      },
-      value: ['DE']
-    }
-  };
-  Object.keys(tests).forEach(test => {
-    it(test, () => {
-      const testFixtures = tests[test];
-      const wrapper = shallow(/*#__PURE__*/_jsx(SelectContextChoices, {
-        ...testFixtures
-      }));
-      expect(wrapper).toMatchSnapshot();
-    });
-  });
-});

package/Form/TextField/spec.js

@@ -1,124 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import TextField from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-const inputProps = {
-  name: 'test-input'
-};
-jest.mock('@shopgate/engage/components');
-describe('<TextField>', () => {
-  it('should render a simple text field', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
-      ...inputProps
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('input').length).toBe(1);
-  });
-  it('should render the text field as password', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
-      ...inputProps,
-      password: true
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('input[type="password"]').length).toBe(1);
-  });
-  it('should render the text field with a default value', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
-      ...inputProps,
-      value: "FooBar"
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('input[value="FooBar"]').length).toBe(1);
-  });
-  it('should trigger the onChange callback', () => {
-    const onChangeMock = jest.fn();
-    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
-      ...inputProps,
-      onChange: onChangeMock
-    }));
-    wrapper.find('input').simulate('change', {
-      target: {
-        value: 'a'
-      }
-    });
-    expect(onChangeMock).toHaveBeenCalledTimes(2);
-    expect(wrapper.find('input').props().value).toEqual('a');
-  });
-  it('should receive the correct value while typing', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
-      ...inputProps
-    }));
-    const input = wrapper.find('input');
-    input.simulate('change', {
-      target: {
-        value: 'foobar'
-      }
-    });
-    expect(wrapper).toMatchSnapshot();
-    expect(input.instance().value).toBe('foobar');
-  });
-  it('should sanitize the input', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
-      ...inputProps,
-      onSanitize: value => value.toUpperCase()
-    }));
-    const input = wrapper.find('input');
-    input.simulate('change', {
-      target: {
-        value: 'foobar'
-      }
-    });
-    expect(wrapper).toMatchSnapshot();
-    expect(input.instance().value).toBe('FOOBAR');
-  });
-  it('should trigger the validation callback', () => {
-    const onValidateMock = jest.fn();
-    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
-      ...inputProps,
-      onValidate: onValidateMock
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(onValidateMock).toHaveBeenCalled();
-  });
-  it('should focus the input', () => {
-    const onFocusMock = jest.fn();
-    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
-      ...inputProps,
-      onFocusChange: onFocusMock
-    }));
-    const input = wrapper.find('SimpleInput');
-    expect(wrapper).toMatchSnapshot();
-    expect(input.instance().isFocused).toBe(false);
-    input.simulate('focus');
-    expect(input.instance().isFocused).toBe(true);
-    input.simulate('blur');
-    expect(input.instance().isFocused).toBe(false);
-  });
-  it('should show the error message', () => {
-    const errorText = 'This is an error here';
-    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
-      ...inputProps,
-      errorText: errorText
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('ErrorText').find('Text').at(0).props().string).toEqual(errorText);
-  });
-  it('should show the label', () => {
-    const label = 'This is the label';
-    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
-      ...inputProps,
-      label: label
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('Label').find('Text').props().string).toEqual(label);
-  });
-  it('should show the placeholder text', () => {
-    const placeholder = 'This is the placeholder text';
-    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
-      ...inputProps,
-      placeholder: placeholder
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('Placeholder').find('Text').at(0).props().string).toEqual(placeholder);
-  });
-});