├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .postcssrc.js ├── .stylintrc ├── README.md ├── babel.config.js ├── cypress.json ├── cypress ├── fixtures │ └── example.json ├── integration │ ├── AddRemoveCircle.js │ ├── AddRemoveDirections.js │ ├── CenterCamera.js │ ├── SearchPlaces.js │ └── SearchPlacesFunction.js ├── plugins │ └── index.js └── support │ ├── commands.js │ └── index.js ├── docs ├── code01.JPG ├── cypress01.JPG ├── cypress02.JPG ├── cypress03.JPG ├── cypress04.JPG ├── cypress05.JPG ├── google01.JPG ├── google02.JPG ├── google03.JPG ├── google04.JPG ├── google05.JPG ├── google06.JPG ├── google07.JPG ├── google08.JPG ├── google09.JPG ├── quasar01.JPG ├── quasar02.JPG ├── quasar03.JPG ├── quasar04.JPG ├── quasar05.JPG ├── quasar06.JPG ├── quasar07.JPG ├── quasar08.JPG ├── quasar09.JPG ├── quasar10.JPG ├── quasar11.JPG └── titulo.JPG ├── package-lock.json ├── package.json ├── quasar.conf.js └── src ├── App.vue ├── assets ├── quasar-logo-full.svg └── sad.svg ├── boot ├── .gitkeep ├── axios.js └── i18n.js ├── components ├── .gitkeep ├── AutoComplete.vue └── DialogCircle.vue ├── css ├── app.styl └── quasar.variables.styl ├── i18n ├── en-us │ └── index.js └── index.js ├── index.template.html ├── layouts └── MyLayout.vue ├── pages ├── Error404.vue └── Index.vue ├── router ├── index.js └── routes.js ├── statics ├── app-logo-128x128.png └── icons │ ├── apple-icon-120x120.png │ ├── apple-icon-152x152.png │ ├── apple-icon-167x167.png │ ├── apple-icon-180x180.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon-96x96.png │ ├── favicon.ico │ ├── icon-128x128.png │ ├── icon-192x192.png │ ├── icon-256x256.png │ ├── icon-384x384.png │ ├── icon-512x512.png │ ├── ms-icon-144x144.png │ └── safari-pinned-tab.svg └── store ├── index.js └── module-example ├── actions.js ├── getters.js ├── index.js ├── mutations.js └── state.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /dist 2 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | 4 | parserOptions: { 5 | parser: 'babel-eslint', 6 | sourceType: 'module' 7 | }, 8 | 9 | env: { 10 | browser: true 11 | }, 12 | 13 | extends: [ 14 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 15 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 16 | 'plugin:vue/essential', 17 | '@vue/standard' 18 | ], 19 | 20 | // required to lint *.vue files 21 | plugins: [ 22 | 'vue' 23 | ], 24 | 25 | globals: { 26 | 'ga': true, // Google Analytics 27 | 'cordova': true, 28 | '__statics': true, 29 | 'process': true 30 | }, 31 | 32 | // add your custom rules here 33 | rules: { 34 | // allow async-await 35 | 'generator-star-spacing': 'off', 36 | // allow paren-less arrow functions 37 | 'arrow-parens': 'off', 38 | 'one-var': 'off', 39 | 40 | 'import/first': 'off', 41 | 'import/named': 'error', 42 | 'import/namespace': 'error', 43 | 'import/default': 'error', 44 | 'import/export': 'error', 45 | 'import/extensions': 'off', 46 | 'import/no-unresolved': 'off', 47 | 'import/no-extraneous-dependencies': 'off', 48 | 'prefer-promise-reject-errors': 'off', 49 | 50 | // allow console.log during development only 51 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 52 | // allow debugger during development only 53 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .quasar 2 | .DS_Store 3 | .thumbs.db 4 | node_modules 5 | /dist 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Editor directories and files 11 | .idea 12 | .vscode 13 | *.suo 14 | *.ntvs* 15 | *.njsproj 16 | *.sln 17 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | plugins: [ 5 | // to edit target browsers: use "browserslist" field in package.json 6 | require('autoprefixer') 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /.stylintrc: -------------------------------------------------------------------------------- 1 | { 2 | "blocks": "never", 3 | "brackets": "never", 4 | "colons": "never", 5 | "colors": "always", 6 | "commaSpace": "always", 7 | "commentSpace": "always", 8 | "cssLiteral": "never", 9 | "depthLimit": false, 10 | "duplicates": true, 11 | "efficient": "always", 12 | "extendPref": false, 13 | "globalDupe": true, 14 | "indentPref": 2, 15 | "leadingZero": "never", 16 | "maxErrors": false, 17 | "maxWarnings": false, 18 | "mixed": false, 19 | "namingConvention": false, 20 | "namingConventionStrict": false, 21 | "none": "never", 22 | "noImportant": false, 23 | "parenSpace": "never", 24 | "placeholder": false, 25 | "prefixVarsWithDollar": "always", 26 | "quotePref": "single", 27 | "semicolons": "never", 28 | "sortOrder": false, 29 | "stackedProperties": "never", 30 | "trailingWhitespace": "never", 31 | "universal": "never", 32 | "valid": true, 33 | "zeroUnits": "never", 34 | "zIndexNormalize": false 35 | } 36 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![titulo](/docs/titulo.JPG) 2 | 3 | # Quasar GoogleMaps Cypress 4 | 5 | Example of a Quasar app with Google Maps and Cypress automated tests 6 | 7 | ## Technologies: 8 | 9 | - Quasar v1 10 | - Google Maps API 11 | - Google Maps Places API 12 | - Google Maps Directions API 13 | - Cypress 14 | 15 | ## Objective 16 | 17 | 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](https://www.cypress.io/), an amazing tool for testing front-end applications. For more examples about Cypress, visit the [Vila do Silício](http://viladosilicio.com.br/testes-e2e-com-cypress-no-quasar-framework/) blog. 18 | 19 | Try the app now running on [quasar-googlemaps.surge.sh](https://quasar-googlemaps.surge.sh/#/). 20 | 21 | ## Before Start 22 | 23 | Install the latest version of Cypress by running this command: 24 | 25 | ```batch 26 | npm install cypress --save-dev 27 | ``` 28 | 29 | ## Google Maps 30 | 31 | Go to [Google developers console](https://console.developers.google.com/) and create a project. 32 | 33 | ![google01](/docs/google01.JPG) 34 | 35 | Activate the APIs and services. 36 | 37 | ![google02](/docs/google02.JPG) 38 | 39 | Search for the Places API and enable it. 40 | 41 | ![google03](/docs/google03.JPG) 42 | 43 | Create credentials with the API Key type. 44 | 45 | ![google04](/docs/google04.JPG) 46 | 47 | Copy the API key. 48 | 49 | ![google05](/docs/google05.JPG) 50 | 51 | Search for the Maps Javascript API and enable it. 52 | 53 | ![google06](/docs/google06.JPG) 54 | 55 | The same API Key will be used by default. 56 | 57 | ![google07](/docs/google07.JPG) 58 | 59 | Search for the Directions API and enable it. 60 | 61 | ![google08](/docs/google08.JPG) 62 | 63 | Three APIs will be used: Directions, Maps and Places. 64 | 65 | ![google09](/docs/google09.JPG) 66 | 67 | ## Quasar 68 | 69 | Now let's go to the code. 70 | In the root folder of the project, add the map API key created before. 71 | 72 | ![quasar01](/docs/quasar01.JPG) 73 | 74 | Install the dependencies: 75 | 76 | ```bash 77 | npm install 78 | ``` 79 | 80 | Run the app: 81 | 82 | ```bash 83 | quasar dev 84 | ``` 85 | 86 | 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. 87 | 88 | ![quasar02](/docs/quasar02.JPG) 89 | 90 | The map contains two buttons at its right side: the Camera Button and the Circle Button. 91 | 92 | ![quasar03](/docs/quasar03.JPG) 93 | 94 | The Camera button animates the map camera toward the user's position. 95 | 96 | ![quasar04](/docs/quasar04.JPG) 97 | 98 | 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. 99 | 100 | ![quasar05](/docs/quasar05.JPG) 101 | 102 | The circle has no effect in the map. It is just a fun feature to use ^\_^. 103 | 104 | ![quasar06](/docs/quasar06.JPG) 105 | 106 | The search field above the map lists the places at each character typed. 107 | 108 | ![quasar07](/docs/quasar07.JPG) 109 | 110 | 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 111 | 112 | ![quasar08](/docs/quasar08.JPG) 113 | 114 | Once the place is marked on the map, the Directions button will be visible next to the search field. 115 | 116 | ![quasar09](/docs/quasar09.JPG) 117 | 118 | After clicked, a path will be drawn between the origin (the user's position) and the destination (the place's position). 119 | The total distance between them will be shown at the bottom. 120 | 121 | ![quasar10](/docs/quasar10.JPG) 122 | 123 | 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. 124 | 125 | ![quasar11](/docs/quasar11.JPG) 126 | 127 | ## Cypress 128 | 129 | Now let's test our application automatically. 130 | Inside the "/cypress/integration" folder are the test scripts to be executed. 131 | While keeping the application running, open the Cypress Browser with this command in another terminal: 132 | 133 | ```batch 134 | npm run cypress 135 | ``` 136 | 137 | It will list the test files inside the "/cypress/integration" folder. 138 | 139 | ![cypress01](/docs/cypress01.JPG) 140 | 141 | Click on each option to open the test window, allow the geolocation detection when asked and wait for the result. 142 | Some of the test need the user interaction. 143 | 144 | Center Camera Test 145 | 146 | ![cypress02](/docs/cypress02.JPG) 147 | 148 | Add Remove Circle Test 149 | 150 | ![cypress03](/docs/cypress03.JPG) 151 | 152 | Search Places Test 153 | 154 | ![cypress04](/docs/cypress04.JPG) 155 | 156 | Add Remove Directions Test 157 | 158 | ![cypress05](/docs/cypress05.JPG) 159 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@quasar/babel-preset-app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "baseUrl": "http://localhost:8080/#", 3 | "reporter": "mochawesome" 4 | } 5 | -------------------------------------------------------------------------------- /cypress/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io", 4 | "body": "Fixtures are a great way to mock data for responses to routes" 5 | } -------------------------------------------------------------------------------- /cypress/integration/AddRemoveCircle.js: -------------------------------------------------------------------------------- 1 | /// 2 | const time = 1000 3 | context('Add Remove Circle', () => { 4 | it('Access main screen', () => { 5 | cy.visit('/') 6 | cy.wait(time * 2) 7 | }) 8 | it('Click on the Circle button', () => { 9 | cy.get('[data-cy="btnCircle"]').click() 10 | cy.wait(time) 11 | }) 12 | it('Set the color, radius and the opacity manually', () => { 13 | cy.wait(time * 5) 14 | }) 15 | it('Click on the Confirm button', () => { 16 | cy.get('[data-cy="btnConfirm"]').click() 17 | }) 18 | }) 19 | -------------------------------------------------------------------------------- /cypress/integration/AddRemoveDirections.js: -------------------------------------------------------------------------------- 1 | /// 2 | import { SearchPlaces } from './SearchPlacesFunction' 3 | const time = 1000 4 | SearchPlaces() 5 | context('Add Remove Directions', () => { 6 | it('Click on the Directions button', () => { 7 | cy.wait(time) 8 | cy.get('[data-cy="btnDirections"]').click() 9 | cy.wait(time * 2) 10 | }) 11 | it('Click on the Clear button', () => { 12 | cy.get('[data-cy="btnClear"]').should('be.visible') 13 | cy.wait(time) 14 | cy.get('[data-cy="btnClear"]').click() 15 | }) 16 | }) 17 | -------------------------------------------------------------------------------- /cypress/integration/CenterCamera.js: -------------------------------------------------------------------------------- 1 | /// 2 | const time = 1000 3 | context('Center Camera', () => { 4 | it('Access main screen', () => { 5 | cy.visit('/') 6 | cy.wait(time * 2) 7 | }) 8 | it('Click on the Center Camera button', () => { 9 | cy.get('[data-cy="btnCamera"]').click() 10 | cy.wait(time) 11 | }) 12 | it('Check the info window is opened', () => { 13 | cy.get('.gm-style-iw-d').should('be.visible') 14 | }) 15 | }) 16 | -------------------------------------------------------------------------------- /cypress/integration/SearchPlaces.js: -------------------------------------------------------------------------------- 1 | /// 2 | const time = 1000 3 | context('Search Places', () => { 4 | it('Access main screen', () => { 5 | cy.visit('/') 6 | cy.wait(time * 2) 7 | }) 8 | it('Type in the Search field', () => { 9 | cy.get('[data-cy="txtSearch"]') 10 | .first() 11 | .focus() 12 | .type('Patio Belem') 13 | cy.wait(time) 14 | }) 15 | it('Click on the first option manually', () => { 16 | cy.wait(time * 3) 17 | }) 18 | it('Check the info window is opened', () => { 19 | cy.get('.gm-style-iw-d').should('be.visible') 20 | }) 21 | }) 22 | -------------------------------------------------------------------------------- /cypress/integration/SearchPlacesFunction.js: -------------------------------------------------------------------------------- 1 | /// 2 | export function SearchPlaces () { 3 | const time = 1000 4 | context('Search Places', () => { 5 | it('Access main screen', () => { 6 | cy.visit('/') 7 | cy.wait(time * 2) 8 | }) 9 | it('Type in the Search field', () => { 10 | cy.get('[data-cy="txtSearch"]') 11 | .first() 12 | .focus() 13 | .type('Patio Belem') 14 | cy.wait(time) 15 | }) 16 | it('Click on the first option manually', () => { 17 | cy.wait(time * 3) 18 | }) 19 | it('Check the info window is opened', () => { 20 | cy.get('.gm-style-iw-d').should('be.visible') 21 | }) 22 | }) 23 | } 24 | -------------------------------------------------------------------------------- /cypress/plugins/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example plugins/index.js can be used to load plugins 3 | // 4 | // You can change the location of this file or turn off loading 5 | // the plugins file with the 'pluginsFile' configuration option. 6 | // 7 | // You can read more here: 8 | // https://on.cypress.io/plugins-guide 9 | // *********************************************************** 10 | 11 | // This function is called when a project is opened or re-opened (e.g. due to 12 | // the project's config changing) 13 | 14 | module.exports = (on, config) => { 15 | // `on` is used to hook into various events Cypress emits 16 | // `config` is the resolved Cypress config 17 | } 18 | -------------------------------------------------------------------------------- /cypress/support/commands.js: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | // 11 | // 12 | // -- This is a parent command -- 13 | // Cypress.Commands.add("login", (email, password) => { ... }) 14 | // 15 | // 16 | // -- This is a child command -- 17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) 18 | // 19 | // 20 | // -- This is a dual command -- 21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) 22 | // 23 | // 24 | // -- This is will overwrite an existing command -- 25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) 26 | 27 | // ------------------------------------------------------------------------------------------------------- 28 | // COMANDOS PARA GUARDAR O LOCALSTORAGE E RESTORELOCALSTORAGE 29 | let LOCAL_STORAGE_MEMORY = {} 30 | 31 | Cypress.Commands.add('saveLocalStorage', () => { 32 | Object.keys(localStorage).forEach(key => { 33 | LOCAL_STORAGE_MEMORY[key] = localStorage[key] 34 | }) 35 | }) 36 | 37 | Cypress.Commands.add('restoreLocalStorage', () => { 38 | Object.keys(LOCAL_STORAGE_MEMORY).forEach(key => { 39 | localStorage.setItem(key, LOCAL_STORAGE_MEMORY[key]) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /cypress/support/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import './commands' 18 | 19 | Cypress.on('uncaught:exception', (err, runnable) => { 20 | // returning false here prevents Cypress from 21 | // failing the test 22 | return false 23 | }) 24 | 25 | // Alternatively you can use CommonJS syntax: 26 | // require('./commands') 27 | -------------------------------------------------------------------------------- /docs/code01.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/docs/code01.JPG -------------------------------------------------------------------------------- /docs/cypress01.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/docs/cypress01.JPG -------------------------------------------------------------------------------- /docs/cypress02.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/docs/cypress02.JPG -------------------------------------------------------------------------------- /docs/cypress03.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/docs/cypress03.JPG -------------------------------------------------------------------------------- /docs/cypress04.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/docs/cypress04.JPG -------------------------------------------------------------------------------- /docs/cypress05.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/docs/cypress05.JPG -------------------------------------------------------------------------------- /docs/google01.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/docs/google01.JPG -------------------------------------------------------------------------------- /docs/google02.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/docs/google02.JPG -------------------------------------------------------------------------------- /docs/google03.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/docs/google03.JPG -------------------------------------------------------------------------------- /docs/google04.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/docs/google04.JPG -------------------------------------------------------------------------------- /docs/google05.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/docs/google05.JPG -------------------------------------------------------------------------------- /docs/google06.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/docs/google06.JPG -------------------------------------------------------------------------------- /docs/google07.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/docs/google07.JPG -------------------------------------------------------------------------------- /docs/google08.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/docs/google08.JPG -------------------------------------------------------------------------------- /docs/google09.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/docs/google09.JPG -------------------------------------------------------------------------------- /docs/quasar01.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/docs/quasar01.JPG -------------------------------------------------------------------------------- /docs/quasar02.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/docs/quasar02.JPG -------------------------------------------------------------------------------- /docs/quasar03.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/docs/quasar03.JPG -------------------------------------------------------------------------------- /docs/quasar04.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/docs/quasar04.JPG -------------------------------------------------------------------------------- /docs/quasar05.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/docs/quasar05.JPG -------------------------------------------------------------------------------- /docs/quasar06.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/docs/quasar06.JPG -------------------------------------------------------------------------------- /docs/quasar07.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/docs/quasar07.JPG -------------------------------------------------------------------------------- /docs/quasar08.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/docs/quasar08.JPG -------------------------------------------------------------------------------- /docs/quasar09.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/docs/quasar09.JPG -------------------------------------------------------------------------------- /docs/quasar10.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/docs/quasar10.JPG -------------------------------------------------------------------------------- /docs/quasar11.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/docs/quasar11.JPG -------------------------------------------------------------------------------- /docs/titulo.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/docs/titulo.JPG -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quasar-googlemaps-cypress", 3 | "version": "0.0.1", 4 | "description": "Quasar GoogleMaps Cypress app", 5 | "productName": "Quasar GoogleMaps Cypress", 6 | "cordovaId": "org.cordova.quasar.googlemaps.cypress", 7 | "author": "author@email.com", 8 | "private": true, 9 | "mapAPIKey": "", 10 | "scripts": { 11 | "lint": "eslint --ext .js,.vue src", 12 | "test": "echo \"No test specified\" && exit 0", 13 | "cypress": "cypress open -d" 14 | }, 15 | "dependencies": { 16 | "@quasar/extras": "^1.0.0", 17 | "axios": "^0.18.1", 18 | "jquery": "^3.3.1", 19 | "quasar": "^1.0.0", 20 | "vue-gmaps": "^0.2.2", 21 | "vue-i18n": "^8.0.0", 22 | "vue2-google-maps": "^0.10.5", 23 | "vuelidate": "^0.7.4" 24 | }, 25 | "devDependencies": { 26 | "@quasar/app": "^1.0.0", 27 | "@vue/eslint-config-standard": "^4.0.0", 28 | "babel-eslint": "^10.0.1", 29 | "cypress": "^3.4.1", 30 | "eslint": "^5.10.0", 31 | "eslint-loader": "^2.1.1", 32 | "eslint-plugin-vue": "^5.0.0" 33 | }, 34 | "engines": { 35 | "node": ">= 8.9.0", 36 | "npm": ">= 5.6.0", 37 | "yarn": ">= 1.6.0" 38 | }, 39 | "browserslist": [ 40 | "last 1 version, not dead, ie >= 11" 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /quasar.conf.js: -------------------------------------------------------------------------------- 1 | // Configuration for your app 2 | // https://quasar.dev/quasar-cli/quasar-conf-js 3 | 4 | module.exports = function (ctx) { 5 | return { 6 | // app boot file (/src/boot) 7 | // --> boot files are part of "main.js" 8 | boot: ['i18n', 'axios'], 9 | 10 | css: ['app.styl'], 11 | 12 | extras: [ 13 | // 'ionicons-v4', 14 | // 'mdi-v3', 15 | 'fontawesome-v5', 16 | // 'eva-icons', 17 | // 'themify', 18 | // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both! 19 | 20 | 'roboto-font', // optional, you are not bound to it 21 | 'material-icons' // optional, you are not bound to it 22 | ], 23 | 24 | framework: { 25 | // iconSet: 'ionicons-v4', 26 | // lang: 'de', // Quasar language 27 | 28 | // all: true, // --- includes everything; for dev only! 29 | 30 | components: [ 31 | 'QLayout', 32 | 'QHeader', 33 | 'QDrawer', 34 | 'QPageContainer', 35 | 'QPage', 36 | 'QToolbar', 37 | 'QToolbarTitle', 38 | 'QBtn', 39 | 'QIcon', 40 | 'QList', 41 | 'QItem', 42 | 'QItemSection', 43 | 'QItemLabel', 44 | 'QPageSticky', 45 | 'QImg', 46 | 'QAvatar', 47 | 'QColor', 48 | 'QDialog', 49 | 'QSlider', 50 | 'QInput', 51 | 'QCard', 52 | 'QCardSection' 53 | ], 54 | 55 | directives: ['Ripple', 'ClosePopup'], 56 | 57 | // Quasar plugins 58 | plugins: ['Notify'] 59 | }, 60 | 61 | supportIE: false, 62 | 63 | build: { 64 | scopeHoisting: true, 65 | // vueRouterMode: 'history', 66 | // vueCompiler: true, 67 | // gzip: true, 68 | // analyze: true, 69 | // extractCSS: false, 70 | extendWebpack (cfg) { 71 | cfg.module.rules.push({ 72 | enforce: 'pre', 73 | test: /\.(js|vue)$/, 74 | loader: 'eslint-loader', 75 | exclude: /node_modules/, 76 | options: { 77 | formatter: require('eslint').CLIEngine.getFormatter('stylish') 78 | } 79 | }) 80 | } 81 | }, 82 | 83 | devServer: { 84 | // https: true, 85 | // port: 8080, 86 | open: true // opens browser window automatically 87 | }, 88 | 89 | // animations: 'all', // --- includes all animations 90 | animations: [], 91 | 92 | ssr: { 93 | pwa: false 94 | }, 95 | 96 | pwa: { 97 | // workboxPluginMode: 'InjectManifest', 98 | // workboxOptions: {}, // only for NON InjectManifest 99 | manifest: { 100 | // name: 'Quasar GoogleMaps Cypress', 101 | // short_name: 'Quasar GoogleMaps Cypress', 102 | // description: 'Quasar GoogleMaps Cypress app', 103 | display: 'standalone', 104 | orientation: 'portrait', 105 | background_color: '#ffffff', 106 | theme_color: '#027be3', 107 | icons: [ 108 | { 109 | src: 'statics/icons/icon-128x128.png', 110 | sizes: '128x128', 111 | type: 'image/png' 112 | }, 113 | { 114 | src: 'statics/icons/icon-192x192.png', 115 | sizes: '192x192', 116 | type: 'image/png' 117 | }, 118 | { 119 | src: 'statics/icons/icon-256x256.png', 120 | sizes: '256x256', 121 | type: 'image/png' 122 | }, 123 | { 124 | src: 'statics/icons/icon-384x384.png', 125 | sizes: '384x384', 126 | type: 'image/png' 127 | }, 128 | { 129 | src: 'statics/icons/icon-512x512.png', 130 | sizes: '512x512', 131 | type: 'image/png' 132 | } 133 | ] 134 | } 135 | }, 136 | 137 | cordova: { 138 | // id: 'org.cordova.quasar.googlemaps.cypress', 139 | // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing 140 | }, 141 | 142 | electron: { 143 | // bundler: 'builder', // or 'packager' 144 | 145 | extendWebpack (cfg) { 146 | // do something with Electron main process Webpack cfg 147 | // chainWebpack also available besides this extendWebpack 148 | }, 149 | 150 | packager: { 151 | // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options 152 | // OS X / Mac App Store 153 | // appBundleId: '', 154 | // appCategoryType: '', 155 | // osxSign: '', 156 | // protocol: 'myapp://path', 157 | // Windows only 158 | // win32metadata: { ... } 159 | }, 160 | 161 | builder: { 162 | // https://www.electron.build/configuration/configuration 163 | // appId: 'quasar-googlemaps-cypress' 164 | } 165 | } 166 | } 167 | } 168 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 15 | -------------------------------------------------------------------------------- /src/assets/quasar-logo-full.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 43 | 45 | 46 | 48 | image/svg+xml 49 | 51 | 52 | 53 | 54 | 55 | 60 | 63 | 66 | 69 | 75 | 79 | 83 | 87 | 91 | 95 | 99 | 103 | 104 | 105 | 106 | 107 | 113 | 118 | 126 | 133 | 142 | 151 | 160 | 169 | 178 | 187 | 188 | 189 | 190 | 191 | 192 | -------------------------------------------------------------------------------- /src/assets/sad.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/boot/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/src/boot/.gitkeep -------------------------------------------------------------------------------- /src/boot/axios.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | 3 | export default async ({ Vue }) => { 4 | Vue.prototype.$axios = axios 5 | } 6 | -------------------------------------------------------------------------------- /src/boot/i18n.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueI18n from 'vue-i18n' 3 | import messages from 'src/i18n' 4 | 5 | Vue.use(VueI18n) 6 | 7 | const i18n = new VueI18n({ 8 | locale: 'en-us', 9 | fallbackLocale: 'en-us', 10 | messages 11 | }) 12 | 13 | export default ({ app }) => { 14 | // Set i18n instance on app 15 | app.i18n = i18n 16 | } 17 | 18 | export { i18n } 19 | -------------------------------------------------------------------------------- /src/components/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/src/components/.gitkeep -------------------------------------------------------------------------------- /src/components/AutoComplete.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 120 | 121 | 130 | -------------------------------------------------------------------------------- /src/components/DialogCircle.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 48 | 49 | 54 | -------------------------------------------------------------------------------- /src/css/app.styl: -------------------------------------------------------------------------------- 1 | // app global css 2 | -------------------------------------------------------------------------------- /src/css/quasar.variables.styl: -------------------------------------------------------------------------------- 1 | // Quasar Stylus Variables 2 | // -------------------------------------------------- 3 | // To customize the look and feel of this app, you can override 4 | // the Stylus variables found in Quasar's source Stylus files. 5 | 6 | // Check documentation for full list of Quasar variables 7 | 8 | // It's highly recommended to change the default colors 9 | // to match your app's branding. 10 | // Tip: Use the "Theme Builder" on Quasar's documentation website. 11 | 12 | $primary = #027BE3 13 | $secondary = #26A69A 14 | $accent = #9C27B0 15 | 16 | $positive = #21BA45 17 | $negative = #C10015 18 | $info = #31CCEC 19 | $warning = #F2C037 20 | -------------------------------------------------------------------------------- /src/i18n/en-us/index.js: -------------------------------------------------------------------------------- 1 | // This is just an example, 2 | // so you can safely delete all default props below 3 | 4 | export default { 5 | failed: 'Action failed', 6 | success: 'Action was successful' 7 | } 8 | -------------------------------------------------------------------------------- /src/i18n/index.js: -------------------------------------------------------------------------------- 1 | import enUS from './en-us' 2 | 3 | export default { 4 | 'en-us': enUS 5 | } 6 | -------------------------------------------------------------------------------- /src/index.template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | <%= htmlWebpackPlugin.options.productName %> 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /src/layouts/MyLayout.vue: -------------------------------------------------------------------------------- 1 | 43 | 44 | 59 | 60 | 62 | -------------------------------------------------------------------------------- /src/pages/Error404.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 23 | -------------------------------------------------------------------------------- /src/pages/Index.vue: -------------------------------------------------------------------------------- 1 | 68 | 69 | 71 | 72 | 206 | 212 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | 4 | import routes from './routes' 5 | 6 | Vue.use(VueRouter) 7 | 8 | /* 9 | * If not building with SSR mode, you can 10 | * directly export the Router instantiation 11 | */ 12 | 13 | export default function (/* { store, ssrContext } */) { 14 | const Router = new VueRouter({ 15 | scrollBehavior: () => ({ x: 0, y: 0 }), 16 | routes, 17 | 18 | // Leave these as is and change from quasar.conf.js instead! 19 | // quasar.conf.js -> build -> vueRouterMode 20 | // quasar.conf.js -> build -> publicPath 21 | mode: process.env.VUE_ROUTER_MODE, 22 | base: process.env.VUE_ROUTER_BASE 23 | }) 24 | 25 | return Router 26 | } 27 | -------------------------------------------------------------------------------- /src/router/routes.js: -------------------------------------------------------------------------------- 1 | 2 | const routes = [ 3 | { 4 | path: '/', 5 | component: () => import('layouts/MyLayout.vue'), 6 | children: [ 7 | { path: '', component: () => import('pages/Index.vue') } 8 | ] 9 | } 10 | ] 11 | 12 | // Always leave this as last one 13 | if (process.env.MODE !== 'ssr') { 14 | routes.push({ 15 | path: '*', 16 | component: () => import('pages/Error404.vue') 17 | }) 18 | } 19 | 20 | export default routes 21 | -------------------------------------------------------------------------------- /src/statics/app-logo-128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/src/statics/app-logo-128x128.png -------------------------------------------------------------------------------- /src/statics/icons/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/src/statics/icons/apple-icon-120x120.png -------------------------------------------------------------------------------- /src/statics/icons/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/src/statics/icons/apple-icon-152x152.png -------------------------------------------------------------------------------- /src/statics/icons/apple-icon-167x167.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/src/statics/icons/apple-icon-167x167.png -------------------------------------------------------------------------------- /src/statics/icons/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/src/statics/icons/apple-icon-180x180.png -------------------------------------------------------------------------------- /src/statics/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/src/statics/icons/favicon-16x16.png -------------------------------------------------------------------------------- /src/statics/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/src/statics/icons/favicon-32x32.png -------------------------------------------------------------------------------- /src/statics/icons/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/src/statics/icons/favicon-96x96.png -------------------------------------------------------------------------------- /src/statics/icons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/src/statics/icons/favicon.ico -------------------------------------------------------------------------------- /src/statics/icons/icon-128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/src/statics/icons/icon-128x128.png -------------------------------------------------------------------------------- /src/statics/icons/icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/src/statics/icons/icon-192x192.png -------------------------------------------------------------------------------- /src/statics/icons/icon-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/src/statics/icons/icon-256x256.png -------------------------------------------------------------------------------- /src/statics/icons/icon-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/src/statics/icons/icon-384x384.png -------------------------------------------------------------------------------- /src/statics/icons/icon-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/src/statics/icons/icon-512x512.png -------------------------------------------------------------------------------- /src/statics/icons/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucianopereira86/Quasar-GoogleMaps-Cypress/870f16253d91626f7ce7a69209e39de5684326c6/src/statics/icons/ms-icon-144x144.png -------------------------------------------------------------------------------- /src/statics/icons/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | // import example from './module-example' 5 | 6 | Vue.use(Vuex) 7 | 8 | /* 9 | * If not building with SSR mode, you can 10 | * directly export the Store instantiation 11 | */ 12 | 13 | export default function (/* { ssrContext } */) { 14 | const Store = new Vuex.Store({ 15 | modules: { 16 | // example 17 | }, 18 | 19 | // enable strict mode (adds overhead!) 20 | // for dev mode only 21 | strict: process.env.DEV 22 | }) 23 | 24 | return Store 25 | } 26 | -------------------------------------------------------------------------------- /src/store/module-example/actions.js: -------------------------------------------------------------------------------- 1 | export function someAction (/* context */) { 2 | } 3 | -------------------------------------------------------------------------------- /src/store/module-example/getters.js: -------------------------------------------------------------------------------- 1 | export function someGetter (/* state */) { 2 | } 3 | -------------------------------------------------------------------------------- /src/store/module-example/index.js: -------------------------------------------------------------------------------- 1 | import state from './state' 2 | import * as getters from './getters' 3 | import * as mutations from './mutations' 4 | import * as actions from './actions' 5 | 6 | export default { 7 | namespaced: true, 8 | getters, 9 | mutations, 10 | actions, 11 | state 12 | } 13 | -------------------------------------------------------------------------------- /src/store/module-example/mutations.js: -------------------------------------------------------------------------------- 1 | export function someMutation (/* state */) { 2 | } 3 | -------------------------------------------------------------------------------- /src/store/module-example/state.js: -------------------------------------------------------------------------------- 1 | export default { 2 | // 3 | } 4 | --------------------------------------------------------------------------------