add Jest + make the search more robust

.github/workflows/node.js.yml

@@ -27,3 +27,5 @@ jobs:
         run: yarn lint:style
       - name: Validating TypeScript
         run: yarn tsc --noEmit
+      - name: Running Tests
+        run: yarn test

jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  modulePathIgnorePatterns: ['<rootDir>/dist/'],
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  setupFiles: ['<rootDir>/testSetupFile.ts']
+};

package.json

@@ -9,7 +9,8 @@
     "start": "next start",
     "import-meta-data": "NODE_ENV=local ts-node-dev ./src/scripts/importMetaData.ts",
     "lint": "eslint '{src/components,src/lib,src/pages}/**/*.{js,jsx,ts,tsx}'",
-    "lint:style": "stylelint '{src,styles}/**/*.css'"
+    "lint:style": "stylelint '{src,styles}/**/*.css'",
+    "test": "jest --watch"
   },
   "dependencies": {
     "@jamesives/github-pages-deploy-action": "^4.1.3",
@@ -25,6 +26,7 @@
   "devDependencies": {
     "@types/classnames": "^2.3.1",
     "@types/dotenv-flow": "^3.1.0",
+    "@types/jest": "^26.0.23",
     "@types/lodash.startcase": "^4.4.6",
     "@types/react": "^17.0.7",
     "@types/react-lazy-load-image-component": "^1.5.1",
@@ -42,6 +44,7 @@
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.21.3",
     "eslint-plugin-react-hooks": "^4.1.2",
+    "jest": "^27.0.4",
     "lodash.startcase": "^4.4.0",
     "prettier": "^2.1.2",
     "stylelint": "^13.7.2",
@@ -50,6 +53,7 @@
     "stylelint-config-recommended": "^3.0.0",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-prettier": "^1.1.2",
+    "ts-jest": "^27.0.2",
     "ts-node-dev": "^1.1.6",
     "typescript": "^4.2.4"
   }

public/icons/meta-data.json

@@ -379,6 +379,11 @@
   "title": "Malaria Pv Microscope",
   "tags": []
  },
+ {
+  "id": "medicines",
+  "title": "Medicines",
+  "tags": []
+ },
  {
   "id": "mental_disorders",
   "title": "Mental Disorders",
@@ -854,6 +859,11 @@
    "urban"
   ]
  },
+ {
+  "id": "peace",
+  "title": "Peace",
+  "tags": []
+ },
  {
   "id": "clinical_a",
   "title": "Clinical A",
@@ -1171,6 +1181,11 @@
   "title": "Emergency Post",
   "tags": []
  },
+ {
+  "id": "stop",
+  "title": "Stop",
+  "tags": []
+ },
  {
   "id": "imm",
   "title": "Imm",
@@ -1524,6 +1539,11 @@
   "title": "Underweight",
   "tags": []
  },
+ {
+  "id": "overweight",
+  "title": "Overweight",
+  "tags": []
+ },
  {
   "id": "referral",
   "title": "Referral",

src/lib/searchKeywords.test.ts

@@ -0,0 +1,27 @@
+import { searchKeywords } from './searchKeywords';
+
+describe('searchKeywords', () => {
+  test('match single word', () => {
+    expect(searchKeywords('quick', 'quickly')).toBe(true);
+  });
+
+  test('match multiple words in correct order', () => {
+    expect(searchKeywords('quick br', 'quick brown fox')).toBe(true);
+  });
+
+  test('match multiple words in different order', () => {
+    expect(searchKeywords('fox quick', 'quick brown fox')).toBe(true);
+  });
+
+  test('two partial words', () => {
+    expect(searchKeywords('qu fo', 'quick brown fox')).toBe(true);
+  });
+
+  test('NO match multiple words', () => {
+    expect(searchKeywords('bear', 'quick brown fox')).toBe(false);
+  });
+
+  test('NO match multiple search terms', () => {
+    expect(searchKeywords('brown bear', 'quick brown fox')).toBe(false);
+  });
+});

src/lib/searchKeywords.tsx

@@ -0,0 +1,6 @@
+export function searchKeywords(search: string, keywords: string): boolean {
+  return new RegExp(
+    '(?=.*?\\b' + search.split(' ').join(')(?=.*?\\b') + ').*',
+    'i'
+  ).test(keywords);
+}

src/pages/index.tsx

@@ -1,6 +1,7 @@
 import { useState, useMemo } from 'react';
 import Head from 'next/head';
 import { GetStaticProps } from 'next';
+import { searchKeywords } from '../lib/searchKeywords';
 import { TopBar } from '../components/TopBar';
 import { CategoryHeading } from '../components/CategoryHeading';
 import { IconTile } from '../components/IconTile';
@@ -27,14 +28,14 @@ export default function Home({ categories }: HomeProps) {
     if (!query) {
       return filteredIcons;
     }
-    const lowerCaseQuery = query.toLowerCase();
 
     categories.forEach((category) => {
       category.icons.forEach((icon) => {
         if (
-          icon.title.toLowerCase().includes(lowerCaseQuery) ||
-          icon.tags.join(', ').toLowerCase().includes(lowerCaseQuery) ||
-          category.title.includes(lowerCaseQuery)
+          searchKeywords(
+            query,
+            icon.tags.concat([icon.title, category.title]).join(', ')
+          )
         ) {
           filteredIcons.push(icon);
         }

src/scripts/importMetaData.ts

@@ -23,7 +23,7 @@ function getMetadataFromDescription(name: string, description: string) {
   const metaData = description.match(metadataRegex);
   return metaData && metaData.length > 2
     ? {
-        title: metaData[1],
+        title: metaData[1].trim(),
         tags: metaData[2]
           .split(',')
           .map((tag) => tag.trim())

testSetupFile.ts

@@ -0,0 +1,15 @@
+import dotenvFlow from 'dotenv-flow';
+
+declare module 'dotenv-flow' {
+  interface DotenvConfigOptions {
+    /**
+     * With this option you can suppress all the console outputs except errors and deprecation warnings.
+     */
+    silent?: boolean;
+  }
+}
+
+dotenvFlow.config({
+  default_node_env: 'test',
+  silent: true
+});