@behance/jasmine-vue

    1.0.0 • Public • Published

    jasmine-vue npm

    Jasmine test helper for Vue components

    Requires jasmine.

    Install

    $ npm install --save-dev jasmine-vue
    

    Jasmine Vue abstracts away some of the boilerplate required when testing Vue components. Currently it helps with the setup, mounting, and destruction of a component.

    Setup

    Include jasmine-vue in the root file of your tests using require.

    require('jasmine-vue');

    Initialization

    A vueInit function will be available in the test context. It returns a creator object that is used to mount component instances. vueInit takes in an optional set of default props. It will generally only need to be called once per component test file.

    beforeEach(function() {
      const defaultProps = {
        myProp: true,
      };
      // Initialize
      this.componentCreator = this.vueInit(MyComponent, defaultProps);
    });

    Mounting / Rendering Components

    Use the creator returned from vueInit to mount the component.

    creator.mount( { [customPropsData], [store], [componentOverrides], el } )

    • Arguments:
      • {Object} customPropsData (optional)
        • will overwrite defaultProps passed into vueInit, otherwise defaults to them
      • {Object} store (optional)
        • creates a new Vuex.Store on the passed-in object and sets it on the instance
      • {Object} componentOverrides (optional)
        • will override any instance properties
        • can be used to spy on or stub lifecycle methods
      • {String|Element} El (optional)
        • will mount Vue component to an element selector or to an element that is passed in
        • if left blank, it will mount to body
    • Usage:

    Without any arguments:

    it('renders my component with default props', function() {
      const vm = this.componentCreator.mount();
      expect($(vm.$el)).toBeInDOM(); // using jasmine-jquery
      expect(vm.myProp).toEqual(true);
    });

    With custom props data:

    it('renders my component using custom props', function() {
      const vm = this.componentCreator.mount({ propsData: { myProp: false } });
      expect(vm.myProp).toEqual(false);
    });

    With a store:

    it('renders my component using custom props and a Vuex store', function() {
      const vm = this.componentCreator.mount({}, {
        state: {
          text: 'abc123',
        },
      });
      expect(vm.$store.state.text).toEqual('abc123');
    });

    With a component override:

    it('renders my component using custom props and a Vuex store', function() {
      const spy = jasmine.createSpy('spy');
      const vm = this.componentCreator.mount({}, {}, {
        beforeMount: spy
      });
      expect(spy).toHaveBeenCalled();
    });

    creator.mountSolo( { [customPropsData], [store], [componentOverrides], el } )

    beforeEach(function() {
        this.vm = this.componentCreator.mount();
    });
    
    it('clears all previously mounted components and mounts a solo component', function() {
      const soloVm = this.componentCreator.mountSolo();
      expect($(this.vm.$el)).not.toBeInDOM();
      expect($(soloVm.$el)).toBeInDOM();
    });

    Clean up

    In each afterEach phase, if components have been mounted, jasmine-vue will automatically remove the component DOM element and call Vue's $destroy method.

    vuePreventDestroy

    Available as this.vuePreventDestroy, this method will disable the afterEach cleanup of components. This (combined with fit or fdescribe) allows for some nice sandboxing of components. Focus the test, call this.vuePreventDestroy, and open the browser and access the component in its current state. Unlike using the debugger, this allows for interacting with the component in it's current state.

    License

    Apache-2.0

    Keywords

    none

    Install

    npm i @behance/jasmine-vue

    DownloadsWeekly Downloads

    7

    Version

    1.0.0

    License

    Apache-2.0

    Last publish

    Collaborators

    • chthomas
    • lanniemiao
    • mtrajano93
    • moskalen
    • elewis
    • mansinarain
    • attamusc
    • weikinhuang
    • mase
    • agaripian
    • nemtsov
    • bryanpackman
    • matt-oconnell
    • mlebrun
    • andyroo2000
    • ingluisjimenez
    • gtuckeradobe
    • tpaparne
    • danicasapit
    • dfoxinator
    • jelee11
    • jmedoy
    • bossjones
    • mtldo
    • jushean
    • bryanlatten
    • sadraei
    • tracyfogel
    • kangman
    • iooi
    • benake
    • davestein