Mock the application time with cypress

Sometimes you will need to test a scenario that depends on date and time, like allowing functionality to happen between 8:00 and 15:00 for example, or allowing users to do something on a specific date. For that and as a tester I will need to be able to travel in time and select that specific date and time to test that specific state.

Luckily by using one command with cypress I am able to do that. And in this blog, I am going to show you how to do that using an application that I have built.

Welcome message functionalities

The welcome message in the application depends on time as below:

• If the time is between 00:00 and 05:00 the application should show Time to sleep.
• If the time is between 05:00 and 12:00 the application should show Good Morning.
• If the time is between 12:00 and 17:00 the application should show Good Afternoon.
• If the time is between 17:00 and 00:00 the application should show Good Night.

Mock Application time in Cypress

Luckily mocking application date and time is very easy And it is a simple two steps process as below:

• Select the date and time that you want to be in (mock).
• Use cy.clock() Command to mock the application time.

We can use date class for that, which is objects represent a single moment in time, We can add the date and time that we want as an argument to that object as below:

new Date(TIME)

TIME can be in many formats but the one that we will use in this application is as bellow:

MONTH DAY, YEAR HOUR:MINUTES:SECONDS
So if we can't to mock the application date and time to 13th of February 2022 at 16:00 then we do the following

const now = new Date('February 12, 2021 14:00:00');

And now here is the argument that we will add to cy.clock() command as bellow:

const now = new Date('February 12, 2021 14:00:00');
cy.clock(now);

And thats it, by this two lines of code we are telling cypress to mock the application date and time into the time that we want to test a specific scenario.

Important note:

The cy.clock() command should be placed before visiting the application, which means before the cy.visit() command.

Lets test the application

To test the first functionality which is as below:

• If the time is between 00:00 and 05:00 the application should show Time to sleep.

Then we will need to select a time between 00:00 and 05:00 and do the same steps that showed you earlier as below:

it('should show time to sleep message', () => {
    const now = new Date('February 12, 2021 01:00:00');
    cy.clock(now);
    cy.visit('/todo');
    cy.get('[data-testid=welcome]').should(
      'contain.text',
      'Time to sleep'
    );
  });

And when we run the test case we will see that indeed the application date and time was changed.

And we can do the same for all as bellow:

it('should show good morning message', () => {
      const now = new Date('February 12, 2021 09:00:00');
      cy.clock(now);
      cy.visit('/todo');
      cy.get('[data-testid=welcome]').should(
        'contain.text',
        'Good morning'
      );
    });

 it('should show good afternoon message', () => {
    const now = new Date('February 12, 2021 14:00:00');
    cy.clock(now);
    cy.visit('/todo');
    cy.get('[data-testid=welcome]').should(
      'contain.text',
      'Good afternoon'
    );
  });

 it('should show good evening message', () => {
    const now = new Date('February 12, 2021 20:00:00');
    cy.clock(now);
    cy.visit('/todo');
    cy.get('[data-testid=welcome]').should(
      'contain.text',
      'Good Evening'
    );
  });

And thats it! we managed to cover all the scenarios that depends on time with Cypress.

A complete Cypress course is available now on Udemy..