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

package/test/renderers/MaterialAllOfRenderer.test.tsx

@@ -26,7 +26,7 @@ import './MatchMediaMock';
 import React from 'react';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { ControlElement } from '@jsonforms/core';
 import { MaterialAllOfRenderer, materialRenderers } from '../../src';
 import { JsonForms, JsonFormsStateProvider } from '@jsonforms/react';

package/test/renderers/MaterialAnyOfRenderer.test.tsx

@@ -26,7 +26,7 @@ import './MatchMediaMock';
 import React from 'react';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import {
   ControlElement
 } from '@jsonforms/core';
@@ -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/MaterialAnyOfStringOrEnumControl.test.tsx

@@ -26,7 +26,7 @@ import './MatchMediaMock';
 import React from 'react';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import {
   ControlElement,
   JsonSchema

package/test/renderers/MaterialArrayControl.test.tsx

@@ -33,7 +33,7 @@ import * as React from 'react';
 import MaterialArrayControlRenderer from '../../src/complex/MaterialArrayControlRenderer';
 import { materialCells, materialRenderers } from '../../src';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { JsonFormsStateProvider, StatelessRenderer } from '@jsonforms/react';
 import { initCore, TestEmitter } from './util';
 

package/test/renderers/MaterialArrayLayout.test.tsx

@@ -34,9 +34,9 @@ import {
   materialArrayLayoutTester
 } from '../../src/layouts';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { JsonForms, JsonFormsStateProvider } from '@jsonforms/react';
-import { Accordion } from '@material-ui/core';
+import { Accordion } from '@mui/material';
 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,13 +300,13 @@ describe('Material array layout', () => {
     // down button
     expect(
       wrapper
-        .find('ExpandPanelRenderer')
+        .find('Memo(ExpandPanelRendererComponent)')
         .at(0)
         .find('button')
         .find({ 'aria-label': 'Move down' }).length
     ).toBe(1);
   });
-  it('should move item up if up button is presses', () => {
+  it('should move item up if up button is presses', (done) => {
     const onChangeData: any = {
       data: undefined
     };
@@ -326,24 +326,28 @@ 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' });
     upButton.simulate('click');
-    expect(onChangeData.data).toEqual([
-      {
-        message: 'Yolo',
-        message2: 'Yolo 2'
-      },
-      {
-        message: 'El Barto was here',
-        message2: 'El Barto was here 2',
-        done: true
-      }
-    ]);
+    // events are debounced for some time, so let's wait
+    setTimeout(() => {
+      expect(onChangeData.data).toEqual([
+        {
+          message: 'Yolo',
+          message2: 'Yolo 2'
+        },
+        {
+          message: 'El Barto was here',
+          message2: 'El Barto was here 2',
+          done: true
+        }
+      ]);
+      done();
+    }, 50);
   });
-  it('shoud move item down if down button is pressed', () => {
+  it('should move item down if down button is pressed', (done) => {
     const onChangeData: any = {
       data: undefined
     };
@@ -363,22 +367,25 @@ 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' });
     upButton.simulate('click');
-    expect(onChangeData.data).toEqual([
-      {
-        message: 'Yolo',
-        message2: 'Yolo 2'
-      },
-      {
-        message: 'El Barto was here',
-        message2: 'El Barto was here 2',
-        done: true
-      }
-    ]);
+    // events are debounced for some time, so let's wait
+    setTimeout(() => {
+      expect(onChangeData.data).toEqual([
+        {
+          message: 'Yolo',
+          message2: 'Yolo 2'
+        },
+        {
+          message: 'El Barto was here',
+          message2: 'El Barto was here 2',
+          done: true
+        }
+      ]); done();
+    }, 50);
   });
   it('should have up button disabled for first element', () => {
     wrapper = mount(
@@ -394,7 +401,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 +421,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' });

package/test/renderers/MaterialBooleanCell.test.tsx

@@ -35,7 +35,7 @@ import * as ReactDOM from 'react-dom';
 import { materialRenderers } from '../../src';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import { initCore, TestEmitter } from './util';
 

package/test/renderers/MaterialBooleanToggleCell.test.tsx

@@ -36,9 +36,10 @@ import * as ReactDOM from 'react-dom';
 import { materialRenderers } from '../../src';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import { initCore, TestEmitter } from './util';
+import { Switch } from '@mui/material';
 
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -236,7 +237,7 @@ describe('Material boolean toggle cell', () => {
     );
 
     // Make sure a toggle is rendered by checking for the thumb element
-    expect(wrapper.find('.MuiSwitch-thumb')).toHaveLength(1);
+    expect(wrapper.find(Switch)).toHaveLength(1);
 
     const input = wrapper.find('input').first();
     expect(input.props().type).toBe('checkbox');

package/test/renderers/MaterialBooleanToggleControl.test.tsx

@@ -36,9 +36,10 @@ import * as ReactDOM from 'react-dom';
 import { materialRenderers } from '../../src';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import { initCore, TestEmitter } from './util';
+import { Switch } from '@mui/material';
 
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -241,7 +242,7 @@ describe('Material boolean toggle control', () => {
     );
 
     // Make sure a toggle is rendered by checking for the thumb element
-    expect(wrapper.find('.MuiSwitch-thumb')).toHaveLength(1);
+    expect(wrapper.find(Switch)).toHaveLength(1);
 
     const input = wrapper.find('input').first();    
     expect(input.props().type).toBe('checkbox');

package/test/renderers/MaterialCategorizationLayout.test.tsx

@@ -39,8 +39,8 @@ import MaterialCategorizationLayoutRenderer, {
   materialCategorizationTester
 } from '../../src/layouts/MaterialCategorizationLayout';
 import { MaterialLayoutRenderer, materialRenderers } from '../../src';
-import { Tab, Tabs } from '@material-ui/core';
-import Adapter from 'enzyme-adapter-react-16';
+import { Tab, Tabs } from '@mui/material';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { initCore } from './util';
 
 Enzyme.configure({ adapter: new Adapter() });
@@ -270,7 +270,7 @@ describe('Material categorization layout', () => {
 
     const beforeClick = wrapper.find(Tabs).props().value;
     wrapper
-      .find(Tab)
+      .find('button[role="tab"]')
       .at(1)
       .simulate('click');
     const afterClick = wrapper.find(Tabs).props().value;
@@ -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('button[role="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

@@ -39,8 +39,8 @@ import MaterialCategorizationStepperLayoutRenderer, {
   materialCategorizationStepperTester
 } from '../../src/layouts/MaterialCategorizationStepperLayout';
 import { MaterialLayoutRenderer, materialRenderers } from '../../src';
-import { Button, Step, StepButton, Stepper } from '@material-ui/core';
-import Adapter from 'enzyme-adapter-react-16';
+import { Button, Step, Stepper } from '@mui/material';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { initCore } from './util';
 
 Enzyme.configure({ adapter: new Adapter() });
@@ -281,7 +281,7 @@ describe('Material categorization stepper layout', () => {
     );
     const beforeClick = wrapper.find(Stepper).props().activeStep;
     wrapper
-      .find(StepButton)
+      .find('button')
       .at(1)
       .simulate('click');
     const afterClick = wrapper.find(Stepper).props().activeStep;
@@ -422,7 +422,7 @@ describe('Material categorization stepper layout', () => {
     const isPrevButtonEnabledBeforeClick = !wrapper.find(Button).at(1).props().disabled;
     const isNextButtonEnabledBeforeClick = !wrapper.find(Button).at(0).props().disabled;
     wrapper
-      .find(StepButton)
+      .find('button')
       .at(1)
       .simulate('click');
     const isPrevButtonEnabledAfterClick = !wrapper.find(Button).at(1).props().disabled;
@@ -489,8 +489,8 @@ describe('Material categorization stepper layout', () => {
     );
     const activeStepBeforeClick = wrapper.find(Stepper).props().activeStep;
     wrapper
-      .find(Button)
-      .at(0)
+      .find('button')
+      .at(4)
       .simulate('click');
     const activeStepAfterClick = wrapper.find(Stepper).props().activeStep;
 
@@ -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('button')
+      .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/MaterialDateCell.test.tsx

@@ -35,7 +35,7 @@ import MaterialDateCell, {
 import { materialRenderers } from '../../src';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { initCore, TestEmitter } from './util';
 
 Enzyme.configure({ adapter: new Adapter() });

package/test/renderers/MaterialDateControl.test.tsx

@@ -34,7 +34,7 @@ import * as React from 'react';
 import { materialRenderers } from '../../src';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import { initCore, TestEmitter } from './util';
 
@@ -202,7 +202,8 @@ describe('Material date control', () => {
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
-    input.simulate('change', { target: { value: '1961-04-12' } });
+    (input.getDOMNode() as HTMLInputElement).value = '1961-04-12';
+    input.simulate('change', input);
     expect(onChangeData.data.foo).toBe('1961-04-12');
   });
 
@@ -372,7 +373,8 @@ describe('Material date control', () => {
     const input = wrapper.find('input').first();
     expect(input.props().value).toBe('1980/06');
 
-    input.simulate('change', { target: { value: '1961/04' } });
+    (input.getDOMNode() as HTMLInputElement).value = '1961/04';
+    input.simulate('change', input);
     expect(onChangeData.data.foo).toBe('04---1961');
   });
 });

package/test/renderers/MaterialDateTimeControl.test.tsx

@@ -35,7 +35,7 @@ import dayjs from 'dayjs';
 import { materialRenderers } from '../../src';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import { initCore, TestEmitter } from './util';
 
@@ -205,7 +205,8 @@ describe('Material date time control', () => {
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
-    input.simulate('change', { target: { value: '1961-12-94 20:15' } });
+    (input.getDOMNode() as HTMLInputElement).value ='1961-12-94 20:15'; 
+    input.simulate('change', input);
     expect(onChangeData.data.foo).toBe(
       dayjs('1961-12-94 20:15').format()
     );
@@ -378,7 +379,8 @@ describe('Material date time control', () => {
     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' } });
+    (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');
   });
 });

package/test/renderers/MaterialEnumArrayRenderer.test.tsx

@@ -2,7 +2,7 @@ import './MatchMediaMock';
 import { ControlElement, NOT_APPLICABLE } from '@jsonforms/core';
 import { JsonForms } from '@jsonforms/react';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import React from 'react';
 import {
   materialEnumArrayRendererTester,
@@ -116,8 +116,8 @@ describe('EnumArrayControl', () => {
     expect(labels.last().text()).toBe('Bar');
   });
 
-  test('oneOf items - updates data', () => {
-    let myData = undefined;
+  test('oneOf items - updates data', (done) => {
+    let myData: any = undefined;
     wrapper = mount(
       <JsonForms
         schema={oneOfSchema}
@@ -131,7 +131,11 @@ describe('EnumArrayControl', () => {
     );
     const input = wrapper.find('input').first();
     input.simulate('change', { target: { checked: true } });
-    expect(myData).toStrictEqual(['foo']);
+    // events are debounced for some time, so let's wait
+    setTimeout(() => {
+      expect(myData).toStrictEqual(['foo']);
+      done();
+    }, 50);
   });
 
   test('enum items - renders', () => {
@@ -177,8 +181,8 @@ describe('EnumArrayControl', () => {
     expect(labels.at(2).text()).toBe('C');
   });
 
-  test('enum items - updates data', () => {
-    let myData = undefined;
+  test('enum items - updates data', (done) => {
+    let myData: any = undefined;
     wrapper = mount(
       <JsonForms
         schema={enumSchema}
@@ -192,6 +196,10 @@ describe('EnumArrayControl', () => {
     );
     const input = wrapper.find('input').first();
     input.simulate('change', { target: { checked: true } });
-    expect(myData).toStrictEqual(['a']);
+    // events are debounced for some time, so let's wait
+    setTimeout(() => {
+      expect(myData).toStrictEqual(['a']);
+      done();
+    }, 50);
   });
 });

package/test/renderers/MaterialEnumCell.test.tsx

@@ -33,7 +33,7 @@ import MaterialEnumCell, {
 import { materialRenderers } from '../../src';
 
 import Enzyme, { mount } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import { initCore } from './util';
 

package/test/renderers/MaterialGroupLayout.test.tsx

@@ -25,7 +25,7 @@
 import './MatchMediaMock';
 import * as React from 'react';
 import Enzyme, { mount } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import MaterialGroupLayout from '../../src/layouts/MaterialGroupLayout';
 import { MaterialLayoutRenderer } from '../../src/util/layout';
 

package/test/renderers/MaterialInputControl.test.tsx

@@ -25,7 +25,7 @@
 import './MatchMediaMock';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
 import { materialRenderers } from '../../src';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import * as React from 'react';
 import {
   ControlElement,
@@ -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', () => {