Remove dependency on DOM structure

elastic · Aug 14, 2020 · c1c91ea · c1c91ea
1 parent b14a0e6
commit c1c91ea
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 19 deletions.
diff --git a/x-pack/plugins/security_solution/public/resolver/test_utilities/simulator/index.tsx b/x-pack/plugins/security_solution/public/resolver/test_utilities/simulator/index.tsx
@@ -185,6 +185,17 @@ export class Simulator {
     );
   }
 
+  /**
+   * The primary button (used to select a node) which contains a label for the node as its content.
+   */
+  public processNodePrimaryButton(
+    /** nodeID for the related node */ entityID: string
+  ): ReactWrapper {
+    return this.domNodes(
+      `[data-test-subj="resolver:node:primary-button"][data-test-resolver-node-id="${entityID}"]`
+    );
+  }
+
   /**
    * Return the node element with the given `entityID`.
    */

diff --git a/x-pack/plugins/security_solution/public/resolver/view/clickthrough.test.tsx b/x-pack/plugins/security_solution/public/resolver/view/clickthrough.test.tsx
@@ -62,13 +62,13 @@ describe('Resolver, when analyzing a tree that has no ancestors and 2 children',
           selectedOriginCount: simulator.selectedProcessNode(entityIDs.origin).length,
           unselectedFirstChildCount: simulator.unselectedProcessNode(entityIDs.firstChild).length,
           unselectedSecondChildCount: simulator.unselectedProcessNode(entityIDs.secondChild).length,
-          processNodeCount: simulator.processNodeElements().length,
+          nodePrimaryButtonCount: simulator.testSubject('resolver:node:primary-button').length,
         }))
       ).toYieldEqualTo({
         selectedOriginCount: 1,
         unselectedFirstChildCount: 1,
         unselectedSecondChildCount: 1,
-        processNodeCount: 3,
+        nodePrimaryButtonCount: 3,
       });
     });
 
@@ -82,13 +82,14 @@ describe('Resolver, when analyzing a tree that has no ancestors and 2 children',
     });
 
     describe("when the second child node's first button has been clicked", () => {
-      beforeEach(() => {
-        // Click the first button under the second child element.
-        simulator
-          .processNodeElements({ entityID: entityIDs.secondChild })
-          .find('button')
-          .first()
-          .simulate('click');
+      beforeEach(async () => {
+        const button = await simulator.resolveWrapper(() =>
+          simulator.processNodePrimaryButton(entityIDs.secondChild)
+        );
+        // Click the second child node's primary button
+        if (button) {
+          button.simulate('click');
+        }
       });
       it('should render the second child node as selected, and the origin as not selected, and the query string should indicate that the second child is selected', async () => {
         await expect(
@@ -141,13 +142,13 @@ describe('Resolver, when analyzing a tree that has two related events for the or
           graphElements: simulator.testSubject('resolver:graph').length,
           graphLoadingElements: simulator.testSubject('resolver:graph:loading').length,
           graphErrorElements: simulator.testSubject('resolver:graph:error').length,
-          originNode: simulator.processNodeElements({ entityID: entityIDs.origin }).length,
+          originNodeButton: simulator.processNodePrimaryButton(entityIDs.origin).length,
         }))
       ).toYieldEqualTo({
         graphElements: 1,
         graphLoadingElements: 0,
         graphErrorElements: 0,
-        originNode: 1,
+        originNodeButton: 1,
       });
     });
 

diff --git a/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx b/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx
@@ -404,6 +404,8 @@ const UnstyledProcessEventDot = React.memo(
               }}
               tabIndex={-1}
               title={eventModel.processNameSafeVersion(event)}
+              data-test-subj="resolver:node:primary-button"
+              data-test-resolver-node-id={nodeID}
             >
               <span className="euiButton__content">
                 <span className="euiButton__text" data-test-subj={'euiButton__text'}>

diff --git a/x-pack/plugins/security_solution/public/resolver/view/query_params.test.ts b/x-pack/plugins/security_solution/public/resolver/view/query_params.test.ts
@@ -34,12 +34,12 @@ describe('Resolver, when analyzing a tree that has no ancestors and 2 children',
 
   describe("when the second child node's first button has been clicked", () => {
     beforeEach(async () => {
-      const node = await simulator.resolveWrapper(() =>
-        simulator.processNodeElements({ entityID: entityIDs.secondChild }).find('button')
+      const button = await simulator.resolveWrapper(() =>
+        simulator.processNodePrimaryButton(entityIDs.secondChild)
       );
-      if (node) {
+      if (button) {
         // Click the first button under the second child element.
-        node.first().simulate('click');
+        button.simulate('click');
       }
     });
     const expectedSearch = urlSearch(resolverComponentInstanceID, {
@@ -68,12 +68,12 @@ describe('Resolver, when analyzing a tree that has no ancestors and 2 children',
       });
       describe("when the user clicks the second child node's button again", () => {
         beforeEach(async () => {
-          const node = await simulator.resolveWrapper(() =>
-            simulator.processNodeElements({ entityID: entityIDs.secondChild }).find('button')
+          const button = await simulator.resolveWrapper(() =>
+            simulator.processNodePrimaryButton(entityIDs.secondChild)
           );
-          if (node) {
+          if (button) {
             // Click the first button under the second child element.
-            node.first().simulate('click');
+            button.simulate('click');
           }
         });
         it(`should have a url search of ${urlSearch(newInstanceID, {