resolver simulator and click through tests

[oatkiller]

Summary

Write a few jest tests for resolver's react code.

based on: #72791

Unfortunately it's very very slow

it still works

Checklist

• Unit or functional tests were updated or added to match the most common scenarios

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[oatkiller]

still proof reading this myself. will finish up after lunch.

[oatkiller]

@james-elastic seems like these values are wrong (and wont work in the UI) in 7.9. not a 100% but we should look into it

[jonathan-buttner]

The change you're proposing is correct. The data that is sent by the endpoint looks like this:

Endpoint process event

{
  ...
"event": {
    "sequence": 81869,
    "ingested": "2020-07-28T18:10:08.032404Z",
    "created": "2020-07-28T18:07:14.30791200Z",
    "kind": "event",
    "module": "endpoint",
    "action": "end",
    "id": "LlVyJJ01mAI5jUhA+++/7VTY",
    "category": [
      "process"
    ],
    "type": [
      "end"
    ],
    "dataset": "endpoint.events.process"
  },
  "dataset": {
    "name": "endpoint.events.process",
    "namespace": "default",
    "type": "logs"
  },
  "user": { <--------------------------------
    "domain": "NT AUTHORITY",
    "name": "LOCAL SERVICE"
  },
  "_index": ".ds-logs-endpoint.events.process-default-000001",
  "_type": "_doc",
  "_id": "ZpqelnMBlglBfzvyECQh",
  "_score": 1
}

The fields that are defined in the mapping are user.id, user.name, and user.domain: https://github.com/elastic/endpoint-package/blob/master/schemas/v1/process/process.yaml#L1260

[bkimmel]

@oatkiller @jonathan-buttner Should pull this (and the other user fix) out into its own PR to get it in the BC today?

[bkimmel]

❔ Seems like this would break if more than one thing was aria-selected wouldn't it?

[oatkiller]

it gets added to baseResolverSelector which is '[data-test-subj="resolver:node"]' which is intended to be unique ish. although that'll break as well w/ more than 1 resolver on the page. we should probably add the document location ID to our data-test-subjs

[michaelolo24]

@bkimmel, when/why would we have more than one process node selected aside from 2 resolvers?

[oatkiller]

if we did have more than 1 process selected in a single resolver, this would return both, which would be what the test code would want (so we can say 'expected 1, got 2') or whatever

[bkimmel]

@michaelolo24 I was just thinking multi-resolver, mainly

[bkimmel]

ℹ️ this looks cool

[oatkiller]

I think this is a 7.9 bug

[oatkiller]

I think this is a 7.9 bug

[oatkiller]

this isn't available in jsdom so i added a guard in here. shouldn't hurt anything in production

[oatkiller]

future work: make these IDs unique to each document location ID so we can test 2 resolvers at once.

[oatkiller]

formerly map.tsx. i changed a few things but its mostly whitespace. github isn't behaving, but git can:
via git diff -w upstream/master:./x-pack/plugins/security_solution/public/resolver/view/map.tsx ./x-pack/plugins/security_solution/public/resolver/view/resolver_without_providers.tsx

diff --git a/x-pack/plugins/security_solution/public/resolver/view/map.tsx b/x-pack/plugins/security_solution/public/resolver/view/resolver_without_providers.tsx
index 30aa4b63a13..8813e09932a 100644
--- a/x-pack/plugins/security_solution/public/resolver/view/map.tsx
+++ b/x-pack/plugins/security_solution/public/resolver/view/resolver_without_providers.tsx
@@ -8,7 +8,7 @@
 
 /* eslint-disable react/display-name */
 
-import React, { useContext } from 'react';
+import React, { useContext, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import { useEffectOnce } from 'react-use';
 import { EuiLoadingSpinner } from '@elastic/eui';
@@ -24,30 +24,16 @@ import { useResolverQueryParams } from './use_resolver_query_params';
 import { StyledMapContainer, StyledPanel, GraphContainer } from './styles';
 import { entityId } from '../../../common/endpoint/models/event';
 import { SideEffectContext } from './side_effect_context';
+import { ResolverProps } from '../types';
 
 /**
  * The highest level connected Resolver component. Needs a `Provider` in its ancestry to work.
  */
-export const ResolverMap = React.memo(function ({
-  className,
-  databaseDocumentID,
-  resolverComponentInstanceID,
-}: {
-  /**
-   * Used by `styled-components`.
-   */
-  className?: string;
-  /**
-   * The `_id` value of an event in ES.
-   * Used as the origin of the Resolver graph.
-   */
-  databaseDocumentID?: string;
-  /**
-   * A string literal describing where in the app resolver is located,
-   * used to prevent collisions in things like query params
-   */
-  resolverComponentInstanceID: string;
-}) {
+export const ResolverWithoutProviders = React.memo(
+  React.forwardRef(function (
+    { className, databaseDocumentID, resolverComponentInstanceID }: ResolverProps,
+    refToForward
+  ) {
     /**
      * This is responsible for dispatching actions that include any external data.
      * `databaseDocumentID`
@@ -63,12 +49,28 @@ export const ResolverMap = React.memo(function ({
       selectors.visibleNodesAndEdgeLines
     )(timeAtRender);
     const terminatedProcesses = useSelector(selectors.terminatedProcesses);
-  const { projectionMatrix, ref, onMouseDown } = useCamera();
+    const { projectionMatrix, ref: cameraRef, onMouseDown } = useCamera();
+
+    const ref = useCallback(
+      (element: HTMLDivElement | null) => {
+        // Supply `useCamera` with the ref
+        cameraRef(element);
+
+        // If a ref is being forwarded, populate that as well.
+        if (typeof refToForward === 'function') {
+          refToForward(element);
+        } else if (refToForward !== null) {
+          refToForward.current = element;
+        }
+      },
+      [cameraRef, refToForward]
+    );
     const isLoading = useSelector(selectors.isLoading);
     const hasError = useSelector(selectors.hasError);
     const activeDescendantId = useSelector(selectors.ariaActiveDescendant);
     const { colorMap } = useResolverTheme();
     const { cleanUpQueryParams } = useResolverQueryParams();
+
     useEffectOnce(() => {
       return () => cleanUpQueryParams();
     });
@@ -76,11 +78,11 @@ export const ResolverMap = React.memo(function ({
     return (
       <StyledMapContainer className={className} backgroundColor={colorMap.resolverBackground}>
         {isLoading ? (
-        <div className="loading-container">
+          <div data-test-subj="resolver:graph:loading" className="loading-container">
             <EuiLoadingSpinner size="xl" />
           </div>
         ) : hasError ? (
-        <div className="loading-container">
+          <div data-test-subj="resolver:graph:error" className="loading-container">
             <div>
               {' '}
               <FormattedMessage
@@ -91,6 +93,7 @@ export const ResolverMap = React.memo(function ({
           </div>
         ) : (
           <GraphContainer
+            data-test-subj="resolver:graph"
             className="resolver-graph kbn-resetFocusState"
             onMouseDown={onMouseDown}
             ref={ref}
@@ -98,7 +101,8 @@ export const ResolverMap = React.memo(function ({
             tabIndex={0}
             aria-activedescendant={activeDescendantId || undefined}
           >
-          {connectingEdgeLineSegments.map(({ points: [startPosition, endPosition], metadata }) => (
+            {connectingEdgeLineSegments.map(
+              ({ points: [startPosition, endPosition], metadata }) => (
                 <EdgeLine
                   edgeLineMetadata={metadata}
                   key={metadata.uniqueId}
@@ -106,7 +110,8 @@ export const ResolverMap = React.memo(function ({
                   endPosition={endPosition}
                   projectionMatrix={projectionMatrix}
                 />
-          ))}
+              )
+            )}
             {[...processNodePositions].map(([processEvent, position]) => {
               const processEntityId = entityId(processEvent);
               return (
@@ -127,4 +132,5 @@ export const ResolverMap = React.memo(function ({
         <SymbolDefinitions />
       </StyledMapContainer>
     );
-});
+  })
+);

[michaelolo24]

Nice, I would add a comment here that the ref callback is used in the tests etc..., even though it has more use cases than that.

[oatkiller]

did

[oatkiller]

added data-test-subj

[oatkiller]

ref needs more complex handling now. When we get a new dom ref, call cameraRef, which sets the useCamera ref. Then if we're dealing w/ a forward ref, handle that.

[oatkiller]

added data-test-subj

[oatkiller]

added data-test-subj

[oatkiller]

for this file, try disabling whitespace:

My editor switched it to unix line endings. Only 2 lines should have changed in a meaningful way.

[bkimmel]

❔ You mean ResolverWithoutProviders right?

[oatkiller]

fixed

[bkimmel]

❔ what? I think I get the part about transitioning to this, but the word sometimes is making it difficult... do we mean something like finally or even at least once?

[oatkiller]

i need better names. was hoping to come up w/ then during an in-person code review.

[oatkiller]

so here's my logic:
Equal has significance in jest matchers. I'm trying to express that this is using a 'deep equal' type comparison like toEqual (vs toBe.)

Sometimes is meant to evoke the array method some

Here's the basic behavior:

    // Set to true if the test passes.
    let pass: boolean = false;

    // Async iterate over the iterable
    for await (const received of receivedIterable) {
      // keep track of the last value. Used in both pass and fail messages
      lastReceived = received;
      // Use deep equals to compare the value to the expected value
      if (this.equals(received, expected)) {
        // If the value is equal, break
        pass = true;
        break;
      }
    }

So it'll pass if the async generator ever yields a matching value. If it never yields a matching value and returns, the expectation will fail. if it never yields a matching value and never returns, the test will timeout.

maybe toOnceYieldEqualTo? I do expect to have other varieties of this. a strict equal variety at minimum.

[oatkiller]

toYieldAtLeastOnce sounds good. but it would be nice if the name indicated that deep equal was being used.

[bkimmel]

OK, I think I understand better now. For testing purposes can we put a tighter collar on it; Like we care that it yielded this at least once but I think we care even more that it yielded equal last, right? So maybe finallyYieldedEqualTo which captures the timing component, too.

[bkimmel]

Or eventuallyYieldedEqualTo

[oatkiller]

when with toYieldEqualTo for now. Let's continue improving this after merge

[bkimmel]

❔ link to enzyme docs?

[oatkiller]

I put a docs link in for the update function. that has some background on why this is needed. (albeit not much)

[michaelolo24]

👌

[oatkiller]

another place where better names are needed

[michaelolo24]

Actually, one quick thing here. Spelled transitions wrong here

[oatkiller]

NO U

[oatkiller]

1e7abdf

[oatkiller]

1e7abdf 1395397 i hope you're happy

[michaelolo24]

Looking forward to the 3,000 processes mock 😂

[michaelolo24]

gracias

[michaelolo24]

Looks good, just the one comment in there, but I think it would be good to run through these changes in an office hours, if not just to get a better idea of handling the state transitions and some of the promise resolution stuff. We can also help with naming :)

[oatkiller]

TODO, show details about last received.

[oatkiller]

better name?

[oatkiller]

TODO, idea for next time: simulateElementResize takes a query instead of an element reference. when responding to getBoundingBox whatever check if the element matches the query and if so return the fake size.

[oatkiller]

@elasticmachine merge upstream

[oatkiller]

@elasticmachine merge upstream

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: dd1453b

Build metrics

async chunks size

id	value	diff	baseline
securitySolution	7.3MB	+2.5KB	7.3MB

History

• 💔 Build #64925 failed 6f79a42
• 💔 Build #64910 failed 2ca8d4b
• 💔 Build #64888 failed 6f29db4
• 💔 Build #64855 failed 12ef066
• 💔 Build #64788 failed dafcbebefe6aa123cf1ed496610f0b3f0d457ca9

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream