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!
@b0ot Hey boot, happy to have a conversation about this? Apologies for the delay in getting back to you!
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
[FIX]
The git repo actually had a cached folder with different casing to local directory.
Running the command git delete cached folder command:
git rm -r --cached myFolder
and then pushing up resolved this issue.
Hey guys! I was wondering if anyone has seen this before?
If I build my project locally on my machine it builds as expected and the variables are applied. However when I build using a VM for CI/CD purposes, the variables do not get applied, but does not error. The build proceeds and deploys, however visually its lacking; due to the variables not applying.
Here is a screenshot of the css after CI/CD has deployed the code.
Here is a screenshot of the css after I build locally and manually deploy the code.
Environment Version
Local Machine Info
VM Info
CI/CD
Done via Gitlab using Docker containers.
@visiond Hey Vision, unfortunately not. I’m just putting testing on ‘Ice’ tell its out of the box with the Quasar CLI, should be after v1.0 hopefully.
Update to previous message, seems Jest has issues with Babel 7 (Quasar v0.16 uses Babel 7 I believe) therefore the following changes need to be made: Source
npm install --save-dev babel-jest babel-core@^7.0.0-0 @babel/core
You would also need to reconfigure the .babelrc file “env” segment to address the ‘babel-preset-env’ error. So:
"env": {
"test": {
"presets": [
["@babel/env", { "targets": { "node": "current" }}]
],
"plugins": [
[
"module-resolver",
{
"root": [
"./src"
],
"alias": {
"quasar": "quasar-framework/dist/quasar.mat.esm.js",
"^vue$": "vue/dist/vue.common.js"
}
}
]
]
}
}
However, this results in the error:
Details:
/Users/jjpro/Github/Web/ucasa/node_modules/quasar-framework/dist/quasar.mat.esm.js:23171
export default index_esm;
^^^^^^
SyntaxError: Unexpected token export
> 1 | import Quasar, * as All from 'quasar'
| ^
2 | import Vuex from 'vuex'
3 | import { shallowMount, createLocalVue } from '@vue/test-utils'
So if anyone resolves this? That’d be amazing.
@marek-kaczkowski, What does your .babelrc file configuration look like?
Here’s mine for Quasar v0.16.0:
{
"presets": [
[
"@babel/preset-env", {
"modules": false,
"loose": false,
"useBuiltIns": "usage"
}
],
[
"@babel/preset-stage-2", {
"modules": false,
"loose": false,
"useBuiltIns": true,
"decoratorsLegacy": true
}
]
],
"plugins": [
[
"@babel/transform-runtime", {
"polyfill": false,
"regenerator": false
}
]
],
"comments": false,
"env": {
"test": {
"presets": [
["env", { "targets": { "node": "current" }}]
],
"plugins": [
[
"module-resolver",
{
"root": [
"./src"
],
"alias": {
"quasar": "quasar-framework/dist/quasar.mat.esm.js",
"^vue$": "vue/dist/vue.common.js"
}
}
]
]
}
}
}
However, I am running into the following issue:
FAIL src/components/search1_primary/search_primary.test.js
● Test suite failed to run
ReferenceError: Unknown plugin "@babel/transform-runtime" specified in "/Users/jjpro/Github/Web/dessert/.babelrc" at 0, attempted to resolve relative to "/Users/jjpro/Github/Web/dessert"
The configurations worked in Quasar v0.15.xx but unfortunately, not in v0.16.0, I’ll keep you posted if I get it working.
@akaryatrh Yeah, I switched it over using @vinstah’s method and it works!
@musicformellons do you happen to have a solution for this?
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!