Quasar Framework

comteharbour

@Allan-EN-GB I’m trying to do the same thing, but I fail.

App.vue :

<template>
  <div id="q-app">
    <router-view />
  </div>
</template>

<script>
const appIcons = {
  'app:my-icon': 'img:customIcons/my-icon.svg'
}

export default {
  name: 'App',
  created () {
    this.$q.iconMapFn = (iconName) => {
      const icon = appIcons[iconName]
      if (icon !== undefined) {
        return { icon: icon }
      }
    }
  }
}
</script>

my-icon.svg is in public/customIcons (public is at the same level as src)

<q-icon
  name="app:my-icon"
  @error="logError"
/>

and

<q-icon
  name="img:customIcons/my-icon.svg"
  @error="logError"
/>

log the same error, including:
target: img.q-icon.notranslate
currentSrc: "http://localhost:8080/customIcons/my-icon.png"

if I try accessing http://localhost:8080/customIcons/my-icon.png, then I get a page with: “Cannot GET /customIcons/my-icon.svg”

Any idea about what I am doing wrong ?

comteharbour

When I want to mock $route or $router, I can’t create a VueRouter, otherwise these are read-only props.
https://vue-test-utils.vuejs.org/guides/#using-with-vue-router

In test/jest/utils/index.js, mountQuasar, if I replace
const router = new VueRouter()
with
const router = {}
I’m able to change $route and $router in my test files.

But then I get errors warnings while testing, ex:
[Vue warn]: Unknown custom element: <q-page> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
even if they are registered in quasar.conf.js

However the test passes. But I feel like messing up my code.

Is there a way to properly register the components in such a case ? Or do I have to accept these warnings ?

comteharbour

I have some trouble using mountQuasar. Even if the test pass, I get an error message which I don’t understand.

Here is how I get that error:

versions:

OS: Ubuntu 16.04
node: v11.12.0
npm: 6.9.0
yarn: 1.15.2
vue: 2.6.10
quasar: 1.0.0-beta.18

Create project:

$ quasar create test -b dev
accept all default choices

Add testing harness

$ quasar ext add @quasar/testing

? Please choose which testing harnesses to install:
◉ Jest Unit Testing
◯ AVA Unit Testing
◯ Cypress e2e Testing
◯ Webdriver e2e Testing
◯ Quality Testing
◯ Security Testing

? Please choose how to install required babel rules: (Use arrow keys)
❯ Overwrite babel.config.js and use additional .babelrc
Do nothing, I will manage myself

? Jest Unit testing will now be installed. Please choose additional options:
◉ extra “scripts” in your package.json
◉ SFC webpack <test> loader
◉ Install Wallaby.js
◉ Install Majestic UI

? Overwrite “babel.config.js”?
Overwrite
❯ Overwrite all
Skip (might break extension)
Skip all (might break extension)

? Overwrite “test/.gitkeep”?
Overwrite
❯ Overwrite all
Skip (might break extension)
Skip all (might break extension)

src/components/myComp.vue:

<template>
  <q-btn color="primary" label="myComp" />
</template>

<script>
export default {
  name: 'myComp',
  data () {
    return {
      myData: 0
    }
  }
}
</script>

<test lang="jest">
  import { mountQuasar } from '../../../test/jest/utils'
  import myComp from '../myComp'

  describe('myComp', () => {
    const wrapper = mountQuasar(myComp)
    it('should pass a test', () => {
      expect(wrapper.vm.$data.myData).toBe(0)
    })
  })
</test>

src/pages/index.vue:

<template>
  <q-page class="flex flex-center">
    <my-comp />
  </q-page>
</template>

<style>
</style>

<script>
import myComp from '../components/myComp'

export default {
  name: 'PageIndex',
  components: { myComp }
}
</script>

Run unit-tests:

$ quasar test --unit jest --dev

Result:

All test pass, but I get an error message:

Console:

florian@Calimero:~/Documents/softozor/test$ quasar test --unit jest --dev
 app:extension Running "@quasar/testing" Quasar App Extension... +0ms
 app:test Running "@quasar/testing" > "test" command +3ms


 Dev mode.......... spa
 Pkg quasar........ v1.0.0-beta.17
 Pkg @quasar/app... v1.0.0-beta.18
 Debugging......... enabled

 app:extension Running "@quasar/testing-unit-jest" Quasar App Extension... +0ms
 app:extension Running "@quasar/testing" Quasar App Extension... +3ms
 app:quasar-conf Reading quasar.conf.js +3ms
 app:dev Checking listening address availability (0.0.0.0:8080)... +2ms
 app:webpack Extension(@quasar/testing-unit-jest): Chaining SPA Webpack config +254ms
 app:webpack Extending SPA Webpack config +6ms
 app:generator Generating Webpack entry point +11ms
 app:dev-server Booting up... +2ms

 app:progress Compiling SPA... +110ms
Created test file: myComp
 app:progress Compiled SPA in ~5s +5s
 DONE  Compiled successfully in 5319ms15:43:34


 N  App dir........... /home/florian/Documents/softozor/test
    App URL........... http://localhost:8080/
    Dev mode.......... spa
    Pkg quasar........ v1.0.0-beta.17
    Pkg @quasar/app... v1.0.0-beta.18
  

              
 RUN:  Running unit tests with jest

            
$ jest 
 PASS  test/jest/__tests__/App.spec.js
  ● Console

    console.log test/jest/__tests__/App.spec.js:59
      formattedString 2019 April Apr 17

 PASS  src/components/__tests__/myComp_jest.spec.js
  ● Console

    console.error node_modules/vue/dist/vue.common.dev.js:630
      [Vue warn]: Error in render: "TypeError: Cannot read property 'lang' of undefined"
      
      found in
      
      ---> <QAjaxBar>
             <Root>
    console.error node_modules/vue/dist/vue.common.dev.js:1893
      TypeError: Cannot read property 'lang' of undefined
          at VueComponent.style (/home/florian/Documents/softozor/test/node_modules/quasar/dist/quasar.common.js:6:23216)
          at Watcher.get (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:4468:25)
          at Watcher.evaluate (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:4573:21)
          at Proxy.computedGetter (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:4822:17)
          at Proxy.render (/home/florian/Documents/softozor/test/node_modules/quasar/dist/quasar.common.js:6:24525)
          at VueComponent.Vue._render (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:3541:22)
          at VueComponent.updateComponent (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:4057:21)
          at Watcher.get (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:4468:25)
          at new Watcher (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:4457:12)
          at mountComponent (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:4064:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:9034:10)
          at VueComponent.Object.<anonymous>.Vue.$mount (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:11919:16)
          at init (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:3121:13)
          at createComponent (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:5963:9)
          at createElm (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:5910:9)
          at Vue.patch [as __patch__] (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:6460:7)
          at Vue._update (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:3936:19)
          at Vue.updateComponent (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:4057:10)
          at Watcher.get (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:4468:25)
          at new Watcher (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:4457:12)
          at mountComponent (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:4064:3)
          at Vue.Object.<anonymous>.Vue.$mount (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:9034:10)
          at Vue.Object.<anonymous>.Vue.$mount (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:11919:16)
          at Object.install (/home/florian/Documents/softozor/test/node_modules/quasar/dist/quasar.common.js:6:389633)
          at /home/florian/Documents/softozor/test/node_modules/quasar/dist/quasar.common.js:6:20379
          at Array.forEach (<anonymous>)
          at Object.install (/home/florian/Documents/softozor/test/node_modules/quasar/dist/quasar.common.js:6:20282)
          at Object.install (/home/florian/Documents/softozor/test/node_modules/quasar/dist/quasar.common.js:6:402395)
          at Function.Vue.use (/home/florian/Documents/softozor/test/node_modules/vue/dist/vue.common.dev.js:5090:22)
          at Function.instance.use (/home/florian/Documents/softozor/test/node_modules/@vue/test-utils/dist/vue-test-utils.js:7141:14)
          at use (/home/florian/Documents/softozor/test/test/jest/utils/index.js:26:12)
          at Suite.<anonymous> (/home/florian/Documents/softozor/test/src/components/__tests__/myComp_jest.spec.js:5:19)
          at addSpecsToSuite (/home/florian/Documents/softozor/test/node_modules/jest-jasmine2/build/jasmine/Env.js:496:51)
          at Env.describe (/home/florian/Documents/softozor/test/node_modules/jest-jasmine2/build/jasmine/Env.js:466:11)
          at describe (/home/florian/Documents/softozor/test/node_modules/jest-jasmine2/build/jasmine/jasmineLight.js:81:18)
          at Object.describe (/home/florian/Documents/softozor/test/src/components/__tests__/myComp_jest.spec.js:4:1)
          at Runtime._execModule (/home/florian/Documents/softozor/test/node_modules/jest-runtime/build/index.js:858:13)
          at Runtime._loadModule (/home/florian/Documents/softozor/test/node_modules/jest-runtime/build/index.js:551:12)
          at Runtime.requireModule (/home/florian/Documents/softozor/test/node_modules/jest-runtime/build/index.js:415:10)
          at /home/florian/Documents/softozor/test/node_modules/jest-jasmine2/build/index.js:201:13
          at Generator.next (<anonymous>)
          at asyncGeneratorStep (/home/florian/Documents/softozor/test/node_modules/jest-jasmine2/build/index.js:27:24)
          at _next (/home/florian/Documents/softozor/test/node_modules/jest-jasmine2/build/index.js:47:9)
          at /home/florian/Documents/softozor/test/node_modules/jest-jasmine2/build/index.js:52:7
          at new Promise (<anonymous>)
          at /home/florian/Documents/softozor/test/node_modules/jest-jasmine2/build/index.js:44:12
          at _jasmine (/home/florian/Documents/softozor/test/node_modules/jest-jasmine2/build/index.js:206:19)
          at jasmine2 (/home/florian/Documents/softozor/test/node_modules/jest-jasmine2/build/index.js:60:19)
          at /home/florian/Documents/softozor/test/node_modules/jest-runner/build/runTest.js:384:24
          at Generator.next (<anonymous>)
          at asyncGeneratorStep (/home/florian/Documents/softozor/test/node_modules/jest-runner/build/runTest.js:161:24)
          at _next (/home/florian/Documents/softozor/test/node_modules/jest-runner/build/runTest.js:181:9)
          at processTicksAndRejections (internal/process/next_tick.js:81:5)

---------------|----------|----------|----------|----------|-------------------|
File           |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
---------------|----------|----------|----------|----------|-------------------|
All files      |     7.14 |        0 |    14.29 |     7.14 |                   |
 components    |      100 |      100 |      100 |      100 |                   |
  myComp.vue   |      100 |      100 |      100 |      100 |                   |
 layouts       |        0 |      100 |        0 |        0 |                   |
  MyLayout.vue |        0 |      100 |        0 |        0 |             85,90 |
 pages         |        0 |      100 |      100 |        0 |                   |
  Index.vue    |        0 |      100 |      100 |        0 |                11 |
 router        |        0 |        0 |        0 |        0 |                   |
  index.js     |        0 |      100 |        0 |        0 |        6,14,15,25 |
  routes.js    |        0 |        0 |        0 |        0 |    2,5,7,13,14,16 |
---------------|----------|----------|----------|----------|-------------------|

Test Suites: 2 passed, 2 total
Tests:       7 passed, 7 total
Snapshots:   0 total
Time:        2.648s
Ran all test suites.

What am I doing wrong ?

comteharbour

@rstoenescu It works. Thanks a lot !

comteharbour

@rstoenescu It doesn’t work since actions are not a vue component. I need to import the router to interact.
If I use your syntax, I get an error message TypeError: "_this is undefined"

comteharbour

I’m trying to reroute the user after an action.

I configured the routes:

const routes = [
  {
    path: '/',
    component: () => import('layouts/layout.vue'),
    children: [
      { path: '', component: () => import('pages/Index.vue') },
      {
        path: 'myPage',
        component: () => import('pages/myPage.vue')
      }
    ]
  }
]

if (process.env.MODE !== 'ssr') {
  routes.push({
    path: '*',
    component: () => import('pages/Error404.vue')
  })
}

export default routes

And I kept the default configuration for the router.

import Vue from 'vue'
import VueRouter from 'vue-router'

import routes from './routes'

Vue.use(VueRouter)

/*
 * If not building with SSR mode, you can
 * directly export the Router instantiation
 */

export default function (/* { store, ssrContext } */) {
  const Router = new VueRouter({
    scrollBehavior: () => ({ y: 0 }),
    routes,

    // Leave these as is and change from quasar.conf.js instead!
    // quasar.conf.js -> build -> vueRouterMode
    mode: process.env.VUE_ROUTER_MODE,
    base: process.env.VUE_ROUTER_BASE
  })

  return Router
}

I can access myPage with a click on <router-link>

<template>
  <q-page>
      <router-link to="/myPage">my page</router-link>
  </q-page>
</template>

<script>
export default {
  name: 'PageIndex',
}

But I want to access it from a vuex action…

import router from '../../../router'

export const myAction = context => {
  // code
  router().push({path: '/myPage'})
}

…that I can dispatch in my previous component

<template>
  <q-page>
      <router-link to="/myPage">my page</router-link>
      <q-btn @click="myAction">my page</q-btn>
  </q-page>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'PageIndex',
  methods: {
    ...mapActions([ 'myAction' ])
  }
}
</script>

And, while the <router-link> works well, when I click the <q-btn>, the address bar shows the correct path (http://localhost:8080/#/myPage), but the MyPage page isn’t loaded. It only loads when I refresh the page.

What am I doing wrong ?

comteharbour

@comteharbour

Best posts made by comteharbour

Latest posts made by comteharbour