Make fixture app wait until network is idle before running authentica…

…tion tests. (elastic#119715) (elastic#119909)

Co-authored-by: Kibana Machine <[email protected]>

Co-authored-by: Aleh Zasypkin <[email protected]>

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);
       },
     });