Wednesday, October 25, 2017

Testing a Node.js API

Testing a Node.js API

Introduction

Tests are important; they provide a safeguard for your applications or APIs. As beginners, it is possible to be oblivious of the need to write tests that cover the important parts of what you are building. Yet you will meet with it as you make progress as a developer.

In a previous tutorial, you learned how to build an API with Node.js. If you have not gone through it, I suggest you do so before continuing with this. In this tutorial, you will be writing tests for an API built using Node.js and Express. At the end of this tutorial, you will know how testing works in Node.js, and you will be able to build functional and tested APIs.

Testing Tools

You will be making use of Mocha, Expect, and Supertest.

Mocha is a JavaScript test framework which makes asynchronous testing simple and fun. Mocha comes with tons of great features which can be found on the website. You will be making use of a handful of them.

Expect is an assertion library that makes it easy for you to make better assertions. You will see how that works. Supertest provides a high-level abstraction for testing HTTP. This is needful as you will be testing an API.

Enough talk, time to write some code.

Project Setup

I have a to-do list project already set up for you. The model, config file, and part of the app.js are already done for you. Go over to GitHub and clone the repository. Or you can simply do:

Your package.json should look like this.

Now run the command to install the dependencies.

POST Request Test

For your test, create a new folder called test; this folder should be in your server directory. Now create a new file where you will write your test. Name the file server.test.js.

In this file, start by requiring the modules you installed. You also need to require your server file and your model.

You need to have a few to-dos that will be used during tests. But these to-dos will be deleted from the test database each time you run your test suite. To handle that, create two tests like so.

The before block cleans your Todo database, then inserts the to-dos set above. This ensures that you have a stable amount of entries in your database so your tests do not run into issues.

With that done, you can write the test for the POST request. For your POST request, you will write two tests. The first will make a request for a valid to-do and be successful. The second will make a request with an invalid body, and this should not create a new to-do.

Here is what the test should look like.

Run the test using the command:

It should fail. Here is what is happening:

  1. Describes the test.
  2. Creates a new to-do and saves it as a value to text.
  3. You make a POST request to the /todos path of your API, sending the to-do you created as the body of the request. You expect the status code for the request to be 200 and the body of the to-do to equal the value of text.
  4. An error is returned if there is any, and this will cause the request to end. Thus the next block of code will not run. If no error is encountered, the flow continues.
  5. A request is made to the database to find the created to-do. You expect the length of the to-dos in the database to be 1, and the text of the to-do to be equal to the value of text.
  6. This is the test made with invalid body data.
  7. A POST request is made to the /todos path. This time, you are sending a request with no body. You expect to get a 400 request. No need to check the body as you are not sending any. If an error is encountered, it gets returned and the code stops running.
  8. If no error is encountered, a request is made to the database to check the length of the to-dos. We expect that the database will contain only 2, which are the to-dos created at the beginning.

To get this test passing, go to your server.js file and drop in the code needed for the POST request.

GET Request Test

This is simple—the test should return the length of to-dos available in the database. As you already know, the length of the todos should be 2. Why? You guessed right. At the beginning of the test suite, you created a beforeEach block that cleans your database and inserts new to-dos each time the test suite is run.

To test that the request to get all to-dos works, here is the code for that.

In the above, you are making a GET request to the /todos path. This time, you are not passing anything as the body of the request because it is a GET request. You expect to get a response with the status code of 200. Then you expect that the length of the to-dos will be 2.

When you run the test, you should get an error. Try getting the error to pass on your own.

I bet you got that to work. Here is the code to get the test to pass; compare it with your solution.

When a GET request is made to the /todos path, you want to find every to-do in the Todo collection and return them as to-dos. Adding this to server.js causes the test to pass.

Next, you'll write three tests for the GET request made to retrieve individual to-dos. The first should retrieve and return the to-do. The second and third should return 404 error in cases where the to-do is not found.

Open up your server.test.js and create a new describe block with the first test case.

This test makes a GET request to retrieve the first to-do available in your database. You expect to get a 200 status code, and then check that the text value of the to-do is the same as the one created.

The next test looks like this.

Here you are looking for a to-do using an ID that does not correspond to the ID of any to-do saved in your database. The test expects this request to return a 404 error.

The last test is like the first but a little different; here is how it looks.

Here, you create an invalid ObjectId and try to query the database to get a to-do matching the ObjectId created. The test expects the request to return a 404 error. 

When you run the test, they should all fail. To get them to pass, add the code below to your server.js file.

  1. Get the ID of the to-do requested from the params.
  2. Check to see if the ID is valid. If the ID is not valid, an error stating this is sent.
  3. If the ID is valid, try to find a to-do that matches that ID using the findById method. If no to-do is found with that ID, a 404 error is sent.
  4. If a to-do is found, the to-do is sent. Then you catch any error that occurs and sends it.

Run the test command once more, and it should pass.

DELETE Request Test

The test for your DELETE request will be a little like what you have for your GET request.

First, you want to test that a to-do is deleted.

Here is what is happening above:

  1. You set the id of the to-do to a variable called hexId. Next, a DELETE request is made to the path of the to-do, using the ID. You expect to get a 200 response, and the to-do obtained to match the value of hexId.
  2. If any error is encountered, it is returned.
  3. If no error, the test goes further to query your database using the ID saved as the value of hexId. Since a DELETE request has been previously sent, the test expects that the to-do matching that ID does not exist.

Next, you want to test that when a request is made to delete a to-do that does not exist, the response contains a 404 error. It is important to have this, as it is not possible to delete a to-do twice. Here is how the test for this should look.

This creates an ID for a to-do that does not exist in the database. Then a DELETE request is made to delete the to-do. The test is expected to return a 404 error as the to-do does not exist.

You want to test that a DELETE using an invalid ID returns a 404 error, like so.

To get the test to pass, open your server.js and drop this.

Run the command to test:

And your tests should be passing.

Conclusion

At this point, you now know how to set up a test suite when building an API using Node.js. You have used Mocha, Expect, and Supertest to test an API. One advantage of doing this is that you do not need to always fire up Postman when building your API. With your test, you can get to know what is broken.

Before we wrap up, note that JavaScript has become one of the de facto languages of working on the web. It’s not without its learning curves, and there are plenty of frameworks and libraries to keep you busy, as well. If you’re looking for additional resources to study or to use in your work, check out what we have available on Envato Market.

Using what you now know, you are good to explore the world of testing.


How to Create an Acousticophobia Illustration in Adobe Illustrator

How to Grab a Screenshot in Excel in 60 Seconds

TypeScript for Beginners, Part 1: Getting Started

How to Childproof an iPad

SVG for Web Designers in 60 Seconds

Tools for React Native Development

Tools for React Native Development

Tools, libraries, and services are an important part of every developer’s life, no matter which environment you’re developing for. And React Native is no exception. In this article, I’ll walk you through some of the best UI frameworks, libraries, components, development tools, and web services which will make you a happier and more productive React Native developer. 

Text Editors and IDEs

Visual Studio Code is a text editor which has built-in IntelliSense, debugging, and Git integration capabilities. What makes it really good for React Native development is its React Native tools extension. This allows you to execute React Native commands from the command palette, add IntelliSense for React Native APIs, and debug code within the editor itself. 

For more information regarding how to set up Visual Studio Code for React Native, check out this blog post: VSCode for React Native.

If you’re using Atom, you can install the Nuclide plugin. This plugin was specifically created for working with React Native, Flow, and Hack projects. It has a built-in debugger and element inspector with all the features you’re used to in Chrome Developer Tools. Flow support means that you get autocomplete, type-hinting, and code diagnostics out of the box. 

If you want to explore more IDE and editor options, check out this blog post on the Top 10 Editors for React Native.

Development Tools

Development tools have a wide scope, so I’ll be grouping each tool based on its focus:

  • SDK
  • code quality
  • testing
  • debugging

SDK

When it comes to SDKs for React Native, nothing beats Expo. Expo allows you to easily prototype an app without the need for Android Studio or Xcode. It includes a set of components and libraries to help you speed up your development. 

The Expo workflow consists of the following:

  1. Create a new project using create-react-native-app.
  2. Write the code in your favorite text editor.
  3. Run the app using the Expo client app. 

There’s no need to connect your phone to your computer. Simply scan the QR code on your terminal using the Expo client app, and it will automatically run your app. If you’re using Genymotion, Expo supports that too. 

The only disadvantage when using Expo is that you cannot include any custom package which uses the device’s native functionality. Expo already includes a number of commonly used native packages such as the Camera, Facebook, and Map. But if you need to use a package that they don’t already support, then you’ll have to "eject" your app. At that point your app will be as if it was created with react-native init, and you’ll also lose the ability to run it using the Expo client app.

Code Quality

Checking the quality of your code is important, and that is why tools like ESLint exist. In a nutshell, a linting tool allows you to be more consistent with your code by checking it against a style guide. An example of such a style guide is Airbnb’s JavaScript Style Guide which specifies rules on how JavaScript code should be written. The linting tool then checks your code against those rules to ensure that they've been followed. There’s also a style guide for React projects.

If you’re using Sublime Text, here’s a good tutorial on how you can configure it so that you can have real-time feedback on the quality of your code while you’re coding: Sublime Linting for React and ES6. If you’re using another editor or IDE, be sure to look for a corresponding plugin which uses ESLint.

If you want to add static typing to your project, you can use Flow. Flow adds static-typing on top of JavaScript without you having to make any changes to your existing codebase. This is because Flow tries to infer the type whenever possible. For new projects, though, it's recommended that you explicitly specify the type to reap the full benefits of using Flow.

To get started using Flow, here’s a tutorial on how you can set up Flow for your React Native projects.

Testing

Enzyme is a testing utility for React which allows you to assert, manipulate, and traverse your component’s output. It provides methods such as shallow() to "shallowly" render your components, find() to traverse the rendered component, and expect() to assert the props or the content rendered within the component.

You can follow this guide to Using enzyme to Test Components in React Native to make your React Native app testable with enzyme. If you’re new to enzyme, you can read this tutorial on Testing React Components with Enzyme and Mocha.

Debugging

Reactotron is a desktop app that allows you to debug React and React Native apps. Some of its key features include inspecting, modifying, and subscribing to the app state, tracking HTTP requests made through the app, benchmarking the app performance, and tracking errors. If you’re using Redux, you can even dispatch actions and track sagas from within Reactotron.

Boilerplates and UI Frameworks

Snowflake is a boilerplate for full-stack React Native development. It includes everything from the front-end to the back-end of the app. So if you just want a tool that can help you quickly get started then you might find Snowflake useful. You can read the notes for more information on what packages and tools are used to put it up.

Alternatively, you can use Ignite. It's a command-line tool which also includes a boilerplate, generators, style guide for UI components, API Testing Tool, and more. 

React Native already comes with UI components which you can use for user interaction. The problem is that they only have the most basic styling in order for each component to be distinguished for what it is (e.g. button, checkbox). If you want to add custom styles, you have to write your own CSS code. 

This is where NativeBase comes in. It allows your app to have a truly native look and feel by implementing the same design used in native Android (Material Design) and iOS (Human Interface Guidelines) apps. Out of the box, you get custom components such as Floating Action Buttons, Spinners, and best of all, form components.

Libraries and Components

React Native has a huge community behind it, so there are lots of libraries and components that you can use. We could spend all day talking about these, so to keep things brief, I’ll focus on the following areas:

  • navigation
  • state management
  • animations
  • commonly used components and libraries

Navigation

React Navigation allows you to easily implement navigation in your React Native apps through the use of its built-in navigators such as the Stack Navigator, Tab Navigator, and Drawer Navigator. That's not all, though: in addition to in-app navigation, it also includes deep linking, Redux integration, and web integration. This makes it a really robust library for implementing navigation.

State Management

MobX provides the functionality to update and manage the app state used by React. What makes it a good candidate for state management in React is its simplicity and testability. It also has a short learning curve, so things like async functions and computed values are already handled behind the scenes. 

For bigger and more complex applications, Redux is still recommended. This is because MobX is very liberal, not unlike Redux, which provides strict guidelines on how the state should be managed. So it's a wiser choice for bigger projects with more people working on them.

Animations

React Native already has an animation API built into it. In fact, there’s not just one, but two APIs for working with animation: Animated API and LayoutAnimation. Those two are very powerful but can be cumbersome, especially if all you want to do is apply basic animations such as moving an object up and down or making it bounce. In such cases, components like Animatable come in handy.

Commonly Used Components and Libraries

Here’s a list of components and libraries that are commonly used in React Native projects. These are compatible with both Android and iOS devices:

Web Services

You can build serverless apps and ease the deployment of your React Native apps by using web services. There are a plethora of web services out there, but I’ll focus on the following areas:

  • database
  • analytics
  • push notifications
  • code updates
  • continuous integration

Database

Realm is a real-time database with a focus on mobile apps. It includes features such as two-way data sync, offline-first capabilities, and data push. The Realm Mobile Database is open-source and cross-platform, which means that you can host the Realm Object Server on your own server and then use the Realm JavaScript library for free. 

Not all features are available in the developer edition, but in most use cases you should be fine with just the developer edition because it includes the core features such as the Object Database, Realtime Synchronization, and Authentication. Here's a comparison of what you get for each edition: Realm Products and Pricing.

If Realm is too much for your needs, you can always stick with the AsyncStorage API that comes with React Native.

Analytics

Fabric is an all-in-one service that allows you, among other things, to add analytics in your app. There’s Answers, which gives you real-time statistics on how your app is being used. This includes the number of active users, the session length, and retention rate. There’s also Crashlytics, which gives you powerful crash reporting capabilities. All of it happens in real time, and you can view it in Fabric’s real-time dashboard. You can use the Fabric library to easily set up Fabric for your React Native app.

If you’d rather stick with a tried and tested solution like Google Analytics, there’s also a library that allows you to do that.

Push Notifications

There’s really no competition when it comes to implementing push notifications in apps. Firebase Cloud Messaging (previously known as Google Cloud Messaging) allows you to send push notifications to both Android and iOS apps. You can use the react-native-fcm package to communicate with FCM from your app.

Code Updates

CodePush allows you to deploy code updates to mobile apps directly to the users’ devices. CodePush acts as a central repository where you can deploy changes to HTML, CSS, JavaScript, and assets such as images. The corresponding CodePush code in the app would then pull these changes. This is great for pushing bug fixes to the app without the need for uploading it in the app store and waiting for users to update the app. You can use this package to pull updates from CodePush within your React Native app.

Continuous Integration

Bitrise is a Continuous Delivery Service for mobile app development. It allows you to run your tests, build the app, and automatically push it to your users’ devices every time you deploy your code. 

Bitrise integrates with a bunch of services in every step of your development workflow. For example, when you push to your release branches on GitHub, Bitrise is notified of that push through webhooks. It will then begin running the tests. Once the tests pass, the build process begins. If it’s just a "soft release" (e.g. changes to the JavaScript code) then the changes can be deployed to the users through CodePush. But if there are changes to the native code (e.g. you added a Camera plugin), then Bitrise can also build an APK or IPA file and deploy it to Google Play or iTunes Connect.

Fastlane is a collection of tools that automate the build and release process for Android and iOS apps. For iOS, it handles tasks such as running your tests, generating screenshots, code signing, and releasing the app to the app store. It also includes beta testing tools such as Pilot and Boarding. Pilot allows you to upload your app to iTunes Connect and manage your TestFlight beta testers right from the command line. Boarding creates a signup page for TestFlight beta testers.

The tools are more geared towards iOS deployment, but you can also benefit if you’re deploying Android apps. Currently, there are only two tools available for Android deployment: Supply and Screengrab. 

Supply allows you to automate the uploading of assets such as the app icon, promo graphics, and screenshots of your app. It also allows you to update your existing apps on the Google Play Store. 

Screengrab, on the other hand, automates the generation of screenshots for multiple devices. Each screenshot can also be localized if your app supports multiple languages.

Conclusion

That’s it! In this article, you’ve learned about some of the tools, libraries, and services that you can use when developing React Native apps. What about you? What are your go-to tools when it comes to developing apps in React Native?

And while you're here, check out some of our other posts on React Native app development!

  • Mobile App
    10 Best React Native App Templates of 2017
    Nona Blackman
  • React Native
    Practical Animation Examples in React Native
    Wernher-Bel Ancheta
  • React
    10 React Native Applications for You to Use, Study, and Apply
    Eric Dye
  • React Native
    Get Started With React Native Layouts
    Wernher-Bel Ancheta