I Learned Promise Chaining (and more!) from Error Testing my SVG Logo Generator.
jushendhillon9
Posted on September 8, 2023
After a few hours dedicated to honing my JavaScript skills, which revolved around building an SVG-logo generator through the command line, I familiarized myself with Node Package Manager (npm) and learned three concepts essential to Node. Before, I knew next to nothing about the npm package "Jest" and how to use it to write unit tests that error-proof my code. But after rewatching a few lectures and watching a couple of YouTube tutorials, I've nailed these concepts and, as a result, significantly improved my ability to write unit tests.
The first concept, which was difficult at first but essential for me to understand, was promises. When one creates a new promise, its parameter must be a function. This nested function has two of its own parameters (the resolve and reject methods), and the function specifies the conditions that must be met to either resolve or reject the promise.
Ex:
let myPromise = new Promise((resolve, reject) => {
if (myName === “Max”) {
resolve(“Success! the promise was resolved)
}
else {
reject(new Error (“oops! error occurred”));
}
})
Resolve and reject are executor functions that, when executed, change the state of the promise to resolved or rejected. Resolved promises allow multiple functions to be chained together in succession using .then() functions. Rejected promises indicate an unwanted output from the function and halt the chain of functions that rely on that promise. This example shows that a rejected promise creates, and would then throw to the chained .then() functions, an error. Promise objects are multipurpose, and not only facilitate but also simplify intricate JavaScript functions.
I was forced to learn the second of the three concepts while using Jest to write a test that verifies the accuracy of my command line application. I utilized asynchronous functions that execute off to the side, meaning the code that follows the asynchronous function executes while the asynchronous function runs in the background, to write my test. The end of my test included an asynchronous function that provided the test's output. Following my asynchronous function was the comparison statement expect(), and it used the test's output from the asynchronous function to see if it matched the expected output. Because the asynchronous function did not finish running in the background before the expect() statement was executed, expect() compared the expected output to nothing. As a result, the test failed.
To fix this issue, I learned to incorporate the async and await features to turn my asynchronous function into a synchronous function. Marking the entire testing code as "async" allowed me to use the await feature, which awaits a promise before it continues executing the rest of the code. I put await in front of the asynchronous function, and the program would wait for a resolved promise from the asynchronous function. This indicated that it completed its task, and then the expect() statement would run, and this time, with the necessary data to make the comparison. The async and await keywords add another dimension of functionality to JavaScript functions that I thoroughly enjoy. It expands the complexity of JavaScript programs by adding a temporal aspect that is challenging but rewarding to manage.
The last of the three concepts I learned was the difference between require and import. Require, unlike import, can be called anywhere and executes immediately, regardless of where it's situated in the program. Instances of import, on the contrary, are hoisted to the top of the function to be executed. Import, being an asynchronous function, also relies on promises, while require does not since it is a synchronous function. These distinctions clearly differentiate the use cases of these two functions. After practicing with both functions, I find myself using require much more often since I do not have to worry about the temporal aspect of asynchronous functions.
I am currently working on the README file for my application to submit as a boot camp assignment. I am glad I got to spend as much time as I was able to on this assignment, as it taught me a lot of fundamental JavaScript concepts applicable to Node and Jest. After practicing it for a bit, I more confident creating command-line applications that utilize several different files.
Posted on September 8, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
September 8, 2023