[material] Rewrite test based on enzyme

Author: edgarmueller

packages/material/package.json

@@ -67,6 +67,8 @@
     "react-redux": "^6.0.0"
   },
   "devDependencies": {
+    "@types/enzyme": "^3.1.15",
+    "@types/enzyme-adapter-react-16": "^1.0.3",
     "@jsonforms/core": "^2.2.1-alpha.2",
     "@jsonforms/react": "^2.2.1-alpha.2",
     "@jsonforms/test": "^2.2.1-alpha.2",

packages/material/test/renderers/MaterialArrayControl.test.tsx

@@ -22,21 +22,17 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import {
-    Actions,
-    ControlElement,
-    jsonformsReducer,
-    JsonFormsState,
-    JsonSchema
-} from '@jsonforms/core';
+import { Actions, ControlElement, jsonformsReducer, JsonFormsState, JsonSchema } from '@jsonforms/core';
 import * as React from 'react';
-import * as _ from 'lodash';
 import { Provider } from 'react-redux';
-import * as TestUtils from 'react-dom/test-utils';
 
 import MaterialArrayControlRenderer from '../../src/complex/MaterialArrayControlRenderer';
 import { combineReducers, createStore, Store } from 'redux';
 import { materialFields, materialRenderers } from '../../src';
+import Enzyme, { mount, ReactWrapper } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });
 
 export const initJsonFormsStore = (customData?: any): Store<JsonFormsState> => {
   const s: JsonFormsState = {
@@ -93,35 +89,38 @@ const fixture: {
 
 describe('Material array control', () => {
 
+  let wrapper: ReactWrapper;
+
+  afterEach(() => wrapper.unmount());
+
   it('should render', () => {
     const store = initJsonFormsStore();
-    const tree: React.Component<any> = TestUtils.renderIntoDocument(
+    wrapper = mount(
       <Provider store={store}>
         <MaterialArrayControlRenderer schema={fixture.schema} uischema={fixture.uischema}/>
       </Provider>
-    ) as React.Component<any>;
+    );
 
-    const rows = TestUtils.scryRenderedDOMComponentsWithTag(tree, 'tr');
+    const rows = wrapper.find('tr');
     // 2 header rows + 2 data entries
     expect(rows.length).toBe(4);
   });
 
   it('should render empty', () => {
     const store = initJsonFormsStore([]);
 
-    const tree: React.Component<any> = TestUtils.renderIntoDocument(
+    wrapper = mount(
       <Provider store={store}>
         <MaterialArrayControlRenderer schema={fixture.schema} uischema={fixture.uischema}/>
       </Provider>
-    ) as React.Component<any>;
+    );
 
-    const rows: HTMLTableRowElement[] =
-        TestUtils.scryRenderedDOMComponentsWithTag(tree, 'tr') as HTMLTableRowElement[];
+    const rows = wrapper.find('tr');
     // two header rows + no data row
     expect(rows.length).toBe(3);
-    const headerColumns = rows[1].cells;
-    // 3 columsn  = message & done properties + column for delete button
-    expect(headerColumns.length).toBe(3);
+    const headerColumns = rows.at(1).children();
+    // 3 columns: message & done properties + column for delete button
+    expect(headerColumns).toHaveLength(3);
   });
 
   it('should render empty primitives', () => {
@@ -143,20 +142,19 @@ describe('Material array control', () => {
     };
     store.dispatch(Actions.init(data, schema, uischema));
 
-    const tree: React.Component<any> = TestUtils.renderIntoDocument(
+    wrapper = mount(
       <Provider store={store}>
         <MaterialArrayControlRenderer schema={schema} uischema={uischema}/>
       </Provider>
-    ) as React.Component<any>;
+    );
 
-    const rows: HTMLTableRowElement[] =
-        TestUtils.scryRenderedDOMComponentsWithTag(tree, 'tr') as HTMLTableRowElement[];
+    const rows = wrapper.find('tr');
     // header + no data row
-    expect(rows.length).toBe(2);
-    const emptyDataCol = rows[1].cells;
-    expect(emptyDataCol.length).toBe(1);
+    expect(rows).toHaveLength(2);
+    const emptyDataCol = rows.at(1).find('td');
+    expect(emptyDataCol).toHaveLength(1);
     // selection column + 1 data column
-    expect(emptyDataCol[0].colSpan).toBe(2);
+    expect(emptyDataCol.first().props().colSpan).toBe(2);
   });
 
   it('should render primitives', () => {
@@ -178,39 +176,40 @@ describe('Material array control', () => {
     };
     store.dispatch(Actions.init(data, schema, uischema));
 
-    const tree: React.Component<any> = TestUtils.renderIntoDocument(
+    wrapper = mount(
       <Provider store={store}>
         <MaterialArrayControlRenderer schema={schema} uischema={uischema}/>
       </Provider>
-    ) as React.Component<any>;
+    );
 
-    const rows = TestUtils.scryRenderedDOMComponentsWithTag(tree, 'tr');
+    const rows = wrapper.find('tr');
     // header + 2 data entries
-    expect(rows.length).toBe(3);
+    expect(rows).toHaveLength(3);
   });
 
   it('should delete an item', () => {
     const store = initJsonFormsStore();
-    const tree: React.Component<any> = TestUtils.renderIntoDocument(
+    wrapper = mount(
       <Provider store={store}>
         <MaterialArrayControlRenderer schema={fixture.schema} uischema={fixture.uischema} />
       </Provider>
-    ) as React.Component<any>;
+    );
 
-    const buttons = TestUtils.scryRenderedDOMComponentsWithTag(tree, 'button');
+    const buttons = wrapper.find('button');
     // 5 buttons
       // add row
       // delete row
       // delete row
       // two dialog buttons (no + yes)
-    const deleteButton = buttons[1];
-    const nrOfRowsBeforeDelete = TestUtils.scryRenderedDOMComponentsWithTag(tree, 'tr').length;
+    const nrOfRowsBeforeDelete = wrapper.find('tr').length;
+
+    const deleteButton = buttons.at(1);
+    deleteButton.simulate('click');
 
-    TestUtils.Simulate.click(deleteButton);
-    const confirmButton = buttons[4];
-    TestUtils.Simulate.click(confirmButton);
+    const confirmButton = buttons.at(4);
+    confirmButton.simulate('click');
 
-    const nrOfRowsAfterDelete = TestUtils.scryRenderedDOMComponentsWithTag(tree, 'tr').length;
+    const nrOfRowsAfterDelete = wrapper.find('tr').length;
 
     expect(nrOfRowsBeforeDelete).toBe(4);
     expect(nrOfRowsAfterDelete).toBe(3);

packages/material/test/renderers/MaterialArrayLayout.test.tsx

@@ -25,11 +25,14 @@
 import { Actions, ControlElement, jsonformsReducer, JsonFormsState } from '@jsonforms/core';
 import * as React from 'react';
 import { Provider } from 'react-redux';
-import * as TestUtils from 'react-dom/test-utils';
 
 import { combineReducers, createStore, Store } from 'redux';
 import { materialFields, materialRenderers } from '../../src';
 import { MaterialArrayLayout, materialArrayLayoutTester } from '../../src/layouts';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });
 
 export const initJsonFormsStore = (): Store<JsonFormsState> => {
   const s: JsonFormsState ={
@@ -154,49 +157,52 @@ describe('Material array layout', () => {
 
   it('should render two by two children', () => {
     const store = initJsonFormsStore();
-    const tree = TestUtils.renderIntoDocument(
+    const wrapper = mount(
       <Provider store={store}>
         <MaterialArrayLayout
           schema={schema}
           uischema={uischema}
         />
       </Provider>
-    ) as React.Component<any, any, any>;
+    );
 
-    const controls = TestUtils.scryRenderedDOMComponentsWithTag(tree, 'input');
+    const controls = wrapper.find('input');
     // 2 data entries with each having 2 controls
-    expect(controls.length).toBe(4);
+    expect(controls).toHaveLength(4);
+    wrapper.unmount();
   });
 
   it('should generate uischema when options.detail=GENERATE', () => {
     const store = initJsonFormsStore();
-    const tree = TestUtils.renderIntoDocument(
+    const wrapper = mount(
       <Provider store={store}>
         <MaterialArrayLayout
           schema={schema}
           uischema={uischemaOptions.generate}
         />
       </Provider>
-    ) as React.Component<any, any, any>;
+    );
 
-    const controls = TestUtils.scryRenderedDOMComponentsWithTag(tree, 'input');
+    const controls = wrapper.find('input');
     // 2 data entries with each having 2 controls
-    expect(controls.length).toBe(4);
+    expect(controls).toHaveLength(4);
+    wrapper.unmount();
   });
 
   it('should use inline options.detail uischema', () => {
     const store = initJsonFormsStore();
-    const tree = TestUtils.renderIntoDocument(
+    const wrapper = mount(
       <Provider store={store}>
         <MaterialArrayLayout
           schema={schema}
           uischema={uischemaOptions.inline}
         />
       </Provider>
-    ) as React.Component<any, any, any>;
+    );
 
-    const controls = TestUtils.scryRenderedDOMComponentsWithTag(tree, 'input');
+    const controls = wrapper.find('input');
     // 2 data entries with each having 1 control
-    expect(controls.length).toBe(2);
+    expect(controls).toHaveLength(2);
+    wrapper.unmount();
   });
 });