hilongjw / vue-progressbar

A lightweight progress bar for vue
http://hilongjw.github.io/vue-progressbar
MIT License
1.46k stars 162 forks source link

Problem testing with and VuePrograssBar #54

Open guilazzaris opened 7 years ago

guilazzaris commented 7 years ago

I'm having a problem testing with Avoriaz my own generic component that wraps a plugin called VuePrograssBar (http://hilongjw.github.io/vue-progressbar/)

I'm trying to test that my own generic component (Loading) is indeed calling the VuePrograssBar plugin.

Loading Component:

<template>
  <vue-progress-bar/>
</template>

<script>
  export default {
    name: 'loading',
    created() {
      this.$router.beforeEach((to, from, next) => {
        this.$Progress.start();
        next();
      });

      this.$router.afterEach(() => {
        this.$Progress.finish();
      });
    },
  };
</script>

My Test (Mocha, Chai, Avoriaz):

import { shallow } from 'avoriaz';

import Vue from 'vue';
import router from '@/router';
import Loading from '@/components/Loading';
import VueProgressBar from 'vue-progressbar';

describe('Loading.vue', () => {
  let wrapper;

  beforeEach(() => {
    Vue.use(VueProgressBar);
    wrapper = shallow(Loading, { router });
  });

  describe.only('Rendering', () => {
    it('should render a Loading component', () => {
      expect(wrapper.contains()).to.equal(true);
    });
  });
});

But I'm getting this error:

✗ should render a Loading component
[avoriaz]: wrapper.contains() must be passed a valid CSS selector or a Vue constructor
error@webpack:///~/avoriaz/dist/avoriaz.js:134:0 <- index.js:12227:45
contains@webpack:///~/avoriaz/dist/avoriaz.js:169:0 <- index.js:12262:10
webpack:///test/unit/specs/components/Loading.spec.js:22:13 <- index.js:24064:30
dinhducit commented 4 years ago

did you resolved it @guilazzaris ?