jackmellis / vuenit Goto Github PK

Whether or not to isolate the component from other components.

• clear definition's components property

• clear vue's global components (except for internal ones like KeepAlive)

• should it also kill the transition and transition-group components?

• if the component being generated is a globally registered one, don't delete that one!

• should it also clear filters and directives?

• is there some way of supressing vue's unknown component warning message?

vuenit.component(def, { isolate : true });

component.components = {};
Object.keys(Vue.options.components).forEach(k => !['KeepAlive', 'Transition', 'TransitionGroup'].includes(k) ...);
Vue.config.isUnknownElement = () => false;

jackmellis/mock-vuex#2

Looks for a child component within the current component. The returned component must also be augmented with the same methods.

Should also be able to do a plain querySelector search?

Must accept either a component name, query selector string, a dom element, or a component definition (use its name property?), or a vm instance

Returns a an array of component instances or elements

vm.$find('.myClass'); // returns dom element
vm.$find(MyComponent); // returns component instance within vm
vm.$find('myComponent'); // returns component instance with this name within vm

// component.vue
export default {
  props : ['propA', 'propB']
}

// test.spec.js
var vm = vuenit.component(c, {
  props : {
    propA : 'foo'
  }
});

vm.propsData.propA = 'bah';
vm.propsData.propB = 'zoo';

await vm.$nextTick();

vm.propA // 'bah'
vm.propB // undefined

Should just be as simple as looping through component.props and adding any props that haven't been passed in...

It would be nice to be able to set some global configuration flags that are then defaulted everywhere.

Then this could be a set in a helper file that all tests load before running.

vuenit.component.config = { mount : false, isolate : true };

Hello, I'm trying to mock my store, which consists of 2 modules that contain state and actions. mockStore lets me pass state inside the modules object, but actions don't get properly mapped via mapActions unless they're top-level. Any suggestions?

A hook that fires just before instantiating the component, with the cloned component and the ready options. Would allow you to spy on stuff etc.

Basically a shortcut for setting stubComponents stubDirectives and stubFilters

Like components and filters:

mount(c, {
  directives : {
    foo : { bind(){} },
    bah : () => {},
    zoo : true
  }
});

Could potentially wrap the api in getters so if you never use say http, we don't need to bother requiring it. Not sure if it's worth the effort...

Could calling $mount be optional?

I just want to test some methods in my vue component and I'm using a UI Component library which I haven't figured out how to test-around yet. (Unknown custom element: etc)

Before finding vuenit, I was just not calling out to $mount to prevent Vue from worrying about the template code.

The component.js file is getting a little unwieldy

I know this isn't technically an issue with vuenit itself, but in order to use vuenit with the Vue-CLI Webpack template (which uses PhantomJS), a polyfill like phantomjs-polyfill-find is required.

lib/router/router.js:137 is the breaking line when mockRouter is used without a polyfill.

Perhaps a note should be added to the ReadMe and/or the docs.

Trigger a DOM event

let input = vm.$find('input');
input.value = 'v';
vuenit.trigger(input, 'input');

Can also accept a vm:

vuenit.trigger(vm, 'change');
// or
vuenit.trigger(vm.$find('myComponent'), 'change');

With event args:

vuenit.trigger(vm, 'change', { value : 'bah' });

With an Event object:

vuenit.trigger(vm, new Event('change'));

Trigger should attach target to the event object.

If a component contains a transition group (possibly a transition, not sure), when testing with jsdom it gives an error.

Can just be an empty object, just means you don't have to check if it's already been set before adding properties to it

Currently there's nothing in the mock store to allow for this.

Add some aliases so you can import ES6-style without having to call it component:

import {mockComponent} from 'vuenit';

const h = vm.$html

Shorthand for

const h = vm.$el.outerHTML

• The default stub should contain a in its html so child contents will still render
• Registering stubs globally turns it into a ctor, probably best to Object.assign it first

In lib/component/index.js, the "Run install option" block happens before options are merged with defaults; so, an install function in component.config will never run.

In my current project, I am using a component library (element-ui), and almost all of my components will contain components from this library; so, the ability to use this extension by default would be beneficial.

I thought about making a pull request, but wondered if there was a good reason for install not to be included as a default.

vuenit.component('my-component', {
  components : {
    stubbed : '<div>stubbed</div>'
  }
});

for some reason this isn't working. Moreover, it seems that <stubbed> isn't being resolved. See failing test...

See #4.

vuenit.component(def, {
  install(Vue, injector){
    Vue.use(whatever);
    injector.constant('whatever');
  }
});

Rather than innerHtml, pass an object of slot = template and the innerHtml is constructed.

vm.component(c, {
  slots : {
    header : '<div></div>',
    default : '<span><span>',
    footer : '<div/>'
  }
});

would become something like:

vm.component(c, {
  innerHTML : '<div slot="header"></div><span></span><div slot="footer"/>'
});

Not exactly sure how this would work. It would need to re-use the current configuration options and create a new component instance.

var vm2 = vm.$create();

Basically copy what the http module does

I have a test for a watcher that aims to test the outcome of a data property changing from one non-initial value to another non-initial value, e.g.

{
  data () {
    return {
      gid: null
    }
  },

  watch: {
    gid (newVal, oldVal) {
      if (oldVal) { /* Do B */ }
      if (newVal) { /* Do A */ }
    }
  }
}

The test wants to see the outcome of /* Do B */. Obviously, this can be done by mounting the component, changing the value, waiting for next tick, changing the value again, waiting for next tick again, and then making the assertion. Another way that I've done this is by using the before option, e.g.

describe('gid watcher', () => {
  it('should Do A and Do B when gid changes from an existing value to a new existing value', async () => {
    let before = (component) => {
      let data = component.data()
      component.data = () => ({ ...data, gid: 123 })
    }
    let vm = shallow(Component, { before })

    vm.gid = 321

    await vm.$nextTick()

    expect(/* to have done A and B */)
  })
})

All of this works fine, but it seems like there should be an easier way to set initial data values to test individual watchers and methods.

😳

I have a component that looks like this:

export default {
  props: {
    ...
    to: { ... }
  },
  methods: {
    go () { this.$router.push(this.to) }
  }
}

And a test that looks like this:

describe('go()', () => {
  it('should change the current route', () => {
    const { $router, $route } = mockRouter(['/', '/businesses'], '/')
    const vm = shallow(ButtonLink, { inject: { $router, $route }, props: { to: '/businesses' } })
    
      vm.go()

      expect(vm.$route.path).to.eql('/businesses')
    })
  })
})

When I run this test, I get the following error:

undefined is not an object (evaluating 'this.$router.push')

For some reason vm.$router is undefined, while $router is defined in the scope of the test.

Vuenit.component(c, {
  on : {
    click : MySpy
  }
})

all this would do is vm.$on(name, mySpy)

i.e. vuex-mock, http-mock, vue-router-mock

I've got a custom directive: Vue.directive('editor') which it is used on an element in such way <div v-editor></div>

When testing I always get a warning '[Vue warn]: Failed to resolve directive: editor (found in )'.

I did vuenit.directive('editor'), but this does not seem to be helping. How can I fix this?

Each mock library should have a config.Promise property. Vuenit could easily use defineProperty to set Promise to return vue-inject's $promise factory

See #17 i.e. vm.$find('foo') !== undefined

Following on from #21

<headerBox :class="{ warning: !isValid }">
    <span>{{ date | timeDisplay }}</span>
</headerBox>

I've configured vuenit to stub out all components using

stubComponents: true,

and

components: {
    headerBox: true
},

I get the following error when running the test:
Failed to resolve filter: timeDisplay

The work-around is to use the install method to get around this:

install(Vue){
    Vue.filter("timeDisplay", jest.fn());
}