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..
Top comments (0)