Tdd

Integration Testing Vue.js Container Components With Cypress

In my previous article about Advanced Component Composition, we wrote Unit Tests for all of our Vue.js components except the Container Components. Writing Unit Tests for components with a lot of external dependencies (e.g. making API calls or accessing the $route object) is usually very hard to do because most of the time you have to mock a lot of their dependencies...

Read more

Using the Wrapper Factory Pattern for Vue.js Unit Testing

If you test Vue.js Components with a certain complexity, oftentimes you'll be faced with the situation of repeating the same component initialization code again and again. There are multiple patterns to deal with situations like that but today we'll take a look at how we can solve this problem by using a wrapper factory function...

Read more

Using Docker to run BackstopJS Powered Visual Regression Tests

My very own CSS framework avalanche, uses BackstopJS for regression testing. Unfortunately, for the most time, this didn't work as expected on my continuous integration service of choice: Travis CI. The rendering of fonts is slightly different on the Linux image which is used on Travis CI compared to macOS which I use for development...

Read more

Visual Regression Testing with Nightwatch.js and Cucumber.js

As most of my regular readers have probably already noticed, I'm a huge fan of testing all the things. In many of my recent articles, we've already explored multiple techniques for unit testing and acceptance testing. Unit testing ensures, that certain parts (or *units*) of our code do work correctly; with acceptance testing, we can ensure that what we've built does what it should do. Visual regression testing makes it possible, that we can test if our application actually looks the way it's supposed to look...

Read more

Crazy Powerful Nightwatch.js Cucumber Step Definitions

Although testing, and especially acceptance testing, seems like a rather boring topic (at least to many developers) in the past few months I acquired an interest in optimizing the test setup and come up with better ways of writing tests. Especially when using Nightwatch.js in combination with Cucumber.js, there is another challenging aspect to it: writing step definitions...

Read more

Network Stubs and Timers with Nightwatch.js and Cucumber.js

In my previous article about automated acceptance testing with Cypress I explored the possibilities of the `cy.route()` and `cy.clock()` commands. Because I fell in love with how easy it is to stub network requests and manipulate JavaScript timeout functions (like `setTimeout` and `setInterval`) with those two commands, I began to feel bad about not having this functionality in Nightwatch.js und Cucumber.js powered acceptance tests...

Read more