@jsonforms/material-renderers 3.0.0 → 3.1.0-alpha.1

package/test/renderers/MaterialDateTimeControl.test.tsx

@@ -1,417 +0,0 @@
-/*
-  The MIT License
-
-  Copyright (c) 2017-2019 EclipseSource Munich
-  https://github.com/eclipsesource/jsonforms
-
-  Permission is hereby granted, free of charge, to any person obtaining a copy
-  of this software and associated documentation files (the "Software"), to deal
-  in the Software without restriction, including without limitation the rights
-  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-  copies of the Software, and to permit persons to whom the Software is
-  furnished to do so, subject to the following conditions:
-
-  The above copyright notice and this permission notice shall be included in
-  all copies or substantial portions of the Software.
-
-  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-  THE SOFTWARE.
-*/
-import './MatchMediaMock';
-import React from 'react';
-import {
-  ControlElement,
-  NOT_APPLICABLE,
-} from '@jsonforms/core';
-import MaterialDateTimeControl, {
-  materialDateTimeControlTester
-} from '../../src/controls/MaterialDateTimeControl';
-import dayjs from 'dayjs';
-import { materialRenderers } from '../../src';
-
-import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import { JsonFormsStateProvider } from '@jsonforms/react';
-import { initCore, TestEmitter } from './util';
-
-Enzyme.configure({ adapter: new Adapter() });
-
-const data = { foo: dayjs('1980-04-04 13:37').format() };
-const schema = {
-  type: 'object',
-  properties: {
-    foo: {
-      type: 'string',
-      format: 'date-time'
-    }
-  }
-};
-const uischema: ControlElement = {
-  type: 'Control',
-  scope: '#/properties/foo'
-};
-
-describe('Material date time control tester', () => {
-  it('should fail', () => {
-    expect(materialDateTimeControlTester(undefined, undefined, undefined)).toBe(
-      NOT_APPLICABLE
-    );
-    expect(materialDateTimeControlTester(null, undefined, undefined)).toBe(NOT_APPLICABLE);
-    expect(materialDateTimeControlTester({ type: 'Foo' }, undefined, undefined)).toBe(
-      NOT_APPLICABLE
-    );
-    expect(materialDateTimeControlTester({ type: 'Control' }, undefined, undefined)).toBe(
-      NOT_APPLICABLE
-    );
-    expect(
-      materialDateTimeControlTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: { type: 'string' }
-        }
-      },
-      undefined)
-    ).toBe(NOT_APPLICABLE);
-    expect(
-      materialDateTimeControlTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: { type: 'string' },
-          bar: {
-            type: 'string',
-            format: 'date-time'
-          }
-        }
-      },
-      undefined)
-    ).toBe(NOT_APPLICABLE);
-  });
-
-  it('should succeed', () => {
-    expect(
-      materialDateTimeControlTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'string',
-            format: 'date-time'
-          }
-        }
-      },
-      undefined)
-    ).toBe(2);
-    expect(
-      materialDateTimeControlTester(
-        { ...uischema, options: { format: 'date-time' } },
-        {
-          type: 'object',
-          properties: {
-            foo: {
-              type: 'string'
-            }
-          }
-        },
-        undefined
-      )
-    ).toBe(2);
-  });
-});
-
-describe('Material date time control', () => {
-  let wrapper: ReactWrapper;
-
-  afterEach(() => {
-    wrapper.unmount();
-  });
-
-  it('should autofocus via option', () => {
-    const control: ControlElement = {
-      type: 'Control',
-      scope: '#/properties/foo',
-      options: {
-        focus: true
-      }
-    };
-    const core = initCore(schema, control, data);
-    wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
-        <MaterialDateTimeControl schema={schema} uischema={control} />
-      </JsonFormsStateProvider>
-    );
-    const input = wrapper.find('input').first();
-    expect(input.props().autoFocus).toBeTruthy();
-  });
-
-  it('should not autofocus via option', () => {
-    const control: ControlElement = {
-      type: 'Control',
-      scope: '#/properties/foo',
-      options: {
-        focus: false
-      }
-    };
-    const core = initCore(schema, control, data);
-    wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
-        <MaterialDateTimeControl schema={schema} uischema={uischema} />
-      </JsonFormsStateProvider>
-    );
-    const input = wrapper.find('input').first();
-    expect(input.props().autoFocus).toBeFalsy();
-  });
-
-  it('should not autofocus by default', () => {
-    const control: ControlElement = {
-      type: 'Control',
-      scope: '#/properties/foo'
-    };
-    const core = initCore(schema, uischema, data);
-    wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
-        <MaterialDateTimeControl schema={schema} uischema={control} />
-      </JsonFormsStateProvider>
-    );
-    const input = wrapper.find('input').first();
-    expect(input.props().autoFocus).toBeFalsy();
-  });
-
-  it('should render', () => {
-    const core = initCore(schema, uischema, data);
-    wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
-        <MaterialDateTimeControl schema={schema} uischema={uischema} />
-      </JsonFormsStateProvider>
-    );
-
-    const input = wrapper.find('input').first();
-    expect(input.props().type).toBe('text');
-    expect(input.props().value).toBe('1980-04-04 13:37');
-  });
-
-  it('should update via event', () => {
-    const core = initCore(schema, uischema, data);
-    const onChangeData: any = {
-      data: undefined
-    };
-    wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
-        <TestEmitter
-          onChange={({ data }) => {
-            onChangeData.data = data;
-          }}
-        />
-        <MaterialDateTimeControl schema={schema} uischema={uischema} />
-      </JsonFormsStateProvider>
-    );
-    const input = wrapper.find('input').first();
-    (input.getDOMNode() as HTMLInputElement).value ='1961-12-12 20:15'; 
-    input.simulate('change', input);
-    expect(onChangeData.data.foo).toBe(
-      dayjs('1961-12-12 20:15').format()
-    );
-  });
-
-  it('should update via action', () => {
-    const core = initCore(schema, uischema, data);
-    wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
-        <MaterialDateTimeControl schema={schema} uischema={uischema} />
-      </JsonFormsStateProvider>
-    );
-    core.data = { ...core.data, foo: dayjs('1961-12-04 20:15').format() };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
-    wrapper.update();
-    const input = wrapper.find('input').first();
-    expect(input.props().value).toBe('1961-12-04 20:15');
-  });
-
-  it('should update with null value', () => {
-    const core = initCore(schema, uischema, data);
-    wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
-        <MaterialDateTimeControl schema={schema} uischema={uischema} />
-      </JsonFormsStateProvider>
-    );
-    core.data = { ...core.data, foo: null };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
-    wrapper.update();
-    const input = wrapper.find('input').first();
-    expect(input.props().value).toBe('');
-  });
-
-  it('should not update with undefined value', () => {
-    const core = initCore(schema, uischema, data);
-    wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
-        <MaterialDateTimeControl schema={schema} uischema={uischema} />
-      </JsonFormsStateProvider>
-    );
-    core.data = { ...core.data, foo: undefined };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
-    wrapper.update();
-    const input = wrapper.find('input').first();
-    expect(input.props().value).toBe('');
-  });
-
-  it('should not update with wrong ref', () => {
-    const core = initCore(schema, uischema, data);
-    wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
-        <MaterialDateTimeControl schema={schema} uischema={uischema} />
-      </JsonFormsStateProvider>
-    );
-    core.data = { ...core.data, bar: 'Bar' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
-    wrapper.update();
-    const input = wrapper.find('input').first();
-    expect(input.props().value).toBe('1980-04-04 13:37');
-  });
-
-  it('should not update with null ref', () => {
-    const core = initCore(schema, uischema, data);
-    wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
-        <MaterialDateTimeControl schema={schema} uischema={uischema} />
-      </JsonFormsStateProvider>
-    );
-    core.data = { ...core.data, null: '12.04.1961 20:15' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
-    wrapper.update();
-    const input = wrapper.find('input').first();
-    expect(input.props().value).toBe('1980-04-04 13:37');
-  });
-
-  it('should not update with undefined ref', () => {
-    const core = initCore(schema, uischema, data);
-    wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
-        <MaterialDateTimeControl schema={schema} uischema={uischema} />
-      </JsonFormsStateProvider>
-    );
-    core.data = { ...core.data, undefined: '12.04.1961 20:15' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
-    wrapper.update();
-    const input = wrapper.find('input').first();
-    expect(input.props().value).toBe('1980-04-04 13:37');
-  });
-
-  it('can be disabled', () => {
-    const core = initCore(schema, uischema, data);
-    wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
-        <MaterialDateTimeControl
-          schema={schema}
-          uischema={uischema}
-          enabled={false}
-        />
-      </JsonFormsStateProvider>
-    );
-    const input = wrapper.find('input').first();
-    expect(input.props().disabled).toBeTruthy();
-  });
-
-  it('should be enabled by default', () => {
-    const core = initCore(schema, uischema, data);
-    wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
-        <MaterialDateTimeControl schema={schema} uischema={uischema} />
-      </JsonFormsStateProvider>
-    );
-    const input = wrapper.find('input').first();
-    expect(input.props().disabled).toBeFalsy();
-  });
-
-  it('should render input id', () => {
-    const core = initCore(schema, uischema, data);
-    wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
-        <MaterialDateTimeControl
-          schema={schema}
-          uischema={uischema}
-          id='#/properties/foo'
-        />
-      </JsonFormsStateProvider>
-    );
-    const input = wrapper.find('input').first();
-    // there is only input id at the dayjs
-    expect(input.props().id).toBe('#/properties/foo-input');
-  });
-
-  it('should be hideable', () => {
-    const core = initCore(schema, uischema, data);
-    wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
-        <MaterialDateTimeControl
-          schema={schema}
-          uischema={uischema}
-          visible={false}
-        />
-      </JsonFormsStateProvider>
-    );
-    const inputs = wrapper.find('input');
-    expect(inputs.length).toBe(0);
-  });
-
-  it('should support format customizations', () => {
-    const core = initCore(schema, uischema, {foo: dayjs('1980-04-23 13:37').format('YYYY/MM/DD h:mm a')});
-    const onChangeData: any = {
-      data: undefined
-    };
-    wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
-        <TestEmitter
-          onChange={({ data }) => {
-            onChangeData.data = data;
-          }}
-        />
-        <MaterialDateTimeControl
-          schema={schema}
-          uischema={{...uischema, options: {
-            dateTimeFormat: 'DD-MM-YY hh:mm:a',
-            dateTimeSaveFormat: 'YYYY/MM/DD h:mm a',
-            ampm: true
-          }}}
-        />
-      </JsonFormsStateProvider>
-    );
-
-    const input = wrapper.find('input').first();
-    expect(input.props().value).toBe('23-04-80 01:37:pm');
-
-    (input.getDOMNode() as HTMLInputElement).value = '10-12-05 11:22:am'; 
-    input.simulate('change', input);
-    expect(onChangeData.data.foo).toBe('2005/12/10 11:22 am');
-  });
-
-  it('should call onChange with original input value for invalid date strings', () => {
-    const core = initCore(schema, uischema);
-    const onChangeData: any = {
-      data: undefined
-    };
-    wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
-        <TestEmitter
-          onChange={({ data }) => {
-            onChangeData.data = data;
-          }}
-        />
-        <MaterialDateTimeControl
-          schema={schema}
-          uischema={{...uischema}}
-        />
-      </JsonFormsStateProvider>
-    );
-
-    const input = wrapper.find('input').first();
-    expect(input.props().value).toBe('');
-
-    (input.getDOMNode() as HTMLInputElement).value = 'invalid date string'; 
-    input.simulate('change', input);
-    expect(onChangeData.data.foo).toBe('invalid date string');
-  });
-});

package/test/renderers/MaterialEnumArrayRenderer.test.tsx

@@ -1,207 +0,0 @@
-import './MatchMediaMock';
-import { ControlElement, NOT_APPLICABLE } from '@jsonforms/core';
-import { JsonForms } from '@jsonforms/react';
-import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import React from 'react';
-import {
-  materialEnumArrayRendererTester,
-  MaterialEnumArrayRenderer
-} from '../../src';
-
-const MaterialEnumArrayRendererRegistration = {
-  tester: materialEnumArrayRendererTester,
-  renderer: MaterialEnumArrayRenderer
-};
-const data = ['bar'];
-const oneOfSchema = {
-  type: 'array',
-  items: {
-    oneOf: [
-      {
-        const: 'foo',
-        title: 'My Title'
-      },
-      {
-        const: 'bar'
-      }
-    ]
-  },
-  uniqueItems: true
-};
-
-const enumSchema = {
-  type: 'array',
-  items: {
-    type: 'string',
-    enum: ['a', 'b', 'c']
-  },
-  uniqueItems: true
-};
-const uischema: ControlElement = {
-  type: 'Control',
-  scope: '#'
-};
-
-Enzyme.configure({ adapter: new Adapter() });
-
-describe('EnumArrayControl tester', () => {
-  test('should fail', () => {
-    expect(
-      materialEnumArrayRendererTester(uischema, {
-        type: 'array',
-        items: {}
-      },
-      undefined)
-    ).toBe(NOT_APPLICABLE);
-    expect(
-      materialEnumArrayRendererTester(uischema, {
-        type: 'array',
-        items: {
-          anyOf: []
-        }
-      },
-      undefined)
-    ).toBe(NOT_APPLICABLE);
-  });
-
-  it('should succeed for schema with enum items', () => {
-    expect(materialEnumArrayRendererTester(uischema, enumSchema, undefined)).toBe(5);
-  });
-});
-
-describe('EnumArrayControl', () => {
-  let wrapper: ReactWrapper;
-
-  afterEach(() => {
-    wrapper.unmount();
-  });
-
-  test('oneOf items - renders', () => {
-    wrapper = mount(
-      <JsonForms
-        schema={oneOfSchema}
-        uischema={uischema}
-        data={undefined}
-        renderers={[MaterialEnumArrayRendererRegistration]}
-      />
-    );
-    const inputs = wrapper.find('input');
-    expect(inputs).toHaveLength(2);
-  });
-
-  test('oneOf items - renders with data', () => {
-    wrapper = mount(
-      <JsonForms
-        schema={oneOfSchema}
-        uischema={uischema}
-        data={data}
-        renderers={[MaterialEnumArrayRendererRegistration]}
-      />
-    );
-    const inputs = wrapper.find('input');
-    expect(inputs.first().props().checked).toBeFalsy();
-    expect(inputs.last().props().checked).toBeTruthy();
-  });
-
-  test('oneOf items - renders labels for options', () => {
-    wrapper = mount(
-      <JsonForms
-        schema={oneOfSchema}
-        uischema={uischema}
-        data={data}
-        renderers={[MaterialEnumArrayRendererRegistration]}
-      />
-    );
-    const labels = wrapper.find('label');
-    expect(labels.first().text()).toBe('My Title');
-    expect(labels.last().text()).toBe('bar');
-  });
-
-  test('oneOf items - updates data', (done) => {
-    let myData: any = undefined;
-    wrapper = mount(
-      <JsonForms
-        schema={oneOfSchema}
-        uischema={uischema}
-        data={myData}
-        renderers={[MaterialEnumArrayRendererRegistration]}
-        onChange={({ data }) => {
-          myData = data;
-        }}
-      />
-    );
-    const input = wrapper.find('input').first();
-    input.simulate('change', { target: { checked: true } });
-    // events are debounced for some time, so let's wait
-    setTimeout(() => {
-      expect(myData).toStrictEqual(['foo']);
-      done();
-    }, 50);
-  });
-
-  test('enum items - renders', () => {
-    wrapper = mount(
-      <JsonForms
-        schema={enumSchema}
-        uischema={uischema}
-        data={undefined}
-        renderers={[MaterialEnumArrayRendererRegistration]}
-      />
-    );
-    const inputs = wrapper.find('input');
-    expect(inputs).toHaveLength(3);
-  });
-
-  test('enum items - renders with data', () => {
-    wrapper = mount(
-      <JsonForms
-        schema={enumSchema}
-        uischema={uischema}
-        data={['b']}
-        renderers={[MaterialEnumArrayRendererRegistration]}
-      />
-    );
-    const inputs = wrapper.find('input');
-    expect(inputs.at(0).props().checked).toBeFalsy();
-    expect(inputs.at(1).props().checked).toBeTruthy();
-    expect(inputs.at(2).props().checked).toBeFalsy();
-  });
-
-  test('enum items - renders labels for options', () => {
-    wrapper = mount(
-      <JsonForms
-        schema={enumSchema}
-        uischema={uischema}
-        data={['b']}
-        renderers={[MaterialEnumArrayRendererRegistration]}
-      />
-    );
-    const labels = wrapper.find('label');
-    expect(labels.at(0).text()).toBe('a');
-    expect(labels.at(1).text()).toBe('b');
-    expect(labels.at(2).text()).toBe('c');
-  });
-
-  test('enum items - updates data', (done) => {
-    let myData: any = undefined;
-    wrapper = mount(
-      <JsonForms
-        schema={enumSchema}
-        uischema={uischema}
-        data={myData}
-        renderers={[MaterialEnumArrayRendererRegistration]}
-        onChange={({ data }) => {
-          myData = data;
-        }}
-      />
-    );
-    const input = wrapper.find('input').first();
-    input.simulate('change', { target: { checked: true } });
-    // events are debounced for some time, so let's wait
-    setTimeout(() => {
-      expect(myData).toStrictEqual(['a']);
-      done();
-    }, 50);
-  });
-});

package/test/renderers/MaterialEnumCell.test.tsx

@@ -1,88 +0,0 @@
-/*
-  The MIT License
-
-  Copyright (c) 2017-2019 EclipseSource Munich
-  https://github.com/eclipsesource/jsonforms
-
-  Permission is hereby granted, free of charge, to any person obtaining a copy
-  of this software and associated documentation files (the "Software"), to deal
-  in the Software without restriction, including without limitation the rights
-  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-  copies of the Software, and to permit persons to whom the Software is
-  furnished to do so, subject to the following conditions:
-
-  The above copyright notice and this permission notice shall be included in
-  all copies or substantial portions of the Software.
-
-  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-  THE SOFTWARE.
-*/
-import './MatchMediaMock';
-import * as React from 'react';
-import {
-  ControlElement
-} from '@jsonforms/core';
-import MaterialEnumCell, {
-  materialEnumCellTester
-} from '../../src/cells/MaterialEnumCell';
-import { materialRenderers } from '../../src';
-
-import Enzyme, { mount } from 'enzyme';
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import { JsonFormsStateProvider } from '@jsonforms/react';
-import { initCore } from './util';
-
-Enzyme.configure({ adapter: new Adapter() });
-
-const data = { nationality: 'JP' };
-const schema = {
-  type: 'string',
-  enum: ['DE', 'IT', 'JP', 'US', 'RU', 'Other']
-};
-const uischema: ControlElement = {
-  type: 'Control',
-  scope: '#/properties/nationality'
-};
-
-describe('Material enum cell tester', () => {
-  it('should succeed with matching prop type', () => {
-    const control: ControlElement = {
-      type: 'Control',
-      scope: '#/properties/nationality'
-    };
-    expect(
-      materialEnumCellTester(control, {
-        type: 'object',
-        properties: {
-          nationality: {
-            type: 'string',
-            enum: ['DE', 'IT', 'JP', 'US', 'RU', 'Other']
-          }
-        }
-      },
-      undefined)
-    ).toBe(2);
-  });
-});
-
-describe('Material enum cell', () => {
-  it('should select an item from dropdown list', () => {
-    const core = initCore(schema, uischema, data);
-    const wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
-        <MaterialEnumCell
-          schema={schema}
-          uischema={uischema}
-          path='nationality'
-        />
-      </JsonFormsStateProvider>
-    );
-    const input = wrapper.find('input');
-    expect(input.props().value).toBe('JP');
-  });
-});