From 0b2ccc9bcffae932c543af01a5145ca267826b18 Mon Sep 17 00:00:00 2001
From: Aleh Zasypkin <aleh.zasypkin@gmail.com>
Date: Mon, 29 Nov 2021 23:04:40 +0100
Subject: [PATCH] Make fixture app wait until network is idle before running
 authentication tests. (#119715)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../common/test_endpoints/public/plugin.tsx   | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/x-pack/test/security_functional/fixtures/common/test_endpoints/public/plugin.tsx b/x-pack/test/security_functional/fixtures/common/test_endpoints/public/plugin.tsx
index b0264998db17d..745a8852968c0 100644
--- a/x-pack/test/security_functional/fixtures/common/test_endpoints/public/plugin.tsx
+++ b/x-pack/test/security_functional/fixtures/common/test_endpoints/public/plugin.tsx
@@ -8,21 +8,34 @@
 import type { CoreSetup, Plugin } from 'src/core/public';
 import ReactDOM from 'react-dom';
 import React from 'react';
+import { debounce, filter, first } from 'rxjs/operators';
+import { timer } from 'rxjs';
 
 export class TestEndpointsPlugin implements Plugin {
   public setup(core: CoreSetup) {
     // Prevent auto-logout on server `401` errors.
     core.http.anonymousPaths.register('/authentication/app');
+
+    const networkIdle$ = core.http.getLoadingCount$().pipe(
+      debounce(() => timer(3000)),
+      filter((count) => count === 0),
+      first()
+    );
+
     core.application.register({
       id: 'authentication_app',
       title: 'Authentication app',
       appRoute: '/authentication/app',
       chromeless: true,
       async mount({ element }) {
-        ReactDOM.render(
-          <div data-test-subj="testEndpointsAuthenticationApp">Authenticated!</div>,
-          element
-        );
+        // Promise is resolved as soon there are no requests has been made in the last 3 seconds. We need this to make
+        // sure none of the unrelated requests interferes with the test logic.
+        networkIdle$.toPromise().then(() => {
+          ReactDOM.render(
+            <div data-test-subj="testEndpointsAuthenticationApp">Authenticated!</div>,
+            element
+          );
+        });
         return () => ReactDOM.unmountComponentAtNode(element);
       },
     });