@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

1. rm -rf node_modules
2. rm package-lock.json

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!

Thank you @leon who provided the answer. The following configuration allows the integration of Jest with Quasar.
Checkout the original answer in this post!

"jest": {
    "moduleFileExtensions": [
      "js",
      "vue"
    ],
    "collectCoverageFrom": [
      "**/*.{vue}"
    ],
    "transformIgnorePatterns": [
      "node_modules/core-js",
      "node_modules/babel-runtime",
      "node_modules/lodash",
      "node_modules/vue"
    ],
    "moduleNameMapper": {
      "quasar": "quasar-framework/dist/quasar.esm.js",
      "^vue$": "vue/dist/vue.common.js"
    },
    "coverageDirectory": "<rootDir>/src/components/coverage",
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue"
    },
    "mapCoverage": true
  }

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.

@max A warning of a package that has been preloaded but not used.

The resource http://localhost:8080/0.39211501c597dbd5a5e1.hot-update.js was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it wasn’t preloaded for nothing.

Apart from that there’s nothing.

NOTE: Resolved (See below)
Implemented a sidebar with the Q-Icon close button which is positioned in the top right corner. Unfortunately, the text is only displayed instead of an icon. I’m unsure why this is the case as the syntax seems correct.

Syntax:

Result:

HTML of result:

Is there anything I am doing obviously wrong? Package.json indicates I am on quasar-framework version: 0.14.7 and using the PWA template.

Resolved by:

Uncommenting line 23 in the main.js file then allows icons to be replaced. Thus getting: