From 8821359e0119e9c20574b13d10577bd8535b6335 Mon Sep 17 00:00:00 2001 From: CD Cabrera Date: Thu, 2 Jul 2020 13:11:04 -0400 Subject: [PATCH] fix(routerTypes): issues/328 lazy load routing (#337) * build, frontend and notifications packages patched * build, integration dist/file output test * router, apply react suspense loading * routerTypes, react lazy app routes --- package.json | 4 +- .../__snapshots__/router.test.js.snap | 102 ++++++++++-------- .../__snapshots__/routerHelpers.test.js.snap | 72 ++++++------- .../__snapshots__/routerTypes.test.js.snap | 36 +++---- .../router/__tests__/routerTypes.test.js | 16 +++ src/components/router/redirect.js | 8 +- src/components/router/router.js | 11 +- src/components/router/routerTypes.js | 12 +-- tests/__snapshots__/dist.test.js.snap | 23 +++- yarn.lock | 16 +-- 10 files changed, 172 insertions(+), 128 deletions(-) diff --git a/package.json b/package.json index 7327b3e2a..a10c007aa 100644 --- a/package.json +++ b/package.json @@ -82,8 +82,8 @@ "@patternfly/react-icons": "4.4.2", "@patternfly/react-styles": "4.4.2", "@patternfly/react-tokens": "4.5.2", - "@redhat-cloud-services/frontend-components": "2.1.1", - "@redhat-cloud-services/frontend-components-notifications": "2.1.0", + "@redhat-cloud-services/frontend-components": "2.1.3", + "@redhat-cloud-services/frontend-components-notifications": "2.1.1", "@redhat-cloud-services/frontend-components-utilities": "2.1.0", "axios": "^0.19.2", "c3": "^0.7.15", diff --git a/src/components/router/__tests__/__snapshots__/router.test.js.snap b/src/components/router/__tests__/__snapshots__/router.test.js.snap index f9e8e1d7d..f086ce0b4 100644 --- a/src/components/router/__tests__/__snapshots__/router.test.js.snap +++ b/src/components/router/__tests__/__snapshots__/router.test.js.snap @@ -1,20 +1,28 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Router Component should handle unique route settings: settings 1`] = ` - - - - + + } +> + + + + + `; exports[`Router Component should pass customized props to routed components: routeDetail and location parsedSearch props 1`] = ` @@ -51,33 +59,41 @@ Object { `; exports[`Router Component should render a basic component: basic 1`] = ` - - - - - - - + + } +> + + + + + + + + `; diff --git a/src/components/router/__tests__/__snapshots__/routerHelpers.test.js.snap b/src/components/router/__tests__/__snapshots__/routerHelpers.test.js.snap index 5f2fe6baa..f77e4438b 100644 --- a/src/components/router/__tests__/__snapshots__/routerHelpers.test.js.snap +++ b/src/components/router/__tests__/__snapshots__/routerHelpers.test.js.snap @@ -42,11 +42,10 @@ exports[`RouterHelpers should return an error route: error route 1`] = ` Object { "activateOnError": true, "component": Object { - "$$typeof": Symbol(react.memo), - "WrappedComponent": [Function], - "compare": null, - "displayName": "Connect(OptinView)", - "type": [Function], + "$$typeof": Symbol(react.lazy), + "_ctor": [Function], + "_result": null, + "_status": -1, }, "disabled": false, "exact": true, @@ -68,11 +67,10 @@ Object { }, "navRoute": Object { "component": Object { - "$$typeof": Symbol(react.memo), - "WrappedComponent": [Function], - "compare": null, - "displayName": "Connect(RhelView)", - "type": [Function], + "$$typeof": Symbol(react.lazy), + "_ctor": [Function], + "_result": null, + "_status": -1, }, "default": true, "disabled": false, @@ -88,11 +86,10 @@ Object { }, "route": Object { "component": Object { - "$$typeof": Symbol(react.memo), - "WrappedComponent": [Function], - "compare": null, - "displayName": "Connect(RhelView)", - "type": [Function], + "$$typeof": Symbol(react.lazy), + "_ctor": [Function], + "_result": null, + "_status": -1, }, "disabled": false, "exact": true, @@ -115,11 +112,10 @@ Object { }, "navRoute": Object { "component": Object { - "$$typeof": Symbol(react.memo), - "WrappedComponent": [Function], - "compare": null, - "displayName": "Connect(RhelView)", - "type": [Function], + "$$typeof": Symbol(react.lazy), + "_ctor": [Function], + "_result": null, + "_status": -1, }, "default": true, "disabled": false, @@ -135,11 +131,10 @@ Object { }, "route": Object { "component": Object { - "$$typeof": Symbol(react.memo), - "WrappedComponent": [Function], - "compare": null, - "displayName": "Connect(RhelView)", - "type": [Function], + "$$typeof": Symbol(react.lazy), + "_ctor": [Function], + "_result": null, + "_status": -1, }, "disabled": false, "exact": true, @@ -170,11 +165,10 @@ Object { }, "navRoute": Object { "component": Object { - "$$typeof": Symbol(react.memo), - "WrappedComponent": [Function], - "compare": null, - "displayName": "Connect(RhelView)", - "type": [Function], + "$$typeof": Symbol(react.lazy), + "_ctor": [Function], + "_result": null, + "_status": -1, }, "default": true, "disabled": false, @@ -211,11 +205,10 @@ Object { }, "navRoute": Object { "component": Object { - "$$typeof": Symbol(react.memo), - "WrappedComponent": [Function], - "compare": null, - "displayName": "Connect(RhelView)", - "type": [Function], + "$$typeof": Symbol(react.lazy), + "_ctor": [Function], + "_result": null, + "_status": -1, }, "disabled": false, "exact": true, @@ -238,11 +231,10 @@ Object { "route": Object { "activateOnError": true, "component": Object { - "$$typeof": Symbol(react.memo), - "WrappedComponent": [Function], - "compare": null, - "displayName": "Connect(OptinView)", - "type": [Function], + "$$typeof": Symbol(react.lazy), + "_ctor": [Function], + "_result": null, + "_status": -1, }, "disabled": false, "exact": true, diff --git a/src/components/router/__tests__/__snapshots__/routerTypes.test.js.snap b/src/components/router/__tests__/__snapshots__/routerTypes.test.js.snap index 75b9b187b..9777a4489 100644 --- a/src/components/router/__tests__/__snapshots__/routerTypes.test.js.snap +++ b/src/components/router/__tests__/__snapshots__/routerTypes.test.js.snap @@ -52,11 +52,10 @@ exports[`RouterTypes should return specific properties: routes 1`] = ` Array [ Object { "component": Object { - "$$typeof": Symbol(react.memo), - "WrappedComponent": [Function], - "compare": null, - "displayName": "Connect(RhelView)", - "type": [Function], + "$$typeof": Symbol(react.lazy), + "_ctor": [Function], + "_result": null, + "_status": -1, }, "disabled": false, "exact": true, @@ -66,11 +65,10 @@ Array [ }, Object { "component": Object { - "$$typeof": Symbol(react.memo), - "WrappedComponent": [Function], - "compare": null, - "displayName": "Connect(RhelView)", - "type": [Function], + "$$typeof": Symbol(react.lazy), + "_ctor": [Function], + "_result": null, + "_status": -1, }, "disabled": false, "exact": true, @@ -80,11 +78,10 @@ Array [ }, Object { "component": Object { - "$$typeof": Symbol(react.memo), - "WrappedComponent": [Function], - "compare": null, - "displayName": "Connect(OpenshiftView)", - "type": [Function], + "$$typeof": Symbol(react.lazy), + "_ctor": [Function], + "_result": null, + "_status": -1, }, "disabled": false, "exact": true, @@ -95,11 +92,10 @@ Array [ Object { "activateOnError": true, "component": Object { - "$$typeof": Symbol(react.memo), - "WrappedComponent": [Function], - "compare": null, - "displayName": "Connect(OptinView)", - "type": [Function], + "$$typeof": Symbol(react.lazy), + "_ctor": [Function], + "_result": null, + "_status": -1, }, "disabled": false, "exact": true, diff --git a/src/components/router/__tests__/routerTypes.test.js b/src/components/router/__tests__/routerTypes.test.js index abce41dcd..9f708063b 100644 --- a/src/components/router/__tests__/routerTypes.test.js +++ b/src/components/router/__tests__/routerTypes.test.js @@ -8,4 +8,20 @@ describe('RouterTypes', () => { expect(platformModalRedirect).toMatchSnapshot('platformModalRedirect'); expect(routes).toMatchSnapshot('routes'); }); + + it('should return a lazy loaded view for every route', () => { + const lazyLoadComponents = []; + + routes.forEach(({ component, to }) => { + const routeComponent = Object.getOwnPropertyNames(component) + .map(prop => (component[prop] || '').toString()) + .find(val => /react/i.test(val)); + + if (/lazy/.test(routeComponent)) { + lazyLoadComponents.push({ routeComponentType: routeComponent, route: to }); + } + }); + + expect(lazyLoadComponents.length).toBe(4); + }); }); diff --git a/src/components/router/redirect.js b/src/components/router/redirect.js index 221b79a50..830dc7a21 100644 --- a/src/components/router/redirect.js +++ b/src/components/router/redirect.js @@ -4,6 +4,7 @@ import PropTypes from 'prop-types'; import { withRouter, Route } from 'react-router-dom'; import { routerHelpers } from './routerHelpers'; import { helpers } from '../../common'; +import { Loader } from '../loader/loader'; /** * A routing redirect. @@ -31,7 +32,12 @@ const Redirect = ({ baseName, history, isRedirect, isReplace, url, route }) => { if (isRedirect === true) { if (route && history) { const routeDetail = routerHelpers.getRouteDetail({ pathname: route }); - return {routeDetail && }; + + return ( + }> + {routeDetail && } + + ); } const forcePath = url || (route && path.join(baseName, route)); diff --git a/src/components/router/router.js b/src/components/router/router.js index 690c3377c..e72074b1f 100644 --- a/src/components/router/router.js +++ b/src/components/router/router.js @@ -4,6 +4,7 @@ import { Redirect as ReactRouterDomRedirect, Route, Switch } from 'react-router- import Redirect from './redirect'; import { routerHelpers } from './routerHelpers'; import { routerTypes } from './routerTypes'; +import { Loader } from '../loader/loader'; /** * Load routes. @@ -99,10 +100,12 @@ class Router extends React.Component { const { renderRoutes, redirectRoot } = this.renderRoutes(); return ( - - {renderRoutes} - {redirectRoot} - + }> + + {renderRoutes} + {redirectRoot} + + ); } } diff --git a/src/components/router/routerTypes.js b/src/components/router/routerTypes.js index 0ec0000db..e9ca46c3e 100644 --- a/src/components/router/routerTypes.js +++ b/src/components/router/routerTypes.js @@ -1,8 +1,6 @@ +import React from 'react'; import path from 'path'; import { helpers } from '../../common/helpers'; -import OpenshiftView from '../openshiftView/openshiftView'; -import OptinView from '../optinView/optinView'; -import RhelView from '../rhelView/rhelView'; import { RHSM_API_PATH_ID_TYPES } from '../../types/rhsmApiTypes'; /** @@ -35,7 +33,7 @@ const routes = [ { to: '/rhel-sw/all', redirect: true, - component: RhelView, + component: React.lazy(() => import('../rhelView/rhelView')), exact: true, render: true, disabled: helpers.UI_DISABLED @@ -43,7 +41,7 @@ const routes = [ { id: 'rhel-sw', to: '/rhel-sw/:variant', - component: RhelView, + component: React.lazy(() => import('../rhelView/rhelView')), exact: true, render: true, disabled: helpers.UI_DISABLED @@ -51,7 +49,7 @@ const routes = [ { id: 'openshift-sw', to: '/openshift-sw', - component: OpenshiftView, + component: React.lazy(() => import('../openshiftView/openshiftView')), exact: true, render: true, disabled: helpers.UI_DISABLED @@ -59,7 +57,7 @@ const routes = [ { id: 'optin', to: '/optin', - component: OptinView, + component: React.lazy(() => import('../optinView/optinView')), exact: true, render: true, activateOnError: true, diff --git a/tests/__snapshots__/dist.test.js.snap b/tests/__snapshots__/dist.test.js.snap index 574ec8ac9..a10cc659f 100644 --- a/tests/__snapshots__/dist.test.js.snap +++ b/tests/__snapshots__/dist.test.js.snap @@ -7,13 +7,30 @@ Array [ "./build/locales/en-US.json", "./build/locales/en.json", "./build/locales/locales.json", - "./build/static/css/2*chunk*map", - "./build/static/css/2*chunk.css", + "./build/static/css/0*chunk*map", + "./build/static/css/0*chunk.css", + "./build/static/css/5*chunk*map", + "./build/static/css/5*chunk.css", + "./build/static/css/6*chunk*map", + "./build/static/css/6*chunk.css", "./build/static/css/main*chunk*map", "./build/static/css/main*chunk.css", - "./build/static/js/2*chunk*LICENSE.txt", + "./build/static/js/0*chunk*LICENSE.txt", + "./build/static/js/0*chunk*map", + "./build/static/js/0*chunk.js", + "./build/static/js/1*chunk*map", + "./build/static/js/1*chunk.js", "./build/static/js/2*chunk*map", "./build/static/js/2*chunk.js", + "./build/static/js/5*chunk*LICENSE.txt", + "./build/static/js/5*chunk*map", + "./build/static/js/5*chunk.js", + "./build/static/js/6*chunk*map", + "./build/static/js/6*chunk.js", + "./build/static/js/7*chunk*map", + "./build/static/js/7*chunk.js", + "./build/static/js/8*chunk*map", + "./build/static/js/8*chunk.js", "./build/static/js/main*chunk*map", "./build/static/js/main*chunk.js", "./build/static/js/runtime-main*js", diff --git a/yarn.lock b/yarn.lock index 8830604b8..cc3ace6f3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1556,10 +1556,10 @@ resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.4.2.tgz#7c6dc4ecef16149fd7a736710baa1b811017fdca" integrity sha512-JlGTGRYHC2QK+DDbePyXdBdooxFq2+noLfWpRqJtkxcb/oYWzOF0kcbfvvbWrwevCC1l6hLUg1wHYT+ona5BWQ== -"@redhat-cloud-services/frontend-components-notifications@2.1.0": - version "2.1.0" - resolved "https://registry.yarnpkg.com/@redhat-cloud-services/frontend-components-notifications/-/frontend-components-notifications-2.1.0.tgz#440d6da5983f92306eb504bb559a8799211e3caa" - integrity sha512-MNZ8edZnRLb+0S8xBhk3DmAr3vdYRXY73QcuFrQdUojY6vGSN8Q6RqwMXlzYBn5AJVCSYeIuqsKxT36WTdFo+A== +"@redhat-cloud-services/frontend-components-notifications@2.1.1": + version "2.1.1" + resolved "https://registry.yarnpkg.com/@redhat-cloud-services/frontend-components-notifications/-/frontend-components-notifications-2.1.1.tgz#24aa6bf64fae7546becc1eefb640cfd5cdf4391a" + integrity sha512-iufWE31xDdt3MpSQDSqdhVyTtZm7vxjwm9wJL7mWNf86anzGmt7qvGy7Gi7n3YHQZKhSlYqNaE7mReG7qps/cQ== dependencies: "@redhat-cloud-services/frontend-components-utilities" "2.1.0-beta" @@ -1596,10 +1596,10 @@ commander ">=2.20.0" react-content-loader ">=3.4.1" -"@redhat-cloud-services/frontend-components@2.1.1": - version "2.1.1" - resolved "https://registry.yarnpkg.com/@redhat-cloud-services/frontend-components/-/frontend-components-2.1.1.tgz#9f066e2d5163b655129c79a1e5c8a730db822e09" - integrity sha512-e2MTCBcmGhmLthky28gkgspUQprluFn/XI5UNnFqqEbE0HaX9O4BLxRoiH5qV2fDsl3FnA9gmeUpJjwO/hbBaw== +"@redhat-cloud-services/frontend-components@2.1.3": + version "2.1.3" + resolved "https://registry.yarnpkg.com/@redhat-cloud-services/frontend-components/-/frontend-components-2.1.3.tgz#7c71c6f78945d734145fef2724e61a6ec8e4ce8f" + integrity sha512-c9IYvcLqpq+JUS1cT9tjCQ94inUmtLnN34PXWCcmPoBERYSvpNX0ebGERC8Mw09QqTeNHPM1cV5r6JATP5YMQQ== dependencies: "@redhat-cloud-services/frontend-components-utilities" "*" sanitize-html "^1.25.0"