@jsonforms/material-renderers 2.5.2-alpha.0 → 3.0.0-alpha.2

package/test/renderers/MaterialAnyOfRenderer.test.tsx

@@ -62,7 +62,7 @@ describe('Material anyOf renderer', () => {
 
   afterEach(() => wrapper.unmount());
 
-  it('should add an item at correct path', () => {
+  it('should add an item at correct path', (done) => {
     const schema = {
       type: 'object',
       properties: {
@@ -103,9 +103,12 @@ describe('Material anyOf renderer', () => {
     const input = wrapper.find('input').first();
     input.simulate('change', { target: { value: 'test' } });
     wrapper.update();
-    expect(onChangeData.data).toEqual({
-      value: 'test'
-    });
+    setTimeout(() => {
+      expect(onChangeData.data).toEqual({
+        value: 'test'
+      });
+      done();
+    }, 1000);
   });
 
   it('should add a "mything"', async () => {
@@ -179,7 +182,7 @@ describe('Material anyOf renderer', () => {
     expect(nrOfRowsAfterAdd.length).toBe(4);
   });
 
-  it('should switch to "yourThing" edit, then switch back, then edit', async () => {
+  it('should switch to "yourThing" edit, then switch back, then edit', async (done) => {
     const schema = {
       type: 'object',
       properties: {
@@ -260,9 +263,12 @@ describe('Material anyOf renderer', () => {
     input.simulate('change', { target: { value: 'test' } });
     wrapper.update();
 
-    expect(onChangeData.data).toEqual({
-      myThingsAndOrYourThings: [{ age: 5, name: 'test' }]
-    });
+    setTimeout(() => {
+      expect(onChangeData.data).toEqual({
+        myThingsAndOrYourThings: [{ age: 5, name: 'test' }]
+      });
+      done();
+    }, 1000);
   });
 
   it('should be hideable', () => {

package/test/renderers/MaterialArrayLayout.test.tsx

@@ -36,7 +36,7 @@ import {
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import { JsonForms, JsonFormsStateProvider } from '@jsonforms/react';
-import { ExpansionPanel } from '@material-ui/core';
+import { Accordion } from '@material-ui/core';
 import { initCore } from './util';
 
 Enzyme.configure({ adapter: new Adapter() });
@@ -292,7 +292,7 @@ describe('Material array layout', () => {
     // up button
     expect(
       wrapper
-        .find('ExpandPanelRenderer')
+        .find('Memo(ExpandPanelRendererComponent)')
         .at(0)
         .find('button')
         .find({ 'aria-label': 'Move up' }).length
@@ -300,7 +300,7 @@ describe('Material array layout', () => {
     // down button
     expect(
       wrapper
-        .find('ExpandPanelRenderer')
+        .find('Memo(ExpandPanelRendererComponent)')
         .at(0)
         .find('button')
         .find({ 'aria-label': 'Move down' }).length
@@ -326,7 +326,7 @@ describe('Material array layout', () => {
 
     // getting up button of second item in expension panel;
     const upButton = wrapper
-      .find('ExpandPanelRenderer')
+      .find('Memo(ExpandPanelRendererComponent)')
       .at(1)
       .find('button')
       .find({ 'aria-label': 'Move up' });
@@ -363,7 +363,7 @@ describe('Material array layout', () => {
 
     // getting up button of second item in expension panel;
     const upButton = wrapper
-      .find('ExpandPanelRenderer')
+      .find('Memo(ExpandPanelRendererComponent)')
       .at(0)
       .find('button')
       .find({ 'aria-label': 'Move down' });
@@ -394,7 +394,7 @@ describe('Material array layout', () => {
 
     // getting up button of second item in expension panel;
     const upButton = wrapper
-      .find('ExpandPanelRenderer')
+      .find('Memo(ExpandPanelRendererComponent)')
       .at(0)
       .find('button')
       .find({ 'aria-label': 'Move up' });
@@ -414,7 +414,7 @@ describe('Material array layout', () => {
 
     // getting up button of second item in expension panel;
     const downButton = wrapper
-      .find('ExpandPanelRenderer')
+      .find('Memo(ExpandPanelRendererComponent)')
       .at(1)
       .find('button')
       .find({ 'aria-label': 'Move down' });
@@ -426,7 +426,7 @@ describe('Material array layout', () => {
       .find(
         `#${
         wrapper
-          .find(ExpansionPanel)
+          .find(Accordion)
           .at(index)
           .props()['aria-labelledby']
         }`

package/test/renderers/MaterialBooleanToggleControl.test.tsx

@@ -244,7 +244,6 @@ describe('Material boolean toggle control', () => {
     expect(wrapper.find('.MuiSwitch-thumb')).toHaveLength(1);
 
     const input = wrapper.find('input').first();    
-    console.log('should render props', input.props());
     expect(input.props().type).toBe('checkbox');
     expect(input.props().checked).toBeTruthy();
   });

package/test/renderers/MaterialCategorizationLayout.test.tsx

@@ -372,4 +372,77 @@ describe('Material categorization layout', () => {
     const materialArrayLayout = wrapper.find(MaterialLayoutRenderer);
     expect(materialArrayLayout.props().renderers).toHaveLength(0);
   });
+
+  it('display correct content when hiding a tab', () => {
+    const data = { name : 'fo' };
+    const condition: SchemaBasedCondition = {
+      scope: '#/properties/name',
+      schema: { maxLength: 3 }
+    };
+    const nameControl: ControlElement = {
+      type: 'Control',
+      scope: '#/properties/name'
+    };
+    const uischema: Categorization = {
+      type: 'Categorization',
+      label: '',
+      options: {
+          showNavButtons: true
+      },
+      elements: [
+        {
+          type: 'Category',
+          label: 'A',
+          elements: undefined
+        },
+        {
+          type: 'Category',
+          label: 'B',
+          elements: undefined,
+          rule: {
+            effect: RuleEffect.SHOW,
+            condition: condition
+          }
+        },
+        {
+          type: 'Category',
+          label: 'C',
+          elements: [nameControl],
+          rule: {
+            effect: RuleEffect.HIDE,
+            condition: condition
+          }
+        }
+      ]
+    };
+
+    const core = initCore(fixture.schema, uischema, data);
+
+    const wrapper = mount(
+      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+        <MaterialCategorizationLayoutRenderer
+            {...layoutDefaultProps}
+            schema={fixture.schema}
+            uischema={uischema}
+        />
+      </JsonFormsStateProvider>
+    );
+    
+    wrapper
+      .find(Tab)
+      .at(1)
+      .simulate('click');
+
+    let isCategoryCshown = wrapper.find('input[type="text"]').length > 0;
+    expect(isCategoryCshown).toBe(false);
+
+    core.data = { ...core.data, name: 'Barr' };
+    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.update();
+
+    isCategoryCshown = wrapper.find('input[type="text"]').length > 0;
+    expect(isCategoryCshown).toBe(true);
+    
+    wrapper.unmount();
+  });
 });

package/test/renderers/MaterialCategorizationStepperLayout.test.tsx

@@ -561,4 +561,77 @@ describe('Material categorization stepper layout', () => {
 
     wrapper.unmount();
   });
+
+  it('display correct content when hiding a step', () => {
+    const data = { name : 'fo' };
+    const condition: SchemaBasedCondition = {
+      scope: '#/properties/name',
+      schema: { maxLength: 3 }
+    };
+    const nameControl: ControlElement = {
+      type: 'Control',
+      scope: '#/properties/name'
+    };
+    const uischema: Categorization = {
+      type: 'Categorization',
+      label: '',
+      options: {
+          showNavButtons: true
+      },
+      elements: [
+        {
+          type: 'Category',
+          label: 'A',
+          elements: undefined
+        },
+        {
+          type: 'Category',
+          label: 'B',
+          elements: undefined,
+          rule: {
+            effect: RuleEffect.SHOW,
+            condition: condition
+          }
+        },
+        {
+          type: 'Category',
+          label: 'C',
+          elements: [nameControl],
+          rule: {
+            effect: RuleEffect.HIDE,
+            condition: condition
+          }
+        }
+      ]
+    };
+
+    const core = initCore(fixture.schema, uischema, data);
+
+    const wrapper = mount(
+      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+        <MaterialCategorizationStepperLayoutRenderer
+            {...layoutDefaultProps}
+            schema={fixture.schema}
+            uischema={uischema}
+        />
+      </JsonFormsStateProvider>
+    );
+    
+    wrapper
+      .find(StepButton)
+      .at(1)
+      .simulate('click');
+
+    let isCategoryCshown = wrapper.find('input[type="text"]').length > 0;
+    expect(isCategoryCshown).toBe(false);
+
+    core.data = { ...core.data, name: 'Barr' };
+    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.update();
+
+    isCategoryCshown = wrapper.find('input[type="text"]').length > 0;
+    expect(isCategoryCshown).toBe(true);
+    
+    wrapper.unmount();
+  });
 });

package/test/renderers/MaterialDateControl.test.tsx

@@ -101,6 +101,19 @@ describe('Material date control tester', () => {
         }
       })
     ).toBe(4);
+    expect(
+      materialDateControlTester(
+        { ...uischema, options: { format: 'date' } },
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'string'
+            }
+          }
+        }
+      )
+    ).toBe(4);
   });
 });
 
@@ -333,4 +346,33 @@ describe('Material date control', () => {
     const inputs = wrapper.find('input');
     expect(inputs.length).toBe(0);
   });
+
+  it('should support format customizations', () => {
+    const core = initCore(schema, uischema, {foo: '06---1980'});
+    const onChangeData: any = {
+      data: undefined
+    };
+    wrapper = mount(
+      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+        <TestEmitter
+          onChange={({ data }) => {
+            onChangeData.data = data;
+          }}
+        />
+        <MaterialDateControl
+          schema={schema}
+          uischema={{...uischema, options: {
+            dateFormat: 'YYYY/MM',
+            dateSaveFormat: 'MM---YYYY'
+          }}}
+        />
+      </JsonFormsStateProvider>
+    );
+
+    const input = wrapper.find('input').first();
+    expect(input.props().value).toBe('1980/06');
+
+    input.simulate('change', { target: { value: '1961/04' } });
+    expect(onChangeData.data.foo).toBe('04---1961');
+  });
 });

package/test/renderers/MaterialDateTimeControl.test.tsx

@@ -31,7 +31,7 @@ import {
 import MaterialDateTimeControl, {
   materialDateTimeControlTester
 } from '../../src/controls/MaterialDateTimeControl';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { materialRenderers } from '../../src';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
@@ -41,7 +41,7 @@ import { initCore, TestEmitter } from './util';
 
 Enzyme.configure({ adapter: new Adapter() });
 
-const data = { foo: moment('1980-04-04 13:37').format() };
+const data = { foo: dayjs('1980-04-04 13:37').format() };
 const schema = {
   type: 'object',
   properties: {
@@ -102,6 +102,19 @@ describe('Material date time control tester', () => {
         }
       })
     ).toBe(2);
+    expect(
+      materialDateTimeControlTester(
+        { ...uischema, options: { format: 'date-time' } },
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'string'
+            }
+          }
+        }
+      )
+    ).toBe(2);
   });
 });
 
@@ -173,7 +186,7 @@ describe('Material date time control', () => {
 
     const input = wrapper.find('input').first();
     expect(input.props().type).toBe('text');
-    expect(input.props().value).toBe('04/04/1980 1:37 pm');
+    expect(input.props().value).toBe('1980-04-04 13:37');
   });
 
   it('should update via event', () => {
@@ -192,9 +205,9 @@ describe('Material date time control', () => {
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
-    input.simulate('change', { target: { value: '04/12/1961 8:15 pm' } });
+    input.simulate('change', { target: { value: '1961-12-94 20:15' } });
     expect(onChangeData.data.foo).toBe(
-      moment('1961-04-12 20:15').format()
+      dayjs('1961-12-94 20:15').format()
     );
   });
 
@@ -205,11 +218,11 @@ describe('Material date time control', () => {
         <MaterialDateTimeControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
-    core.data = { ...core.data, foo: moment('1961-04-12 20:15').format() };
+    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('04/12/1961 8:15 pm');
+    expect(input.props().value).toBe('1961-12-04 20:15');
   });
 
   it('should update with null value', () => {
@@ -251,7 +264,7 @@ describe('Material date time control', () => {
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
     const input = wrapper.find('input').first();
-    expect(input.props().value).toBe('04/04/1980 1:37 pm');
+    expect(input.props().value).toBe('1980-04-04 13:37');
   });
 
   it('should not update with null ref', () => {
@@ -265,7 +278,7 @@ describe('Material date time control', () => {
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
     const input = wrapper.find('input').first();
-    expect(input.props().value).toBe('04/04/1980 1:37 pm');
+    expect(input.props().value).toBe('1980-04-04 13:37');
   });
 
   it('should not update with undefined ref', () => {
@@ -279,7 +292,7 @@ describe('Material date time control', () => {
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
     const input = wrapper.find('input').first();
-    expect(input.props().value).toBe('04/04/1980 1:37 pm');
+    expect(input.props().value).toBe('1980-04-04 13:37');
   });
 
   it('can be disabled', () => {
@@ -320,7 +333,7 @@ describe('Material date time control', () => {
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
-    // there is only input id at the moment
+    // there is only input id at the dayjs
     expect(input.props().id).toBe('#/properties/foo-input');
   });
 
@@ -338,4 +351,34 @@ describe('Material date time control', () => {
     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.simulate('change', { target: { value: '10-12-05 11:22:am' } });
+    expect(onChangeData.data.foo).toBe('2005/12/10 11:22 am');
+  });
 });

package/test/renderers/MaterialInputControl.test.tsx

@@ -159,7 +159,7 @@ describe('Material input control', () => {
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
     const validation = wrapper.find('p').first();
-    expect(validation.text()).toBe('should be string');
+    expect(validation.text()).toBe('must be string');
   });
 
   it('should display multiple errors', () => {
@@ -173,7 +173,7 @@ describe('Material input control', () => {
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
     const validation = wrapper.find('p').first();
-    expect(validation.text()).toBe('should be string');
+    expect(validation.text()).toBe('must be string');
   });
 
   it('should not show any errors', () => {
@@ -283,7 +283,7 @@ describe('Material input control', () => {
       </JsonFormsStateProvider>
     );
     const label = wrapper.find('label').first();
-    expect(label.text()).toBe('Date Cell*');
+    expect(label.text()).toBe('Date Cell *');
   });
 
   it('should not display a marker for a non-required prop', () => {

package/test/renderers/MaterialIntegerCell.test.tsx

@@ -175,7 +175,7 @@ describe('Material integer cells', () => {
     expect(input.props().value).toBe(0);
   });
 
-  it('should update via input event', () => {
+  it('should update via input event', (done) => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
       data: undefined
@@ -193,10 +193,13 @@ describe('Material integer cells', () => {
 
     const input = wrapper.find('input');
     input.simulate('change', { target: { value: 13 } });
-    expect(onChangeData.data.foo).toBe(13);
+    setTimeout(() => {
+      expect(onChangeData.data.foo).toBe(13);
+      done();
+    }, 1000)
   });
 
-  it('should update via action', () => {
+  it('should update via action', (done) => {
     const core = initCore(schema, uischema, { foo: 13 });
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -206,11 +209,14 @@ describe('Material integer cells', () => {
     core.data = { ...core.data, foo: 42 };
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
-    const input = wrapper.find('input').first();
-    expect(input.props().value).toBe(42);
+    setTimeout(() => {
+      const input = wrapper.find('input').first();
+      expect(input.props().value).toBe(42);
+      done();
+    }, 1000);
   });
 
-  it('should not update with undefined value', () => {
+  it('should not update with undefined value', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -220,11 +226,14 @@ describe('Material integer cells', () => {
     core.data = { ...core.data, foo: undefined };
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
-    const input = wrapper.find('input');
-    expect(input.props().value).toBe('');
+    setTimeout(() => {
+      const input = wrapper.find('input');
+      expect(input.props().value).toBe('');
+      done();
+    }, 1000);
   });
 
-  it('should not update with null value', () => {
+  it('should not update with null value', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -234,11 +243,14 @@ describe('Material integer cells', () => {
     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('');
+    setTimeout(() => {
+      const input = wrapper.find('input').first();
+      expect(input.props().value).toBe('');
+      done();
+    }, 1000);
   });
 
-  it('should not update with wrong ref', () => {
+  it('should not update with wrong ref', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -248,11 +260,14 @@ describe('Material integer cells', () => {
     core.data = { ...core.data, bar: 11 };
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
-    const input = wrapper.find('input');
-    expect(input.props().value).toBe(42);
+    setTimeout(() => {
+      const input = wrapper.find('input');
+      expect(input.props().value).toBe(42);
+      done();
+    }, 1000);
   });
 
-  it('should not update with null ref', () => {
+  it('should not update with null ref', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -262,11 +277,14 @@ describe('Material integer cells', () => {
     core.data = { ...core.data, null: 13 };
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
-    const input = wrapper.find('input').first();
-    expect(input.props().value).toBe(42);
+    setTimeout(() => {
+      const input = wrapper.find('input');
+      expect(input.props().value).toBe(42);
+      done();
+    }, 1000);
   });
 
-  it('should not update with undefined ref', () => {
+  it('should not update with undefined ref', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -276,8 +294,11 @@ describe('Material integer cells', () => {
     core.data = { ...core.data, undefined: 13 };
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
-    const input = wrapper.find('input').first();
-    expect(input.props().value).toBe(42);
+    setTimeout(() => {
+      const input = wrapper.find('input');
+      expect(input.props().value).toBe(42);
+      done();
+    }, 1000);
   });
 
   it('can be disabled', () => {