dhershman1 / vue-box

Simple Testing module to allow users to test vue component functionality

Vue Box

Grabs your vue file, turns it into standing JS and gives you back the object to run your tests against

Please report any issues as soon as you can, I am one man and cannot test every need, or situation thank you! Please Feel free to leave suggestions on improvements/methods you'd want to see added. OR feel free to send a PR!

Changelog

You can find the changelog here: https://github.com/dhershman1/vue-box/blob/master/changelog.md

Params

• options: Object - An object of options to help Vue Box

Options

const defaults = {
	props: {}, // Props used in any of your components
	vuePath: '/', // The path to the vue file your currently testing
	componentPath: '/', // the path to where your components live
	testName: 'default', // Name of the current test (optional)
	outputDir: 'tests', // Specify where you want the ouput dir to be
	external: [], // Array of external modules E.G underscore
	globals: {} // An object of globals E.G { underscore: '_' }
};

How It Works

So obviously Vue-Box isn't using a browser environment the whole purpose of this is to give you a unit testing environment to run your javascript tests.

Well the cons to doing this is we don't exactly use Vue itself since it would yell at us for not having a browser, what Vue-Box is doing is eliminating the this scope from vue by applying your props and data values to your computed, and method objects. It even creates a fake event catcher for $emit

How To

Pass in a set of options to vueBox and go from there

For single vue files (not importing other vue components)

const vueBox = require('vue-box');
vueBox({
	vuePath: `${__dirname}/../index.vue`,
	outputDir: 'tests',
	testName: 'Single-Component',
	externals: ['underscore'],
	globals: {
		underscore: '_'
	}
}).then(vm => {
	// You can now access your vue object here
});

For a vue file that is importing other vue components

const vueBox = require('vue-box');
vueBox({
	vuePath: `${__dirname}/../index.vue`,
	outputDir: 'tests',
	testName: 'Import-Component',
	componentPath: `${__dirname}/../../`, // Note a path that points to the general components directory
	externals: ['underscore'], // General rollup settings
	globals: { // More general rollup settings
		underscore: '_'
	}
}).then(vm => {
	// You can now access your vue object here
	// Your main vue file will be under default so:
	vm.default.data() // etc...
	// You can also look at other components if you need too through the vm variabel
});

Checking Changes In Data

You can watch for changes in data based on the area you are in, methods will change data in the method scope for instance

// If we have a method like this inside our .vue file
testMethod() {
	this.dataValue = 'new value';
}

// While in our test file we will have something like:
const vueBox = require('vue-box');
vueBox({
 // Options
}).then(vm => {
	vm.methods.testMethod();
	console.log(vm.methods.dataValue);
	// Output:
	// 'new value'
});

vue-box's Issues

Determine if it's easier to use a directory, or to use a string

Is it easier for the user to pass in a string that points to the directory of the vue file, or just pass in the string of the file itself (fs.readfile, etc.)

The ladder would put more weight in the test file, but would it be a better payoff than making a user find the directory and figure out how to properly pass the string into the component?

Wouldn't they need to do that anyway if they're going to feed the path into the module itself?