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

Fix highlight phrase

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;