Mock the application time with cypress
Tags: testing, cypressio, javascript, tutorial
Published: 2021-11-22 13:09:45

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.

![Application Functionality](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vtds1fq5j431t01551t9.png)



# 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:
```js
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

```js
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:

```js
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:

```js
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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kw33msbvh06uxzk4yjbj.gif)


And we can do the same for all as bellow:

```js
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'
      );
    });
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/avndntf4mtqw87uzdlip.gif)

```js
 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'
    );
  });
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ia0u9nm933uk86r3oap0.gif)

```js
 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'
    );
  });
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xxzkjjj4knea3vvpb7ij.gif)


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](https://www.udemy.com/course/cypress-v6-frameworks-cicd-two-react-applications/?couponCode=01B0E81B3DA5F3074C04)..