Added test harness, added tests for processKnob() and fixed it.

Author: AlexSkrypnyk

.eslintrc.yml

@@ -6,6 +6,7 @@ plugins:
 env:
   es6: true
   browser: true
+  jest: true
 globals:
   BACKGROUNDS: true
   ICONS: true

components/00-base/base.utils.js

@@ -488,47 +488,32 @@ export class KnobValues {
 
 /**
  * Process values passed to the knob and return a value or render a knob.
- *
- * Do not optimize this function - it is laid out in a way that is easy to
- * understand and follow the logic.
  */
-const processKnob = (name, defaultValue, parent, group, knobCallback) => {
-  if (parent) {
-    // If parent was passed, and it is not a KnobValue instance, then it
-    // represents a directly passed value that should be used without
-    // rendering the knob.
-    if (!(parent instanceof KnobValue)) {
-      return parent;
-    }
-
-    // If parent was passed, and it is KnobValue instance set to use the default
-    // value, then use the default value passed to the knob without rendering
-    // the knob itself.
-    if (parent.isUsingDefault()) {
-      return defaultValue;
-    }
+export const processKnob = (name, defaultValue, parent, group, knobCallback) => {
+  // If parent is undefined, use the default value and render the knob.
+  if (parent === undefined) {
+    return knobCallback(name, defaultValue, group);
   }
 
-  if (parent === null || parent === false) {
+  // If parent is null, a scalar value or an object, use it's value.
+  if (parent === null || !(parent instanceof KnobValue)) {
     return parent;
   }
 
-  let val;
+  // If parent is a KnobValue instance set to use the default value, return the
+  // default value.
+  if (parent && parent.isUsingDefault()) {
+    return defaultValue;
+  }
 
-  if (parent === undefined) {
-    // If parent was not provided - use the default value in the knob.
-    val = defaultValue;
-  } else if (parent.getValue() === null) {
-    // If parent was provided as a KnobValue with no value - use the default
-    // value in the knob.
-    val = defaultValue;
-  } else {
-    // If parent was provided as a KnobValue with a value - use this value in
-    // the knob.
-    val = parent.getValue();
+  // If parent is a KnobValue instance with a null value, use the default value
+  // and render the knob.
+  if (parent.getValue() === null) {
+    return knobCallback(name, defaultValue, group);
   }
 
-  return knobCallback(name, val, group);
+  // Use the value from the KnobValue instance.
+  return knobCallback(name, parent.getValue(), group);
 };
 
 export const knobText = (name, value, parent, group = 'General') => processKnob(name, value, parent, group, (knobName, knobValue, knobGroup) => text(knobName, knobValue, knobGroup));

components/00-base/base.utils.test.js

@@ -0,0 +1,35 @@
+import { KnobValue, processKnob } from './base.utils';
+
+// eslint-disable-next-line no-unused-vars
+const knobCallback = jest.fn((name, value, group) => value);
+
+const dataProviderProcessKnob = () => [
+  ['name', 'default', undefined, 'group', knobCallback, 'default'],
+  ['name', 'default', null, 'group', knobCallback, null],
+  ['name', 'default', false, 'group', knobCallback, false],
+  ['name', 'default', true, 'group', knobCallback, true],
+
+  ['name', 'default', 'direct value', 'group', knobCallback, 'direct value'],
+  ['name', 'default', { a: 'b' }, 'group', knobCallback, { a: 'b' }],
+
+  ['name', 'default', new KnobValue(null), 'group', knobCallback, 'default'],
+  ['name', 'default', new KnobValue(null, true), 'group', knobCallback, 'default'],
+  ['name', 'default', new KnobValue(null, false), 'group', knobCallback, 'default'],
+
+  ['name', 'default', new KnobValue('value'), 'group', knobCallback, 'value'],
+  ['name', 'default', new KnobValue('value', true), 'group', knobCallback, 'default'],
+  ['name', 'default', new KnobValue('value', false), 'group', knobCallback, 'value'],
+];
+
+describe.each(dataProviderProcessKnob())(
+  'processKnob(%s, %s, %p, %s, knobCallback)',
+  (name, defaultValue, parent, group, cb, expected) => {
+    test(`returns ${expected}`, () => {
+      if (typeof expected === 'object') {
+        expect(processKnob(name, defaultValue, parent, group, cb)).toStrictEqual(expected);
+      } else {
+        expect(processKnob(name, defaultValue, parent, group, cb)).toBe(expected);
+      }
+    });
+  },
+);

jest.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  transform: {
+    '^.+\\.jsx?$': ['babel-jest', {
+      presets: [
+        ['@babel/preset-env', { targets: { node: 'current' } }],
+      ],
+    }],
+  },
+  testEnvironment: 'node',
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|svg|ico|woff|woff2|ttf|eot|webm|avi|mp4|twig)$': 'jest-transform-stub',
+  },
+  transformIgnorePatterns: [
+    'node_modules/(?!(@storybook/addon-knobs)/)',
+  ],
+};

package.json

@@ -25,7 +25,8 @@
     "lint-fix": "eslint ./components ./.storybook ./webpack --fix && stylelint 'components/**/*.scss' --fix",
     "dist": "export NODE_OPTIONS=--openssl-legacy-provider && webpack --config ./webpack/webpack.prod.js",
     "dist-dev": "export NODE_OPTIONS=--openssl-legacy-provider && webpack --config ./webpack/webpack.dev.js",
-    "test": "npm run test-storybook:ci",
+    "test": "npm run test-unit && npm run test-storybook:ci",
+    "test-unit": "jest",
     "test-storybook": "test-storybook",
     "test-storybook:ci": "concurrently --kill-others --success first --names \"SB,TEST\" --prefix-colors \"magenta,blue\" \"npx http-server storybook-static --port 6006 -a 127.0.0.1 --silent\" \"wait-on --timeout 10000 http://127.0.0.1:6006 && npm run test-storybook\"",
     "reset": "rm -rf node_modules; rm -rf package-lock.json"
@@ -42,7 +43,8 @@
     "@a110/storybook-expand-all": "^1.1.1",
     "@alexskrypnyk/scss-variables-extractor": "^0.1.0",
     "@babel/cli": "^7.15.4",
-    "@babel/core": "^7.15.5",
+    "@babel/core": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
     "@playwright/test": "^1.40.1",
     "@storybook/addon-a11y": "^6.1.18",
     "@storybook/addon-essentials": "^6.3.8",
@@ -52,6 +54,7 @@
     "@storybook/html": "^6.3.8",
     "@storybook/test-runner": "^0.16.0",
     "addon-screen-reader": "^1.8.6",
+    "babel-jest": "^29.7.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-transform-strict-mode": "^6.24.1",
@@ -70,6 +73,7 @@
     "glob-gitignore": "^1.0.14",
     "html-webpack-plugin": "^4.5.2",
     "http-server": "^14.1.1",
+    "jest-transform-stub": "^2.0.0",
     "lorem-ipsum": "^2.0.4",
     "mini-css-extract-plugin": "^1.6.2",
     "node-sass-magic-importer": "^5.3.2",

webpack/webpack.common.js

@@ -116,7 +116,7 @@ module.exports = {
       },
       // Wrap JS with DOMContentLoaded.
       {
-        test: /components\/[^/]+\/(?!.*\.(stories|component|utils)\.js$).*\.js$/,
+        test: /components\/[^/]+\/(?!.*\.(stories|component|utils|test)\.js$).*\.js$/,
         exclude: /(node_modules|webpack|themejs\.js|css\.js)/,
         use: [{
           loader: 'babel-loader',