I have a small VueJs app where clicking on a button triggers the watchPosition function from the Geolocation API to retrieve the user's position and perform some calculations with it.
Now, I want to test this functionality using Cypress testing.
To do so, I've created a stub for the watchLocation function in a Cypress command:
Cypress.Commands.add('mockGeolocation', (latitude, longitude) => {
cy.window().then((win) => {
const mockGeolocation = {
watchPosition: (successCallback, errorCallback, options) => {
// Call the successCallback with mock position data
const mockPosition = {
coords: {
latitude: latitude,
longitude: longitude
}
}
successCallback(mockPosition);
// Optionally, you can call the errorCallback or handle options as needed
},
clearWatch: () => {
console.log("hello there")
}
};
// Replace the real geolocation object with the stub
cy.stub(win.navigator, 'geolocation').value(mockGeolocation);
});
});
After setting up the mockGeolocation command, I use it in my test like this:
it('Testing my app', () => {
cy.visit('/')
cy.mockGeolocation(1, 2)
cy.get('[data-testid="start-button-game"]').click()
})
Although this setup works for one iteration, I now want to be able to call cy.mockGeolocation multiple times within the same test with different coordinates to validate the app's response to varied positions. How can I accomplish this?