eddyerburgh / avoriaz Goto Github PK

const $route = { path: '/users/:id', params: { id: 4 } };
const globals = { $route };

const wrapper = shallow(AnswerBeat, { globals });

it('calls myMethod when mounted', () => {
  const spy = sinon.spy(myComponent.methods, 'myMethod')
  const wrapper = mount(myComponent, { propsData, store })
  expect(spy.called).to.be.true // AssertionError: expected false to be true
})

<template>
    <ul class="ui-navigation">
        <ui-navigation-level
            :options="options"
            @select="handleSelect"
        ></ui-navigation-level>
    </ul>
</template>

<script>
    import NavigationLevel from './ui-navigation-level.vue'

    export default {
        name: 'ui-navigation',

        props: {
            options: {
                type: Array,
                required: true,
            },
        },

        components: {
            'ui-navigation-level': NavigationLevel,
        },

        methods: {
            handleSelect(option) {
                this.$emit('select', option)
            },
        },
    }
</script>

it('handles the select event', () => {
    const handleSelect = sinon.spy(Navigation.methods, 'handleSelect')

    const wrapper = mount(Navigation, {
        propsData: {
            options: [
                /* ... */
            ],
        },
    })

    wrapper.find('.ui-navigation-level')[0].dispatch('select')

    expect(handleSelect).to.be.calledOnce //Result: called 0 times
})

const getComponentWithProps = (component, propsData) => {
  const Ctor = Vue.extend(component);
  return new Ctor({
    propsData,
  });
};
    const id = 'hello';
    const url = 'bad thang';
    const wrapper = getComponentWithProps(Dropzone, { id, url });

→ npm run test-unit

> [email protected] test-unit
> ava test/unit/specs/**/*.js


  1 failed

  renders one h1
  node_modules/window/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:330

  Error thrown in test

  Error:

    [TypeError: Cannot use 'in' operator to search for 'nodeType' in undefined]

  HTMLDivElementImpl.appendChild (node_modules/window/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:330:22)
  HTMLDivElement.appendChild (node_modules/window/node_modules/jsdom/lib/jsdom/living/generated/Node.js:132:57)
  VueWrapper.html (node_modules/avoriaz/dist/Wrapper.js:212:11)
  Test.fn (test/unit/specs/Example.test.js:11:31)

  test/unit/specs/Example.test.js exited with a non-zero exit code: 1

node_modules/window/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:330
    if (!("nodeType" in newChild)) {
                     ^

TypeError: Cannot use 'in' operator to search for 'nodeType' in undefined
    at HTMLDivElementImpl.appendChild (node_modules/window/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:330:22)
    at HTMLDivElement.appendChild (node_modules/window/node_modules/jsdom/lib/jsdom/living/generated/Node.js:132:57)
    at VueWrapper.html (node_modules/avoriaz/dist/Wrapper.js:212:11)
    at Object.<anonymous> (test/unit/specs/Example.test.js:13:41)
    at Module._compile (module.js:569:30)
    at extensions.(anonymous function) (node_modules/require-precompiled/index.js:13:11)
    at Object.require.extensions.(anonymous function) [as .js] (node_modules/ava/lib/process-adapter.js:100:4)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (node_modules/ava/lib/test-worker.js:49:1)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Function.Module.runMain (module.js:605:10)
    at startup (bootstrap_node.js:158:16)
    at bootstrap_node.js:575:3

import avoriaz, { mount } from 'avoriaz';
import sinon from 'sinon';
import { expect } from 'chai';
import Vuex from 'vuex';
import 'babel-polyfill';
import Actions from 'app/components/Actions';

avoriaz.use(Vuex);

describe('Actions.vue', () => {
    let actions;
    let store;

    beforeEach(() => {
        actions = {
            actionClick: sinon.stub(),
            actionInput: sinon.stub(),
        };
        store = new Vuex.Store({
            state: {},
            actions,
        });
    });

    it('calls store action actionInput when input value is input and an input even is fired', () => {
        const wrapper = mount(Actions, { store });
        const input = wrapper.find('input')[0];
        input.element.value = 'input';
        input.simulate('input');
        expect(actions.actionInput.calledOnce).to.equal(true);
    });
});

<template>
<div class="text-align-center">
    <input type="text" @input="actionInputIfTrue" />
    <button @click="actionClick()">Click</button>
</div>
</template>

<script>
    import { mapActions } from 'vuex';

    export default{
        methods: {
            ...mapActions([
                'actionClick',
            ]),
            actionInputIfTrue: function actionInputIfTrue(event) {
                const inputValue = event.target.value;
                if (inputValue === 'input') {
                    this.$store.dispatch('actionInput', { inputValue });
                }
            },
        },
    };
</script>

const webpack = require('webpack');
module.exports = function (config) {
  config.set({

    browsers: ['PhantomJS'],
    frameworks: ['mocha'],
    files: ['./specs/test.spec.js'],
    preprocessors: {
      './specs/test.spec.js': ['webpack', 'sourcemap']
    },
    webpack: {
      resolve: {
        alias: {
          vue: 'vue/dist/vue.common.js'
        },
        extensions: ['.js', '.vue']
      },
      module: {
        loaders: [
          {
            test: /\.vue$/,
            loader: 'vue-loader'
          },
          {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
              presets: ['es2015', 'stage-2']
            }
          },
        ]
      },

    },
    webpackMiddleware: {
      noInfo: true,
    },
    reporters: ['spec'],
  });
};

<template>
    <div class="teams card">
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Teams</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="team in teams">
                        <td>
                            <span v-show="!team.editing">{{team.name}}</span>
                            <input type="text" class="form-control" v-model="team.name" v-show="team.editing" />
                        </td>
                        <td>
                            <router-link :to="modalFor(team)">Edit</router-link>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
  import { Team } from '../../../models/team'
  import Modal from '../../../components/Modal'
  export default {
    components: {Modal},
    name: 'teams',
    mounted () {
      // load all teams
      Team.all().then(teams => {
        // disable editing mode for all teams
        teams.forEach(team => { team.editing = false })
        this.teams = teams
      })
    },
    data () {
      return {
        teams: [],
      }
    },
    methods: {
          modalFor (team) {
              return '/admin/teams/' + team.id
      }
    }
  }

import Teams from '@/pages/dashboard/admin/Teams'
import { mount } from 'avoriaz'

describe('Teams.vue', () => {
  it('should render correct contents', () => {
    const wrapper = mount(Teams)
    const tableHeader = wrapper.find('.table tr th')[0]
    expect(tableHeader.text()).to.equal('Teams')
  })
})

<template>
<div>
  <input type='date' readonly @click="show = true"/>
  <Datepicker :show="show" />
</div>
</template>
<script>
export default {
  data(){
    return { show : false };
  }
};
</script>

<template>
  <div v-if="show">...</div>
</template>
<script>
export default {
  props: [ 'show' ],
  mounted(){
    this.$root.$el.appendChild(this.$el);
  }
}
</script>

test('toogle DatePicker', t => {
   let wrapper = mount(DateInput, { attachToDocument:true });
   wrapper.setData({ show: true });
   //cannot find the Datepicker in wrapper.element or document.body
});

<template>
  <button @click="handleClick">
    <slot></slot>
  </button>
</template>
<script>

export default {
  name: 'Button',
  methods: {
    handleClick(e) {
      this.$emit('click', e)
    }
  }
}
</script>

import { mount } from 'avoriaz';
import { expect } from 'chai';]
import Foo from './Foo.vue';
import Bar from './Bar.vue';
import FooBar from './FooBar.vue';

describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = mount(Foo, { 
        slots: {
            default: Bar,
            fooBar: FooBar // Will match <slot name="FooBar" />
        }
    });
    expect(wrapper.props(div)).to.equal(true);
  });
});

  t.stub($store);
  const $router = { push: t.spy() };
  const data = { email: '[email protected]', password: 'password' };
  const wrapper = mount(Login, { data, globals: { $router, $store } });
  t.stub($store, 'getters').value({ isLoggedIn: true });

TypeError: Cannot read property 'split' of undefined
    getTransitionInfo (node_modules/vue/dist/vue.runtime.common.js:6145:58)
    whenTransitionEnds (node_modules/vue/dist/vue.runtime.common.js:6115:13)
    Timeout._onTimeout (node_modules/vue/dist/vue.runtime.common.js:6342:11)

<template>
    <div>
        <popover ref="popover" :triggerElements="['.input']"></popover>
    </div>
</template>

it.only('onFocus - load failed', done => {
    const wrapper = shallow(SelectSearchInput, {
        propsData: {
            ...defaultProps,
            loadFailed: true
        }
     })
     const emitStub = sinon.stub(wrapper.vm, '$emit')

     // Show options should be false since input field is empty
     expect(wrapper.vm.onFocus()).to.be.true
     expect(emitStub).to.be.calledWith('startLoading', wrapper.data().inputValue)
     emitStub.restore()
     done()
})

ERROR LOG: '[Vue warn]: Error in callback for watcher "triggerElements": "TypeError: undefined is not a constructor (evaluating 'this.$el.querySelector(this.triggerElements[0])')"

found in

---> <Popover> at /resources/assets/js/components/popover.vue <Root>'

let wrapper = {}
beforeEach(() => {

    // instantiate our model
    let test = StringField.new('test_id', "test_name", {"type":"string"}, {"label":"Dr Pookie from group 1"})

    // pass model in as a prop to vue component
    wrapper = mount(TextInput, {
        attachToDocument: true,
        propsData: {
            field: test
        }
    })
})

it('renders ok', function() {
    expect(wrapper.is('div')).to.equal(true)
})

<template>
    <div class="ui-button-group">
        <ui-button v-for="(option, index) in options"
            :key="option.label"
            :id="option.value"
            @click="handleClick"
        >{{ option.label }}</ui-button>
    </div>
</template>

<script>
import Button from '../button/ui-button.vue'
export default {
    name: 'ui-button-group',
    props: {
        options: {
            type: Array,
            required: true,
        },
    },
    components: {
        'ui-button': Button,
    },
    methods: {
        handleClick(event) {
            const value = event.target.id // Test fails on this line
            this.$emit('click', value)
        },
    },
}
</script>

it('handles the click event', function () {
    const handleClick = sinon.spy(ButtonGroup.methods, 'handleClick')

    const wrapper = mount(ButtonGroup, {
        propsData: {
            options:  [
                /** ... **/
            ],
        },
    })

    wrapper.find(Button)[0].element.click() // This works
    wrapper.find(Button)[0].trigger('click') // In handleClick this is thrown: "undefined is not an object (evaluating 'event.target')"

    expect(handleClick).to.be.calledOnce
})

    const wrapper = mount(Bar);
    const childUl = wrapper.find('.child-ul')[0];
    expect(childUl.style().color).to.equal('red');
  });

<template>
	<div class="bar">
	  <ul class="parent-ul">
	    <li />
	    <li />
	    <ul class="child-ul">
        <li />
        <li />
	    </ul>
	  </ul>
	</div>
</template>

<script>
  export default {
    name: 'bar',
  };
</script>

<style lang="scss">
  .bar {
    ul.child-ul {
      color: red;
    }
  }
</style>

it('handles the input event', () => {
    const wrapper = mount(UiInput)
    const handleInput = sinon.spy(wrapper.vm, 'handleInput')

    wrapper.find('input')[0].dispatch('input')

    expect(handleInput).to.be.calledOnce
})

<template>
	<div>
		{{prop1}}
		{{prop2}}
	</div>
</template>

<script>
  export default {
    props: {
      prop1: {default: 'default prop1'},
      prop2: {default: 'default prop2'}
    },
    watch: {
      prop1 (val) {
        this.prop2 = val
      }
    }
  }
</script>

import { mount } from 'avoriaz'
import test from 'components/test'

describe('test.vue', () => {
  it('should update prop2', () => {
    const wrapper = mount(test)
    const prop1 = 'testest'
    wrapper.setProps({prop1})
    expect(wrapper.propsData().prop2).to.equal(prop1)
    //expected 'default prop2' to equal 'testest'
  })
})

<template>
    <div></div>
</template>

<script>
  export default {
    data() {}

    props: {
       maxValue: {
         type: Number,
         default: 10,
           validator: function(val) {
             return val > 0;                        // Ensure that max has a positive value
           }
       }
    }
  }
</script>

  import MyComponent from '../src/myComponent.vue';

  const sinon = require('sinon');
  const consoleWarn = sinon.stub(console, 'warn');     

  describe(property', () => {
    it('should be a positive value', () => {
      var wrapper = mount(MyComponent);
      wrapper.setProps({maxValue: -1});
      expect(consoleWarn.calledOnce).to.equal(true);
   });
  });

 TypeError: node.elm.getAttribute is not a function

<template>
  <transition name="modal">
    <div class="modal-mask" @click="hideModal" transition="modal">
      <div class="modal-dialog" @click.stop>
        <div class="modal-header">
            <a class="btn close" @click="hideModal">
                <i class="icon-cross color-darkest-gray large"></i>
            </a>
        </div>

        <div class="modal-body">
            <slot name="body">
                <p>Default modal content goes here.</p>
            </slot>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { mapActions } from 'vuex';

export default {
    name: 'modal',
    methods: {
      ...mapActions('Modals', [
        'hideModal'
      ])
    }
}
</script>

import { mount } from 'avoriaz';
import { expect } from 'chai';
import Modal from '../src/components/Modal.vue';

describe('Modal.vue', () => { 
  it('renders a div element with class modal-mask', () => {
    const modal = mount(Modal);

    expect(modal.is('div')).to.equal(true);
    expect(modal.hasClass('modal-mask')).to.equal(true); // Here we can see the component considers this to be its root node
  });

  it('renders a div element with class modal-mask', () => {
    const modal = mount(Modal);
    const mask = modal.find('.modal-mask')[0]; // Finds .modal-mask

    expect(mask.is('div')).to.equal(true);
  });

  it('renders a div element with class modal-dialog', () => {
    const modal = mount(Modal);
    const dialog = modal.find('.modal-dialog')[0]; 
    // .find() returns empty array, dialog equals undefined at this point
    // Same happens for any child node

    expect(dialog.is('div')).to.equal(true);
  });
});