Merge pull request #1747 from jdi-testing/issue_1746-fix-network-erro…

…r-during-ws-connection

Issue 1746: fix network error during ws connection

manifest.json

@@ -3,7 +3,7 @@
   "name": "JDN — Page Object Generator",
   "description": "JDN – helps Test Automation Engineer to create Page Objects in the test automation framework and speed up test development",
   "devtools_page": "index.html",
-  "version": "3.15.38",
+  "version": "3.15.39",
   "icons": {
     "128": "icon128.png"
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jdn-ai-chrome-extension",
-  "version": "3.15.38",
+  "version": "3.15.39",
   "description": "jdn-ai chrome extension",
   "scripts": {
     "start": "webpack --watch --env devenv",

src/features/locators/LocatorsPage.tsx

@@ -47,11 +47,14 @@ import { setIsEditModalOpen } from './customLocator.slice';
 import { selectIsCustomLocatorFlow } from '../onboarding/store/onboarding.selectors';
 import { stopProgressBar } from '../pageObjects/progressBar.slice';
 import { enablePageObjectsListUI } from '../pageObjects/pageObjectsListUI.slice';
+import { LocatorTreeSpinner } from './components/LocatorTreeSpinner';
+import { selectLocatorsStatus } from './selectors/locators.selectors';
 
 const { confirm } = Modal;
 
 export const LocatorsPage = () => {
   const dispatch = useDispatch();
+  const showSpinner = useSelector(selectLocatorsStatus) === IdentificationStatus.preparing;
   const locators = useSelector(selectFilteredLocators);
   const areUnselectedAll = useSelector(selectIfUnselectedAll);
   const locatorIds = useSelector(getLocatorsIdsByPO);
@@ -236,6 +239,8 @@ export const LocatorsPage = () => {
             >
               {locators.length || areUnselectedAll ? (
                 <LocatorsTree {...{ viewProps, locatorIds }} />
+              ) : showSpinner ? (
+                <LocatorTreeSpinner />
               ) : (
                 <>
                   {isNoPageLocators && (

src/features/locators/selectors/locators.selectors.ts

@@ -104,3 +104,8 @@ export const simpleSelectLocatorByJdnHash = createDraftSafeSelector(
     return locators.find(({ elementId }) => pageObjLocators?.includes(elementId));
   },
 );
+
+export const selectLocatorsStatus = createSelector(
+  (state: RootState) => state.locators.present.status,
+  (status) => status,
+);

src/features/locators/utils/constants.ts

@@ -47,6 +47,7 @@ export const newLocatorStub: ILocator = {
 
 export const NO_ELEMENT_IN_DOCUMENT = 'Document does not contain given element!';
 export const NETWORK_ERROR = 'Network Error has been encountered.';
+export const CONNECTION_TIMEOUT = 'The connection to the backend timed out';
 export const DEFAULT_ERROR = 'An error has been encountered.';
 
 // max number of elements to start locators generation automatically

src/services/webSocketController.js

@@ -1,6 +1,8 @@
 import { isNull } from 'lodash';
 import { request, WebSocketMessage } from './backend';
-import { NETWORK_ERROR } from '../features/locators/utils/constants';
+import { CONNECTION_TIMEOUT, NETWORK_ERROR } from '../features/locators/utils/constants';
+
+const thirtySeconds = 30000;
 
 class WebSocketController {
   pingInterval = null;
@@ -89,8 +91,8 @@ class WebSocketController {
       this.ping();
       if (this.pingTimeout) return;
       this.pingTimeout = setTimeout(() => {
-        this.messageListener(NETWORK_ERROR);
-      }, 10000);
+        this.messageListener(CONNECTION_TIMEOUT);
+      }, thirtySeconds);
     }, 5000);
   }