Add unit tests

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

@@ -99,3 +99,8 @@ 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

@@ -130,11 +130,6 @@
   overflow: auto;
 }
 
-.inspector-main .tree-search-value {
-  color: #272625;
-  background: #b6d932;
-}
-
 .session-info-table {
   margin-right: -1em;
 }

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

@@ -7,6 +7,43 @@ import LocatorTestModal from './LocatorTestModal.jsx';
 import SiriCommandModal from './SiriCommandModal.jsx';
 import {uniq} from 'lodash';
 
+/**
+ * Highlights the part of the node text in source tree that matches the search term.
+ * If HTML element contains a part of search value, then the content will be updated
+ * with a highlighted span. This span will have a class name 'tree-search-value' and
+ * will have a data attribute 'match' which will hold the search value. If no match found
+ * then the original node text will be returned.
+ *
+ * @param {string} nodeText - The text content of the node
+ * @param {string} searchText - The search term to highlight
+ * @returns {ReactNode} - The node text with highlighted search term
+ *
+ */
+export const highlightNodeMatchingSearchTerm = (nodeText, searchText) => {
+  if (!searchText || !nodeText) {
+    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);
+
+  return (
+    <>
+      {prefix}
+      <span className="search-word-highlighted" data-match={searchText}>
+        {matchedWord}
+      </span>
+      {suffix}
+    </>
+  );
+};
+
 /**
  * Shows the 'source' of the app as a Tree
  */
@@ -25,34 +62,6 @@ const Source = (props) => {
     t,
   } = props;
 
-  /**
-   * Highlights the part of the node text in source tree that matches the search term.
-   */
-  const highlightNodeMatchingSearchTerm = (nodeText, searchText) => {
-    if (!searchText) {
-      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);
-
-    return (
-      <>
-        {prefix}
-        <span className={InspectorStyles['tree-search-value']} data-match={searchText}>
-          {matchedWord}
-        </span>
-        {suffix}
-      </>
-    );
-  };
-
   useEffect(() => {
     if (!treeData || !pageSourceSearchText) {
       return;
@@ -77,7 +86,7 @@ const Source = (props) => {
        * parents to the 'nodesMatchingSearchTerm' array to make them automatically expand.
        */
       const nodeText = renderToString(node.title).toLowerCase();
-      if (nodeText.indexOf(pageSourceSearchText.toLowerCase()) > -1) {
+      if (nodeText.includes(pageSourceSearchText.toLowerCase())) {
         nodesMatchingSearchTerm.push(...hierarchy);
       }
       if (node.children) {

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 --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 --require ignore-styles --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,6 +150,7 @@
     "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/source-dom-highlighter-specs.js

@@ -0,0 +1,44 @@
+import chai from 'chai';
+import {renderToString} from 'react-dom/server';
+
+import {highlightNodeMatchingSearchTerm} from '../../app/renderer/src/components/Inspector/Source.jsx';
+
+const should = chai.should();
+
+describe('components/Inspector/Source.jsx', function () {
+  describe('#highlightNodeMatchingSearchTerm', function () {
+    it('should return the node text when search value is empty', function () {
+      const nodeText = highlightNodeMatchingSearchTerm('android.widget.FrameLayout', '');
+      nodeText.should.equal('android.widget.FrameLayout');
+    });
+
+    it('should return the node text when search value is undefined', function () {
+      const nodeText = highlightNodeMatchingSearchTerm('android.widget.FrameLayout');
+      nodeText.should.equal('android.widget.FrameLayout');
+    });
+
+    it('should return the node text when the value is undefined', function () {
+      const nodeText = highlightNodeMatchingSearchTerm(undefined, 'widget');
+      should.equal(nodeText, undefined);
+    });
+
+    it('should return the node text when the value is empty', function () {
+      const nodeText = highlightNodeMatchingSearchTerm('', 'widget');
+      nodeText.should.equal('');
+    });
+
+    it('should return the node text when search value is not matched', function () {
+      const nodeText = highlightNodeMatchingSearchTerm('android.widget.FrameLayout', 'login');
+      nodeText.should.equal('android.widget.FrameLayout');
+    });
+
+    it('should higlight the node text if a part of text matches the search value lowercase', function () {
+      const nodeText = highlightNodeMatchingSearchTerm('android.Widget.FrameLayout', 'widget');
+      renderToString(nodeText)
+        .toString()
+        .should.equal(
+          'android.<span class="search-word-highlighted" data-match="widget">Widget</span>.FrameLayout',
+        );
+    });
+  });
+});