Functional Programming in JavaScript (III): Implementing Higher-Order Functions with TDD

Others
, , , , , , ,

Topics

  • Functional Programming in JavaScript
  • Building a Modern JavaScript Library with Vite
  • Unit Testing with Jest and Vitest

Resources

  • đź“– Check out the handbook
  • đź“ś Check out the slide
  • đź’Ş Work in groups
  • 🔨 Collaborate with Live Share

Workshop

The three rules of TDD

Robert C. Martin provides a concise set of rules for practicing Test-Driven Development. [?]

  1. You are not allowed to write any production code unless it is to make a failing unit test pass.
  2. You are not allowed to write any more of a unit test than is sufficient to fail; and compilation failures are failures.
  3. You are not allowed to write any more production code than is sufficient to pass the one failing unit test.

Create test case for “filter” function

Create a filter.test.ts file in modules folder, and create a test case for filter function.

1
2
3
4
5
6
7
8
9
import { test, expect } from 'vitest';
import { filter } from './index';

test('filter should work', () => {
  const actual = filter([1, 2, 3, 4, 5], (v: number) => v > 2);
  const expected = [3, 4, 5];

  expect(actual).toStrictEqual(expected);
});

Run test command.

1
2
3
4
npm run test

đź”´ FAIL  src/modules/filter.test.ts > filter
TypeError: filter is not a function

Implement “filter” function

Update index.ts file in modules folder.

1
2
3
4
5
6
7
// ...
import filter from './filter';

export {
  // ...
  filter,
};

Create a filter.ts file in modules folder, and implement the filter function.

1
2
3
4
5
6
7
8
9
10
11
const filter = (items: Array<any>, callable: Function) => {
  const res = [];
  for (let i = 0; i < items.length; i++) {
    if (callable(items[i])) {
      res.push(items[i]);
    }
  }
  return res;
};

export default filter;

Run test command.

1
2
3
npm run test

🟢 PASS  Waiting for file changes...

Implement more functions

Implement more higher-order functions with TDD:

  • map âś…
  • filter âś…
  • every
  • find
  • forEach
  • reduce
  • reject
  • some

Finally, run coverage command.

1
npm run coverage

Publish to NPM

Update index.ts file in src folder.

1
export * from './modules';

Build the package before publishing.

1
npm run build

Login to NPM.

1
npm login

Update package.json file.

1
2
3
4
5
6
{
  "name": "@username/collection-js",
  "private": false,
  "version": "1.0.0",
  // ...
}

Publish to NPM with dry run.

1
npm publish --dry-run

Publish to NPM.

1
npm publish --access=public

Source Code