DEV Community

jushendhillon9
jushendhillon9

Posted on

I Learned Promise Chaining (and more!) from Error Testing my SVG Logo Generator.

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”));
    }
})

Enter fullscreen mode Exit fullscreen mode

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.

Top comments (6)

Collapse
 
seif_sekalala_81e09fe6b9e profile image
Seif Sekalala

Hi! Sorry if this comment isn’t as helpful as it should be, but I believe it’s still worthy of being made: good job!

Regardless of the task, coding is hard. And it’s easy to tell that you invested some serious time and effort in this task. So again, good job! Keep the fire burning!

Collapse
 
jushendhillon9 profile image
jushendhillon9

Thank you! I've practiced with these concepts more, and they make much more sense now. I've found that practicing is the best way to learn to code.

Collapse
 
sethcalebweeks profile image
Caleb Weeks • Edited

Hey, welcome to DEV! I think you may have put the code block backticks in the wrong place. The formatting of this post is a bit wonky.

Collapse
 
jushendhillon9 profile image
jushendhillon9

Thank you for pointing that out; it should be fixed now. Thanks for checking out the post!

Collapse
 
sethcalebweeks profile image
Caleb Weeks

Sure thing! You can wrap the code with is <code> (without the spaces) and it will add syntax highlighting. Hope your JS learning goes well, and I'm here to watch your progress!

Thread Thread
 
jushendhillon9 profile image
jushendhillon9

Awesome, and thank you for the tip! I appreciate your support and encouragement for my JS learning journey.