feat: add jest for unit testing

README.md

@@ -8,33 +8,53 @@ Great! Marketplace content -- including visualizations -- were designed for cont
 
 #### Quickstart Dev Instructions
 
-1.  **Install Dependencies.**
+1. **Install Dependencies.**
 
-    Using yarn, install all dependencies
+   Using yarn, install all dependencies
 
-    ```
-    yarn
-    ```
+   ```
+   yarn
+   ```
 
-2.  **Make changes to the source code**
+2. **Make changes to the source code**
 
-3.  **Compile your code**
+3. **Compile your code**
 
-    You need to compile your react code, let's run:
+   You need to compile your react code, let's run:
 
-    ```
-    yarn build
-    ```
+   ```
+   yarn build
+   ```
 
-    Recommended: Webpack can detect changes and build automatically
+   or
 
-    ```
-    yarn start
-    ```
+   ```
+   bin/build
+   ```
 
-    Your compiled code can be found in this repo.
+   Recommended: Webpack can detect changes and build automatically
 
-**`radialgauge.js`**: This visualization's minified distribution file.
+   ```
+   yarn start
+   ```
+
+   Your compiled code can be found in this repo.
+
+4. Run unit tests.
+
+   Use either:
+
+   ```
+   yarn test
+   ```
+
+   Or:
+
+   ```
+   bin/test
+   ```
+
+   **`radialgauge.js`**: This visualization's minified distribution file.
 
 **`LICENSE`**: Looker's Marketplace content License file.
 

bin/test

@@ -0,0 +1,39 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+GIT_ROOT_DIR=$(git rev-parse --show-toplevel)
+
+# Installs yarn if it is not already installed.
+function looker::install_yarn() {
+  if command -v yarn &> /dev/null; then
+    npm install -g yarn
+  fi
+}
+
+# Configures the project if the user has not already done so.
+function looker::configure() {
+  looker::install_yarn
+  pushd "$GIT_ROOT_DIR" &> /dev/null
+  if [[ ! -d "$GIT_ROOT_DIR/node_modules" ]]; then
+    yarn
+  fi
+  popd &> /dev/null
+}
+
+# Runs all the unit tests.
+function looker::test() {
+  pushd "$GIT_ROOT_DIR" &> /dev/null
+  env NODE_OPTIONS="--openssl-legacy-provider" yarn test
+  popd &> /dev/null
+}
+
+# Entry-point.
+function looker::main() {
+  looker::configure
+  looker::test
+}
+
+looker::main
+
+exit 0

package.json

@@ -7,7 +7,8 @@
     "build": "webpack --config webpack.config.js",
     "start": "webpack-dev-server --open",
     "watch": "webpack --config webpack.config.js --watch --progress",
-    "format": "prettier --ignore-path .gitignore --write '**/*.js'"
+    "format": "prettier --ignore-path .gitignore --write '**/*.js'",
+    "test": "jest"
   },
   "author": "Noah MacDonald <noahmac@google.com>",
   "private": true,
@@ -43,6 +44,7 @@
     "js-yaml": "3.13.1"
   },
   "devDependencies": {
+    "jest": "^29.6.0",
     "prettier": "^2.8.8"
   }
 }

src/string.js

@@ -0,0 +1,18 @@
+/** Regular expression for the special characters that are trimmed by
+ * default from a string. */
+const LEADING_TRAILING_SPECIAL_CHARS_REGEX =
+  /(^| +)[!-\/:-@\[-`\{-~]*([^ ]*?)[!-\/:-@\[-`\{-~]*(?=\s|$)/gi;
+
+/**
+ * Trims leading and trailing special characters from the string.
+ *
+ * @param {string} str The string to trim.
+ * @param {RegExp} pattern The pattern representing the special charaters.
+ * @return {string} The sanitized string.
+ */
+export function trimSpecialCharacters(
+  str,
+  pattern = LEADING_TRAILING_SPECIAL_CHARS_REGEX
+) {
+  return str.replace(pattern, '$1$2');
+}

src/string.test.js

@@ -0,0 +1,16 @@
+import {trimSpecialCharacters} from './string';
+
+describe('trimSpecialCharacters', () => {
+  test('should trim leading special characters', () => {
+    expect(trimSpecialCharacters('$$_aa')).toBe('aa');
+  });
+  test('should trim trailing special characters', () => {
+    expect(trimSpecialCharacters('aa_$$')).toBe('aa');
+  });
+  test('should trim both leading and trailing special characters', () => {
+    expect(trimSpecialCharacters('$$_aa_$$')).toBe('aa');
+  });
+  test('should leave empty string alone', () => {
+    expect(trimSpecialCharacters('')).toBe('');
+  });
+});

src/viz_gauge.js

@@ -2,11 +2,10 @@ import RadialGauge from './radial_gauge';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import SSF from 'ssf';
+import {trimSpecialCharacters} from './string';
 
 const DEFAULT_MAX_RANGE = null;
 
-const LEADING_TRAILING_SPECIAL_CHARS_REGEX = /(^| +)[!-\/:-@\[-`\{-~]*([^ ]*?)[!-\/:-@\[-`\{-~]*(?=\s|$)/gi;
-
 function processPivot(data, queryResponse, config, viz, pivotKey) {
   data = data.length === undefined ? [data] : data;
   let dims, meas;
@@ -138,7 +137,7 @@ function processPivot(data, queryResponse, config, viz, pivotKey) {
     value_dimension:
       config.value_label_override === undefined ||
       config.value_label_override === ''
-        ? trimTrailingLeadingSpecialChars(pivotKey)
+        ? trimSpecialCharacters(pivotKey)
         : config.value_label_override,
     target: tarValue,
     target_rendered: tarRendered,
@@ -152,10 +151,6 @@ function processPivot(data, queryResponse, config, viz, pivotKey) {
   return chunk;
 }
 
-function trimTrailingLeadingSpecialChars(str) {
-  return str.replace(LEADING_TRAILING_SPECIAL_CHARS_REGEX, '$1$2');
-}
-
 function processData(data, queryResponse, config, viz) {
   data = data.length === undefined ? [data] : data;
   let dims, meas;