DEV Community: Sagacité

Exploring Caching with NestJS and Redis

Sagacité — Sun, 18 Jun 2023 00:41:16 +0000

In this tutorial, we will be exploring the world of caching, with NestJS and Redis.

Before we dive head-in into Redis, NestJS provides its in-memory cache, that can serve as an in-memory data store, but can easily be switched to high-performant caching system like Redis.

To get started, you can fork this github repository. Please, ensure you select the base branch as it contains the base application setup for this tutorial.

After setting up you base application setup, you can proceed to install the cache-manager package and its dependencies.



npm install @nestjs/cache-manager cache-manager

In case you are familiar with NestJS in-memory cache implementation, there is a current update to the cache-manager, we are using version 5 throughout this tutorial. As opposed to the version 4, the version 5 now provides ttl (Time-To-Live) in milliseconds instead. We have to do the conversion before parsing it to NestJS as NestJs does not do the conversion for us.

To enable caching, we have to import the CacheModule into the app.module.ts file.



import { Module } from '@nestjs/common';  
import { AppController } from './app.controller';  
import { AppService } from './app.service';  
import { MongooseModule } from '@nestjs/mongoose';  
import { ContactModule } from './contact/contact.module';  
import { CacheModule } from '@nestjs/cache-manager';  

@Module({  
  imports: [  
  // mongodb://127.0.0.1:27017/nest-redis - use env variables or other secure options in production
    MongooseModule.forRoot('mongodb://127.0.0.1:27017/nest-redis', {  
      useNewUrlParser: true,  
    }),    ContactModule,  
    CacheModule.register(),  
  ],  controllers: [AppController],  
  providers: [AppService],  
})  
export class AppModule {}

Our app.module.ts file should look like the one above.

We are also going to import it into our Contact module. With any feature module in NestJS, there is a need to import the cache-manager into them respectively. If you have a module that does not require caching, then it is not a necessity.

Our contact.module.ts should be similar to the code block below:



import { Module } from '@nestjs/common';  
import { ContactService } from './contact.service';  
import { ContactController } from './contact.controller';  
import { MongooseModule } from '@nestjs/mongoose';  
import { ContactSchema } from './schemas/schema';  
import { CacheModule } from '@nestjs/cache-manager';  

@Module({  
  imports: [  
    MongooseModule.forFeature([{ name: 'Contact', schema: ContactSchema }]),  
    CacheModule.register(),  
  ],  providers: [ContactService],  
  controllers: [ContactController],  
})  
export class ContactModule {}

A good alternative, is setting the isGlobal option for the CacheModule.register(). This option can be considered if you need caching availability across all your modules.

Let's proceed to our Contact controller to modify some of our existing endpoints. For the @Get('contacts/:contactId') endpoint, we want to check if our response is in cache, before calling the method. This is achievable using the @useInterceptors decorator:

Our getContact method should be similar to this below:



@UseInterceptors(CacheInterceptor) // Automatically cache the response for this endpoint  
@Get('contacts/:contactId')  
async getContact(  
  @Res() res,  
  @Param('contactId') contactId,  
) {  
  const contact = await this.contactService.getContact(contactId);  
  if (!contact) throw new NotFoundException('Contact does not exist');  
  return res.status(HttpStatus.OK).json(contact);  
}

Things to note:

The expiry time is 5 seconds
The interceptor autogenerates the cache key for the cache entry based on the route path. Both options can be effectively controlled and overriden.

Implementing an override, our getContact will be:



@UseInterceptors(CacheInterceptor) // Automatically cache the response for this endpoint  
@CacheKey('getcontact-key')  
@CacheTTL(60000) // now in milliseconds (1 minute === 60000)
@Get('contacts/:contactId')  
async getContact(  
  @Res() res,  
  @Param('contactId') contactId,  
) {  
  const contact = await this.contactService.getContact(contactId);  
  if (!contact) throw new NotFoundException('Contact does not exist');  
  return res.status(HttpStatus.OK).json(contact);  
}

According to the official Nestjs documentation, the CacheModule will not work properly with GraphQL applications*

Now Redis

According to the official Redis website, “Redis is an open source, in-memory data structure store used as a database, cache, message broker, and streaming engine.”

Polled from Redis

To use Redis instead of the in-memory cache, we will need to install the relevant package:



npm i --save cache-manager-redis-yet

This package is a nestjs wrapper for passing configurations to the node_redis package. We can now change some config of our app.module.ts to use Redis.

Note: cache-manager-redis-store is been discontinued to allow for the package we just installed. This package we installed is been tracked directly by the Nestjs team.



import { Module } from '@nestjs/common';  
import { AppController } from './app.controller';  
import { AppService } from './app.service';  
import { MongooseModule } from '@nestjs/mongoose';  
import { ContactModule } from './contact/contact.module';  
import { CacheModule } from '@nestjs/cache-manager';  
import { redisStore } from 'cache-manager-redis-yet';  

@Module({  
  imports: [  
    MongooseModule.forRoot('mongodb://127.0.0.1:27017/nest-redis', {  
      useNewUrlParser: true,  
    }),  
    CacheModule.registerAsync({  
      isGlobal: true,  
      useFactory: async () => ({  
        store: await redisStore({  
          socket: {  
            host: 'localhost',  
            port: 6379,  
          },        
        }),      
      }),    
    }),    
    ContactModule,  
  ],  controllers: [AppController],  
  providers: [AppService],  
})  
export class AppModule {}

This has allowed us to add new config options like:
redisStore: represent the node-cache-manager-redis-yet we just installed
host and port are set to their default

Incase you don't have Redis server running yet, you can look up various installation methods for your operating system or consider the Docker option

Heading to our contact.controller page, we can configure our getContact method, to check if we have a cached data yet before querying the main database. If it exists, we want to return it else we want to set it after querying the DB.

Our getContact should be similar to this:



@Get('contacts/:contactId')  
async getContact(@Res() res, @Param('contactId') contactId) {  
  const cachedData = await this.cacheService.get(contactId.toString());  
  if (cachedData) {  
    console.log('Getting data from cache');  
    return res.status(HttpStatus.OK).json(cachedData);  
  }  
  const contact = await this.contactService.getContact(contactId);  
  if (!contact) throw new NotFoundException('Contact does not exist');  
  await this.cacheService.set(contactId.toString(), contact);  
  const newCachedData = await this.cacheService.get(contactId.toString());
  console.log('data set to cache', newCachedData);  
  return res.status(HttpStatus.OK).json(contact);  
}

Let's take a brief look at the code block above:



const cachedData = await this.cacheService.get(contactId.toString());  
  if (cachedData) {  
    console.log('Getting data from cache');  
    return res.status(HttpStatus.OK).json(cachedData);  
  }

The cachedData variable is checking if we have an existing cache, if it exists, you can check your logger and you'll get Getting data from cache.



await this.cacheService.set(contactId.toString(), contact);  
  const newCachedData = await this.cacheService.get(contactId.toString());
  console.log('data set to cache', newCachedData);

If our data does not exist in cache, the codeblock above helps us to set in cache.

Your cached data will now persist to your local Redis server.

You can test out the endpoint and you should get a result similar to my output in your logger:



[Nest] 3720  - 05/09/2023, 10:00:49 AM     LOG [NestApplication] Nest application successfully started +5ms
data set to cache {
  _id: '6459510cfc398baa01998a66',
  first_name: 'Daniel',
  last_name: 'Olabemiwo',
  email: 'dee@gmail.com',
  phone: '+23832101',
  message: 'Welcome to this side',
  __v: 0
}

You can confirm in your GUI of choice (I like TablePlus) by sending a request to your NestJS app where caching is used and you'll see the data is now persisted:

Congratulations, you have just added a Redis cache to your NestJS application.

In this tutorial, we have successfully added a Redis cache to our Nestjs application.
Redis enables lower application latency and very high data access. This allows software engineers to build highly performant, reliable solutions.

And that's it! What do you think? Let me know in the comments below.

DOCUMENTING YOUR API WITH SWAGGER

Sagacité — Tue, 02 Aug 2022 18:17:39 +0000

Ever gone through the engineering your API's knowing fully well, you will need to come up with a documentation so other devs can work with it?

You have a short answer here. I will try to make this docs as simple and comprehensive as it might be. Might not be as comprehensive as you want, but you willl be able to scale it up to meet your demands.

Stacks and technologies needed: Node.js, Express, MongoDB, Swagger.

Initialize a project using npm init.

Follow the step by step guideline/prompt...

You can go ahead to install express and Mongo and some other dependecies necessary

npm i express mongoose nodemon dotenv cors

Express will be used for the middleware to create various CRUD endpoints.
Mongoose for managing data in MongoDB.
Nodemon to restart our server every time we save our file.
Dotenv to manage a .env file.
cors to manage and provide a middleware that can be used to enable CORS with various options

Once the installation is complete, go ahead to create an index.js in the root directory of your application.

const express = require('express');
const mongoose = require('mongoose');

const app = express();

app.use(express.json());

app.listen(3000, () => {
    console.log(`Server Started at ${3000}`)
})

Things to note from the code lines above:
We have imported express and mongoose as dependencies and assigned express to app.
Now we can listen on the port we assigned once we start the server.

In package.json file, you can add the line below:

"scripts": {
    "start": "nodemon index.js"
},

Remember Nodemon will help us auto-restart the server on code changes.

You can just do a npm start to start your node server.

We won't be going deep into getting our MongoDB ready and set up in this tutorial course. You can check this out from this section.io post
** I will be using MongoDB Compass which allows for local development and testing.

After setting up our DB, we can create a .env file and add our DB details.

MONGO_DB=mongodb://localhost:27017/
PORT=3000

The value for MONGO_DB in your .env might be different depending on the MongoDB URL you get (compass/atlas).

Now we can modify index.js file to effect some needed changes.

require("dotenv").config();
const cors = require("cors");
const express = require("express");

const { connect } = require("mongoose");
const app = express();

app.use(cors());
app.use(express.urlencoded({ extended: false }));
app.use(express.json());

const runApp = async () => {
    try {
        await connect(process.env.MONGO_DB, {
            useUnifiedTopology: true,
            useNewUrlParser: true,
        });
        console.log(`Successfully connected to database ${process.env.MONGO_DB}`);
        app.listen(process.env.PORT, () => {
            console.log(`Server started successfully on PORT ${process.env.PORT}`);
        })
    } catch(err) {
        console.log(err);
        runApp();
    }
};

runApp();

Using dotenv allows for .env variables to be accessible on this page.
In the try block, we put our .env variables to use there.

Running npm start should give us this result below

If you get that result, congratulations. Let us go ahead and install our swagger dependecies.

npm i swagger-autogen swagger-ui-express

Creating Routes for our endpoints

Create a folder called routes and inside, make a file called index.js
Before proceeding, let's import this file into our main script file.

Our main script file should look like this now:

require("dotenv").config();
const cors = require("cors");
const express = require("express");

const { connect } = require("mongoose"); 
const app = express();
const router = require("./routes/index");

app.use(cors());
app.use(express.urlencoded({ extended: false }));
app.use(express.json());
app.use(router);

const runApp = async () => {
    try {
        await connect(process.env.MONGO_DB, {
            useUnifiedTopology: true,
            useNewUrlParser: true,
        });
        console.log(`Successfully connected to database ${process.env.MONGO_DB}`);
        app.listen(process.env.PORT, () => {
            console.log(`Server started successfully on PORT ${process.env.PORT}`);
        })
    } catch(err) {
        console.log(err);
        runApp();
    }
};

runApp();

We will be getting an error now because our routes/index.js file is empty.

** We are going to create a simple student database, no authentication or authorization needed.

Let's create a students.js file in our routes folder.
Add the following content:

    const router = require("express").Router();

    router.get("/students", async (req, res) => {
        res.send('Get All students')
    })

    //Post 
    router.post('/students', async (req, res) => {
        res.send('Add a new student')
    })

    //Get by ID 
    router.get('/students/get/:id', async (req, res) => {
        res.send('Get by one student by ID')
    })

    //Update by ID 
    router.patch('/students/update/:id', async (req, res) => {
        res.send('Update student by ID')
    })

    //Delete by ID 
    router.delete('/students/delete/:id', async (req, res) => {
        res.send('Delete by ID')
    })


    module.exports = router

Now we can go back to our routes/index.js file to import our students file. This method allows us to define different routes for different collections in our DB.

We have five methods that use the REST Methods for our CRUD operation.

This router is taking the route as the first parameter. Then in the second parameter it's taking a callback.

In the callback, we have a res and a req. res means response, and req means request. We use res for sending responses to our client, like Postman, or any front-end client. And we use req for receiving requests from a client app like Postman, or any front-end client.

Then in the callback body, we are printing a message that says the respective API message.

Let's populate our routes/index.js with code below:

const router = require("express").Router();

const studentRoutes = require('./students.js');

router.use("/api", studentRoutes); 

module.exports = router;

Checking our server instance now, there won't be any process if you followed through to this point.

Creating Models for our DB structure

Create a folder called model and inside, a file called student.js.

const mongoose = require('mongoose');

const studentSchema = new mongoose.Schema({
    firstname: {
        required: true,
        type: String
    },
    lastname: {
        required: true,
        type: String
    },
    middlename: {
        required: false,
        type: String
    },
    class: {
        required: true,
        type: String
    },
    age: {
        required: true,
        type: Number
    }
})

module.exports = mongoose.model('Student', studentSchema)

Here, we have a schema that defines our database structure. It has some properties. The fields have types with some required and some optional.

Creating Controllers for our APIs

Create a folder called controllers. This helps abstract our functions and make out routes files less bulky and buggy

We can then create a students.js file in the controllers folder

const Student = require("../model/students.js");

const addOne = async(req, res) => {
    try {
        const newRecord = new Student({
            ...req.body,
        });
        await newRecord.save();
        return res.status(201).json({
            message: "Student successfully created",
            success: true
        });
    } catch(err) {
        return res.status(500).json({
            message: err.message,
            success: false,
        });
    }
};

const removeOne = async(req, res) => {
    try {
        const deleted = await Student.findByIdAndDelete(req.params.id);
        if(!deleted) {
            return res.status(404).json({
                message: "Student not found",
                success: false,
            });
        }
        return res.status(204).json({
            message: "Student successfully deleted",
            success: true,
        });
    } catch(err) {
        return res.status(500).json({
            message: err.message,
            success: false,
        });
    }
};

const updateOne = async(req, res) => {
    try {
        await Student.findByIdAndUpdate(req.params.id, req.body);
        return res.status(201).json({
            message: "Student's data successfully updated",
            success: true,
        });
    } catch(err) {
        return res.status(500).json({
            message: err.message,
            success: false,
        });
    }
};

const getAll = async(req, res) => {
    try {
        const [results, studentCount] = await
        Promise.all([
            Student.find({}) 
                .sort({createdAt: -1})
                .limit(req.query.limit)
                .skip(req.skip)
                .lean()
                .exec(),
                Student.count({}),
        ]);
        const pageCount = Math.ceil(studentCount / req.query.limit);
        return res.status(201).json({
            data: results,
            pageCount,
            studentCount,
        });
    } catch(err) {
        return res.status(500).json({
            message: err.message,
            success: false,
        });
    }
};

const getOne = async(req, res) => {
    try {
        const student = await Student.findById(req.params.id);
        if(student) {
            return res.status(200).json(student);
        }
        return res.status(404).json({
            message: "Student not found",
            success: false,
        });
    } catch(err) {
        return res.status(500).json({
            message: err.message,
            success: false,
        });
    }
};

module.exports = {
    addOne,
    removeOne,
    updateOne,
    getAll,
    getOne
}

Now, we can go back to routes/students.js to make use of these functions.


    const router = require("express").Router();
    const { addOne, removeOne, updateOne, getAll, getOne } = require("../controller/students.js");


    router.get("/students", async (req, res) => {
        await getAll(req, res);
    })

    //Post 
    router.post('/students', async (req, res) => {
        await addOne(req, res);
    })

    //Get by ID 
    router.get('/students/get/:id', async (req, res) => {
        await getOne(req, res);
    })

    //Update by ID 
    router.patch('/students/update/:id', async (req, res) => {
        await updateOne(req, res);
    })

    //Delete by ID 
    router.delete('/students/delete/:id', async (req, res) => {
        await removeOne(req, res);
    })


    module.exports = router

Swagger APIs

We are going to generate our API documentation from code based on comments in the function headers
Back to routes/students.js we are going to add swagger.tags to each of the route. This creates a subsection in our docs page with the tag. (It groups tags with the same name together).
Remember, we are enclosing it in a comment block.

/*  
    #swagger.tags = ['Students']
*/

Thats what we are adding to each of the routes. Now our students.js routes should look like this:

    const router = require("express").Router();
    const { addOne, removeOne, updateOne, getAll, getOne } = require("../controller/students.js");


    router.get("/students", async (req, res) => {
        /*  
            #swagger.tags = ['Students']
        */ 
        await getAll(req, res);
    })

    //Post 
    router.post('/students', async (req, res) => {
        /*  
            #swagger.tags = ['Students']
        */ 
        await addOne(req, res);
    })

    //Get by ID 
    router.get('/students/get/:id', async (req, res) => {
        /*  
            #swagger.tags = ['Students']
        */  
        await getOne(req, res);
    })

    //Update by ID 
    router.patch('/students/update/:id', async (req, res) => {
        /*  
            #swagger.tags = ['Students']
        */ 
        await updateOne(req, res);
    })

    //Delete by ID 
    router.delete('/students/delete/:id', async (req, res) => {
        /*  
            #swagger.tags = ['Students']
        */ 
        await removeOne(req, res);
    })


    module.exports = router

To be able to see our changes to the route file, we should add a new command to our package.json file.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon index.js",
    "start-gendoc": "node swagger.js" 
  },

Our scripts in package.json should be like the one above.

The last line will help us generate a json file for swagger that we can view on our browser environment.

Let's go ahead and create a swagger.js file in our root directory.

const swaggerAutogen = require("swagger-autogen")()
require("dotenv").config();

const doc = {
    info: {
        version: "1.0.0",
        title: "Quick start to auto-docs with swagger",
        description: "Auto-documenting our APIs with Swagger documentation. Tutorial by Daniel Olabemiwo"
    },
    host: "localhost:3000", // 3000 is our port
    basePath: "/",
    schemes: ["http", "https"],
    consumes: ["application/json"],
    produces: ["application/json"],
    tags: [
    ],
    definitions: {
        StudentModel: {
            $firstname: "Ade",
            $lastname: "Samuel",
            $middlename: "Daniel",
            $class: "BASIC 3",
            $age: 10
        },
    }
};


const outputFile = "./swagger_output.json";
const endpointFiles = ["./routes/index.js"];

swaggerAutogen(outputFile, endpointFiles, doc).then(() => {
    require("./index");
});

This is how our swagger.js file will look like.

We should also add some swagger lines to our root index.js file.
It should look like this:

require("dotenv").config();
const cors = require("cors");
const express = require("express");

const { connect } = require("mongoose");
const swaggerUi = require("swagger-ui-express");
const swaggerFile = require("./swagger_output.json");

const app = express();
const router = require("./routes/index");

app.use(cors());
app.use(express.urlencoded({ extended: false }));
app.use(express.json());
app.use(router);
app.use("/doc", swaggerUi.serve, swaggerUi.setup(swaggerFile));

const runApp = async () => {
    try {
        await connect(process.env.MONGO_DB, {
            useUnifiedTopology: true,
            useNewUrlParser: true,
        });
        console.log(`Successfully connected to database ${process.env.MONGO_DB}`);
        app.listen(process.env.PORT, () => {
            console.log(`Server started successfully on PORT ${process.env.PORT}`);
        })
    } catch(err) {
        console.log(err);
        runApp();
    }
};

runApp();

Look out for all the new addition to our index.js file.

We should stop our server and run this new command.

npm run start-gendoc

Let's visit our browser and check out http://localhost:3000/doc/

Congratulations if your browser is looking like the one above!
Now let's wrap up and add necessary parameters to our post request as it requires parameters from users.

    //Post 
    router.post('/students', async (req, res) => {
         /*  
         #swagger.tags = ['Students'],
        #swagger.security = [{
        "Authorization": []
        }]
        #swagger.parameters['obj'] = {
            in: 'body',
            required: true,
            schema: { $ref: "#/definitions/StudentModel" }
    } */ 
        await addOne(req, res);
    })

We have to rerun npm run start-gendoc to reflect all the newest additions.
If you followed this tutorial to this point, you can test the POST endpoint on your browser and should get a result like this:

This is the end of this tutorial session.

Feel free to drop your comments, or connect with me via twitter or linkedIn

Test Driven Development: How to test using Vue.js, VueTestUtils and Jest

Sagacité — Tue, 12 Oct 2021 01:06:58 +0000

Introduction

Test Driven Development is a software practice. TDD focuses on three (3) important things:

Testing
Coding
Refactoring.

The goal of TDD is to ensure developers have a roadmap of their code outcome before writing the actual code. In TDD, you write a test (mostly unit tests). The test is expected to fail because there is no corresponding code. After writing your test, you are required to write your code or script. After, you can continuously refractor your codebase to successfully pass all your test cases. The test process is the driving force of software development. It helps build a resilient and optimized coding structure over a long time. TDD ensures developers write only the necessary codes required for a software or a codebase. TDD helps reduce breakage in applications while in production mode and improved productivity.

Unit Testing
TDD requires that you write unit tests often. Unit is mostly referred to as class or group of functions. Keeping your unit minimal is a good practice in TDD. Minimal units help in reducing debugging period. In a component-based app like Vue.js, the unit is a component.

To read more on Test Driven Development, get Test Driven Development: By Example by Kent Beck

Introduction to Node.js, Vue.js, VueTestUtils

Vue.js
Vue.js is a progressive framework for building user interfaces. Learning Vue.js requires an intermediate knowledge of HTML, CSS and Javascript. Grasping the basics before going into the framework might be the best decision in any chosen language of your choice. Vue.js is a javascript framework. For an introduction to Vue.js syntax, you can check out this Helloworld example by the Vue.js team. Vue.js is a component-based framework.

Node.js
Node.js is an open-source project that runs the V8 javascript engine, it is also a cross-platform runtime environment. Node.js has helped developers write server-side code. Node.js uses the javascript syntax. With a vast module of libraries, developers have shorter development time as most of the libraries handle bulky code contents. Node.js also have frameworks like Express, Fastify, FeatherJs, Socket.io, Strapi and others.

Vue Test Utils
How do we test our components? Earlier, we introduced units and for component-based apps, units are components. Vue.js is a component-based app needs components to be isolated to allow for testing.Vue test utils help with the isolation. Vue Test Utils is an official library of helper functions to help users test their Vue.js components. It provides some methods to mount and interact with Vue.js components in an isolated manner. We refer to this as a wrapper.

But what is a wrapper?
A wrapper is an abstraction of the mounted component. It provides some utility functions such as when users want to trigger a click or an event. We'll use this to execute some input ( props, store changes, etc.) so we can check that the output is correct (component rendering, Vue events, function calls, etc.).

Prerequisites

For this tutorial, you're required to have:

Node.js installed.
Also, we will be using Vue3 for this tutorial
Vue test utils 2 (Vue test utils 1 target and earlier versions)
A code editor.

Objectives

Learn the basic principles of Test Driven Development
Why you should test your Vue.js app
Learn how to unit test a Vue.js app.

Setting up our environment

Vue3 gives us the opportunity to select unit tests while creating a vue project. You can follow the steps below for the manual installation.

For existing projects, you can use Vue CLI to set up Vue Test Utils in your current Vue app.

vue add unit-jest
npm install --save-dev @vue/test-utils

Your package.json file should have added a new command.

[package.json]
{
  "scripts": {
    "test:unit": "vue-cli-service test:unit"
  }
}

After installation of all relevant dependecies either manually or to existing projects, we proceed to our code editor.

Step 1 -- Setting up our files

After opening our code in our code editor, we will go to the test directory. Test directory is a root folder in our <project-name>. Open the unit folder, then you can create a new file (<project-name>/tests/unit/<file-name.spec.js>). It is a good practice to name the file as the component. Initially, there is an example.spec.js file in the unit folder. Remember the goal of TDD is testing before code. You will create a boilerplate for the vue component in the component folder (<project-name>/src/component/loginpage.vue). The boilerplate structureis provided below.

[<project-name>/src/component/loginpage.vue]

<template>
    <div></div>
</template>

<script>
    export default {

    }
</script>

<style scoped>

</style>

In our spec file, we are importing our vue component and making use of the Vue test utils.

import{ shallowMount } from '@vue/test-utils'
import Login from '@/components/Login'

Step 2 -- First test

Our first test is to ensure if our Login components displays a form.

[<project-name>/tests/unit/loginpage.spec.js]

import { shallowMount } from '@vue/test-utils'
import Login from '@/components/Login'

describe('login.vue', () => {
    test('should show the form element on the user output', () => {
      const wrapper = shallowMount(Login)
      expect(wrapper.find("form").exists()).toBe(true)
    }),
})

Running our test using the yarn test:unit --watch or npm run test:unit command, our test failed!

FAIL  tests/unit/loginpage.spec.js
 login.vue
   ✕ should show the form element on the screen (13ms)

 ● login.vue › should show the form element on the screen
 Cannot call isVisible on an empty DOMWrapper.

   Expected: true
   Received: false

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        1.174s
Ran all test suites related to changed files.

Notice the error? Cannot call isVisible on an empty DOMWrapper. We wrote a test without the code it will act on. Our component booilerplate is empty. To resolve this, we simply go to boilerplate our and write this code.

[<project-name>/src/component/loginpage.vue]

<template>
    <div>
      <form action="">
      </form>
    </div>
</template>

<script>
    export default {

    }
</script>

<style scoped>

</style>

Our test should pass now. Congratulations! You just wrote your first successful test!

PASS  tests/unit/loginpage.spec.js
 login.vue
   ✓ should show the form element on the screen (60ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.273s, estimated 9s
Ran all test suites related to changed files.

Watch Usage: Press w to show more.

Step 3 -- Further testing

Let's go further by checking if our input field exists.

[<project-name>/tests/unit/loginpage.spec.js]

test('should contain input fields', () => {
    const wrapper = shallowMount(Login)
    expect(wrapper.find('form > input').exists()).toBe(true)
})

test('form should contain input fields with type="text"', () => {
    const wrapper = shallowMount(Login)
    expect(wrapper.get('input[type=tjavascriptext]').exists()).toBe(true)
})

Our test failed as there was no input field present in our form element.

FAIL  tests/unit/loginpage.spec.js
 login.vue
   ✓ should show the form element on the screen (10ms)
   ✕ should contain input fields (5ms)
   ✕ form should contain input fields with type="text" (10ms)

 ● login.vue › should contain input fields

   expect(received).toBe(expected) // Object.is equality

   Expected: true
   Received: false

 ● login.vue › form should contain input fields with type="text"

   Unable to get input[type=text] within: <div>


Test Suites: 1 failed, 1 total
Tests:       2 failed, 1 passed, 3 total
Snapshots:   0 total
Time:        3.549s
Ran all test suites related to changed files.

Now let's open our Login component and add some codes.

[<project-name>/src/component/loginpage.vue]

<template>
    <div>
        <form action="">
            <input type="text" name="" id="username" placeholder="Username">
        </form>
    </div>
</template>

Our test passed!

PASS  tests/unit/loginpage.spec.js
 login.vue
   ✓ should show the form element on the screen (13ms)
   ✓ should contain input fields (2ms)
   ✓ form should contain input fields with type="text" (2ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        1.805s, estimated 2s
Ran all test suites related to changed files.

A bonus test is confirming the attribute of our input field. The get() function allows for parameters. We can check for tag attributes like type=text. isVisible check the visibility status (showing on the user output device). Though isVisible() is deprecated, latest release of Vue still accept it.

Our last test! Testing if our button triggers a click event. We trigger the click event listener, so that the Component executes the submit method. We use await to make sure the action is being reflected by Vue.

[<project-name>/tests/unit/loginpage.spec.js]

test('button trigger event', async () => {
    await wrapper.find('form > button').trigger('click')
    expect(wrapper.emitted()).toHaveProperty('submit')
})

We have a failed test again.

FAIL  tests/unit/loginpage.spec.js
 login.vue
   ✓ should show the form element on the screen (12ms)
   ✓ should contain input fields (3ms)
   ✓ form should contain input fields with type="text" (1ms)
   ✕ button trigger event (4ms)

 ● login.vue › button trigger event

   Cannot call trigger on an empty DOMWrapper.

Test Suites: 1 failed, 1 total
Tests:       1 failed, 3 passed, 4 total
Snapshots:   0 total
Time:        3s
Ran all test suites related to changed files.

Our triggering test failed as we don't have a corresponding button element in our login component. In our login component, we are going to add the button element.

[<project-name>/src/component/loginpage.vue]

<template>
    <div>
        <form action="">
            <input type="text" name="" id="username" placeholder="Username">

            <button @click="submit">Submit</button>
        </form>
    </div>
</template>

Our test failed as we do not have a corresponding method in our component boilerplate.

[<project-name>/src/component/loginpage.vue]

<template>
    <div>
        <form action="">
            <input type="text" name="" id="username" placeholder="Username">

            <button @click="submit">Submit</button>
        </form>
    </div>
</template>

<script>
    export default {
        methods: {
            submit() {
            this.$emit('submit', this.email)
            }
        }
    }
</script>

Our complete login component. Notice the additional change to the script section of the our component. Now all our tests should pass.

PASS  tests/unit/loginpage.spec.js
 login.vue
   ✓ should show the form element on the screen (11ms)
   ✓ should contain input fields (2ms)
   ✓ form should contain input fields with type="text" (1ms)
   ✓ button trigger event (5ms)

Test Suites: 1 passed, 1 total
Tests:       4 passed, 4 total
Snapshots:   0 total
Time:        1.88s, estimated 2s
Ran all test suites.

To make our test codes easier, We can refractor by making the wrapper variable a global variable and our tests still passed.

Due to the isVisible being deprecated, we can use the exists() function. Testing depends on your contract with your end user.

You need to be sure "DO I CARE IF THIS CHANGE?" If you care, test, else move to the next detail. TDD helps write robust tests (not too many, not too few).

Conclusion

An introduction to TEST DRIVEN DEVELOPMENT
Benefit of TDD.
Setting up our Vue project.
Writing our first tests suites successfully.

To get the full Vue project, clone it on GitHub