Merge pull request #148 from bindable-ui/dd/search3

Fix highlight phrase

Author: djedi

README.md

@@ -101,13 +101,19 @@ Run `yarn start`, then open `http://localhost:9000`
 
 ### Unit tests
 
-Run `yarn test`
+Run `yarn test` to run all unit tests.
+
+To test one file and watch for changes, run:
+
+```shell
+yarn test:1 <relative_path_to_test_file.test.ts>
+```
 
 ### Release
 
 This is used when updating Bindable.
 
-Run `yarn update-version`. This will update the version in `package.json` and the title attribe in `dev-app/app.html` to the new version you specify.
+Run `yarn update-version`. This will update the version in `package.json` and the title attribute in `dev-app/app.html` to the new version you specify.
 
 Once you merge your changes to master, [create a new release on Github](https://github.com/bindable-ui/bindable/releases).
 

dev-app/app.html

@@ -52,7 +52,7 @@
                     <c-nav-horizontal-item
                         position="right"
                         href="https://github.com/bindable-ui/bindable"
-                        title="v1.11.7"
+                        title="v1.11.8"
                     ></c-nav-horizontal-item>
                 </c-nav-horizontal>
             </l-box>

jest1.js

@@ -0,0 +1,62 @@
+#! /usr/bin/env node
+/* eslint-disable no-console */
+const path = require('path');
+const chalk = require('chalk');
+const fs = require('fs');
+const childProcess = require('child_process');
+const opn = require('opn');
+
+const args = process.argv.slice(2);
+
+const showUsage = () => {
+    console.log(chalk.yellow('Usage:'));
+    console.log(chalk.yellow('--------------------------------------------------------------'));
+    console.log(chalk.yellow('[**/*.test.js]                # test file with coverage report'));
+    console.log(chalk.yellow('--nowatch                     # turn off watcher'));
+    console.log(chalk.yellow('open                          # opens the coverage report'));
+    console.log(chalk.yellow('--help                        # display this message'));
+    console.log(chalk.yellow('--------------------------------------------------------------'));
+};
+
+let command = 'node_modules/jest/bin/jest.js --watch';
+let openCoverageReport = false;
+if (args.length === 0) {
+    showUsage();
+    return;
+}
+args.forEach(entry => {
+    if (entry === '-h' || entry === '--help') {
+        showUsage();
+    } else if (entry === '--nowatch') {
+        command = command.replace('--watch', '');
+    } else if (entry === 'open') {
+        openCoverageReport = true;
+        command = command.replace('--watch', '');
+    } else {
+        if (!fs.existsSync(entry)) {
+            console.log(chalk.red(`Error!! Test file: ${entry} doesn't exist.`));
+            process.exit();
+            return;
+        }
+        command += ` ${entry}`;
+
+        const {dir, name, ext} = path.parse(entry);
+        const filename = name.replace('.test', '') + ext;
+        const searchPath = `${dir}/${filename}`;
+        const exists = fs.existsSync(searchPath);
+        if (!exists) {
+            console.log(chalk.red(`Error!! Original file: ${searchPath} doesn't exist.`));
+        } else {
+            command += ` --coverage --collectCoverageFrom=${searchPath}`;
+        }
+    }
+});
+
+command += ' --color always';
+try {
+    console.log(command);
+    childProcess.execSync(command, {stdio: 'inherit'});
+    if (openCoverageReport) {
+        opn('./test/coverage-jest/index.html', {wait: false});
+    }
+} catch (e) {} // eslint-disable-line no-empty

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bindable-ui/bindable",
   "description": "An Aurelia component library",
-  "version": "1.11.7",
+  "version": "1.11.8",
   "repository": {
     "type": "git",
     "url": "https://github.com/bindable-ui/bindable"
@@ -99,6 +99,7 @@
     "preversion": "au test",
     "test-coverage": "jest --coverage=true",
     "test": "jest --coverage=true",
+    "test:1": "./jest1.js",
     "test:debug": "jest --coverage=false --runInBand --detectOpenHandles --forceExit",
     "test:ci": "jest --coverage=true --ci --detectOpenHandles --forceExit",
     "update-version": "node ./update-version.js"

src/helpers/highlight-phrases.test.ts

@@ -0,0 +1,16 @@
+import {highlightSearchPhrases} from './highlight-phrases';
+
+describe('Highlight Search Phrases Helper', () => {
+    it('should highlight selected search phrases', () => {
+        const searchPhrases = ['dumb', 'and'];
+        const desc = 'Dumb and Dumber';
+        const highlighted = highlightSearchPhrases(searchPhrases, desc);
+        expect(highlighted).toEqual(
+            '<span style="background-color: #226684;">Dumb</span> ' +
+                '<span style="background-color: #226684;">and</span> ' +
+                '<span style="background-color: #226684;">Dumb</span>er',
+        );
+        const empty = highlightSearchPhrases(searchPhrases);
+        expect(empty).toEqual('');
+    });
+});

src/helpers/highlight-phrases.ts

@@ -5,8 +5,9 @@ export const highlightSearchPhrases = (searchPhrases: string[], matchAgainst?: s
         .replace('<', '&lt;')
         .replace('>', '&gt;');
     if (searchPhrases && searchPhrases.length > 0) {
-        searchPhrases.forEach(orig => {
-            title = title.replace(orig, `<span style="background-color: #226684;">${orig}</span>`);
+        searchPhrases.forEach(sp => {
+            const regEx = new RegExp(sp, 'gi');
+            title = title.replace(regEx, '<span style="background-color: #226684;">$&</span>');
         });
     }
     return title;