Random things of a random world

Sami's Page

  • Join Us on Facebook!
  • Follow Us on Twitter!
  • LinkedIn
  • Subcribe to Our RSS Feed

Things Learned: Testing Vuetify Requires Multiple Ticks

I was trying to test a view with v-tabs in it. I needed to switch the tabs so that I can check all of them easily. Yes, I know, every tab should be a component, but this was literally an info view with a single button per tab and they were related so I didn't see the need to separate them into different components and repeat the underlying code.

First I tried to figure out if there's a way to tell the v-tab which tab to use. There isn't, since it's all about v-modeling stuff. So I added a v-model. Didn't work. I checked setValue() since it should set a value. Doesn't work on this component. I added a wrapper.vm.$nextTick() to see if it just needs a push. No, nothing works.

I even split the v-tabs and v-tabs-items if that's the issue. Maybe v-tabs-items needs its own link to the v-model variable. No. Didn't help.

Then I figured what the heck, lets add five nextTick()s. And suddenly it works. It seems that you need two ticks for the tabs actually change.

And now I can test this simple component without hassle or separating it to three components unnecessarily.

Also there's no need for v-model to be used. You'll just need to use findComponent to get the v-tabs component, then call setProps({value:1}) to change the tab.

Comments (1) -

  • pcwgOoqwJx5h

    8/24/2020 10:29:29 AM | Reply

    479072 811274Some  genuinely  prime  posts  on this site  , bookmarked . 534816

Add comment