diff --git a/packages/react-server-test-pages/entrypoints.js b/packages/react-server-test-pages/entrypoints.js index 15c6236c7..438eaadff 100644 --- a/packages/react-server-test-pages/entrypoints.js +++ b/packages/react-server-test-pages/entrypoints.js @@ -49,4 +49,16 @@ module.exports = { entry: "/error/logs", description: "Generate errors in the logs", }, + BottleneckElements: { + entry: "/bottleneck/elements", + description: "Test if number of elements on a page is a bottleneck", + }, + BottleneckDataRequests: { + entry: "/bottleneck/dataRequests", + description: "Test if number of data requests on a page is a bottleneck", + }, + BottleneckMiddleware: { + entry: "/bottleneck/middleware", + description: "Test if amount of middleware on a page is a bottleneck", + }, } diff --git a/packages/react-server-test-pages/pages/bottleneck/colors/blue.scss b/packages/react-server-test-pages/pages/bottleneck/colors/blue.scss new file mode 100644 index 000000000..6528ab87e --- /dev/null +++ b/packages/react-server-test-pages/pages/bottleneck/colors/blue.scss @@ -0,0 +1,5 @@ +$blueish: blue; + +.blue-thing { + background-color: $blueish; +} diff --git a/packages/react-server-test-pages/pages/bottleneck/colors/green.scss b/packages/react-server-test-pages/pages/bottleneck/colors/green.scss new file mode 100644 index 000000000..3cc45ca32 --- /dev/null +++ b/packages/react-server-test-pages/pages/bottleneck/colors/green.scss @@ -0,0 +1,5 @@ +$greenish: green; + +.green-thing { + background-color: $greenish; +} diff --git a/packages/react-server-test-pages/pages/bottleneck/colors/indigo.scss b/packages/react-server-test-pages/pages/bottleneck/colors/indigo.scss new file mode 100644 index 000000000..94e09a86f --- /dev/null +++ b/packages/react-server-test-pages/pages/bottleneck/colors/indigo.scss @@ -0,0 +1,5 @@ +$indigoish: indigo; + +.indigo-thing { + background-color: $indigoish; +} diff --git a/packages/react-server-test-pages/pages/bottleneck/colors/orange.scss b/packages/react-server-test-pages/pages/bottleneck/colors/orange.scss new file mode 100644 index 000000000..52ed57b93 --- /dev/null +++ b/packages/react-server-test-pages/pages/bottleneck/colors/orange.scss @@ -0,0 +1,5 @@ +$orangeish: orange; + +.orange-thing { + background-color: $orangeish; +} diff --git a/packages/react-server-test-pages/pages/bottleneck/colors/purple.scss b/packages/react-server-test-pages/pages/bottleneck/colors/purple.scss new file mode 100644 index 000000000..6328e2202 --- /dev/null +++ b/packages/react-server-test-pages/pages/bottleneck/colors/purple.scss @@ -0,0 +1,5 @@ +$purpleish: purple; + +.purple-thing { + background-color: $purpleish; +} diff --git a/packages/react-server-test-pages/pages/bottleneck/colors/red.scss b/packages/react-server-test-pages/pages/bottleneck/colors/red.scss new file mode 100644 index 000000000..c1ffb7894 --- /dev/null +++ b/packages/react-server-test-pages/pages/bottleneck/colors/red.scss @@ -0,0 +1,5 @@ +$reddish: red; + +.red-thing { + background-color: $reddish; +} diff --git a/packages/react-server-test-pages/pages/bottleneck/colors/yellow.scss b/packages/react-server-test-pages/pages/bottleneck/colors/yellow.scss new file mode 100644 index 000000000..9769caae2 --- /dev/null +++ b/packages/react-server-test-pages/pages/bottleneck/colors/yellow.scss @@ -0,0 +1,5 @@ +$yellowish: yellow; + +.yellow-thing { + background-color: $yellowish; +} diff --git a/packages/react-server-test-pages/pages/bottleneck/dataRequests.js b/packages/react-server-test-pages/pages/bottleneck/dataRequests.js new file mode 100644 index 000000000..ecd545d70 --- /dev/null +++ b/packages/react-server-test-pages/pages/bottleneck/dataRequests.js @@ -0,0 +1,35 @@ +import {ReactServerAgent, RootContainer, RootElement} from "react-server"; +import "./colors/red.scss"; +import "./colors/green.scss"; + +const elements = []; +/** +* This page is a smoke test to determine whether or not the number of data requests in +* a page is a performance bottleneck for react-server. It performs a thousand data +* requests before returning a simple message. Metrics are created in the browser's console +* related to performance metrics (see react-server.core.ClientController). +*/ +export default class DataRequestsPage { + + handleRoute() { + //Reset elements, then perform one thousand local data requests before returning + elements.length = 0; + for (var i = 1; i <= 1000; i++) { + let current = i; + let promise = ReactServerAgent.get('/data/delay') + .then(response => response.body); + elements.push(
Data request {current} complete.
); + } + return { code: 200 }; + } + + getElements() { + return [ +
Data requests starting...
, + + {elements} + , +
Content should be above me.
, + ]; + } +} diff --git a/packages/react-server-test-pages/pages/bottleneck/elements.js b/packages/react-server-test-pages/pages/bottleneck/elements.js new file mode 100644 index 000000000..b7526a345 --- /dev/null +++ b/packages/react-server-test-pages/pages/bottleneck/elements.js @@ -0,0 +1,39 @@ +import "./colors/red.scss"; +import "./colors/blue.scss"; +import "./colors/purple.scss"; +import "./colors/green.scss"; +import "./colors/orange.scss"; +import "./colors/indigo.scss"; +import "./colors/yellow.scss"; + +const RedThing = () =>
This should be red
; +const BlueThing = () =>
This should be blue
; +const PurpleThing = () =>
This should be purple
; +const GreenThing = () =>
This should be green
; +const OrangeThing = () =>
This should be orange
; +const IndigoThing = () =>
This should be indigo
; +const YellowThing = () =>
This should be yellow
; +const ColorWheel = [RedThing(), BlueThing(), PurpleThing(), GreenThing(), + OrangeThing(), IndigoThing(), YellowThing()]; +const ColorSize = ColorWheel.length; + +/** +* This page is a smoke test to determine whether or not the number of elements in +* a page is a performance bottleneck for react-server. It returns a huge assortment of +* randomly generated color-coded elements. Metrics are created in the browser's console +* related to performance metrics (see react-server.core.ClientController). +*/ +export default class ElementsPage { + + getElements() { + + const colorThings = []; + for (var i = 0; i < 10000; i++) { + // Select a random element from the colors of the rainbow + let selection = Math.floor(Math.random() * ColorSize); + colorThings.push(ColorWheel[selection]); + }; + + return (colorThings); + } +} diff --git a/packages/react-server-test-pages/pages/bottleneck/middleware.js b/packages/react-server-test-pages/pages/bottleneck/middleware.js new file mode 100644 index 000000000..df21aadac --- /dev/null +++ b/packages/react-server-test-pages/pages/bottleneck/middleware.js @@ -0,0 +1,20 @@ +import TestMiddleware from './test-middleware/TestMiddleware' +import _ from "lodash"; + +/** +* This page is a smoke test to determine whether or not the amount of middleware in +* a page is a performance bottleneck for react-server. It has a middleware chain of +* 1k copies of TestMiddleware, and the response is returned after this chain. +* Note that all that is done within the middleware itself is a small string being appended +* to the response. After the response is generated, the page is complete. +*/ +export default class MiddlewarePage { + + static middleware() { + return _.range(1000).map(() => TestMiddleware); + } + + getResponseData() { + return ""; + } +} diff --git a/packages/react-server-test-pages/pages/bottleneck/test-middleware/TestMiddleware.js b/packages/react-server-test-pages/pages/bottleneck/test-middleware/TestMiddleware.js new file mode 100644 index 000000000..f2b3cfdff --- /dev/null +++ b/packages/react-server-test-pages/pages/bottleneck/test-middleware/TestMiddleware.js @@ -0,0 +1,18 @@ +export default class TestMiddleware { + + setConfigValues() { + return { isRawResponse: true }; + } + + getContentType() { + return 'text/plain'; + } + + handleRoute(next) { + return next(); + } + + getResponseData(next) { + return next().then(data => data + "Middleware iteration succeeded.\r\n"); + } +}