From b3c3ec9a041bc644f8df6b6a77e4f0ae3c52e62e Mon Sep 17 00:00:00 2001 From: fkellner Date: Thu, 29 Aug 2024 18:07:22 +0200 Subject: [PATCH] Fix #10127: update tests for react-redux (#10142) Updates tests relying on 'render' returning a reference to enable react-redux 7.x upwards (where some components become stateless and render no longer returns a reference, even though it was successful) On Behalf of DB Systel Co-authored-by: Florian Kellner --- .../__tests__/StandardAppComponent-test.jsx | 25 ++-- .../app/__tests__/StandardContainer-test.jsx | 16 +-- .../app/__tests__/StandardRouter-test.jsx | 90 ++++++++------- .../buttons/__tests__/ZoomButton-test.jsx | 109 +++++++++--------- .../__tests__/ZoomToMaxExtentButton-test.jsx | 93 ++++++++------- .../viewers/__tests__/viewers-test.jsx | 71 +++++++----- .../components/home/__tests__/Home-test.jsx | 12 +- .../__tests__/PluginsContainer-test.jsx | 43 +++---- .../__tests__/PaginationToolbar-test.jsx | 8 +- .../__tests__/PaginationToolbar-test.jsx | 8 +- .../viewer/__tests__/MapViewer-test.jsx | 65 +++++++---- .../utils/__tests__/PluginsUtils-test.js | 5 +- 12 files changed, 306 insertions(+), 239 deletions(-) diff --git a/web/client/components/app/__tests__/StandardAppComponent-test.jsx b/web/client/components/app/__tests__/StandardAppComponent-test.jsx index 50f72cd513..2a5cae426b 100644 --- a/web/client/components/app/__tests__/StandardAppComponent-test.jsx +++ b/web/client/components/app/__tests__/StandardAppComponent-test.jsx @@ -34,17 +34,21 @@ describe('StandardAppComponent', () => { setTimeout(done); }); - it('creates a default app', () => { + it('creates a default app', (done) => { const store = { dispatch: () => {}, subscribe: () => {}, getState: () => ({}) }; - const app = ReactDOM.render(, document.getElementById("container")); - expect(app).toExist(); + const container = document.getElementById("container"); + expect(container.innerHTML).toNotExist(); + ReactDOM.render(, container, () => { + expect(container.innerHTML).toExist(); + done(); + }); }); - it('creates a default app with plugins', () => { + it('creates a default app with plugins', (done) => { const plugins = { MyPlugin }; @@ -54,11 +58,12 @@ describe('StandardAppComponent', () => { subscribe: () => {}, getState: () => ({}) }; - const app = ReactDOM.render(, document.getElementById("container")); - expect(app).toExist(); - - const dom = ReactDOM.findDOMNode(app); - - expect(dom.getElementsByClassName('MyPlugin').length).toBe(1); + const container = document.getElementById("container"); + expect(container.innerHTML).toNotExist(); + ReactDOM.render(, container, () => { + expect(container.innerHTML).toExist(); + expect(container.getElementsByClassName('MyPlugin').length).toBe(1); + done(); + }); }); }); diff --git a/web/client/components/app/__tests__/StandardContainer-test.jsx b/web/client/components/app/__tests__/StandardContainer-test.jsx index d28697a425..0609714724 100644 --- a/web/client/components/app/__tests__/StandardContainer-test.jsx +++ b/web/client/components/app/__tests__/StandardContainer-test.jsx @@ -49,7 +49,7 @@ describe('StandardContainer', () => { }); - it('creates a default app with component and plugins', () => { + it('creates a default app with component and plugins', (done) => { const plugins = { MyPlugin: {} }; @@ -63,11 +63,13 @@ describe('StandardContainer', () => { const componentConfig = { component: mycomponent }; - - const app = ReactDOM.render(, document.getElementById("container")); - expect(app).toExist(); - const dom = ReactDOM.findDOMNode(app); - expect(dom.getElementsByClassName('mycomponent').length).toBe(1); - expect(dom.getElementsByClassName('MyPlugin').length).toBe(1); + const container = document.getElementById("container"); + expect(container.innerHTML).toNotExist(); + ReactDOM.render(, container, () => { + expect(container.innerHTML).toExist(); + expect(container.getElementsByClassName('mycomponent').length).toBe(1); + expect(container.getElementsByClassName('MyPlugin').length).toBe(1); + done(); + }); }); }); diff --git a/web/client/components/app/__tests__/StandardRouter-test.jsx b/web/client/components/app/__tests__/StandardRouter-test.jsx index e067ee9a01..a7c08378e0 100644 --- a/web/client/components/app/__tests__/StandardRouter-test.jsx +++ b/web/client/components/app/__tests__/StandardRouter-test.jsx @@ -49,7 +49,7 @@ describe('StandardRouter', () => { setTimeout(done); }); - it('creates a default router app', () => { + it('creates a default router app', (done) => { const store = { dispatch: () => {}, subscribe: () => { @@ -58,11 +58,15 @@ describe('StandardRouter', () => { unsubscribe: () => {}, getState: () => ({}) }; - const app = ReactDOM.render(, document.getElementById("container")); - expect(app).toExist(); + const container = document.getElementById("container"); + expect(container.innerHTML).toNotExist(); + ReactDOM.render(, container, () => { + expect(container.innerHTML).toExist(); + done(); + }); }); - it('creates a default router app with pages', () => { + it('creates a default router app with pages', (done) => { const store = { dispatch: () => {}, subscribe: () => { @@ -75,14 +79,16 @@ describe('StandardRouter', () => { path: '/', component: mycomponent }]; - const app = ReactDOM.render(, document.getElementById("container")); - expect(app).toExist(); - const dom = ReactDOM.findDOMNode(app); - - expect(dom.getElementsByClassName('mycomponent').length).toBe(1); + const container = document.getElementById("container"); + expect(container.innerHTML).toNotExist(); + ReactDOM.render(, container, () => { + expect(container.innerHTML).toExist(); + expect(container.getElementsByClassName('mycomponent').length).toBe(1); + done(); + }); }); - it('creates a default router app with pages and plugins', () => { + it('creates a default router app with pages and plugins', (done) => { const plugins = { MyPlugin: {} }; @@ -99,15 +105,16 @@ describe('StandardRouter', () => { path: '/', component: mycomponent }]; - const app = ReactDOM.render(, document.getElementById("container")); - expect(app).toExist(); - - const dom = ReactDOM.findDOMNode(app); - - expect(dom.getElementsByClassName('MyPlugin').length).toBe(1); + const container = document.getElementById("container"); + expect(container.innerHTML).toNotExist(); + ReactDOM.render(, container, () => { + expect(container.innerHTML).toExist(); + expect(container.getElementsByClassName('MyPlugin').length).toBe(1); + done(); + }); }); - it('if we dont wait for theme no spinner is shown', () => { + it('if we dont wait for theme no spinner is shown', (done) => { const plugins = { MyPlugin: {} }; @@ -124,14 +131,15 @@ describe('StandardRouter', () => { path: '/', component: mycomponent }]; - const app = ReactDOM.render(, document.getElementById("container")); - expect(app).toExist(); - - const dom = ReactDOM.findDOMNode(app); - - expect(dom.getElementsByClassName('_ms2_init_spinner').length).toBe(0); + const container = document.getElementById("container"); + expect(container.innerHTML).toNotExist(); + ReactDOM.render(, container, () => { + expect(container.innerHTML).toExist(); + expect(container.getElementsByClassName('_ms2_init_spinner').length).toBe(0); + done(); + }); }); - it('if we wait for theme no spinner is shown if the theme is already loaded', () => { + it('if we wait for theme no spinner is shown if the theme is already loaded', (done) => { const plugins = { MyPlugin: {} }; @@ -148,14 +156,15 @@ describe('StandardRouter', () => { path: '/', component: mycomponent }]; - const app = ReactDOM.render(, document.getElementById("container")); - expect(app).toExist(); - - const dom = ReactDOM.findDOMNode(app); - - expect(dom.getElementsByClassName('_ms2_init_spinner').length).toBe(0); + const container = document.getElementById("container"); + expect(container.innerHTML).toNotExist(); + ReactDOM.render(, container, () => { + expect(container.innerHTML).toExist(); + expect(container.getElementsByClassName('_ms2_init_spinner').length).toBe(0); + done(); + }); }); - it('if we wait for theme spinner is shown if the theme is not already loaded', () => { + it('if we wait for theme spinner is shown if the theme is not already loaded', (done) => { const plugins = { MyPlugin: {} }; @@ -172,12 +181,13 @@ describe('StandardRouter', () => { path: '/', component: mycomponent }]; - const app = ReactDOM.render(, document.getElementById("container")); - expect(app).toExist(); - - const dom = ReactDOM.findDOMNode(app); - - expect(dom.getElementsByClassName('_ms2_init_spinner').length).toBe(1); + const container = document.getElementById("container"); + expect(container.innerHTML).toNotExist(); + ReactDOM.render(, container, () => { + expect(container.innerHTML).toExist(); + expect(container.getElementsByClassName('_ms2_init_spinner').length).toBe(1); + done(); + }); }); it('if we wait for theme onThemeLoaded is called when theme is loaded', (done) => { const plugins = { @@ -196,11 +206,10 @@ describe('StandardRouter', () => { path: '/', component: mycomponent }]; - const app = ReactDOM.render(, document.getElementById("container")); - expect(app).toExist(); }); it('if we wait for theme onThemeLoaded is called when theme custom is loaded', (done) => { @@ -220,7 +229,7 @@ describe('StandardRouter', () => { path: '/', component: mycomponent }]; - const app = ReactDOM.render( + ReactDOM.render( { done(); }} /> , document.getElementById("container")); - expect(app).toExist(); }); }); diff --git a/web/client/components/buttons/__tests__/ZoomButton-test.jsx b/web/client/components/buttons/__tests__/ZoomButton-test.jsx index e9dd8c0b90..409e67fa13 100644 --- a/web/client/components/buttons/__tests__/ZoomButton-test.jsx +++ b/web/client/components/buttons/__tests__/ZoomButton-test.jsx @@ -43,57 +43,59 @@ describe('This test for ZoomButton', () => { }); // test DEFAULTS - it('test default properties', () => { - const zmeBtn = ReactDOM.render( + it('test default properties', (done) => { + const container = document.getElementById("container"); + expect(container.innerHTML).toNotExist(); + ReactDOM.render( , - document.getElementById("container")); - expect(zmeBtn).toExist(); - - const zmeBtnNode = ReactDOM.findDOMNode(zmeBtn); - expect(zmeBtnNode).toExist(); - expect(zmeBtnNode.id).toBe("mapstore-zoom"); - - expect(zmeBtnNode).toExist(); - expect(zmeBtnNode.className.indexOf('square-button') >= 0).toBe(true); - expect(zmeBtnNode.innerHTML).toExist(); + container, () => { + expect(container.innerHTML).toExist(); + const zmeBtnNode = document.getElementById("mapstore-zoom"); + expect(zmeBtnNode).toExist(); + expect(zmeBtnNode.className.indexOf('square-button') >= 0).toBe(true); + expect(zmeBtnNode.innerHTML).toExist(); + done(); + }); }); - it('test glyphicon property', () => { - const zmeBtn = ReactDOM.render( + it('test glyphicon property', (done) => { + const container = document.getElementById("container"); + expect(container.innerHTML).toNotExist(); + ReactDOM.render( , - document.getElementById("container")); - expect(zmeBtn).toExist(); - - const zmeBtnNode = ReactDOM.findDOMNode(zmeBtn); - expect(zmeBtnNode).toExist(); - expect(zmeBtnNode).toExist(); - const icons = zmeBtnNode.getElementsByTagName('span'); - expect(icons.length).toBe(1); + container, () => { + expect(container.innerHTML).toExist(); + const zmeBtnNode = document.getElementById("mapstore-zoom"); + expect(zmeBtnNode).toExist(); + const icons = zmeBtnNode.getElementsByTagName('span'); + expect(icons.length).toBe(1); + done(); + }); }); - it('test glyphicon property with text', () => { - const zmeBtn = ReactDOM.render( + it('test glyphicon property with text', (done) => { + ReactDOM.render( , - document.getElementById("container")); - expect(zmeBtn).toExist(); - - const zmeBtnNode = ReactDOM.findDOMNode(zmeBtn); - expect(zmeBtnNode).toExist(); - expect(zmeBtnNode).toExist(); + document.getElementById("container"), + () => { + const zmeBtnNode = document.getElementById("mapstore-zoom"); + expect(zmeBtnNode).toExist(); - const btnItems = zmeBtnNode.getElementsByTagName('span'); - expect(btnItems.length).toBe(1); + const btnItems = zmeBtnNode.getElementsByTagName('span'); + expect(btnItems.length).toBe(1); - expect(zmeBtnNode.innerText.indexOf("button") !== -1).toBe(true); + expect(zmeBtnNode.innerText.indexOf("button") !== -1).toBe(true); + done(); + }); }); - it('test if click on button launches the proper action', () => { + it('test if click on button launches the proper action', (done) => { let genericTest = function() { let actions = { @@ -102,7 +104,7 @@ describe('This test for ZoomButton', () => { } }; let spy = expect.spyOn(actions, "onZoom"); - var cmp = ReactDOM.render( + ReactDOM.render( { } }} /> - , document.getElementById("container")); - expect(cmp).toExist(); + , document.getElementById("container") + , () => { + const cmpDom = document.getElementById("mapstore-zoom"); + expect(cmpDom).toExist(); - const cmpDom = document.getElementById("mapstore-zoom"); - expect(cmpDom).toExist(); - - cmpDom.click(); + cmpDom.click(); - expect(spy.calls.length).toBe(1); - expect(spy.calls[0].arguments.length).toBe(1); + expect(spy.calls.length).toBe(1); + expect(spy.calls[0].arguments.length).toBe(1); + done(); + }); }; genericTest(); }); - it('create glyphicon with custom css class', () => { - const zmeBtn = ReactDOM.render( + it('create glyphicon with custom css class', (done) => { + const container = document.getElementById("container"); + ReactDOM.render( , - document.getElementById("container")); - expect(zmeBtn).toExist(); - - const zmeBtnNode = ReactDOM.findDOMNode(zmeBtn); - expect(zmeBtnNode).toExist(); - - expect(zmeBtnNode.className.indexOf('custom') !== -1).toBe(true); + container, () => { + expect(container.innerHTML).toExist(); + const zmeBtnNode = document.getElementById("mapstore-zoom"); + expect(zmeBtnNode).toExist(); + + expect(zmeBtnNode.className.indexOf('custom') !== -1).toBe(true); + done(); + }); }); it('test zoom in', () => { diff --git a/web/client/components/buttons/__tests__/ZoomToMaxExtentButton-test.jsx b/web/client/components/buttons/__tests__/ZoomToMaxExtentButton-test.jsx index f5c448c09f..363c5896b6 100644 --- a/web/client/components/buttons/__tests__/ZoomToMaxExtentButton-test.jsx +++ b/web/client/components/buttons/__tests__/ZoomToMaxExtentButton-test.jsx @@ -43,54 +43,57 @@ describe('This test for ZoomToMaxExtentButton', () => { }); // test DEFAULTS - it('test default properties', () => { - const zmeBtn = ReactDOM.render( + it('test default properties', (done) => { + const container = document.getElementById("container"); + ReactDOM.render( , - document.getElementById("container")); - expect(zmeBtn).toExist(); - - const zmeBtnNode = ReactDOM.findDOMNode(zmeBtn); - expect(zmeBtnNode).toExist(); - expect(zmeBtnNode.id).toBe("mapstore-zoomtomaxextent"); - - expect(zmeBtnNode).toExist(); - expect(zmeBtnNode.className.indexOf('default') >= 0).toBe(true); - expect(zmeBtnNode.innerHTML).toExist(); + container, + () => { + expect(container.innerHTML).toExist(); + const zmeBtnNode = document.getElementById("mapstore-zoomtomaxextent"); + expect(zmeBtnNode).toExist(); + expect(zmeBtnNode.className.indexOf('default') >= 0).toBe(true); + expect(zmeBtnNode.innerHTML).toExist(); + done(); + }); }); - it('test glyphicon property', () => { - const zmeBtn = ReactDOM.render( + it('test glyphicon property', (done) => { + const container = document.getElementById("container"); + ReactDOM.render( , - document.getElementById("container")); - expect(zmeBtn).toExist(); - - const zmeBtnNode = ReactDOM.findDOMNode(zmeBtn); - expect(zmeBtnNode).toExist(); - expect(zmeBtnNode).toExist(); - const icons = zmeBtnNode.getElementsByTagName('span'); - expect(icons.length).toBe(1); + container, + () => { + expect(container.innerHTML).toExist(); + const zmeBtnNode = document.getElementById("mapstore-zoomtomaxextent"); + expect(zmeBtnNode).toExist(); + const icons = zmeBtnNode.getElementsByTagName('span'); + expect(icons.length).toBe(1); + done(); + }); }); - it('test glyphicon property with text', () => { - const zmeBtn = ReactDOM.render( + it('test glyphicon property with text', (done) => { + const container = document.getElementById("container"); + ReactDOM.render( , - document.getElementById("container")); - expect(zmeBtn).toExist(); - - const zmeBtnNode = ReactDOM.findDOMNode(zmeBtn); - expect(zmeBtnNode).toExist(); - expect(zmeBtnNode).toExist(); - - const btnItems = zmeBtnNode.getElementsByTagName('span'); - expect(btnItems.length).toBe(1); - - expect(zmeBtnNode.innerText.indexOf("button") !== -1).toBe(true); + container, + () => { + expect(container.innerHTML).toExist(); + const zmeBtnNode = document.getElementById("mapstore-zoomtomaxextent"); + expect(zmeBtnNode).toExist(); + const btnItems = zmeBtnNode.getElementsByTagName('span'); + expect(btnItems.length).toBe(1); + + expect(zmeBtnNode.innerText.indexOf("button") !== -1).toBe(true); + done(); + }); }); it('test if click on button launches the proper action', () => { @@ -145,18 +148,20 @@ describe('This test for ZoomToMaxExtentButton', () => { genericTest("image"); }); - it('create glyphicon with custom css class', () => { - const zmeBtn = ReactDOM.render( + it('create glyphicon with custom css class', (done) => { + const container = document.getElementById("container"); + ReactDOM.render( , - document.getElementById("container")); - expect(zmeBtn).toExist(); - - const zmeBtnNode = ReactDOM.findDOMNode(zmeBtn); - expect(zmeBtnNode).toExist(); - - expect(zmeBtnNode.className.indexOf('custom') !== -1).toBe(true); + container, + () => { + expect(container.innerHTML).toExist(); + const zmeBtnNode = document.getElementById("mapstore-zoomtomaxextent"); + expect(zmeBtnNode).toExist(); + expect(zmeBtnNode.className.indexOf('custom') !== -1).toBe(true); + done(); + }); }); it('test zoom to initial extent', () => { diff --git a/web/client/components/data/identify/viewers/__tests__/viewers-test.jsx b/web/client/components/data/identify/viewers/__tests__/viewers-test.jsx index b3f6ba51df..cfdefbdcd3 100644 --- a/web/client/components/data/identify/viewers/__tests__/viewers-test.jsx +++ b/web/client/components/data/identify/viewers/__tests__/viewers-test.jsx @@ -14,6 +14,12 @@ import HTMLViewer from '../HTMLViewer'; import JSONViewer from '../JSONViewer'; import TextViewer from '../TextViewer'; +import configureStore from 'redux-mock-store'; +import thunkMiddleware from 'redux-thunk'; +import {Provider} from "react-redux"; +const mockStore = configureStore([thunkMiddleware]); +const store = mockStore({}); + const SimpleRowViewer = (props) => { return
{['name', 'description'].map((key) => {key}:{props[key]})}
; }; @@ -51,7 +57,8 @@ describe('Identity Viewers', () => { }); it('test JSONViewer', () => { - const cmp = ReactDOM.render( { description: 'mydescription' } }] - }} rowViewer={SimpleRowViewer}/>, document.getElementById("container")); - expect(cmp).toExist(); + }} rowViewer={SimpleRowViewer}/>, container); + expect(container.innerHTML).toExist(); - const cmpDom = ReactDOM.findDOMNode(cmp); + const cmpDom = container.firstElementChild; expect(cmpDom).toExist(); expect(cmpDom.innerHTML.indexOf('myname') !== -1).toBe(true); @@ -73,7 +80,8 @@ describe('Identity Viewers', () => { const MyRowViewer = (props) => { return This is my viewer: {props.feature.id}; }; - const cmp = ReactDOM.render( { description: 'mydescription' } }] - }} />, document.getElementById("container")); - expect(cmp).toExist(); + }} />, container); + expect(container.innerHTML).toExist(); - const cmpDom = ReactDOM.findDOMNode(cmp); + const cmpDom = container.firstElementChild; expect(cmpDom).toExist(); expect(cmpDom.innerText.indexOf('This is my viewer: 1') !== -1).toBe(true); }); it('test JSONViewer with TEMPLATE', () => { - const cmp = ReactDOM.render( + const container = document.getElementById("container"); + ReactDOM.render( { description: 'mydescription' } }] - }} />, document.getElementById("container")); - expect(cmp).toExist(); + }} />, container); + expect(container.innerHTML).toExist(); - const cmpDom = ReactDOM.findDOMNode(cmp); + const cmpDom = container.firstElementChild; expect(cmpDom).toExist(); const templateDOM = document.getElementById('my-template'); @@ -118,7 +127,8 @@ describe('Identity Viewers', () => { }); it('test JSONViewer with TEMPLATE and missing properties', () => { - const cmp = ReactDOM.render( + const container = document.getElementById("container"); + ReactDOM.render( { description: 'mydescription' } }] - }} />, document.getElementById("container")); - expect(cmp).toExist(); + }} />, container); + expect(container.innerHTML).toExist(); - const cmpDom = ReactDOM.findDOMNode(cmp); + const cmpDom = container.firstElementChild; expect(cmpDom).toExist(); const templateDOM = document.getElementById('my-template'); @@ -146,7 +156,7 @@ describe('Identity Viewers', () => { }); it('test JSONViewer with TEMPLATE with tag inside variable', () => { - ReactDOM.render( + ReactDOM.render( { description: 'mydescription' } }] - }} />, document.getElementById("container")); + }} />, document.getElementById("container")); let templateDOM = document.getElementById('my-template'); expect(templateDOM.innerHTML).toBe('the property name is myname'); - ReactDOM.render( + ReactDOM.render( { description: 'mydescription' } }] - }} />, document.getElementById("container")); + }} />, document.getElementById("container")); templateDOM = document.getElementById('my-template'); expect(templateDOM.innerHTML).toBe('the property description is mydescription'); }); it('test JSONViewer with TEMPLATE multiple features', () => { - const cmp = ReactDOM.render( + const container = document.getElementById("container"); + ReactDOM.render( { description: 'newDescription' } }] - }} />, document.getElementById("container")); - expect(cmp).toExist(); + }} />, container); + expect(container.innerHTML).toExist(); - const cmpDom = ReactDOM.findDOMNode(cmp); + const cmpDom = container.firstElementChild; expect(cmpDom).toExist(); const templateDOM = document.getElementsByClassName('my-template'); @@ -225,7 +236,7 @@ describe('Identity Viewers', () => { it('test JSONViewer with TEMPLATE but missing/empty template', () => { // when template is missing, undefined or equal to


response is displayed in PROPERTIES format - ReactDOM.render( + ReactDOM.render( { description: 'mydescription' } }] - }} />, document.getElementById("container")); + }} />, document.getElementById("container")); let propertiesViewer = document.getElementsByClassName('mapstore-json-viewer'); expect(propertiesViewer.length).toBe(1); - ReactDOM.render( + ReactDOM.render( { description: 'mydescription' } }] - }} />, document.getElementById("container")); + }} />, document.getElementById("container")); propertiesViewer = document.getElementsByClassName('mapstore-json-viewer'); expect(propertiesViewer.length).toBe(1); //


is the value of react-quill when empty - ReactDOM.render( + ReactDOM.render( { description: 'mydescription' } }] - }} />, document.getElementById("container")); + }} />, document.getElementById("container")); propertiesViewer = document.getElementsByClassName('mapstore-json-viewer'); expect(propertiesViewer.length).toBe(1); diff --git a/web/client/components/home/__tests__/Home-test.jsx b/web/client/components/home/__tests__/Home-test.jsx index 44b3a624a2..2bece8f872 100644 --- a/web/client/components/home/__tests__/Home-test.jsx +++ b/web/client/components/home/__tests__/Home-test.jsx @@ -22,18 +22,20 @@ describe("Test Home component", () => { }); it('creates component with defaults', () => { - const cmp = ReactDOM.render(, document.getElementById("container")); - expect(cmp).toBeTruthy(); + const container = document.getElementById("container"); + ReactDOM.render(, container); + expect(container.innerHTML).toExist(); const icons = document.querySelectorAll(".glyphicon-home"); expect(icons.length).toEqual(1); expect(icons[0]).toBeTruthy(); }); it('creates component with custom icon text', () => { - const cmp = ReactDOM.render( + const container = document.getElementById("container"); + ReactDOM.render( , document.getElementById("container")); - expect(cmp).toBeTruthy(); + />, container); + expect(container.innerHTML).toExist(); const buttons = document.querySelectorAll("button"); expect(buttons.length).toEqual(1); expect(buttons[0]).toBeTruthy(); diff --git a/web/client/components/plugins/__tests__/PluginsContainer-test.jsx b/web/client/components/plugins/__tests__/PluginsContainer-test.jsx index 3e0338b70a..3f727e0732 100644 --- a/web/client/components/plugins/__tests__/PluginsContainer-test.jsx +++ b/web/client/components/plugins/__tests__/PluginsContainer-test.jsx @@ -116,14 +116,15 @@ describe('PluginsContainer', () => { }); it('checks filterDisabledPlugins one disabled', () => { - const cmp = ReactDOM.render( + const container = document.getElementById("container"); + ReactDOM.render( - , document.getElementById("container")); - expect(cmp).toExist(); + , container); + expect(container.innerHTML).toExist(); - const cmpDom = ReactDOM.findDOMNode(cmp); + const cmpDom = container.firstElementChild; expect(cmpDom).toExist(); const rendered = cmpDom.getElementsByTagName("div"); @@ -131,14 +132,15 @@ describe('PluginsContainer', () => { }); it('checks filterDisabledPlugins no disabled', () => { - const cmp = ReactDOM.render( + const container = document.getElementById("container"); + ReactDOM.render( - , document.getElementById("container")); - expect(cmp).toExist(); + , container); + expect(container.innerHTML).toExist(); - const cmpDom = ReactDOM.findDOMNode(cmp); + const cmpDom = container.firstElementChild; expect(cmpDom).toExist(); const rendered = cmpDom.getElementsByTagName("div"); @@ -146,41 +148,42 @@ describe('PluginsContainer', () => { }); it('test noRoot option disable root rendering of plugins', () => { // Not rendered without container - let cmp = ReactDOM.render( + const container = document.getElementById("container"); + ReactDOM.render( - , document.getElementById("container")); - expect(cmp).toExist(); + , container); + expect(container.innerHTML).toExist(); - let cmpDom = ReactDOM.findDOMNode(cmp); + let cmpDom = container.firstElementChild; expect(cmpDom).toExist(); let rendered = cmpDom.getElementsByTagName("div"); // rendered in container expect(rendered.length).toBe(1); - cmp = ReactDOM.render( + ReactDOM.render( - , document.getElementById("container")); - expect(cmp).toExist(); + , container); + expect(container.innerHTML).toExist(); - cmpDom = ReactDOM.findDOMNode(cmp); + cmpDom = container.firstElementChild; expect(cmpDom).toExist(); - rendered = cmpDom.getElementsByTagName("div"); expect(document.getElementById('no-impl-item-no-root-plugin')).toNotExist(); expect(document.getElementById('no-root')).toExist(); }); it('checks plugin with forwardRef = true connect option', () => { - const app = ReactDOM.render( + const container = document.getElementById("container"); + ReactDOM.render( - , document.getElementById("container")); + , container); - expect(app).toExist(); + expect(container.innerHTML).toExist(); expect(window.WithGlobalRefPlugin.myFunc).toExist(); }); }); diff --git a/web/client/plugins/contextmanager/__tests__/PaginationToolbar-test.jsx b/web/client/plugins/contextmanager/__tests__/PaginationToolbar-test.jsx index 7a532be5f9..4415a3a2e7 100644 --- a/web/client/plugins/contextmanager/__tests__/PaginationToolbar-test.jsx +++ b/web/client/plugins/contextmanager/__tests__/PaginationToolbar-test.jsx @@ -60,13 +60,13 @@ describe("contextmanager PaginationToolbar component", () => { } }); - const comp = ReactDOM.render( + const container = document.getElementById('container'); + ReactDOM.render( - , document.getElementById("container")); - expect(comp).toExist(); + , container); + expect(container.innerHTML).toExist(); - const container = document.getElementById('container'); const pagination = container.getElementsByClassName('pagination'); expect(pagination).toExist(); expect(pagination.length).toBe(1); diff --git a/web/client/plugins/contexts/__tests__/PaginationToolbar-test.jsx b/web/client/plugins/contexts/__tests__/PaginationToolbar-test.jsx index fb748fbaf0..b878e2d910 100644 --- a/web/client/plugins/contexts/__tests__/PaginationToolbar-test.jsx +++ b/web/client/plugins/contexts/__tests__/PaginationToolbar-test.jsx @@ -60,13 +60,13 @@ describe("contexts PaginationToolbar component", () => { } }); - const comp = ReactDOM.render( + const container = document.getElementById('container'); + ReactDOM.render( - , document.getElementById("container")); - expect(comp).toExist(); + , container); + expect(container.innerHTML).toExist(); - const container = document.getElementById('container'); const pagination = container.getElementsByClassName('pagination'); expect(pagination).toExist(); expect(pagination.length).toBe(1); diff --git a/web/client/product/components/viewer/__tests__/MapViewer-test.jsx b/web/client/product/components/viewer/__tests__/MapViewer-test.jsx index 6de99b8f66..ade43915ee 100644 --- a/web/client/product/components/viewer/__tests__/MapViewer-test.jsx +++ b/web/client/product/components/viewer/__tests__/MapViewer-test.jsx @@ -20,10 +20,11 @@ const store = mockStore({}); const location = document.location; const renderMapViewerComp = (mapViewerPros) => { - return ReactDOM.render( + const container = document.getElementById("container"); + ReactDOM.render( - , document.getElementById("container")); + , container); }; describe("Test the MapViewerCmp component", () => { @@ -37,58 +38,75 @@ describe("Test the MapViewerCmp component", () => { setTimeout(done); }); - it('testing creation with defaults', () => { - const mapViewerPros = { wrappedContainer: MapViewerContainer }; - const cmpMapViewerCmp = renderMapViewerComp(mapViewerPros); - expect(cmpMapViewerCmp).toExist(); + it('testing creation with defaults', (done) => { + const mapViewerPros = { + wrappedContainer: MapViewerContainer, + onLoaded: (res) => { + expect(res).toBe(true); + done(); + } + }; + renderMapViewerComp(mapViewerPros); }); - it('testing creation with mapId = new', () => { + it('testing creation with mapId = new', (done) => { const match = {params: {mapId: "new"}}; const mapViewerPros = { match, location, onInit: () => {}, wrappedContainer: MapViewerContainer, loadMapConfig: (cfgUrl, mapId) => { expect(cfgUrl).toBe("new.json"); expect(mapId).toBe(null); + }, + onLoaded: (res) => { + expect(res).toBe(true); + done(); }}; - const cmpMapViewerCmp = renderMapViewerComp(mapViewerPros); - expect(cmpMapViewerCmp).toExist(); + renderMapViewerComp(mapViewerPros); }); - it('testing creation with mapId = anyString', () => { + it('testing creation with mapId = anyString', (done) => { const match = {params: {mapId: "anyString"}}; const mapViewerPros = { match, location, onInit: () => {}, wrappedContainer: MapViewerContainer, loadMapConfig: (cfgUrl, mapId) => { expect(cfgUrl).toBe("anyString.json"); expect(mapId).toBe(null); + }, + onLoaded: (res) => { + expect(res).toBe(true); + done(); }}; - const cmpMapViewerCmp = renderMapViewerComp(mapViewerPros); - expect(cmpMapViewerCmp).toExist(); + renderMapViewerComp(mapViewerPros); }); - it('testing creation with mapId = 0', () => { + it('testing creation with mapId = 0', (done) => { const match = {params: {mapId: 0}}; const mapViewerPros = { match, location, onInit: () => {}, wrappedContainer: MapViewerContainer, loadMapConfig: (cfgUrl, mapId) => { expect(cfgUrl).toBe("config.json"); expect(mapId).toBe(null); + }, + onLoaded: (res) => { + expect(res).toBe(true); + done(); }}; - const component = renderMapViewerComp(mapViewerPros); - expect(component).toExist(); + renderMapViewerComp(mapViewerPros); }); - it('testing creation with mapId = 1', () => { + it('testing creation with mapId = 1', (done) => { const match = {params: {mapId: 1}}; const mapViewerPros = { match, location, onInit: () => {}, wrappedContainer: MapViewerContainer, loadMapConfig: (cfgUrl, mapId) => { expect(cfgUrl).toBe("/rest/geostore/data/1"); expect(mapId).toBe(1); + }, + onLoaded: (res) => { + expect(res).toBe(true); + done(); }}; - const component = renderMapViewerComp(mapViewerPros); - expect(component).toExist(); + renderMapViewerComp(mapViewerPros); }); it('testing update of map on mapId change', (done) => { let count = 1; @@ -112,8 +130,15 @@ describe("Test the MapViewerCmp component", () => { renderMapViewerComp({ ...mapViewerPros, location: { ...location }}); // render second time setTimeout(() => { - const component = renderMapViewerComp({ ...mapViewerPros, match: match2, location: {...location}}); - expect(component).toExist(); + renderMapViewerComp({ + ...mapViewerPros, + match: match2, + location: {...location}, + onLoaded: (res) => { + expect(res).toBe(true); + done(); + } + }); }, 300); }); diff --git a/web/client/utils/__tests__/PluginsUtils-test.js b/web/client/utils/__tests__/PluginsUtils-test.js index 79eaae6b02..13204d66a7 100644 --- a/web/client/utils/__tests__/PluginsUtils-test.js +++ b/web/client/utils/__tests__/PluginsUtils-test.js @@ -85,8 +85,9 @@ describe('PluginsUtils', () => { test: "statetest" }) }; - const app = ReactDOM.render(, document.getElementById("container")); - const domElement = ReactDOM.findDOMNode(app); + const container = document.getElementById("container"); + ReactDOM.render(, container); + const domElement = container.firstElementChild; expect(domElement.innerText).toBe("plugintest"); }); it('handleExpression', () => {