Js on blog.iankulin.com

Node.js built in test runner

Mon, 17 Mar 2025 00:00:00 +0000

For the longest time, I’ve been using Mocha (test runner) and Chai (assertion library) for my JS testing. They are reliable old friends.

One of the effects of the existence of Bun and Deno has been to spur Node onto adding some new features, so after appearing as an experimental feature in 18, the Node test runner dropped in Node 20.

I’m not sure if the familiar unit test layout of Mocha and Node is inherited from Jest, or comes from older testing frameworks of which JUnit and NUnit were the first ones I’d ever used. Before that I just used to write tests as lumps of assertions in regular code - which worked but wasn’t as pleasant to use as a proper unit test setup. Regardless, the system of bundling a few tests together and having them all run and spit out green ticks is not a new one.

If you are coming from Mocha, there are very few changes to your practice to make. I didn’t read the docs to check that I had to begin my test files with ’test’ or to put them into a ’test’ directory. But I discovered that dragging them into a ’test-dont’ directory didn’t stop them from running.

Testing

As well as what ever you’re testing, you need to import a couple of things from node:

import { isEven } from "../index.js";
import { describe, it } from "node:test";
import assert from "node:assert";

Then we can write our tests, grouping them in a describe:

describe("isEven", () => {
 it("returns true for even numbers", (t) => {
 assert.strictEqual(isEven(4), true);
 assert.strictEqual(isEven(0), true);
 assert.strictEqual(isEven(-2), true);
 });

 it("returns false for odd numbers", (t) => {
 assert.strictEqual(isEven(7), false);
 assert.strictEqual(isEven(-3), false);
 });

 it("returns false for most floating point numbers", (t) => {
 assert.strictEqual(isEven(3.5), false);
 // sadly, this is true because JavaScript
 // assert.strictEqual(isEven(4.0000000000000000000001), false);
 });

 it("returns false for non-numbers", (t) => {
 assert.strictEqual(isEven("a"), false);
 assert.strictEqual(isEven(null), false);
 assert.strictEqual(isEven(undefined), false);
 });
});

Then to run them, just node --test and we’ll get a nice summary

Of course there are a heap of other assertions, as well as stuff to set-up and tear-down and to mock things such as times. What I’ve shown here is very much a getting started, but it also deals with about 80% of my testing needs.

I’m not entirely sure how I feel about moving to a built in test runner. The small convenience I gain has to be weighed up against a small amount of lock in to a run time. I haven’t yet been tempted to Deno or Bun, but I love that they exist and are spurring on innovation. Possibly I’ll continue with portable testing tools for big projects, but for little ones use the built in.

A bit of web-scraping with Cheerio

Mon, 17 Feb 2025 00:00:00 +0000

I had an idea for a little holiday project that required a list of episodes from The Rest Is History podcast. On their ‘Episodes’ page, they have a player, and a list of post entries for the most recent eighteen podcasts. There is a ‘show all’ button, but it doesn’t work.

The player does contain the full list of episodes (about 600) including a number of duplicates, so I expected if I inspected the network calls that I’d see a JSON package arriving with what I wanted. This is what I almost always find these days so I’ve had very little call to do any real web scraping - it’s normally just a matter of locating the endpoint and perhaps extracting an API key from a header.

So the list must be in the HTML - let’s have a look. This is a big file (4000 lines formatted) with a lot of divs and jQuery, but here’s our

The list is nicely named with a unique class (which I’ve highlighted above), so this is going to be a simple job, and therefore a good demo.

We might just dive into the code then pull it apart.

function enumeratePlaylist(html) {
 // Load the HTML into cheerio
 const $ = cheerio.load(html);

 // Find all list items within the playlist
 const $playlistItems = $("ul.sm2-playlist-bd li");
 if ($playlistItems.length === 0) {
 console.warn("Warning: No playlist items found");
 return;
 }

 console.log(`Info: Found ${$playlistItems.length} items in playlist`);

 // Process each playlist item
 for (const item of $playlistItems) {
 const title = $(item).find("a").text().trim();
 const link = $(item).find("a").attr("href");

 if (!title || !link) {
 console.warn("Warning: Skipping item with missing title or link");
 continue;
 }

 outputEpisode(title, link);
 }
}

Cheerio is a library often used for this purpose, if you’re familiar with jQuery which is used to manipulate the DOM on the browser side, it’s not unreasonable to think of Cheerio as the same thing running in the server. In fact, a lot of the conventions established by jQuery are brought over to Cherio which brings us to our first code snippet.

 const $ = cheerio.load(html);

‘html’ is just the HTML we’ve fetched into a string, and here we’re initialising a cheerio object with it and assigning it to a variable named ‘$’. If this is the first time you are encountering this, if would be reasonable to be affronted by this variable name - but this is the convention, so roll with it.

In jQuery, we just have one ‘$’ - the document we’re in, but in Cheerio working on the server we might want to load multiple - hence the load step that doesn’t exist in jQuery.

You can think of ‘$’ as now containing a collection of DOM elements. We can select a sub-set of them with a CSS like syntax:

 // Find all list items within the playlist
 const $playlistItems = $("ul.sm2-playlist-bd li");

In this case, we’re selecting all the list items <li> inside the unordered list <ul> with a class="sm2-playlist-bd".

The Cheerio docs do a great job of explaining the selectors, but basically you are selecting elements, classes get a period in front of them, having elements separated by spaces means you want all the descendants (as in the example above), a ‘>’ limits this to the direct descendants, and there’s a bunch of pseudo selectors such as odd, find, first etc which are used with a colon. The underlying library is css-select, so you can read all the fine details in their readme.

Notice we’ve used the ‘$’ at the start of our variable. Once again, this is the convention, but not as rigorously used for these sub-sets as the single ‘$’ is for the base Cheerio object.

Next we loop through the $playListItems and break down the HTML anchor into the title and the link texts.

 const title = $(item).find("a").text().trim();
 const link = $(item).find("a").attr("href");

Cheerio can do a bit more with the DOM - including manipulating the elements, but really we’ve explained everything you need to know for web scraping with it - it’s a very simple library to use, encapsulating some very complex code we don’t want to write - the perfect reason for using such an abstraction.

Here’s our final code:

import * as cheerio from "cheerio";

function outputEpisode(title, link) {
 console.log();
 console.log(`Title: ${title}`);
 console.log(`Link: ${link}`);
}

function enumeratePlaylist(html) {
 // Load the HTML into cheerio
 const $ = cheerio.load(html);

 // Find all list items within the playlist
 const $playlistItems = $("ul.sm2-playlist-bd li");
 if ($playlistItems.length === 0) {
 console.warn("Warning: No playlist items found");
 return;
 }

 console.log(`Info: Found ${$playlistItems.length} items in playlist`);

 // Process each playlist item
 for (const item of $playlistItems) {
 const title = $(item).find("a").text().trim();
 const link = $(item).find("a").attr("href");

 if (!title || !link) {
 console.warn("Warning: Skipping item with missing title or link");
 continue;
 }

 outputEpisode(title, link);
 }
}

async function loadHtmlFromUrl(url) {
 try {
 // Fetch the webpage content
 const response = await fetch(url);
 if (!response.ok) {
 console.error(`Error: Received ${response.status} for URL: ${url}`);
 return;
 }
 return await response.text();
 } catch (error) {
 console.error(`Error: Error fetching HTML from ${url}:`, error.message);
 return;
 }
}

async function main() {
 const url = "https://therestishistory.com/episodes/";
 console.log(`Info: Fetching HTML from: ${url}`);
 const html = await loadHtmlFromUrl(url);
 if (html) {
 enumeratePlaylist(html);
 }
}

main().catch((err) => console.error("Error:", err));

React code is not HTML

Sun, 22 Jan 2023 00:00:00 +0000

I was looking at this ugly code in a React app:

<div style={{overflow: 'scroll', border: '1px solid black', height: '600px' }}>
 { props.children }
</div>

Since I don’t need any of those CSS properties to change at any stage, I could just convert it to pure HTML/CSS right? Well no:

The newbie trap I’ve fallen for here is that although that <div style= tag looks like HTML, it’s actually not. It’s not a template that will be filled out in the build step, it’s React code that will be used to mutate the virtual DOM.

It’s not clear to me why React even bothers with this faux-HTML. If it just committed to having developers work with some sort of set of React DOM objects in JS, it would eliminate a couple of layers of complexity - although at the cost of having to learn a new thing. Once you’ve committed to transpilation, you might as well go the whole way!

It does make me wonder what React Native does about building a screen from elements, maybe they already have half of what they need to take that step with React. There seems to be about 500 JavaScript frameworks, so it’s entirely possible someone has already done what I’m thinking about with out any of React’s unarguable success.

The caveat on these thoughts is the same as always, I’m at the very start of my journey, and often the reasons for things are revealed as I go!

Edit: About five hours after writing the post above, I watched the video below. Turn out this disfigured HTML-eese was a selling point of React at the time. And it seems like my idea of just having a better language to manipulate the DOM might have been tried and abandoned. 🤦‍♀️

De-structuring objects in JS

Fri, 20 Jan 2023 00:00:00 +0000

I’ve worked through my first React tutorial app, and obviously that’s a lot - I’m struct by how messy mixing HTML, JS and React is.

One language feature that’s being used quite a bit, and that is apparently a JS ability I’d never seen is ‘destructuring’ object properties. It’s very cool and obviously useful. It’s a way of extracting just the properties you need from an object and then using them without accesing them via the object. An example will make it clearer.

Imagine we’ve got a couple of food objects, and we want to test them and provide some dietary advice.

const hotDog = {name: 'hot dog', calories: 290, colors: ['red', 'wheat']};
const lettuce = {name: 'lettuce', calories: 0, colors: ['green']};

function eatRecomendation(food) {
 if (food.calories > 200) {
 console.log(`Eat ${food.name} in moderation`);
 } else {
 console.log(`Eat ${food.name} as often as you please`); 
 }
}

eatRecomendation(lettuce);
// Eat lettuce as often as you please

The parameter in eatRecomendation() could be destructured like so:

function eatRecomendation( {name, calories} ) {
 if (calories > 200) {
 console.log(`Eat ${name} in moderation`);
 } else {
 console.log(`Eat ${name} as often as you please`); 
 }
}

eatRecomendation(lettuce);
// Eat lettuce as often as you please

It’s still called with the food object, but the destructuring creates just the properties we need as local variables. If you don’t love doing this as the object is passed in - I don’t because it arguably makes it harder to see from the signature what should be passed to this function - you can keep the object parameter and destructure it inside the function body:

function eatRecomendation(food) {
 const {name, calories} = food;
 if (calories > 200) {
 console.log(`Eat ${name} in moderation`);
 } else {
 console.log(`Eat ${name} as often as you please`); 
 }
}

evenBetterRecomendation(lettuce);
// Eat lettuce as often as you please

Calculator

Mon, 16 Jan 2023 00:00:00 +0000

I’ve been doing a bit of driving during the holidays, which means a lot of podcast listening. An episode of JavaScript Jabber about JS features you should never use sparked my interest in [eval()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval). eval() takes whatever you pass it in a string and executes it in the JS engine. This is a crazy concept if you’ve come from complied languages, and has obvious security implications. As with dynamic typing, I’m trying to force myself out of my comfort zone to embrace JS’s unique talents so I was keen to try eval().

lol - challenged accepted.

My first idea for using eval()was to write a calculator. Pressing the buttons would make build a string, this could just be passed off to eval() and the return value displayed. It’s such an obvious idea I’m sure I’m not the first to have it.

To ensure I’m growing my CSS skills, I also decided to steal the design of the iPhone calculator. That’s the first one below. The second is my current web app version.

Since the calculator display is used for two asynchronous purposes - showing the calculation string as it’s being built, and showing a calculation result when we press equals, I’ve kept a state variable inputState which is true when we’re building the string, and false when we’re displaying a result. btnAddClick() is attached to all the buttons used to build the string - 0123456789()-+/*

let inputText = '';
let inputState = true;

function btnAddClick(event) {
 if (!inputState) {
 inputState = true;
 inputText = "";
 }
 inputText = inputText + event.target.innerHTML;
 txtOutput.innerHTML = inputText;
}

The backspace key just slices off the last character in the input string.

function btnBackspaceClick() {
 if (inputState && inputText.length > 0) {
 inputText = inputText.slice(0, -1);
 txtOutput.innerHTML = inputText;
 }
}

Clear just empties the string and updates the display, then equals calls the dreaded eval() and shows the output. To make it a bit fancy, I show the input for the calculation just above the result.

function btnEqualsClick() {
 inputState = false;
 let output = eval(inputText);
 txtPrevious.innerHTML = inputText+"=";
 txtOutput.innerHTML = output;
}

That’s pretty much the entire code. Of course it doesn’t quite work like a conventional calculator, but I also didn’t have to learn anything about Reverse Polish Notation.

The big challenge - and you can see from the screenshots above, still ongoing - is the getting the CSS to work in a way that it looks correct on different devices. My iPhone is an SE, and I had it looking good on that, then sent it to a friend with a newer iPhone and the URL area would not hide. I’ll keep working at it, it has forced me to get a better understanding of grid.

I’m loving a browser developer tools to help with this. Both browsers have a “responsive mode” that allows you to resize the view to simulate phone like sizes without fiddling with your browser size all the time, and to still be able to see the tools. Dock your tools to the side, and look for the little phone/tablet button to get into responsive mode.

One other thing I learned is that in Safari on iOS double clicking on a web page zooms it in a little. That’s a great feature I guess, but a pain if you just want to enter a number like 99 on a web calculator. The solution turned out to be setting the CSS property [touch-action](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) on the buttons to manipulation.

source or try out the current version

CWD - 185 - Problem solving

Sat, 14 Jan 2023 00:00:00 +0000

/* 
Question 1: Clean the room function: given an input of [1,2,4,591,392,391,2,5,10,2,1,1,1,20,20], 
make a function that organizes these into individual array that is ordered. For example 
answer(ArrayFromAbove) should return: [[1,1,1,1],[2,2,2], 4,5,10,[20,20], 391, 392,591]. 
*/

function ctrFunction1(inputArray) {
 // copy the array since we're mutating it
 const array = [...inputArray];
 array.sort();

 const numberObject = {};
 for (const number of array) {
 if (numberObject[number] === undefined) {
 // this property does not exist, so add it
 numberObject[number] = [];
 }
 numberObject[number].push(number);
 }

 // object now contains arrays for each number, but the ones with a
 // single element need degloved
 for (property in numberObject) {
 if (numberObject[property].length === 1) {
 numberObject[property] = numberObject[property][0];
 }
 }

 // now turn back to array 
 return Object.values(numberObject);
}

const array1 = [1, 2, 4, 591, 392, 391, 2, 5, 10, '2', 1, 1, 1, 20, 20];
const transformedArray1 = ctrFunction1(array1);
console.log(transformedArray1);
// [1, 1, 1, 1], [2, 2, '2'], 4, 5, 10, [20, 20], 391, 392, 591]

Line 10

When I’m looking at a function, I’d prefer not to also have to hold global state in my head - so I’m all for functional programming as far as that goes. I’m less concerned about side effects, so I wouldn’t always bother to copy a parameter like this, but the argument is stronger for an array than an object since in other languages an array might be a value type.

The copy itself is noteworthy since I’m using the cool [...x] spread syntax. This is one of the newish iterator tools which returns any iterate-able data as an array. Since this is right at the top of our function, we’re also indicating to the reader we’re expecting a one-dimensional array.

Line 11

array.sort() works as expected, and in place - so our new array is mutated - hence the copying earlier. It can optionally be passed in an arrow function to determine the sort test, but if omitted assumes ascending according to the < and > rules. The format of this function is a bit different that in Swift. For the standard sort it is array.sort((a, b) => (a - b)) whereas in Swift it would have been ( a > b ). This is because in JS the function result is compared against zero to see if the positions are swapped. This seems odd, but I’m sure there’s a reason.

Lines 13-20

The for (x of y) syntax is a neat iterator loop for when you need the item (but not index) of a collection. I slightly regret using number for the array element - since this is JS it could be number, string or anything.

We check the new object we created to see if it has a property with the name of the current element. For example if this element of our array is 254, we check to see if the object has a property of that name - eg numberObject.254. That’s the square brackets on the object. It’s a neat bit of meta that would be challenging in other languages.

If there’s no property with that name we add it as an empty array. The value from the array is appended to this array in the object. So if we had an array of [2, 2, 3, 4] we’d end up with an object.

2 - [2, 2]
3 - [3]
4 - [4]

Lines 22-28

Where there’s more than one of the same value (as in 2 above) we want an array, but if there’s only a single value, we want the raw value. So the next segment of code is to work through each property of the object and change any single values to just their values instead of a single element array. This is a great example of something that’s neat and clear in JS but would not be possible in a strictly typed language.

We use for x **in** y this time to inspect each property of an object (rather than elements in an array).

Line 31

values() is just a standard method that returns an array version of an object.