So, recapitulating the first part of this series we configured and created our first Vue Js test with Jest and the library vue-test-utils.

This tutorial will not explain you how to configure a vue application. We only will focus on component creation and tests.

So we will use Jest as our test runner installed by default with vue-cli init webpack version 2.9.6+ but if your vue-cli doesn’t has Jest option to install. Feel free to read the part I of this series and install jest on your vue application.

So first of all, what component we will create?

I carefully choose a paginator component, it has a good complexity for create, receive, manipulate and needs to understand data, also can be quite agnostic for all users use in yours applications and manipulate the interface of the component directly without change the backend compatibility with the older paginator.

Well, we need to know the requirements our paginator must have.

So, I think we can doing our first Minimum product viable with:

• Button which will decrease a page
• Button which will increase a page
• The current page number

Ok, lets start!

1. Create a folder called awesome-vue-paginator
2. Add a vue application in.
3. Add Jest to your project.

NICE!!!

Now we can start creating our component!!!

OR our first TEST AWWEEE YEAAAH!

Why we will create the test first? For thinking about the component structural design before, forcing we think in the simpliest solution first.

So the cicle of our tests and development will be using Test Driven Development (TDD), if you don’t know what is it please read this!

Ok, lets create our first test file. We will insert into the folder test -> unit -> specs with the filename Paginator.spec.js

Now we can create our first use case in the test file!

As a user

I want to click a button to see the next page

Ok, so we will briefly write a test thinking the next button realy exists.

Ok what we are doing here.

Importing ShallowMount from @vue/test-utils

The shallowMount method will creates a Wrapper that contains the mounted and rendered Vue component, in this case a Paginator wrapper, and with stubbed child components.

Stubbed Components

The stubbed components will not be rendered and we can’t access their functionalities. So shallowMount will not render the child components because they are stubbed.

But our first component will not have children. So we can still use the shallowMount method!

Accessing the wrapper API to manipulate the component

The shallowMount receiving Paginator component will return a wrapped paginator which we can be able to access many methods for working with the component.

So now we can find an element on Paginator Component DOM using the find method on our wrapped component.

And we will trigger a behavior on the element that we got it. Triggering the click behavior on our button element.

Getting data from Wrapped Vue Instance

From the paginator wrapper we have access to vm object which we can get data, props, options, children, el… Remember we only have permission to read the information!

Nice! Now we learn a little about vue test utils!

So we need run the test and see what we get!

Running the tests you will see something like this:

Ouch! Our test are failing :(

So what we need to see the test pass?

• We need create the component on the path: src/components/Paginator with the name Paginator;

• Add a simple template with a button html tag
• Starting currentPage data with 1
• And a on click event in the button wich will sum currentPage + 1

Ok, template created. Now we need run the tests again and see if we resolve our problem.

Ok, but we are forgoten a use case, which we need to start in the first page.

Current page 1 by default

As a user

I want to be at the first page

When I enter on screen

Lets do it our new test!

And now run the test again!

Ok! So now we are ensuring the component starting with currentPage 1 by default.

Previous Button need to back a value

As a user

I want to click a button to see the previous page

I think initialy in this test:

Oh, now we are using a new method from Vue Test Utils. We are setting the currentPage with value 4 on our wrapped paginator with the setData method.

Our test case should decrease a value, if we use currentPage with value default 1, it will be 0. I don’t want it, it will be ensure later with another test case, which we will restrict the previous button click when currentPage is 1. So we set to 4 to expect to the currentPage be 3!

Ok, running the test…

Why the test fail and sum plus 1 resulting 5?

Because:

1. We don’t create the previous button html tag;
2. We don’t differ the previous and next button html.

Ok so we will add this requirements on component template

Running the tests again…

Oh our third test passed but our second fail… It is because our tests now are wrong. The two tests which click the buttons are finding by an button element and not by new refering classes. In the component we put the previous button above the next button.

The find method get the first element. So it will get the previous button, resulting passing the third test but failing the second which need to click on next button.

Refactoring the tests to see passing!

Below we only modified the selectors on paginator.find method to get the right button!

Look it pass!

NICE UH!!!

Recapping

1. We understand a little about the vue test utils using: shallowMount, find, setData, trigger, vm
2. We work with TDD, for thinking better about our code and how we will start to develop and test!
3. And we covered three user stories with tests increasing quality to our code ❤

In the next story

We will create restrictions to buttons, testing the elements visibility, html attributes and discovering new things about the vue test utils and jest assertions! Lets do it together!!!

See you soon :)

Hi :)

In this story I will show you how to start tests with Vue and Jest and a previous understand about the library vue-test-utils!

Well, I was reading and seeing everyone writing about Vue tests and using many frameworks and tools. But when we are starting with test we don’t know what tools the community is using and what is the best test runner for us.

So in my first post I did a research to know what is test runners, what the community is using, and the pros and cons of each one for start this story :)

When I was looking for examples and tutorials of testing I came across two libraries: Avoriaz and vue-test-utils \o/

I thought about choosing one to start the tests so I went to read the Avoriaz doc and WOW

DEPRECATED!

Sooo… I went back to answer my question WHY Avoriaz is deprecated?

The Avoriaz owner is eddyerburgh and he is the same which contribute with vue-test-utils coincidence, right? Yeah, Avoriaz was so good for Vue js tests which Evan You (Vue JS Creator) and others colaborators brought the idea and Eddy, and transform the Avoriaz into an official Vue tool!

Ok Vue Test Utils and what more?

The documentation recommend Jest and Mocha, because the community already create plugins which runs with a little bit configuration the Vue Single-File Components (SFC).

Things they consider for recommend the two test runners is: feature set, performance, and support for single-file component (SFC) pre-compilation.

Nice! So what choose?

Using vue webpack scheffold with vue-cli in another projects, I was choosing the Mocha + Karma for unit tests because they come configured as default. But now I’m in a project using Laravel + Vue and the Laravel configuration doesn’t come with vue test runners by default (bad practice :/ ).

So my first research of test runners was really useful. I really did not want to configure all webpack and mocha configurations I was short and I don’t know so much about how to configure webpack and good practices.

So the Jest purpose fit perfectly

Zero configuration testing platform :)

Wich let me motivated to try!

All this stories serie will be back-end framework agnostic, so we will focus only in Vue and Tests!

Starting add Jest and Vue test utils to the project

Remember this tutorial will work fine in all projects with vue using single file components and webpack configurations, disregard the folders which your project doesn’t have, focus only on jest test folders, paths and configurations.

The Vue Test Utils doc has a nice example how to install Jest and use with vue-test-utils.

So I simply followed all the tutorial steps and configure only things for my needed

For our first steps we only need to follow this commands wich the tutorial says to install:

Heeey don’t forget about the simpliest configurations in package.json which the tutorial explains, your package file should look like:

Hell Yeah! Now we can run the npm test… Without tests? Why?

Lets create our first test with Jest :)

The vue test utils and Jest give us a tip! They said, create your test’s files into the __tests__ folders. And we can put this in many folders to explicit to us which all files in this have tests :)

Ok, baby steps… Why we don’t create a __tests__ folder into components? We can refact later ;) And create a Hello.spec.js file into the folder.

Ok, lets write some code…

Now we can run our first test using the npm command in your favorite terminal: npm test

VOILÁ!

All passed!

Recapping

1. We understand which Jest and Vue Test Utils are simple and good tools to simple install and run our tests.
2. We know the main commands to install the tools and run the tests
3. And we make our first test and see it pass

Now we have our environment running tests!!!

In the next story

We will create a real project and I will explain about the methods of jest and test utils which we will use to make real and significant tests together!!!

See you soon :)

When I came across with the following things: Jest, AVA, Mocha, Chai, Sinon, Karma, Jasmine, Avoriaz, vue-test-utils, tape, jsdom, testcafe, PhantomJs…

OMFG, where do I START?

So that is why I decided to write this story. My difficult to choose and understand what is the best and commonly test’s tools which the community use and what is the best choice to write Vue js tests!

The second thing that I think, is how can I understand that whole of contents and explain for you! Well… I can start categorizing everything!

Sooo let’s start!

Test Runners

Wow, what is that? Well test runners are libraries or tools with a bunch of settings for run yours test’s files. That has many command lines which you will configure how to run your tests, and show the results of assertions or failures.

Ok, I did a research and found this test runners for Javascript:

• tape
• Jasmine
• AVA
• Mocha
• Jest

Tape

This framework maintains a fairly minimal core. The native report is poor, so many people use libraries to be more colorful and pretty. As well Tape is a really minimal test framework, have a lot of additional features that you can plug in, and mainly serves its purpose, to test.

Jasmine

Simple and complete BDD framework . So Jasmine has its own spy and assertions methods.

AVA

Takes advantage running tests concurrently, especially beneficial for IO heavy tests. The guys that created ensure that is a minimal, fast and clean framework, simple test syntax, enforces writing atomic tests and have no implicit globals.

Mocha

As the creators describe, this framework is a feature-rich Javascript test framework. Which has so many features this you can configure as you like. Many people argue whether this is good or not. Mocha for spies and assertions needs two dependencies Sinon and Chai wich we will talk about later.

Jest

From Facebook, Jest is a “Zero configuration testing platform”. Runs in parallel like AVA to maximize performance, has automatic global state resets for every test, easily create code coverage reports… So Jest is an another complete and rich framework but you don’t need to CONFIGURE!

About Behavior Driven Development (BDD)

If you don’t know what is BDD, I explain! It was inspired by agile methodologies with the purpose to approximate business language in technical context.

As well as tests must be used like documentation of your code base, BDD brings the agile approach of business documentation: acceptance criteria and scenarios, to code.

Newer BDD frameworks are using specification language rather than user stories. Where the developers can write tests with a free format using method describe to describe the suite of tests and it to describe what that unit test must do.

FATALITY

For my conclusions everyone hate and love Mocha. Love their rich features, active community, performance. But hate the global functions and shared states, much configuration to start and serializing tests.

AVA says they are fast but this benchmark don’t say the same. But about IO, I really don’t know how fast he is.

Many people who defend tape are sure about the minimal framework is all about: Test assertions should be dead simple, & completely free of magic.

Others like Jasmine, for your simplicity and BDD native language. Jasmine and Tape have a good performance.

At least and no less important Jest! Is another complete framework ready-to-use. The Jest’s philosophy is provide no configuration tools, because they believe the engineers write more tests, which in turn results in more stable and healthy code.

Conclusion

Well, now I learned and did my first share!!! With that simple story to decrease my little pain about that huge javascript ecosystem. I think that me and you are in the same way, so lets learn together!

Now we know a little bit about the tools, test runners itself and BDD!!! \o/

The next will be about Avoriaz and vue-test-utils and a little start about principles to test components.

Heey, do you like how I wrote? Feel free to give me some tips and comments!