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

package/test/renderers/MaterialIntegerCell.test.tsx

@@ -34,7 +34,7 @@ import IntegerCell, {
 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';
 
@@ -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', () => {

package/test/renderers/MaterialLabelRenderer.test.tsx

@@ -33,7 +33,7 @@ import MaterialLabelRenderer, {
 } from '../../src/additional/MaterialLabelRenderer';
 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 { JsonForms, JsonFormsStateProvider } from '@jsonforms/react';
 import { initCore } from './util';
 

package/test/renderers/MaterialLayouts.test.tsx

@@ -32,7 +32,7 @@ import {
   RuleEffect,
   UISchemaElement
 } from '@jsonforms/core';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { JsonForms } from '@jsonforms/react';
 
 Enzyme.configure({ adapter: new Adapter() });

package/test/renderers/MaterialListWithDetailRenderer.test.tsx

@@ -33,9 +33,9 @@ import MaterialListWithDetailRenderer, {
   materialListWithDetailTester
 } from '../../src/additional/MaterialListWithDetailRenderer';
 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 { ListItem } from '@material-ui/core'
+import { ListItem } from '@mui/material'
 import { initCore } from './util';
 
 Enzyme.configure({ adapter: new Adapter() });

package/test/renderers/MaterialNativeControl.test.tsx

@@ -26,8 +26,8 @@ import './MatchMediaMock';
 import React from 'react';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
 import { MaterialNativeControl } from '../../src/controls/MaterialNativeControl';
-import TextField from '@material-ui/core/TextField';
-import Adapter from 'enzyme-adapter-react-16';
+import TextField from '@mui/material/TextField';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { ControlElement, ControlProps } from '@jsonforms/core';
 
 Enzyme.configure({ adapter: new Adapter() });

package/test/renderers/MaterialNumberCell.test.tsx

@@ -34,7 +34,7 @@ import NumberCell, {
 } from '../../src/cells/MaterialNumberCell';
 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';
 
@@ -217,7 +217,7 @@ describe('Material number 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
@@ -234,10 +234,13 @@ describe('Material number cells', () => {
     );
     const input = wrapper.find('input');
     input.simulate('change', { target: { value: 2.72 } });
-    expect(onChangeData.data.foo).toBe(2.72);
+    setTimeout(() => {
+      expect(onChangeData.data.foo).toBe(2.72);
+      done();
+    }, 1000);
   });
 
-  it('should update via action', () => {
+  it('should update via action', (done) => {
     const core = initCore(schema, uischema, { foo: 2.72 });
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -251,15 +254,18 @@ describe('Material number cells', () => {
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
 
-    expect(
-      wrapper
-        .find('input')
-        .first()
-        .props().value
-    ).toBe(3.14);
+    setTimeout(() => {
+      expect(
+        wrapper
+          .find('input')
+          .first()
+          .props().value
+      ).toBe(3.14);
+      done();
+    }, 1000);
   });
 
-  it('should update with undefined value', () => {
+  it('should update with undefined value', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -269,11 +275,14 @@ describe('Material number cells', () => {
     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 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 }}>
@@ -283,11 +292,14 @@ describe('Material number 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 }}>
@@ -297,11 +309,14 @@ describe('Material number cells', () => {
     core.data = { ...core.data, bar: 11 };
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
-    const input = wrapper.find('input').first();
-    expect(input.props().value).toBe(3.14);
+    setTimeout(() => {
+      const input = wrapper.find('input').first();
+      expect(input.props().value).toBe(3.14);
+      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 }}>
@@ -311,11 +326,14 @@ describe('Material number cells', () => {
     core.data = { ...core.data, null: 2.72 };
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
-    const input = wrapper.find('input').first();
-    expect(input.props().value).toBe(3.14);
+    setTimeout(() => {
+      const input = wrapper.find('input').first();
+      expect(input.props().value).toBe(3.14);
+      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 }}>
@@ -325,8 +343,11 @@ describe('Material number 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(3.14);
+    setTimeout(() => {
+      const input = wrapper.find('input').first();
+      expect(input.props().value).toBe(3.14);
+      done();
+    }, 1000);
   });
 
   it('can be disabled', () => {

package/test/renderers/MaterialObjectControl.test.tsx

@@ -33,7 +33,7 @@ import MaterialObjectRenderer, {
   materialObjectControlTester
 } from '../../src/complex/MaterialObjectRenderer';
 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 } from './util';
 

package/test/renderers/MaterialOneOfEnumCell.test.tsx

@@ -33,7 +33,7 @@ import MaterialOneOfEnumCell, {
 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/MaterialOneOfRadioGroupControl.test.tsx

@@ -33,7 +33,7 @@ import MaterialOneOfRadioGroupControl, {
 } from '../../src/controls/MaterialOneOfRadioGroupControl';
 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';

package/test/renderers/MaterialOneOfRenderer.test.tsx

@@ -24,10 +24,10 @@
 */
 import './MatchMediaMock';
 import React from 'react';
-import Dialog from '@material-ui/core/Dialog';
+import Dialog from '@mui/material/Dialog';
 
 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';
@@ -36,7 +36,7 @@ import {
   materialRenderers
 } from '../../src';
 import { JsonForms, JsonFormsDispatch, JsonFormsStateProvider } from '@jsonforms/react';
-import { Tab } from '@material-ui/core';
+import { Tab } from '@mui/material';
 import { initCore, TestEmitter } from './util';
 
 Enzyme.configure({ adapter: new Adapter() });
@@ -120,8 +120,9 @@ describe('Material oneOf renderer', () => {
     );
 
     const firstTab = wrapper.find(Tab).first();
-    expect(firstTab.props().selected).toBeTruthy();
+    expect(firstTab.html()).toContain('Mui-selected');
   });
+
   it('should render and select second tab due to datatype', () => {
     const schema = {
       type: 'object',
@@ -159,8 +160,9 @@ describe('Material oneOf renderer', () => {
     expect(wrapper.find(MaterialOneOfRenderer).length).toBeTruthy();
 
     const secondTab = wrapper.find(Tab).at(1);
-    expect(secondTab.props().selected).toBeTruthy();
+    expect(secondTab.html()).toContain('Mui-selected');
   });
+
   it('should render and select second tab due to schema with additionalProperties', () => {
     const schema = {
       type: 'object',
@@ -206,8 +208,9 @@ describe('Material oneOf renderer', () => {
     expect(wrapper.find(MaterialOneOfRenderer).length).toBeTruthy();
 
     const secondTab = wrapper.find(Tab).at(1);
-    expect(secondTab.props().selected).toBeTruthy();
+    expect(secondTab.html()).toContain('Mui-selected');
   });
+
   it('should render and select second tab due to schema with required', () => {
     const schema = {
       type: 'object',
@@ -253,10 +256,10 @@ describe('Material oneOf renderer', () => {
     expect(wrapper.find(MaterialOneOfRenderer).length).toBeTruthy();
 
     const secondTab = wrapper.find(Tab).at(1);
-    expect(secondTab.props().selected).toBeTruthy();
+    expect(secondTab.html()).toContain('Mui-selected');
   });
 
-  it('should add an item at correct path', () => {
+  it('should add an item at correct path', (done) => {
     const schema = {
       type: 'object',
       properties: {
@@ -298,9 +301,12 @@ describe('Material oneOf 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.skip('should add an item within an array', async () => {

package/test/renderers/MaterialRadioGroupControl.test.tsx

@@ -31,7 +31,7 @@ import {
 import MaterialRadioGroupControl, { materialRadioGroupControlTester } from '../../src/controls/MaterialRadioGroupControl';
 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 } from './util';
 Enzyme.configure({ adapter: new Adapter() });

package/test/renderers/MaterialSliderControl.test.tsx

@@ -33,10 +33,10 @@ import SliderControl, {
   materialSliderControlTester
 } from '../../src/controls/MaterialSliderControl';
 import { materialRenderers } from '../../src';
-import { Slider } from '@material-ui/core';
+import { Slider } from '@mui/material';
 
 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 { initCore } from './util';
 

package/test/renderers/MaterialTextCell.test.tsx

@@ -35,7 +35,7 @@ import TextCell, {
 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';
 
@@ -196,7 +196,7 @@ describe('Material text cell', () => {
     expect(input.props().value).toBe('Foo');
   });
 
-  it('should update via input event', () => {
+  it('should update via input event', (done) => {
     const core = initCore(minLengthSchema, uischema, data);
     const onChangeData: any = {
       data: undefined
@@ -214,10 +214,13 @@ describe('Material text cell', () => {
 
     const input = wrapper.find('input').first();
     input.simulate('change', { target: { value: 'Bar' } });
-    expect(onChangeData.data.name).toBe('Bar');
+    setTimeout(() => {
+      expect(onChangeData.data.name).toBe('Bar');
+      done();
+    }, 1000);
   });
 
-  it('should update via action', () => {
+  it('should update via action', (done) => {
     const core = initCore(minLengthSchema, uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -227,11 +230,14 @@ describe('Material text cell', () => {
     core.data = { ...core.data, name: 'Bar' };
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
-    const input = wrapper.find('input').first();
-    expect(input.props().value).toBe('Bar');
+    setTimeout(() => {
+      const input = wrapper.find('input').first();
+      expect(input.props().value).toBe('Bar');
+      done();
+    }, 1000);
   });
 
-  it('should update with undefined value', () => {
+  it('should update with undefined value', (done) => {
     const core = initCore(minLengthSchema, uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -241,11 +247,14 @@ describe('Material text cell', () => {
     core.data = { ...core.data, name: 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 null value', () => {
+  it('should update with null value', (done) => {
     const core = initCore(minLengthSchema, uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -255,11 +264,14 @@ describe('Material text cell', () => {
     core.data = { ...core.data, name: 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 if wrong ref', () => {
+  it('should not update if wrong ref', (done) => {
     const core = initCore(minLengthSchema, uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -269,11 +281,14 @@ describe('Material text cell', () => {
     core.data = { ...core.data, firstname: 'Bar' };
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
-    const input = wrapper.find('input').first();
-    expect(input.props().value).toBe('Foo');
+    setTimeout(() => {
+      const input = wrapper.find('input').first();
+      expect(input.props().value).toBe('Foo');
+      done();
+    }, 1000);
   });
 
-  it('should not update if null ref', () => {
+  it('should not update if null ref', (done) => {
     const core = initCore(minLengthSchema, uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -283,11 +298,14 @@ describe('Material text cell', () => {
     core.data = { ...core.data, null: 'Bar' };
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
-    const input = wrapper.find('input').first();
-    expect(input.props().value).toBe('Foo');
+    setTimeout(() => {
+      const input = wrapper.find('input').first();
+      expect(input.props().value).toBe('Foo');
+      done();
+    }, 1000);
   });
 
-  it('should not update if undefined ref', () => {
+  it('should not update if undefined ref', (done) => {
     const core = initCore(minLengthSchema, uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -297,8 +315,11 @@ describe('Material text cell', () => {
     core.data = { ...core.data, undefined: 'Bar' };
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
-    const input = wrapper.find('input').first();
-    expect(input.props().value).toBe('Foo');
+    setTimeout(() => {
+      const input = wrapper.find('input').first();
+      expect(input.props().value).toBe('Foo');
+      done();
+    }, 1000);
   });
 
   it('can be disabled', () => {
@@ -433,9 +454,8 @@ describe('Material text cell', () => {
       .first()
       .getDOMNode() as HTMLInputElement;
     expect(input.maxLength).toBe(DEFAULT_MAX_LENGTH);
-    expect(
-      getComputedStyle(input.parentElement, null).getPropertyValue('width')
-    ).toBe('100%');
+
+    expect(input.parentElement.classList.contains('MuiInputBase-fullWidth')).toBeTruthy;
     expect(input.size).toBe(DEFAULT_SIZE);
   });
 
@@ -457,9 +477,7 @@ describe('Material text cell', () => {
       .first()
       .getDOMNode() as HTMLInputElement;
     expect(input.maxLength).toBe(DEFAULT_MAX_LENGTH);
-    expect(
-      getComputedStyle(input.parentElement, null).getPropertyValue('width')
-    ).toBe('100%');
+    expect(input.parentElement.classList.contains('MuiInputBase-fullWidth')).toBeTruthy;
     expect(input.size).toBe(DEFAULT_SIZE);
   });
 
@@ -481,9 +499,7 @@ describe('Material text cell', () => {
       .first()
       .getDOMNode() as HTMLInputElement;
     expect(input.maxLength).toBe(DEFAULT_MAX_LENGTH);
-    expect(
-      getComputedStyle(input.parentElement, null).getPropertyValue('width')
-    ).toBe('100%');
+    expect(input.parentElement.classList.contains('MuiInputBase-fullWidth')).toBeTruthy;
     expect(input.size).toBe(DEFAULT_SIZE);
   });
 
@@ -499,9 +515,7 @@ describe('Material text cell', () => {
       .first()
       .getDOMNode() as HTMLInputElement;
     expect(input.maxLength).toBe(DEFAULT_MAX_LENGTH);
-    expect(
-      getComputedStyle(input.parentElement, null).getPropertyValue('width')
-    ).toBe('100%');
+    expect(input.parentElement.classList.contains('MuiInputBase-fullWidth')).toBeTruthy;
     expect(input.size).toBe(DEFAULT_SIZE);
   });