Awesome

Quasar GoogleMaps Cypress

Example of a Quasar app with Google Maps and Cypress automated tests

Technologies:

• Quasar v1
• Google Maps API
• Google Maps Places API
• Google Maps Directions API
• Cypress

Objective

You will learn how to use the Google Maps APIs to add markers, draw circles, search for places and draw paths to the destinations in a Quasar app. Then we will test the application with Cypress, an amazing tool for testing front-end applications. For more examples about Cypress, visit the Vila do Silício blog.

Try the app now running on quasar-googlemaps.surge.sh.

Before Start

Install the latest version of Cypress by running this command:

npm install cypress --save-dev

Google Maps

Go to Google developers console and create a project.

Activate the APIs and services.

Search for the Places API and enable it.

Create credentials with the API Key type.

Copy the API key.

Search for the Maps Javascript API and enable it.

The same API Key will be used by default.

Search for the Directions API and enable it.

Three APIs will be used: Directions, Maps and Places.

Quasar

Now let's go to the code. In the root folder of the project, add the map API key created before.

Install the dependencies:

npm install

Run the app:

quasar dev

The main screen contains a search field and a map. The user position is detected and a red marker is positioned at the center of the map.

The map contains two buttons at its right side: the Camera Button and the Circle Button.

The Camera button animates the map camera toward the user's position.

The Circle button with a plus icon opens a modal that allows the user to add a circle around its marker with a customized color, radius and opacity. If the Circle button has a minus icon, it will remove the circle.

The circle has no effect in the map. It is just a fun feature to use ^_^.

The search field above the map lists the places at each character typed.

Click on one option and a blue marker will be added to the map at the place's position with its full address inside the info window

Once the place is marked on the map, the Directions button will be visible next to the search field.

After clicked, a path will be drawn between the origin (the user's position) and the destination (the place's position). The total distance between them will be shown at the bottom.

After the path is drawn, the Clear button will be visible instead of the Directions button and it will allow to remove the place's marker and the drawn path.

Cypress

Now let's test our application automatically. Inside the "/cypress/integration" folder are the test scripts to be executed. While keeping the application running, open the Cypress Browser with this command in another terminal:

npm run cypress

It will list the test files inside the "/cypress/integration" folder.

Click on each option to open the test window, allow the geolocation detection when asked and wait for the result. Some of the test need the user interaction.

Center Camera Test

Add Remove Circle Test

Search Places Test

Add Remove Directions Test