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. dariosalvi
    D
    • Profile
    • Following 0
    • Followers 0
    • Topics 1
    • Posts 4
    • Best 0
    • Groups 0

    dariosalvi

    @dariosalvi

    0
    Reputation
    6
    Profile views
    4
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    dariosalvi Follow

    Latest posts made by dariosalvi

    • RE: Mocking notify plugin in a test

      I have found a solution to the specific warning: the reference to fullscreen is inside the function mounted() of the Notify plugin.

      I have mocked mounted() with:

        Notify.mounted = () => {
          return jest.fn()
        }
      

      and the warning has disappeared.

      posted in Help
      D
      dariosalvi
    • Mocking notify plugin in a test

      Hello,

      I have a jest unit test of a component that uses the notify plugin. If import the plugin into the test with:

      import { Notify } from 'quasar'
      

      and then:

      localVue.use(Quasar, { components, plugins: [Notify] })
      

      I get an annoying warning on the console:

      [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'fullscreen' of undefined"
      

      I am sure it’s the notify plugin because if I remove the plugin the message goes away.

      Even if the test works, I’d like to get rid of the warning message, so I was wondering if there is a good way to mock the notiify plugin. I’ve tried with the following mock but it’s clearly wrong:

      const Notify = {
        notify () {
          console.log('notify')
        }
      }
      

      Have you got any tip to share?
      Thanks!

      posted in Help
      D
      dariosalvi
    • RE: Unit testing and simulating input

      Hello, little update form my side:

      I have found out how to set the new value inside inside the q-input: you need to find a regular input instead of a q-input instance:

      it('sets a value correctly', async () => {
          const input = wrapper.find('input[type=text]')
          input.setValue('test 1')
          expect(wrapper.vm.value).toBe('test 1')
      }
      

      This actually sets the text inside the q-input and also trigger the input event. Problems: if the q-input manages a prop directly (as in the example above), the test will pass, but Vue will complain with a:

      Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.

      To avoid this, I have tried using data inside the q-input v-model instead of props directly:

      <template>
      <div>
        <q-input  v-model="text" @input="update()"></q-input>
      </div>
      </template>
      
      <script>
      export default {
        name: 'QINPUT',
        props: [ 'value' ],
        data () {
          return {
            text: this.value
          }
        },
        methods: {
          update () {
            this.$emit('input', this.text)
          }
        }
      }
      </script>
      

      Note that here v-model=“text” instead of value. The effect is that the warning disappears, but after calling setValue(), the change is not propagated to wrapper.vm.value, even if I use await wrapper.vm.$nextTick() and the test fails.

      So I haven’t found a way to properly test components that modify an input. This is a pity because most of my components are actually editors of some type of information. This guide here doesn’t help either.

      posted in Framework
      D
      dariosalvi
    • RE: Unit testing and simulating input

      I have the same problem, but I am using Quasar v1.5 and Quasar testing tools.

      So my problem is that I have a component with a q-input and I would like to change its value and see how that affects the rest of the component.

      Simplifying a bit, I have a component with a q-input inside. It is filled in with a value that comes from the props of the containing component. Like:

      <template>
      <div>
        <q-input v-model="value" @input="update()"></q-input>
      </div>
      </template>
      
      <script>
      export default {
        name: 'QINPUTDEMO,
        props: [ 'value' ],
        methods: {
          update () {
            this.$emit('input', this.value)
          }
        }
      }
      </script>
      

      So you use it like here:

      <template>
       <p>An example using the q-input demo</p>
       <q-input-demo v-model="txt"/>
      </template>
      
      <script>
      export default {
        data () {
          return {
            txt: 'test'
          }
        }
      }
      </script>
      

      In my test, I would like to write into the q-input and verify that the text has changed correctly:

      it('sets the translated texts', async () => {
        const qinput = wrapper.find(components.QInput)
        qinput.setValue('text 1')
      })
      

      When I call setValue() the testing framework says: " [vue-test-utils]: wrapper.setValue() cannot be called on this element".

      Any idea about how to fix it?

      posted in Framework
      D
      dariosalvi