@rstoenescu It works. Thanks a lot !
Best posts made by comteharbour
Latest posts made by comteharbour
-
RE: Mapping custom SVG icons
@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 inpublic/customIcons
(public
is at the same level assrc
)<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 ?
-
@quasar/testing (jest) components not registered when VueRouter not created
When I want to mock
$route
or$router
, I can’t create aVueRouter
, otherwise these are read-only props.
https://vue-test-utils.vuejs.org/guides/#using-with-vue-routerIn
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 inquasar.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 ?
-
@quasar/testing: [Vue warn]: Error in render: "TypeError: Cannot read property 'lang' of undefined"
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 ?
-
RE: [Solved] Using router from vuex action
@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 messageTypeError: "_this is undefined"
-
[Solved] Using router from vuex action
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 theMyPage
page isn’t loaded. It only loads when I refresh the page.What am I doing wrong ?