API Proxy for UI Tests #6927

dmohs · 2022-08-08T21:53:39Z

No ticket - Test changes only. No code changes.

This creates a proxy to simulate API responses. The goal is to make UI tests faster and more reliable.

Most of the code is auto-generated from real API responses, so this change is smaller than it looks. You can ignore everything in the handlers directory, provided the code that generates those files looks sound.

TODO:
Handlers should not be a set of static files. Instead, each test should define the handlers to be used for that test.

dmohs · 2022-08-18T17:33:55Z

.circleci/config.yml

            yarn install
            yarn codegen
-            REACT_APP_ENVIRONMENT=pr-site-$PR_SITE_NUM yarn run build --aot --no-watch --no-progress
+            REACT_APP_ENVIRONMENT=test yarn run build --aot --no-watch --no-progress


If we go with this approach, I will delete the unused PR site configuration files.

dmohs · 2022-08-18T17:34:49Z

api-proxy/handlers/*.options.mjs

@@ -0,0 +1,19 @@
+const matchReq = req => req.method === 'OPTIONS'


This is the only handler that is hand-edited. All of the OPTIONS method responses were basically identical, so I consolidated them into one file.

dmohs · 2022-08-18T17:35:52Z

api-proxy/src/logging.mjs

@@ -0,0 +1,28 @@
+import * as nu from 'util'


Start of non-generated code.

dmohs · 2022-08-18T17:37:55Z

api-proxy/src/logging.mjs

+const create = (logStream = process.stderr) => {
+  let lastStamp = -Infinity
+
+  const truncate = ms => Math.floor(ms / 60e3) * 60e3


Codacy says this style of number can be inaccurate. However, (1) I disagree, (2) It wouldn't matter if they were, and (3) I think it is easier to see the value when not crowded with zeros.

agree that codacy's rule doesn't make sense here

jmthibault79

What does .mjs signify?

Please update the README with how to run this locally, in replay and record modes

jmthibault79 · 2022-08-18T19:57:11Z

api-proxy/src/logging.mjs

+const create = (logStream = process.stderr) => {
+  let lastStamp = -Infinity
+
+  const truncate = ms => Math.floor(ms / 60e3) * 60e3


agree that codacy's rule doesn't make sense here

api-proxy/src/server.mjs

jmthibault79 · 2022-08-18T20:03:42Z

api-proxy/src/server.mjs

+    req.startTimeMs = Date.now()
+    req.index = requestIndex++
+    res.index = req.index
+    req.log = (...formatArgs) => {


what does this do?

I think you mean the ...formatArgs part, which is just variadic arguments in JS (probably like ES2015+).

My concern is in in the details of this function: Why does the first arg 'f' get special treatment here?

If I'm interpreting this right, the log command has a mixture of substitution and positional formatting, which could be simplified to log('#%d %s', req.index, f, ...args), in which case I don't see the point of splitting out 'f' at all.

api-proxy/src/server.mjs

jmthibault79 · 2022-08-18T20:09:48Z

api-proxy/src/reqhandler.mjs

+
+const quoteSingles = x => x.replace(/[']/g, '\\\'')
+const quoteBackquotes = x => x.replace(/[`]/g, '\\`')
+const formatObj = x => nu.inspect(x, {depth: Infinity, maxArrayLength: 10e3, breakLength: 100})


what does this do?

inspect is a (awesome) Node utility that formats objects in a very readable way while still allowing them to be read via Node's interpreter. I've included a few options to ensure the output is less concise so it includes all of the data, but this is the workhorse that produces the fairly readable handlers directly from code.

Is this different from JSON.stringify() ?

jmthibault79 · 2022-08-18T20:10:34Z

api-proxy/src/reqhandler.mjs

+const omit = ks => obj =>
+  Object.keys(obj).reduce((acc, k) => ks.includes(k) ? acc : ({...acc, [k]: obj[k]}), {})
+
+const promiseEvent = eventName => x => new Promise(resolve => {


would "convert event to promise" be an accurate way to describe what this is doing?

I don't think so. We're not transforming the event in any way. Instead, we're just waiting for it using the promise mechanism instead of a callback. "Promise event" here means, "promise me that you'll get an event in the future." I'm using promise in its verb form to return one in its noun form. Does that context make you think this name is a good choice?

I'm not following. Not too surprising, since I don't really understand how events work. Also: I find curried functions to be an order of magnitude more difficult to read, so there's that too.

But this might be moot: I don't see that this is being used anywhere. Maybe it can be removed?

api-proxy/src/reqhandler.mjs

dmohs

Since node supports "old style" require module semantics along with the now current import semantics, it uses the extension to determine which one you are using. At this time, import only works in "modules," which must have the .mjs extension.

Thanks for the reminder to update the README.

dmohs · 2022-08-25T19:26:29Z

api-proxy/src/reqhandler.mjs

+const omit = ks => obj =>
+  Object.keys(obj).reduce((acc, k) => ks.includes(k) ? acc : ({...acc, [k]: obj[k]}), {})
+
+const promiseEvent = eventName => x => new Promise(resolve => {


I don't think so. We're not transforming the event in any way. Instead, we're just waiting for it using the promise mechanism instead of a callback. "Promise event" here means, "promise me that you'll get an event in the future." I'm using promise in its verb form to return one in its noun form. Does that context make you think this name is a good choice?

dmohs · 2022-08-25T19:29:11Z

api-proxy/src/reqhandler.mjs

+
+const quoteSingles = x => x.replace(/[']/g, '\\\'')
+const quoteBackquotes = x => x.replace(/[`]/g, '\\`')
+const formatObj = x => nu.inspect(x, {depth: Infinity, maxArrayLength: 10e3, breakLength: 100})


inspect is a (awesome) Node utility that formats objects in a very readable way while still allowing them to be read via Node's interpreter. I've included a few options to ensure the output is less concise so it includes all of the data, but this is the workhorse that produces the fairly readable handlers directly from code.

api-proxy/src/reqhandler.mjs

api-proxy/src/server.mjs

dmohs · 2022-08-25T19:49:21Z

api-proxy/src/server.mjs

+    req.startTimeMs = Date.now()
+    req.index = requestIndex++
+    res.index = req.index
+    req.log = (...formatArgs) => {


I think you mean the ...formatArgs part, which is just variadic arguments in JS (probably like ES2015+).

api-proxy/src/server.mjs

dmohs marked this pull request as ready for review August 18, 2022 17:02

dmohs requested review from NehaBroad and jmthibault79 August 18, 2022 17:10

dmohs commented Aug 18, 2022

View reviewed changes

jmthibault79 reviewed Aug 18, 2022

View reviewed changes

dmohs and others added 14 commits August 25, 2022 14:57

Test changes

49f6024

parameterize proxy URL

c7d0f45

API proxy

9d5dbe4

use API proxy

fcec2f4

handlers

4ab0884

startproxy.sh

c810821

fix and disable deploy

771a0de

silence proxy logs for now

d1847ac

Silence the correct fd

dab99dc

re-enable deploy job

5806e94

Rename handlers to path-first

7e847a6

Misc fixes

4192a2d

Update proxy launcher

d22a653

README

8a3f82c

dmohs force-pushed the dmohs/api-proxy branch from 4b0584a to 8a3f82c Compare August 25, 2022 19:01

dmohs added 2 commits August 25, 2022 15:41

formatResBody

159e844

Remove host check

dc3b09d

dmohs commented Aug 25, 2022

View reviewed changes

dmohs merged commit 081eb79 into main Aug 26, 2022

dmohs deleted the dmohs/api-proxy branch August 26, 2022 16:07

		@@ -0,0 +1,19 @@
		const matchReq = req => req.method === 'OPTIONS'

API Proxy for UI Tests #6927

API Proxy for UI Tests #6927

Uh oh!

Conversation

dmohs commented Aug 8, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jmthibault79 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jmthibault79 Aug 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

dmohs left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

dmohs commented Aug 8, 2022 •

edited

Loading

jmthibault79 Aug 29, 2022 •

edited

Loading