Hey all,

This was initially my final year project at University, which I decided to finish off recently. Furthermore, added some additional features; to see if I can help landlords better improve their property management experience etc.

It uses the Vue CLI with the Quasar Plugin.

Here’s a 5 minute tutorial that provides a quick overview of all the features here.

Let me know what you think?

Site: www.lordly.app

Hey, vue-test-utils got released and since then I’ve decided to integrate it into my project. I chose the path of Testing SFCs with Jest and followed the guide to integrate it.

Testing SFC’s now works! So long as the component does not import anything from 'quasar'.

Initially, I ran into the issue of:
Cannot find module 'quasar' from 'Hello-Two.vue'

As per research and asking around, was advised to add an alias to my Jest configuration, which looks like this:

"jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1",
      "^quasar$": "<rootDir>/node_modules/quasar-framework"
    },
    "transform": {
      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
    },
    "mapCoverage": true,
    "snapshotSerializers": [
      "<rootDir>/node_modules/jest-serializer-vue"
    ]
  }

Unfortunately, the issue has now mutated to:
SyntaxError: Unexpected token export in the quasar.esm.js file

This has been reported multiple times by other users here, here and some mention of it; in the Quasar Gitter chat but unfortunately, there is no definitive answer on how to resolve it and hoping to compile it all here.
Although this post potentially hints at a fix but am unclear how to proceed. As importing from quasar-framework leads to the same outcome.

I’ve created a git repo to recreate the problem using the Quasar PWA template.
Clone it if you wish and run the quasar test command to begin the testing process.

• Hello.vue -> Hello.spec.js passes as it do not import any quasar components.

• Hello-Two.vue -> Hello-Two.spec.js fails, due to SyntaxError: Unexpected token export as mentioned above. This component also import’s a quasar component.

Researching this issue in general, it seems to lay with the way babel transpiles such that Jest can understand Quasar. As a result, it is now out of my depth and was hoping someone could provide some insight into how to resolve this?

Thanks!

@gabrielsclimaco did you manage to get any of them working in the end?

@zyegfryed so I ran into the same thing had to add an alias into jest such that it looks like this:
"jest": { "moduleNameMapper": { "^@/(.*)$": "<rootDir>/src/$1", "^quasar$": "<rootDir>/node_modules/quasar-framework" }, }

Unfortunately, now I run into the same thing @leon did.
SyntaxError: Unexpected token export

However, attempting the method of:
import { QBtn } from 'quasar-framework'
did not work for me and am still getting the same export error.

Here’s my take on using Google Maps package over the Vue one and its worked well so far

initializeMap () {
      let GoogleMaps = require('google-maps')
      GoogleMaps.KEY = <YOUR_KEY>
      GoogleMaps.load(google => {
        // Create location object
        let latlng = { lat: this.property.latitude, lng: this.property.longitude }
        // Create the marker
        let marker = new google.maps.Marker({
          position: latlng
        })
        // Set the map view options
        let mapOptions = {
          center: latlng,
          zoom: 14,
          scrollwheel: false,
          scaleControl: false,
          fullscreenControl: false,
          zoomControl: true
        }
        // Get map element reference
        let DOMElement = this.$refs.previewMap
        // Create map
        let map = new google.maps.Map(DOMElement, mapOptions)
        // Set marker
        marker.setMap(map)
      })
      // Destory maps after render
      GoogleMaps = null
    }

Also be aware of styling on the DOM element that the map renders on as things like display: none will cause it to have a grey screen.
Hope this helps!

@akaryatrh Yeah, I switched it over using @vinstah’s method and it works!