Starting with unit testing using Vue.js 2 and Jest

Reading Time: 4 minutes

As a FrontEnd developer, you may know a lot of FrontEnd technologies and frameworks but in time you need to upgrade yourself as a developer. A good skill to strengthen your knowledge is to learn unit testing.

Since I am working with Vue.js for several years, we are going to see some of the basics for testing Vue components using the Jest JavaScript testing framework.

To start, first, we need a Vue.js 2 project created via the Vue CLI. After that we need to add the Jest framework to the project:

# jest unit testing
vue add @vue/unit-jest

I’ll make a simple component that will increase a number on click of a button:

// testComponent.js
export default {
  template: `
    <div>
      <span class="count">{{ count }}</span>
      <button @click="increase">Increase</button>
    </div>
  `,

  data() {
    return {
      count: 0
    }
  },

  methods: {
    increase () {
      this.count++
    }
  }
}

The way of testing is by mounting the components in isolation, after that comes the mocking the needed inputs like injections, props and user events. In the end, comes the confirmation of the outputs of the rendered results emitted events etc.

After that, the components are returned inside a wrapper. A wrapper is an object that contains a mounted component or a VNode and methods to test them.

Let’s create a wrapper using the mount method:

// jestTest.js

// first we import the mount method
import { mount } from '@/vue/test-utils'
import Calculate from './calculate'

// then we mount (wrap) the component
const wrapper = mount(Calculate)

// this way you can access the Vue instance
const vm = wrapper.vm

// you can inspect the wrapper by logging it into the console
console.log(wrapper)

Next step after we do the wrapping, follows to verify if the rendered HTML output of the component matches the expectations.

import { mount } from '@vue/test-utils'
import Calculate from './calculate'

describe('Calculate', () => {
  // Now mount the component and you have the wrapper
  const wrapper = mount(Calculate)

  it('renders the correct markup', () => {
    expect(wrapper.html()).toContain('<span class="calculate">0</span>')
  })

  // it's also easy to check for the existence of elements
  it('has a button', () => {
    expect(wrapper.contains('button')).toBe(true)
  })
})

Then run the tests with npm test and see them pass.

The code in testComponent.js should increment the number on button click so next step is to simulate the user interaction. For this, we need the wrapper’s method wrapper.find() to get the wrapper for the button and then simulate the click event by calling the method trigger().

it('simulation of button click should increment the calculate by 2', () => {
  expect(wrapper.vm.calculate).toBe(0)
  const button = wrapper.find('button')
  button.trigger('click')
  button.trigger('click')
  expect(wrapper.vm.calculate).toBe(2)
})

For asynchronous updates, we use the Vue.nextTick()(need to receive a function as a parameter) method, which comes from Vue. With this method, we are waiting for the DOM update and after that, we execute the code (the code in the function parameter).

// this will not be caught

it('time out', done => {
  Vue.nextTick(() => {
    expect(true).toBe(false)
    done()
  })
})


// the three following tests will work as expected 
// (1)

it('catch the error using done method', done => {
  Vue.config.errorHandler = done
  Vue.nextTick(() => {
    expect(true).toBe(false)
    done()
  })
})

// (2)
it('catch the error using a promise', () => {
  return Vue.nextTick()
    .then(function() {
      expect(true).toBe(false)
    })
})

it('catch the error using async/await', async () => {
  await Vue.nextTick()
  expect(true).toBe(false)
})

Using nextTick can be tricky for the errors because the errors thrown inside it might not be caught by the test runner. That is happening as a consequence of using promises internally. To fix this we can set the done callback as a Vue’s global error handler (1) or we can use the nextTick method without parameter and return it as a promise (2) like we did earlier.

This article is a guide on how to set up the environment and start writing unit tests using Jest. For more information about testing with Vue and using Jest, you can visit the official site for Vue test utils.

It’s all about teamwork, creativity and cultural change

Reading Time: 6 minutes

People of different religions and cultures live side-by-side in almost every part of the world, and most of us have overlapping identities which unite us in very different groups.
We can love what we are, without hating what- and who we are not. We can thrive in our own tradition, even as we learn from others, and come to respect their teachings

Kofi Annan

Over the past few years, the field and management sector of major companies have a big problem of how to arrange the days of their employees, something that will give a bit of strong light and positivity, which will avoid monotony and on the other hand give a great impetus to their creativity and vision, much greater motivation and strong spirit in overcoming further obstacles and challenges. The problem is even greater if companies are stationed in several locations in different countries so that communication is interconnected constantly through technical apps, almost virtual, simply a voice, perhaps a shy picture or video call and of course mostly text and chat conversations.

N47 locations: Switzerland, Germany and Macedonia.

It is very often the case that the company hierarchy is a list of members of different cultures, nationalities so that it becomes an even more difficult task of organizing team buildings. But on the other hand, it is one of the reasons why that makes them special.

The differences are part of us, the differences are making us so special, and of course differences, we know well and we have become accustomed to it.

Differences – make us special and unique.

Team building, joint team events or hacking term in the IT industry are part of every company agenda, happens every year and they often happen a few times per year.

It’s a chemistry thing, it’s the time where you can share your points of view, your thoughts, your personality, your creativity, your vision, it’s the time when you are not representing just yourself, but also your culture, your country.

But, the idea of creating an event, that will bring together – Team Building and Hackathon event?  Yes, we did it and we arranged and created. Almost one week, gathering the team together. The Family!

24 hours of work, pure juice of 100% creativity, dedication and hard work.  Commitment always brings success, and YES some of the team after the deadline and voting for the best team and the best project made, they had a shootout with the Champs Titles and Presents. Absence Hub – Resource Guru and Absence.io connector TEAM did it, they collected the votes and drove all the way through like Real Madrid in Champions League.

Yes, it was worth it! Title goes to the winners!

The event was a success, the employees loved it. And all of them are sharing the same opinion, maybe some time and somewhere everything is not 100% perfect, but even the misses are part of that. People create, sometimes in the process of creating always is something missing, but in the end, the finish line and the title – that’s all that matters!

Final conclusion – 100% success and that’s what all IT companies need, at least once, but it’s good to be twice or even more per year.  It’s chemistry, it is fun, it is releasing the creativity inside all of the members of the company that doesn’t have a chance before to describe themselves with their own words.
It’s a fact that programmers find Hackathons the perfect venue to unleash their ideas, it’s often that these kinds of events produce ingenious products or ideas, or even they show the real potential, creativity, talents of employees. It’s an easy challenge, but the benefits of it can be great for the organization, company or network. And together with team building events, it’s double more fun and joy for the team.

The last moments after the end of the event, the euphoria of the faces of all colleagues, but also a bit of grief over why it was all too short, everyone wants more time together. But that’s the idea and motivation for the next event. Where, how, when, what’s next? Give your thoughts and ideas, let’s take a look and decide together. Мaybe somewhere on the sea, fishing, hiking, or mountain and skiing? Or on some great concert with DJs or maybe Stones or U2?

Afterwards, travelling back to home town, sitting in the aeroplane and thinking about the past few days, wow it happened all so fast and the days flew like a fast cigarette break…

The A-team surrounded with lots of positive energy and good memories. And the question is what next, where to go next, what should we arrange next?

I think, whatever, just bring it on baby!