Debugging Vue Mocha unit tests in VSCode

View of Vscode debug pane

I have been struggling to be able to debug Vue Mocha unit tests in VSCode, but I think I might have the answer.

Running a Vue application is easy enough and debugging the running application in Chrome or VSCode is relatively straightforward.

Creating and running unit tests for Vue is also relatively straightforward, thanks to the excellent Vue Test Utils.

However, when you want to debug those unit tests, things seem to get a little trickier.

The problem I was having was that either my breakpoints in VSCode would not break or, in the case of the Vue files, they would break in the wrong place (presumably because of confusion caused by the template section).

I’ve create a demo project that can be installed and run. It should run in a browser and you should be able to run the unit tests from the command line or from within VSCode. You can add breakpoints in VSCode to either test files or Vue files and it should break in the correct place.

https://github.com/damienhampton/debug-vue-unit-tests-demo

I’ve used Mochapack, which is an excellent module that makes working with Mocha and Webpack easy. To get the breakpoints working in VSCode, the correct source map config needs to be used.

Mochapack requires source maps be inlined, so the Webpack config needs to be:

{
  devtool: 'inline-source-map',
}

VSCode needs source maps to be enabled and the source map path overrides to be set correctly:

{ 
  "sourceMaps": true,
  "sourceMapPathOverrides": {
    "webpack:///*": "${workspaceFolder}/*"
  },
}

Hopefully this helps others trying to combine Vue, unit tests and debugging!

Navigation in iTerm2 on Mac

iTerm2 preferences

Using iTerm2 for development is awesome. You can use CTRL + a to move to the start of the current line and CTRL + e to move to the end.

With long commands, it would be convenient to just jump back a few words, edit the command and then execute it. Whilst this is possible by default in iTerms2, the keys are cumbersome.

(more…)

Improving Docker for Mac performance

Docker makes developing applications a lot easier, but there are a few issues. One of these issues is volume performance in Docker for Mac.

One use of volumes is to allow you to keep a folder on your Mac synced in real-time with a Docker container. This means that you can make changes to your files on your mac and see the changes reflected in Docker straight away; great for development.

(more…)

CSS Grid and grid areas

CSS Grid example

Having played around with CSS Grid for a while, I had been very impressed with it. But having watched this excellent video on the use of grid areas, I realise that I have been holding the hammer by the head.

Despite reading about grid areas, it hadn’t sunk in just how easily they can be used to solve basic layout requirements – especially when handling responsive layouts.

(more…)

A tale of planning and pitstops

Why do we need to plan? Why can’t we just get on with doing?

The Mercedes Formula 1 team gave us an extreme example of the impact of planning on pitstops at yesterday’s race in Germany.

(more…)

Archiving 500k records (500GB) in one flat folder

I recently had to archive an old website which contain around 500k user uploaded files, totalling around 500GB. Due to the design of the application, the files were all in one folder with no subfolders.

I had assumed I would just take a backup, stick it on an external drive and provide it to the archiver.

Oh ye of little learning.

(more…)

The Holy Grail: Cypress.io, Browsersync automatically rerun tests

Cypress is an amazing front-end JavaScript test runner and framework. It simultaneously simplifies the set-up and test creation whilst providing a more useful features than most alternatives.

(more…)

How to lazy load custom field images in wordpress

Lazy load text

WP Rocket is a great, paid-for module for improving the performance of WordPress. Their Lazy Load module improves perfomance further by online preloading images above the page fold.

(more…)

How to share contacts between Current RMS and Pipedrive

Current RMS is a great Rental Management System (RMS) providing all the tools needed to run a product rental business, including inventory management, invoicing, reporting and Customer Relationship Management (CRM). It also has an awesome API for building integrations with other systems.

Current RMS screenshot

Whilst it is a one-stop shop for rental management, features such as the CRM don’t provide the breadth of functional as dedicated systems. Eventually, you may find yourself wanting to use a separate CRM such as Pipedrive.

(more…)

BDD with Visual Studio – part 2: First scenario and first test

In this second part of this series, we look at creating a first scenario and step definitions.