Revert existing tests and implement new tests

app/renderer/src/assets/stylesheets/common.global.less

@@ -99,8 +99,3 @@ body::-webkit-scrollbar-corner {
 .ant-tabs-tab {
   font-size: 14px;
 }
-
-.search-word-highlighted {
-  color: #272625;
-  background: #b6d932;
-}

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

@@ -744,3 +744,8 @@
 .option-inpt {
   text-align: center;
 }
+
+.search-word-highlighted {
+  color: #272625;
+  background: #b6d932;
+}

app/renderer/src/components/Inspector/Source.jsx

@@ -1,7 +1,9 @@
 import {Spin, Tree} from 'antd';
 import React, {useEffect} from 'react';
 import {renderToString} from 'react-dom/server';
+
 import {IMPORTANT_SOURCE_ATTRS} from '../../constants/source';
+import {findNodeMatchingSearchTerm} from '../../utils/source-parsing';
 import InspectorStyles from './Inspector.module.css';
 import LocatorTestModal from './LocatorTestModal.jsx';
 import SiriCommandModal from './SiriCommandModal.jsx';
@@ -19,24 +21,16 @@ import {uniq} from 'lodash';
  * @returns {ReactNode} - The node text with highlighted search term
  *
  */
-export const highlightNodeMatchingSearchTerm = (nodeText, searchText) => {
-  if (!searchText || !nodeText) {
+const highlightNodeMatchingSearchTerm = (nodeText, searchText) => {
+  const searchResults = findNodeMatchingSearchTerm(nodeText, searchText);
+  if (!searchResults) {
     return nodeText;
   }
-
-  const index = nodeText.toLowerCase().indexOf(searchText.toLowerCase());
-  if (index < 0) {
-    return nodeText;
-  }
-  const prefix = nodeText.substring(0, index);
-  const suffix = nodeText.slice(index + searchText.length);
-  //Matched word will be wrapped in a separate span for custom highlighting
-  const matchedWord = nodeText.slice(index, index + searchText.length);
-
+  const {prefix, matchedWord, suffix} = searchResults;
   return (
     <>
       {prefix}
-      <span className="search-word-highlighted" data-match={searchText}>
+      <span className={InspectorStyles['search-word-highlighted']} data-match={searchText}>
         {matchedWord}
       </span>
       {suffix}

app/renderer/src/utils/source-parsing.js

@@ -82,3 +82,27 @@ export function xmlToJSON(sourceXML) {
 
   return firstChild ? translateRecursively(firstChild) : {};
 }
+
+/**
+ * Finds the text that matches the search term for higlighting
+ *
+ * @param {string} nodeText
+ * @param {string} searchText
+ * @returns {null|Object} details of the highlited information
+ */
+
+export function findNodeMatchingSearchTerm(nodeText, searchText) {
+  if (!searchText || !nodeText) {
+    return null;
+  }
+
+  const index = nodeText.toLowerCase().indexOf(searchText.toLowerCase());
+  if (index < 0) {
+    return null;
+  }
+  const prefix = nodeText.substring(0, index);
+  const suffix = nodeText.slice(index + searchText.length);
+  // Matched word will be wrapped in a separate span for custom highlighting
+  const matchedWord = nodeText.slice(index, index + searchText.length);
+  return {prefix, matchedWord, suffix};
+}

package.json

@@ -26,7 +26,7 @@
     "test:lint:fix": "eslint . --fix",
     "test:format": "prettier . -c",
     "test:format:fix": "prettier . -w",
-    "test:unit": "cross-env BUILD_BROWSER=1 E2E_TIMEOUT=600000 NODE_ENV=test RUNNING_IN_SPECTRON=true mocha --require ignore-styles --reporter mocha-multi-reporters --reporter-options configFile=./test/mochareporters.json ./test/unit",
+    "test:unit": "cross-env BUILD_BROWSER=1 E2E_TIMEOUT=600000 NODE_ENV=test RUNNING_IN_SPECTRON=true mocha --reporter mocha-multi-reporters --reporter-options configFile=./test/mochareporters.json ./test/unit",
     "test:integration": "cross-env BUILD_BROWSER=1 E2E_TIMEOUT=600000 NODE_ENV=test RUNNING_IN_SPECTRON=true mocha --reporter mocha-multi-reporters --reporter-options configFile=./test/mochareporters.json ./test/integration",
     "e2e": "cross-env E2E_TIMEOUT=600000 NODE_ENV=test RUNNING_IN_SPECTRON=true mocha --reporter mocha-multi-reporters --reporter-options configFile=./test/mochareporters.json ./test/e2e",
     "build": "npm run build:prod:main && npm run build:prod:renderer && npm run build:prod:browser",
@@ -150,7 +150,6 @@
     "eslint-plugin-promise": "6.2.0",
     "eslint-plugin-react": "7.34.2",
     "eslint-plugin-react-native": "4.1.0",
-    "ignore-styles": "^5.0.1",
     "less": "4.2.0",
     "mocha": "10.4.0",
     "mocha-junit-reporter": "2.2.1",

test/unit/utils-source-parsing-specs.js

@@ -5,9 +5,10 @@ import {
   findDOMNodeByPath,
   findJSONElementByPath,
   xmlToJSON,
+  findNodeMatchingSearchTerm,
 } from '../../app/renderer/src/utils/source-parsing';
 
-chai.should();
+const should = chai.should();
 
 describe('utils/source-parsing.js', function () {
   describe('#findDOMNodeByPath', function () {
@@ -514,4 +515,55 @@ describe('utils/source-parsing.js', function () {
       });
     });
   });
+
+  describe('#findNodeMatchingSearchTerm', function () {
+    it('should return the null when search value is empty', function () {
+      const matcher = findNodeMatchingSearchTerm('android.widget.FrameLayout', '');
+      should.equal(matcher, null);
+    });
+
+    it('should return null when search value is undefined', function () {
+      const matcher = findNodeMatchingSearchTerm('android.widget.FrameLayout');
+      should.equal(matcher, null);
+    });
+
+    it('should return null when the value is undefined', function () {
+      const matcher = findNodeMatchingSearchTerm(undefined, 'widget');
+      should.equal(matcher, null);
+    });
+
+    it('should return null when the value is empty', function () {
+      const matcher = findNodeMatchingSearchTerm('', 'widget');
+      should.equal(matcher, null);
+    });
+
+    it('should return null when search value is not matched', function () {
+      const matcher = findNodeMatchingSearchTerm('android.widget.FrameLayout', 'login');
+      should.equal(matcher, null);
+    });
+
+    it('should return valid prefix, suffix and matched if a part of text matches the search value in lowercase', function () {
+      const matcher = findNodeMatchingSearchTerm('android.Widget.FrameLayout', 'widget');
+      matcher.prefix.should.equal('android.');
+      matcher.matchedWord.should.equal('Widget');
+      matcher.suffix.should.equal('.FrameLayout');
+    });
+
+    it('should return valid prefix, suffix and matched if a part of text matches the search value in uppercase', function () {
+      const matcher = findNodeMatchingSearchTerm('android.Widget.FrameLayout', 'WIDGET');
+      matcher.prefix.should.equal('android.');
+      matcher.matchedWord.should.equal('Widget');
+      matcher.suffix.should.equal('.FrameLayout');
+    });
+
+    it('should return valid prefix, suffix and matched if a part of text matches the search value exact matches', function () {
+      const matcher = findNodeMatchingSearchTerm(
+        'android.Widget.FrameLayout',
+        'android.Widget.FrameLayout',
+      );
+      matcher.prefix.should.equal('');
+      matcher.matchedWord.should.equal('android.Widget.FrameLayout');
+      matcher.suffix.should.equal('');
+    });
+  });
 });