From a254fff69d5aa117bb00f1161be00c1efeceaa45 Mon Sep 17 00:00:00 2001 From: Sudharsan Selvaraj Date: Sat, 15 Jun 2024 02:01:10 +0530 Subject: [PATCH] Revert existing tests and implement new tests --- .../src/assets/stylesheets/common.global.less | 5 -- .../components/Inspector/Inspector.module.css | 5 ++ .../src/components/Inspector/Source.jsx | 20 +++---- app/renderer/src/utils/source-parsing.js | 24 +++++++++ package-lock.json | 7 --- package.json | 3 +- test/unit/source-dom-highlighter-specs.js | 44 --------------- test/unit/utils-source-parsing-specs.js | 54 ++++++++++++++++++- 8 files changed, 90 insertions(+), 72 deletions(-) delete mode 100644 test/unit/source-dom-highlighter-specs.js diff --git a/app/renderer/src/assets/stylesheets/common.global.less b/app/renderer/src/assets/stylesheets/common.global.less index 9dc0d0045f..e19376b5fe 100644 --- a/app/renderer/src/assets/stylesheets/common.global.less +++ b/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; -} diff --git a/app/renderer/src/components/Inspector/Inspector.module.css b/app/renderer/src/components/Inspector/Inspector.module.css index fea4dd2fe7..9250d1cb2e 100644 --- a/app/renderer/src/components/Inspector/Inspector.module.css +++ b/app/renderer/src/components/Inspector/Inspector.module.css @@ -744,3 +744,8 @@ .option-inpt { text-align: center; } + +.search-word-highlighted { + color: #272625; + background: #b6d932; +} diff --git a/app/renderer/src/components/Inspector/Source.jsx b/app/renderer/src/components/Inspector/Source.jsx index 27799fdb05..3282b8f620 100644 --- a/app/renderer/src/components/Inspector/Source.jsx +++ b/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} - + {matchedWord} {suffix} diff --git a/app/renderer/src/utils/source-parsing.js b/app/renderer/src/utils/source-parsing.js index e5f08395e8..34402d1f3c 100644 --- a/app/renderer/src/utils/source-parsing.js +++ b/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}; +} diff --git a/package-lock.json b/package-lock.json index 84bbe58c28..e3a3b769d5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -73,7 +73,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", @@ -14857,12 +14856,6 @@ "node": ">= 4" } }, - "node_modules/ignore-styles": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/ignore-styles/-/ignore-styles-5.0.1.tgz", - "integrity": "sha512-gQQmIznCETPLEzfg1UH4Cs2oRq+HBPl8quroEUNXT8oybEG7/0lqI3dGgDSRry6B9HcCXw3PVkFFS0FF3CMddg==", - "dev": true - }, "node_modules/image-size": { "version": "0.5.5", "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz", diff --git a/package.json b/package.json index 8795c7d24c..2c82adc3de 100644 --- a/package.json +++ b/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", diff --git a/test/unit/source-dom-highlighter-specs.js b/test/unit/source-dom-highlighter-specs.js deleted file mode 100644 index 355fb2f288..0000000000 --- a/test/unit/source-dom-highlighter-specs.js +++ /dev/null @@ -1,44 +0,0 @@ -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.Widget.FrameLayout', - ); - }); - }); -}); diff --git a/test/unit/utils-source-parsing-specs.js b/test/unit/utils-source-parsing-specs.js index 1d6ec497f7..0345f453d7 100644 --- a/test/unit/utils-source-parsing-specs.js +++ b/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(''); + }); + }); });