callumacrae / vue-test Goto Github PK

View Code? Open in Web Editor NEW

90.0 5.0 6.0 74 KB

:checkered_flag: DEPRECATED: Component testing for Vue.js

JavaScript 99.66% HTML 0.34%

vue testing unit-testing chai-plugin

vue-test's Introduction

vue-test

Component testing utilities for Vue.js (work with both Vue 1 and 2)

Installation

$ npm install --save-dev vue-test

Usage

The library is divided into two parts: the mount() function and the chai assertion library plugin. The mount() function is used for mounting components in your tests without having to directly interact with the DOM, and the chai plugin can be used to write readable tests with understandable output for mounted Vue components.

NOTE: vue-test requires the full version of Vue (which includes the compiler). Make sure your build configuration for testing aliases vue properly. For example (webpack 2):

{
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

The `mount()` function

The mount() function takes two arguments, a Vue component, and some optional properties, and returns a wrapped mounted component with some useful utility functions.

import { mount } from 'vue-test';
import Title from './Title.vue';

const mountedTitle = mount(Title, {
  title: 'Hello world!'
});

mountedTitle.find('h1').text(); // Hello world!

Check out mount-api.md for a full list of the available functions.

Chai plugin

vue-test includes a chai plugin which you can use to test a component mounted with the mount() function.

Here's how you add it:

import { chaiPlugin } from 'vue-test';
chai.use(chaiPlugin);

Here's a very quick overview of what you can do:

expect(mountedComponent).to.be.ok
expect(mountedComponent).to.be.tag('p')
expect(mountedComponent).to.contain.tag('p')
expect(mountedComponent).to.match.selector('#id .class')
expect(mountedComponent).to.contain.selector('#id .class')
expect(mountedComponent).to.be.empty
expect(mountedComponent).to.have.className('alert')
expect(mountedComponent).to.have.value('input value')
expect(mountedComponent).to.have.text('some text')
expect(mountedComponent).to.contain.text('some text')
expect(mountedComponent).to.have.attribute('style')
expect(mountedComponent).to.have.attribute('style').that.equals('something')

It's all pretty descriptive and understandable, but for full explanations, see chai-plugin-api.md.

Contributing

If you feel something is missing or find a bug, feel free to send a PR or open an issue. If you haven't contributed to a project on GitHub before, feel free to ask me for help and I can help you out 😄

License

This project is released under the MIT license.

vue-test's People

Contributors

Stargazers

Watchers

Forkers

pointsource koronote akshayajanani12 cxk-cdd

vue-test's Issues

e2e error: "There was an error while starting the Selenium server:"

miram:vue-test mikkel$ npm run e2e

[email protected] e2e /Users/mikkel/Development/vue-test
node test/e2e/runner.js

Starting dev server...

Starting to optimize CSS...

Listening at http://localhost:8080

Starting selenium server... There was an error while starting the Selenium server:

Exception in thread "main" java.lang.UnsupportedClassVersionError: org/openqa/grid/selenium/GridLauncherV3 : Unsupported major.minor version 52.0
at java.lang.ClassLoader.defineClass1(Native Method)
at java.lang.ClassLoader.defineClassCond(ClassLoader.java:637)
at java.lang.ClassLoader.defineClass(ClassLoader.java:621)
at java.security.SecureClassLoader.defineClass(SecureClassLoader.java:141)
at java.net.URLClassLoader.defineClass(URLClassLoader.java:283)
at java.net.URLClassLoader.access$000(URLClassLoader.java:58)
at java.net.URLClassLoader$1.run(URLClassLoader.java:197)
at java.security.AccessController.doPrivileged(Native Method)
at java.net.URLClassLoader.findClass(URLClassLoader.java:190)
at java.lang.ClassLoader.loadClass(ClassLoader.java:306)
at sun.misc.Launcher$AppClassLoader.loadClass(Launcher.java:301)
at java.lang.ClassLoader.loadClass(ClassLoader.java:247)

npm ERR! Darwin 16.5.0
npm ERR! argv "/usr/local/Cellar/node/7.10.0/bin/node" "/usr/local/bin/npm" "run" "e2e"
npm ERR! node v7.10.0
npm ERR! npm v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] e2e: node test/e2e/runner.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] e2e script 'node test/e2e/runner.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the vue-test package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node test/e2e/runner.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs vue-test
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls vue-test
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/mikkel/.npm/_logs/2017-05-17T07_43_50_069Z-debug.log

Support testing emitted events

@callumacrae FYI, I'm working on an enhancement to allow a unit test to specify event handlers for a component under test so that you can test that a component correctly emits events.

I'm basically trying to get something like this working:

  it('should emit an event', () => {
    var spy = sinon.spy();

    // eslint-disable-next-line no-unused-vars
    const HelloComponent = mount(Hello, {}, '', { someEvent: spy });
    // Do something that should make HelloComponent emit 'someEvent'

    spy.should.have.been.calledOnce;
  });

I hope to have a PR today, but if you have any feedback, I'm happy to hear it.

Documentation for usage with Vuex

Hi, awesome library, finding it really useful with Vue 1.x
Question: is there a way to use this with Vuex?
ie: to bind a component to Vuex, mutate a vuex store, and then check that the changes shows up in the bound component?

Thanks again
Dave

Vue2 support

Hello!

This package looks really promising, except it does not support [email protected].
Any plans on updating the dependencies?

npm ERR! Failed at the [email protected] e2e script 'node test/e2e/runner.js'.

I'm trying to run the nightwatch e2e tests in Vue. I've been poking around for awhile and always end up with some selenium related errors.

Here's the error I'm getting:

Starting selenium server... started - PID:  13452

[Test] Test Suite
=====================

Running:  default e2e tests

Error retrieving a new session from the selenium server

Connection refused! Is selenium server started?
{ state: 'unhandled error',
  sessionId: null,
  hCode: 902387334,
  value: 
   { localizedMessage: null,
     cause: null,
     suppressed: [],
     message: null,
     hCode: 1853718195,
     class: 'java.util.concurrent.TimeoutException',
     screen: null },
  class: 'org.openqa.selenium.remote.Response',
  status: 13 }

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] e2e: `node test/e2e/runner.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] e2e script 'node test/e2e/runner.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the vue-test package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node test/e2e/runner.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs vue-test
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls vue-test
npm ERR! There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/**********/.npm/_logs/2017-03-24T21_38_04_011Z-debug.log

This is the log referenced:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'e2e' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'pree2e', 'e2e', 'poste2e' ]
5 info lifecycle [email protected]~pree2e: [email protected]
6 silly lifecycle [email protected]~pree2e: no script for pree2e, continuing
7 info lifecycle [email protected]~e2e: [email protected]
8 verbose lifecycle [email protected]~e2e: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~e2e: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/**********/selenium/ui-vue/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/share/dotnet:/usr/local/go/bin:/Library/Frameworks/Mono.framework/Versions/Current/Commands
10 verbose lifecycle [email protected]~e2e: CWD: /Users/**********/selenium/ui-vue
11 silly lifecycle [email protected]~e2e: Args: [ '-c', 'node test/e2e/runner.js' ]
12 silly lifecycle [email protected]~e2e: Returned: code: 1  signal: null
13 info lifecycle [email protected]~e2e: Failed to exec e2e script
14 verbose stack Error: [email protected] e2e: `node test/e2e/runner.js`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:279:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:886:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid [email protected]
16 verbose cwd /Users/**********/selenium/ui-vue
17 verbose Darwin 16.4.0
18 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "e2e"
19 verbose node v6.10.1
20 verbose npm  v4.4.1
21 error code ELIFECYCLE
22 error errno 1
23 error [email protected] e2e: `node test/e2e/runner.js`
23 error Exit status 1
24 error Failed at the [email protected] e2e script 'node test/e2e/runner.js'.
24 error Make sure you have the latest version of node.js and npm installed.
24 error If you do, this is most likely a problem with the vue-test package,
24 error not with npm itself.
24 error Tell the author that this fails on your system:
24 error     node test/e2e/runner.js
24 error You can get information on how to open an issue for this project with:
24 error     npm bugs vue-test
24 error Or if that isn't available, you can get their info via:
24 error     npm owner ls vue-test
24 error There is likely additional logging output above.
25 verbose exit [ 1, true ]

Current project stability

Before anything else: very interesting project! I was looking for something exactly like this, and even considering doing it myself haha you saved me the trouble 😂

My question is: at the time of writing the project is at it's 1.0 version, but just to be sure, do you think it's already reliable to use in real applications as it is?

What are your thoughts regarding maintenance and API stability on the project from now on? 🤔