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

package/test/renderers/MaterialTextControl.test.tsx

@@ -28,9 +28,9 @@ import Enzyme, { mount, ReactWrapper } from 'enzyme';
 import { MaterialTextControl } from '../../src/controls/MaterialTextControl';
 import { MaterialInputControl } from '../../src/controls/MaterialInputControl';
 import { MuiInputText } from '../../src/mui-controls/MuiInputText';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { ControlElement, ControlProps } from '@jsonforms/core';
-import { Input, InputAdornment } from '@material-ui/core';
+import { Input, InputAdornment } from '@mui/material';
 
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -97,7 +97,9 @@ describe('Material text control', () => {
   it('shows clear button when data exists', () => {
     const props = defaultControlProps();
     wrapper = mount(createMaterialTextControl(props));
-    wrapper.find(Input).simulate('pointerenter');
+    // call onPointerEnter prop manually as the tests seem to ignore 'pointerenter' events, 'mouseover' events work however.
+    wrapper.find(Input).props().onPointerEnter.call(this);
+    wrapper.update();
     expect(wrapper.find(InputAdornment).props().style).not.toHaveProperty('display', 'none');
   });
 
@@ -105,7 +107,9 @@ describe('Material text control', () => {
     const props = defaultControlProps();
     delete props.data;
     wrapper = mount(createMaterialTextControl(props));
-    wrapper.find(Input).simulate('pointerenter');
+    // call onPointerEnter prop manually as the tests seem to ignore 'pointerenter' events, 'mouseover' events work however.
+    wrapper.find(Input).props().onPointerEnter.call(this);
+    wrapper.update();
     expect(wrapper.find(InputAdornment).props().style).toHaveProperty('display', 'none');
   });
 });

package/test/renderers/MaterialTimeCell.test.tsx

@@ -34,7 +34,7 @@ import TimeCell, {
 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';
 
@@ -174,7 +174,7 @@ describe('Material time cell', () => {
     expect(input.props().value).toBe('13:37');
   });
 
-  it('should update via event', () => {
+  it('should update via event', (done) => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
       data: undefined
@@ -191,10 +191,13 @@ describe('Material time cell', () => {
     );
     const input = wrapper.find('input').first();
     input.simulate('change', { target: { value: '20:15' } });
-    expect(onChangeData.data.foo).toBe('20:15');
+    setTimeout(() => {
+      expect(onChangeData.data.foo).toBe('20:15');
+      done();
+    }, 1000);
   });
 
-  it('should update via action', () => {
+  it('should update via action', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -204,11 +207,14 @@ describe('Material time cell', () => {
     core.data = { ...core.data, foo: '20:15' };
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
-    const input = wrapper.find('input').first();
-    expect(input.props().value).toBe('20:15');
+    setTimeout(() => {
+      const input = wrapper.find('input').first();
+      expect(input.props().value).toBe('20:15');
+      done();
+    }, 1000);
   });
 
-  it('should update with null value', () => {
+  it('should update with null value', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -218,11 +224,14 @@ describe('Material time cell', () => {
     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('update with undefined value', () => {
+  it('update with undefined value', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -232,11 +241,14 @@ describe('Material time cell', () => {
     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('');
+    setTimeout(() => {
+      const input = wrapper.find('input').first();
+      expect(input.props().value).toBe('');
+      done();
+    }, 1000);
   });
 
-  it('should update with wrong ref', () => {
+  it('should update with wrong ref', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -246,11 +258,14 @@ describe('Material time cell', () => {
     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('13:37');
+    setTimeout(() => {
+      const input = wrapper.find('input').first();
+      expect(input.props().value).toBe('13:37');
+      done();
+    }, 1000);
   });
 
-  it('should update with null ref', () => {
+  it('should update with null ref', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -260,11 +275,14 @@ describe('Material time cell', () => {
     core.data = { ...core.data, null: '20:15' };
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
-    const input = wrapper.find('input').first();
-    expect(input.props().value).toBe('13:37');
+    setTimeout(() => {
+      const input = wrapper.find('input').first();
+      expect(input.props().value).toBe('13:37');
+      done();
+    }, 1000);
   });
 
-  it('should update with undefined ref', () => {
+  it('should update with undefined ref', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -274,8 +292,11 @@ describe('Material time cell', () => {
     core.data = { ...core.data, undefined: '20:15' };
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
-    const input = wrapper.find('input').first();
-    expect(input.props().value).toBe('13:37');
+    setTimeout(() => {
+      const input = wrapper.find('input').first();
+      expect(input.props().value).toBe('13:37');
+      done();
+    }, 1000);
   });
 
   it('can be disabled', () => {

package/test/renderers/MaterialTimeControl.test.tsx

@@ -34,13 +34,13 @@ 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';
 
 Enzyme.configure({ adapter: new Adapter() });
 
-const data = { foo: '13:37' };
+const data = { foo: '13:37:05' };
 const schema = {
   type: 'object',
   properties: {
@@ -202,8 +202,9 @@ describe('Material time control', () => {
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
-    input.simulate('change', { target: { value: '08:40' } });
-    expect(onChangeData.data.foo).toBe('08:40');
+    (input.getDOMNode() as HTMLInputElement).value = '08:40';
+    input.simulate('change', input);
+    expect(onChangeData.data.foo).toBe('08:40:00');
   });
 
   it('should update via action', () => {
@@ -213,7 +214,7 @@ describe('Material time control', () => {
         <MaterialTimeControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
-    core.data = { ...core.data, foo: '08:40' };
+    core.data = { ...core.data, foo: '08:40:00' };
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
     const input = wrapper.find('input').first();
@@ -372,7 +373,8 @@ describe('Material time control', () => {
     const input = wrapper.find('input').first();
     expect(input.props().value).toBe('02-13');
 
-    input.simulate('change', { target: { value: '12-01' } });
+    (input.getDOMNode() as HTMLInputElement).value = '12:01';
+    input.simulate('change', input);
     expect(onChangeData.data.foo).toBe('1//12 am');
   });
 });

package/tsconfig.json

@@ -8,7 +8,6 @@
     "node_modules"
   ],
   "files": [
-    "./src/index.ts",
-    "./src/extended/index.ts"
+    "./src/index.ts"
   ]
 }

package/tsconfig.test.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "module": "CommonJS",
+    "target": "ES5"
+  }
+}