Turn off your browser and try red, green & refactor pattern (part 2)

# What is red, green and refactor

Red, green and refactor is a pattern introduced by Test-driven development and makes great sense as we 'll see below. The steps are:

• red : write first a test case that is going to fail since the code that is being tested is not in place yet
• green : write the minimum code needed so that the test can turn to green
• refactor : make changes to the code as needed in order to optimize it and make it more efficient while staying in the green zone
• repeat...

In our case, we have prepared all these user stories and acceptance criteria in order to use Behavior-driven development process. That way we will not test units of our code and separate components in isolation. Instead, we will replicate the users flows as much as possible by implementing a suite of test cases.

So the clue is that a testing framework will run all these checks on our behalf in a consistent way and this is why we won't have to repeat all these manual checks again and again on our own anymore

The huge difference compared with random clicks in the UI are:

• all these clicks will become fully automated and will be executed by a testing framework locally during development or even through a CI system before shipping our work to production
• engineers are going to gain huge time and confidence down the road because of this automation
• the whole functionality will be designed way better since we will follow a well-defined plan right from the start
• the risk to end up with something non-functional and useless gets reduced by far
• the code we are going to ship will be much more robust and mature
• test cases will be there forever so every new functionality will be tested automatically through them
• other people will be able to continue / review our work at anytime and grasp easily what is really going on in there

Did I say we won't need the browser anymore? I didn't mention all these benefits though, right? 🤓

# Sounds really cool, how can I do it then?

There are tons of tools and testing frameworks out there to accomplish this. Some of them are:

• Cypress
• Jest
• Testing Library
• Mocha
• TestCafe
• Selenium
• and many more...

I highly propose Cypress for BDD tests, which is built on top of Mocha and Chai, because of the smooth Development experience it offers and the plethora of features and selectors it provides.

Cypress allows us to check all the test cases running in the browser during development which is a huge benefit obviously. At least it makes me feel much more safe 🤗

You can get an idea below if you haven't heard of it before:

# Get started with Cypress

We need to install Cypress in our project first:

yarn add cypress -D

Then in the cypress.json file we should instruct it to watch our application in the appropriate url:

{
  "baseUrl": "http://localhost:3000"
}

Finally, we need to add a script in package.json so we can launch it with ease:

{
  "scripts": {
    "cypress:open": "cypress open"
  }
}

Now we can just launch it with:

yarn cypress:open

While opening Cypress in a project for a first time we will get a bunch of example test cases in cypress/integration folder that are meant to help us find our way faster. Of course, we can add new ones in there at will.

# Write the first test case

For our examples below, we will build a landing page with express created with express-generator for simplicity reasons. We will use also TailwindCSS to beautify our components and AlpineJS to add some JavaScript flavour where needed. You can find a link of the repository I put together for this example in the footnotes.

Let's test that the Home page actually exists in the application we are building. Remember that we are following the BDD approach so we need to write the test first, watch it fail and then write the code needed so it turns green.

A simple test case for our case here might be:

describe('a user who visits home page under url "/"', () => {
  it('should be able to see Home headline and the url should equal with "/"', () => {
    cy.visit('/');

    cy.contains('h1', 'Home');
    cy.url().should('include', '/');
  });
});

The Home page is not in place yet so the test is going to fail:

Time to turn it to green. All we need is to create the home route and view and add a headline named Home in the view.

Let's fix those missing pieces then. First the route:

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

router.get('/', function(req, res) {
  res.render('index', { title: 'Home' });
});

module.exports = router;

Then the view with the Home heading:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/app.css' />
  </head>
  <body>
    <h1>Home</h1>
    <p>This is the home page</p>
  </body>
</html>

Now test is green:

How cool!! We don't have to test the home page manually anymore, right? That test case will do this on our behalf from now on in an automated fashion 😉

Move on with part 3 here

Did you miss part 1? You can find it here