Vuetify and testing

[juhasev]

Versions and Environment

Vuetify: 1.0.4 Vue: 2.5.13 Browsers: Chrome 64.0.3282.186 OS: Mac OS 10.13.3

Steps to reproduce

Create minimal component using toolbar and tooltip:

<template>

    <v-toolbar card>
        <v-toolbar-title class="title">User Manager</v-toolbar-title>
        <v-spacer/>

        <v-tooltip top>
            <v-btn slot="activator" icon color="primary">
                <v-icon>person_add</v-icon>
            </v-btn>
            <span>Invite new user</span>
        </v-tooltip>

    </v-toolbar>

</template>

Next in your test mount the component twice:

import {shallow, createLocalVue} from '@vue/test-utils';
import Component from '../modules/UserManager/components/VuetifyError.vue';
import Vuex from 'vuex';
import Vuetify from 'vuetify';
import sinon from 'sinon';
import {expect} from 'chai';

const localVue = createLocalVue();

localVue.use(Vuex);
localVue.use(Vuetify);

describe('VuetifyError', () => {

    it('first mount', () => {
        const wrapper = shallow(Component, {localVue});
    });

    it('second mount', () => {
        const wrapper = shallow(Component, {localVue});
    });
});

Expected Behavior

No errors

Actual Behavior

First shallow mount works fine, no errors. However the second mount results into errors. I believe data-app bug has been in other components and has been fixed else where but these are still not working. Something must be changing in the global scope...

[Vuetify] Unable to locate target [data-app] in "v-tooltip"
[Vue warn]: Error in config.errorHandler: "TypeError: window.requestAnimationFrame is not a function"
TypeError: window.requestAnimationFrame is not a function
    at VueComponent.mounted (/Users/juhavehnia/Code/platform/.tmp/mocha-webpack/1520102743411/webpack:/node_modules/vuetify/dist/vuetify.js:1723:1)
    at callHook (/Users/juhavehnia/Code/platform/.tmp/mocha-webpack/1520102743411/webpack:/node_modules/vue/dist/vue.js:2895:1)

Reproduction Link

https://jsfiddle.com/

Other comments

My apologies for not putting this up as a running example. I took this out of a bigger project and stripped it down to the bare minimum. Should be easy to plug in and run.

[johnleider]

This is something you need to expect when testing certain components. You can see how we handle this in our tests.

[gangsthub]

If you are using jest, instead of jasmine; you can overwrite the global.console:

// tests/utils.js <-- Or whatever you want to call it

global.console = {
  ...global.console, // get the default values first and overwrite the ones that we want:
  error: jest.fn(),
  warn: jest.fn(),
  info: jest.fn(),
}

And import it in the tests needed ;)

[Oliboy50]

@johnleider could you post your "way of handling this" instead of letting us search for it?

Or either fix the issue?

couldn't you set a if (!data-app) return; somewhere to avoid warnings?

this is annoying and I don't like to do crappy stuff in my tests to avoid such warnings

[johnleider]

const el = document.createElement('div')
el.setAttribute('data-app', true)
document.body.appendChild(el)