No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. comteharbour
    C
    • Profile
    • Following 0
    • Followers 0
    • Topics 3
    • Posts 6
    • Best 1
    • Groups 0

    comteharbour

    @comteharbour

    1
    Reputation
    103
    Profile views
    6
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    comteharbour Follow

    Best posts made by comteharbour

    • RE: [Solved] Using router from vuex action

      @rstoenescu It works. Thanks a lot !

      posted in Framework
      C
      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 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 ?

      posted in Framework
      C
      comteharbour
    • @quasar/testing (jest) components not registered when VueRouter not created

      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 ?

      posted in [v1] App Extensions
      C
      comteharbour
    • @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 ?

      posted in [v1] App Extensions
      C
      comteharbour
    • RE: [Solved] Using router from vuex action

      @rstoenescu It works. Thanks a lot !

      posted in Framework
      C
      comteharbour
    • 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 message TypeError: "_this is undefined"

      posted in Framework
      C
      comteharbour
    • [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 the MyPage page isn’t loaded. It only loads when I refresh the page.

      What am I doing wrong ?

      posted in Framework
      C
      comteharbour