Skip to content

Rewrite test based on enzyme #1262

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 18, 2019
Merged

Rewrite test based on enzyme #1262

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/material/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
81 changes: 40 additions & 41 deletions packages/material/test/renderers/MaterialArrayControl.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/*
The MIT License

Copyright (c) 2018 EclipseSource Munich
Copyright (c) 2018-2019 EclipseSource Munich
https://github.com/eclipsesource/jsonforms

Permission is hereby granted, free of charge, to any person obtaining a copy
Expand All @@ -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 = {
Expand Down Expand Up @@ -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', () => {
Expand All @@ -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', () => {
Expand All @@ -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);
Expand Down
40 changes: 25 additions & 15 deletions packages/material/test/renderers/MaterialArrayLayout.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/*
The MIT License

Copyright (c) 2018 EclipseSource Munich
Copyright (c) 2018-2019 EclipseSource Munich
https://github.com/eclipsesource/jsonforms

Permission is hereby granted, free of charge, to any person obtaining a copy
Expand All @@ -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, ReactWrapper } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

export const initJsonFormsStore = (): Store<JsonFormsState> => {
const s: JsonFormsState ={
Expand Down Expand Up @@ -141,7 +144,7 @@ const uischemaOptions: {
}
};

describe('Material array layout', () => {
describe('Material array layout tester', () => {
it('should only be applicable for intermediate array or when containing proper options', () => {
expect(materialArrayLayoutTester(uischema, schema)).toBe(-1);
expect(materialArrayLayoutTester(uischema, nestedSchema)).toBe(4);
Expand All @@ -151,52 +154,59 @@ describe('Material array layout', () => {
expect(materialArrayLayoutTester(uischemaOptions.generate, schema)).toBe(4);
expect(materialArrayLayoutTester(uischemaOptions.inline, schema)).toBe(4);
});
});

describe('Material array layout', () => {

let wrapper: ReactWrapper;

afterEach(() => wrapper.unmount());

it('should render two by two children', () => {
const store = initJsonFormsStore();
const tree = TestUtils.renderIntoDocument(
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);
});

it('should generate uischema when options.detail=GENERATE', () => {
const store = initJsonFormsStore();
const tree = TestUtils.renderIntoDocument(
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);
});

it('should use inline options.detail uischema', () => {
const store = initJsonFormsStore();
const tree = TestUtils.renderIntoDocument(
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);
});
});
Loading