add unit tests and fix lint issues

Co-authored-by: Saikrishna321 <[email protected]>

Author: SrinivasanTarget

app/common/renderer/actions/Inspector.js

@@ -1,6 +1,10 @@
 import _ from 'lodash';
 
-import {SAVED_FRAMEWORK, SET_SAVED_GESTURES, ENVIRONMENT_VARIABLES} from '../../shared/setting-defs';
+import {
+  ENVIRONMENT_VARIABLES,
+  SAVED_FRAMEWORK,
+  SET_SAVED_GESTURES,
+} from '../../shared/setting-defs';
 import {POINTER_TYPES} from '../constants/gestures';
 import {APP_MODE, NATIVE_APP} from '../constants/session-inspector';
 import i18n from '../i18next';
@@ -944,15 +948,15 @@ export function addEnvironmentVariable(key, value) {
 export function deleteEnvironmentVariable(key) {
   return async (dispatch, getState) => {
     const currentEnvVars = getState().inspector.environmentVariables || [];
-    const newEnvVars = currentEnvVars.filter(v => v.key !== key);
+    const newEnvVars = currentEnvVars.filter((v) => v.key !== key);
     await setSetting(ENVIRONMENT_VARIABLES, newEnvVars);
     dispatch({type: DELETE_ENVIRONMENT_VARIABLE, key});
   };
 }
 
 export function loadEnvironmentVariables() {
   return async (dispatch) => {
-    const envVars = await getSetting(ENVIRONMENT_VARIABLES) || [];
+    const envVars = (await getSetting(ENVIRONMENT_VARIABLES)) || [];
     dispatch({type: SET_ENVIRONMENT_VARIABLES, envVars});
   };
 }

app/common/renderer/actions/Session.js

@@ -1,6 +1,5 @@
 import {notification} from 'antd';
 import {includes, isPlainObject, isUndefined, toPairs, union, values, without} from 'lodash';
-import {interpolateEnvironmentVariables} from '../utils/env-utils';
 import moment from 'moment';
 import {Web2Driver} from 'web2driver';
 
@@ -16,6 +15,7 @@ import {APP_MODE} from '../constants/session-inspector';
 import i18n from '../i18next';
 import {getSetting, ipcRenderer, setSetting} from '../polyfills';
 import {fetchSessionInformation, formatSeleniumGridSessions} from '../utils/attaching-to-session';
+import {interpolateEnvironmentVariables} from '../utils/env-utils';
 import {downloadFile, parseSessionFileContents} from '../utils/file-handling';
 import {log} from '../utils/logger';
 import {addVendorPrefixes} from '../utils/other';
@@ -232,10 +232,13 @@ export function newSession(caps, attachSessId = null) {
 
     // Get environment variables from state
     const environmentVariables = getState().inspector.environmentVariables || [];
-    
+
     // Get capabilities and interpolate environment variables
     let desiredCapabilities = caps ? getCapsObject(caps) : {};
-    desiredCapabilities = interpolateEnvironmentVariables(desiredCapabilities, environmentVariables);
+    desiredCapabilities = interpolateEnvironmentVariables(
+      desiredCapabilities,
+      environmentVariables,
+    );
     let host, port, username, accessKey, https, path, token;
     desiredCapabilities = addCustomCaps(desiredCapabilities);
 

app/common/renderer/components/Inspector/EnvironmentVariables.jsx

@@ -1,8 +1,13 @@
-import {PlusOutlined, DeleteOutlined} from '@ant-design/icons';
-import {Button, Input, Space, Table, Tooltip, Popconfirm} from 'antd';
+import {DeleteOutlined, PlusOutlined} from '@ant-design/icons';
+import {Button, Input, Popconfirm, Space, Table, Tooltip} from 'antd';
 import {useState} from 'react';
 import {connect} from 'react-redux';
-import {setEnvironmentVariables, addEnvironmentVariable, deleteEnvironmentVariable} from '../../actions/Inspector';
+
+import {
+  addEnvironmentVariable,
+  deleteEnvironmentVariable,
+  setEnvironmentVariables,
+} from '../../actions/Inspector';
 import styles from './Inspector.module.css';
 
 const EnvironmentVariables = ({t, envVars, addVariable, deleteVariable}) => {
@@ -36,20 +41,18 @@ const EnvironmentVariables = ({t, envVars, addVariable, deleteVariable}) => {
             cancelText={t('Cancel')}
             onConfirm={() => deleteVariable(record.key)}
           >
-            <Button
-              type="text"
-              danger
-              icon={<DeleteOutlined />}
-            />
+            <Button type="text" danger icon={<DeleteOutlined />} />
           </Popconfirm>
         </Tooltip>
       ),
     },
   ];
 
   const handleAddVariable = () => {
-    if (!newVar.key || !newVar.value) return;
-    
+    if (!newVar.key || !newVar.value) {
+      return;
+    }
+
     // Check for duplicate keys
     if (envVars.some((v) => v.key === newVar.key)) {
       return;
@@ -83,24 +86,18 @@ const EnvironmentVariables = ({t, envVars, addVariable, deleteVariable}) => {
           </Button>
         </Space.Compact>
       </div>
-      <Table
-        columns={columns}
-        dataSource={envVars}
-        pagination={false}
-        rowKey="key"
-        size="small"
-      />
+      <Table columns={columns} dataSource={envVars} pagination={false} rowKey="key" size="small" />
     </div>
   );
 };
 
 const mapStateToProps = (state) => ({
-  envVars: state.inspector.environmentVariables || []
+  envVars: state.inspector.environmentVariables || [],
 });
 
 const mapDispatchToProps = (dispatch) => ({
   addVariable: (key, value) => dispatch(addEnvironmentVariable(key, value)),
-  deleteVariable: (key) => dispatch(deleteEnvironmentVariable(key))
+  deleteVariable: (key) => dispatch(deleteEnvironmentVariable(key)),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(EnvironmentVariables);

app/common/renderer/components/Inspector/Inspector.jsx

@@ -15,7 +15,6 @@ import {
 import {Button, Card, Modal, Space, Spin, Switch, Tabs, Tooltip} from 'antd';
 import {debounce} from 'lodash';
 import {useEffect, useRef, useState} from 'react';
-import styles from './Inspector.module.css';
 import {useNavigate} from 'react-router';
 
 import {BUTTON} from '../../constants/antd-types';
@@ -31,6 +30,7 @@ import {downloadFile} from '../../utils/file-handling';
 import Commands from './Commands.jsx';
 import GestureEditor from './GestureEditor.jsx';
 import HeaderButtons from './HeaderButtons.jsx';
+import styles from './Inspector.module.css';
 import Recorder from './Recorder.jsx';
 import SavedGestures from './SavedGestures.jsx';
 import Screenshot from './Screenshot.jsx';
@@ -263,7 +263,7 @@ const Inspector = (props) => {
   );
 
   const main = (
-      <div className={styles['inspector-main']}>
+    <div className={styles['inspector-main']}>
       <div
         id="screenshotContainer"
         className={styles['screenshot-container']}

app/common/renderer/components/Inspector/Inspector.module.css

@@ -741,4 +741,4 @@
 
 .addForm {
   padding: 8px 0;
-} 
+}

app/common/renderer/components/Session/Session.jsx

@@ -1,6 +1,5 @@
-import {LinkOutlined} from '@ant-design/icons';
-import {Badge, Button, Spin, Tabs, Card} from 'antd';
-import { SettingOutlined } from '@ant-design/icons';
+import {LinkOutlined, SettingOutlined} from '@ant-design/icons';
+import {Badge, Button, Card, Spin, Tabs} from 'antd';
 import _ from 'lodash';
 import {useEffect} from 'react';
 import {useNavigate} from 'react-router';
@@ -14,6 +13,7 @@ import {
 } from '../../constants/session-builder';
 import {ipcRenderer, openLink} from '../../polyfills';
 import {log} from '../../utils/logger';
+import EnvironmentVariables from '../Inspector/EnvironmentVariables.jsx';
 import AdvancedServerParams from './AdvancedServerParams.jsx';
 import AttachToSession from './AttachToSession.jsx';
 import CapabilityEditor from './CapabilityEditor.jsx';
@@ -22,7 +22,6 @@ import CloudProviderSelector from './CloudProviderSelector.jsx';
 import SavedSessions from './SavedSessions.jsx';
 import ServerTabCustom from './ServerTabCustom.jsx';
 import SessionStyles from './Session.module.css';
-import EnvironmentVariables from '../Inspector/EnvironmentVariables.jsx';
 
 const Session = (props) => {
   const {

app/common/renderer/constants/session-inspector.js

@@ -41,5 +41,5 @@ export const INSPECTOR_TABS = {
   COMMANDS: 'commands',
   GESTURES: 'gestures',
   RECORDER: 'recorder',
-  SESSION_INFO: 'sessionInfo',  
+  SESSION_INFO: 'sessionInfo',
 };

app/common/renderer/reducers/Inspector.jsx

@@ -1,14 +1,17 @@
 import {omit} from 'lodash';
 
+import {ENVIRONMENT_VARIABLES} from '../../shared/setting-defs';
 import {
   ADD_ASSIGNED_VAR_CACHE,
+  ADD_ENVIRONMENT_VARIABLE,
   CANCEL_PENDING_COMMAND,
   CLEAR_ASSIGNED_VAR_CACHE,
   CLEAR_COORD_ACTION,
   CLEAR_RECORDING,
   CLEAR_SEARCH_RESULTS,
   CLEAR_SEARCHED_FOR_ELEMENT_BOUNDS,
   CLEAR_TAP_COORDINATES,
+  DELETE_ENVIRONMENT_VARIABLE,
   DELETE_SAVED_GESTURES_DONE,
   DELETE_SAVED_GESTURES_REQUESTED,
   ENTERING_COMMAND_ARGS,
@@ -49,8 +52,6 @@ import {
   SET_COORD_END,
   SET_COORD_START,
   SET_ENVIRONMENT_VARIABLES,
-  ADD_ENVIRONMENT_VARIABLE,
-  DELETE_ENVIRONMENT_VARIABLE,
   SET_EXPANDED_PATHS,
   SET_GESTURE_TAP_COORDS_MODE,
   SET_GESTURE_UPLOAD_ERROR,
@@ -89,14 +90,13 @@ import {
   UNSELECT_TICK_ELEMENT,
 } from '../actions/Inspector';
 import {SCREENSHOT_INTERACTION_MODE} from '../constants/screenshot';
-import {ENVIRONMENT_VARIABLES} from '../../shared/setting-defs';
 import {APP_MODE, INSPECTOR_TABS, NATIVE_APP} from '../constants/session-inspector';
 import {getSetting} from '../polyfills';
 
 const DEFAULT_FRAMEWORK = 'java';
 
 // Load initial environment variables from persistent settings
-const envVars = await getSetting(ENVIRONMENT_VARIABLES) || [];
+const envVars = (await getSetting(ENVIRONMENT_VARIABLES)) || [];
 
 const INITIAL_STATE = {
   savedGestures: [],
@@ -144,9 +144,11 @@ let nextState;
 
 // Helper function to interpolate environment variables in a string
 const interpolateEnvVars = (str, envVars) => {
-  if (typeof str !== 'string') return str;
+  if (typeof str !== 'string') {
+    return str;
+  }
   return str.replace(/\${([^}]+)}/g, (match, key) => {
-    const envVar = envVars.find(v => v.key === key);
+    const envVar = envVars.find((v) => v.key === key);
     return envVar ? envVar.value : match;
   });
 };
@@ -164,14 +166,14 @@ export default function inspector(state = INITIAL_STATE, action) {
         ...state,
         environmentVariables: [
           ...state.environmentVariables,
-          {key: action.key, value: action.value}
+          {key: action.key, value: action.value},
         ],
       };
 
     case DELETE_ENVIRONMENT_VARIABLE:
       return {
         ...state,
-        environmentVariables: state.environmentVariables.filter(v => v.key !== action.key),
+        environmentVariables: state.environmentVariables.filter((v) => v.key !== action.key),
       };
 
     case SET_SOURCE_AND_SCREENSHOT:

app/common/renderer/utils/env-utils.js

@@ -7,21 +7,21 @@
 export function interpolateEnvironmentVariables(obj, envVars) {
   if (typeof obj === 'string') {
     return obj.replace(/\${([^}]+)}/g, (match, key) => {
-      const envVar = envVars.find(v => v.key === key);
+      const envVar = envVars.find((v) => v.key === key);
       return envVar ? envVar.value : match;
     });
   }
-  
+
   if (Array.isArray(obj)) {
-    return obj.map(item => interpolateEnvironmentVariables(item, envVars));
+    return obj.map((item) => interpolateEnvironmentVariables(item, envVars));
   }
-  
+
   if (obj !== null && typeof obj === 'object') {
     return Object.keys(obj).reduce((acc, key) => {
       acc[key] = interpolateEnvironmentVariables(obj[key], envVars);
       return acc;
     }, {});
   }
-  
+
   return obj;
 }

test/unit/utils-env.spec.js

@@ -0,0 +1,79 @@
+import {describe, expect, it} from 'vitest';
+
+import {interpolateEnvironmentVariables} from '../../app/common/renderer/utils/env-utils';
+
+describe('interpolateEnvironmentVariables', function () {
+  const envVars = [
+    {key: 'HOME', value: '/home/user'},
+    {key: 'PATH', value: '/usr/bin'},
+    {key: 'APP_ENV', value: 'test'},
+  ];
+
+  it('should interpolate environment variables in strings', function () {
+    const input = 'My home is ${HOME} and path is ${PATH}';
+    const expected = 'My home is /home/user and path is /usr/bin';
+    expect(interpolateEnvironmentVariables(input, envVars)).to.equal(expected);
+  });
+
+  it('should leave unmatched variables unchanged', function () {
+    const input = 'Value: ${UNKNOWN_VAR}';
+    expect(interpolateEnvironmentVariables(input, envVars)).to.equal('Value: ${UNKNOWN_VAR}');
+  });
+
+  it('should interpolate variables in arrays', function () {
+    const input = ['${HOME}/files', '${PATH}/python'];
+    const expected = ['/home/user/files', '/usr/bin/python'];
+    expect(interpolateEnvironmentVariables(input, envVars)).to.deep.equal(expected);
+  });
+
+  it('should interpolate variables in nested objects', function () {
+    const input = {
+      home: '${HOME}',
+      paths: {
+        bin: '${PATH}',
+        config: '${HOME}/.config',
+      },
+      env: '${APP_ENV}',
+    };
+    const expected = {
+      home: '/home/user',
+      paths: {
+        bin: '/usr/bin',
+        config: '/home/user/.config',
+      },
+      env: 'test',
+    };
+    expect(interpolateEnvironmentVariables(input, envVars)).to.deep.equal(expected);
+  });
+
+  it('should handle null values', function () {
+    expect(interpolateEnvironmentVariables(null, envVars)).to.equal(null);
+  });
+
+  it('should handle undefined values', function () {
+    expect(interpolateEnvironmentVariables(undefined, envVars)).to.equal(undefined);
+  });
+
+  it('should handle number values', function () {
+    expect(interpolateEnvironmentVariables(42, envVars)).to.equal(42);
+  });
+
+  it('should handle boolean values', function () {
+    expect(interpolateEnvironmentVariables(true, envVars)).to.equal(true);
+    expect(interpolateEnvironmentVariables(false, envVars)).to.equal(false);
+  });
+
+  it('should handle empty arrays', function () {
+    expect(interpolateEnvironmentVariables([], envVars)).to.deep.equal([]);
+  });
+
+  it('should handle empty objects', function () {
+    expect(interpolateEnvironmentVariables({}, envVars)).to.deep.equal({});
+  });
+
+  it('should handle multiple variables in single string', function () {
+    const input = '${HOME}:${PATH}:${APP_ENV}';
+    const expected = '/home/user:/usr/bin:test';
+    expect(interpolateEnvironmentVariables(input, envVars)).to.equal(expected);
+  });
+});