Skip to content

Commit

Permalink
Change <it will="..."> to <test name="...">. Fix issue cleaning up ge…
Browse files Browse the repository at this point in the history
…nerated files after failed run.
  • Loading branch information
johnsusek committed Aug 21, 2019
1 parent 5fbe5a5 commit 74fd0aa
Show file tree
Hide file tree
Showing 8 changed files with 66 additions and 52 deletions.
18 changes: 16 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,29 @@ The file is split into two sections, the `<tests>` and the `<script>`.

More details are available in the [API Docs](https://github.com/johnsusek/vue-test-declarative/blob/master/docs/API.md).

## Example .vuetest file
## Examples

## Simplest

The simplest possible test just checks for the specified text anywhere in the rendered component.

```xml
<tests for="@/components/MyComponent.vue">
<test name="Contains success message">
<expect text to-match="Success!" />
</it>
</tests>
```

## HelloWorld

For this example, we'll test the `HelloWorld` component from the [default vue-cli template](https://github.com/vuejs/vue-cli/blob/master/packages/@vue/cli-service/generator/template/src/components/HelloWorld.vue).

Create a `HelloWorld.vuetest` file in the `tests/declarative` directory with these contents:

```xml
<tests for="@/components/HelloWorld.vue">
<it will="render message correctly" v-bind:props="props">
<test name="Render message correctly" v-bind:props="props">
<expect text to-match="Welcome!" />
</it>
</tests>
Expand Down
12 changes: 6 additions & 6 deletions bin/run.js
Original file line number Diff line number Diff line change
Expand Up @@ -160,13 +160,13 @@ function runTests() {

// remove generated tests
function cleanup() {
glob(workingDir + '/*.vuetest.spec.js', options, (err, files) => {
files.forEach(file => {
fs.unlinkSync(file);
})
let files = glob.sync(workingDir + '/*.vuetest.spec.js', options);

files.forEach(file => {
fs.unlinkSync(file);
})

fs.unlinkSync(workingDir + '/generated-setup.js');
});
fs.unlinkSync(workingDir + '/generated-setup.js');
}

function quit(message, code = 1) {
Expand Down
18 changes: 9 additions & 9 deletions docs/API.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@
In summary, a .vuetest file looks like this:
```xml
<tests>
<it>
<test>
<set>
<trigger>
<expect>
</it>
</test>
</tests>

<script></script>
Expand All @@ -34,16 +34,16 @@ This is the path to the component, used when importing it into your tests. Webpa

<br>

## `<it>`
## `<test>`
<details>
<summary>Details</summary>

```xml
<it will="WillValue" BindingTarget="BindingValue">
<test name="NameValue" BindingTarget="BindingValue">
```

### WillValue
This is used as the description for the test case.
### NameValue
This is used as the display name when running the test.

### BindingTarget

Expand All @@ -59,13 +59,13 @@ The BindingTarget will be set to this value of the `context` variable in your `<

#### Examples:
```xml
<it will="render app">
<test name="render app">
```
```xml
<it will="render message correctly" v-bind:props="myProps">
<test name="render message correctly" v-bind:props="myProps">
```
```xml
<it will="render data value correctly" v-bind:data="myData">
<test name="render data value correctly" v-bind:data="myData">
```

</details>
Expand Down
2 changes: 1 addition & 1 deletion docs/Install.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ Create config file `vuetest.config.json` with these contents:
Create test file `tests/declarative/App.vuetest` in this directory with these contents:
```xml
<tests for="../../examples/todomvc/components/App.vue">
<it will="Render app">
<test name="Render app">
<expect html to-match="todos" />
</it>
</tests>
Expand Down
4 changes: 2 additions & 2 deletions docs/examples/Vue-CLI-HelloWorld.vuetest
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
-->

<tests for="@/components/HelloWorld.vue">
<it will="render message correctly" v-bind:props="props">
<test name="render message correctly" v-bind:props="props">
<expect text to-match="Welcome!" />
</it>
</test>
</tests>

<script>
Expand Down
32 changes: 16 additions & 16 deletions docs/examples/Vuex-TodoMVC.vuetest
Original file line number Diff line number Diff line change
Expand Up @@ -9,48 +9,48 @@
-->

<tests for="../../examples/todomvc/components/App.vue">
<it will="render header">
<test name="render header">
<expect text-of="h1" to-match="todos" />
</it>
</test>

<it will="add a todo">
<test name="add a todo">
<set selector=".new-todo" value="First" />
<trigger selector=".new-todo" event="keyup.enter" />
<expect text-of=".todo-list li" to-match="First" />
<expect text-of=".todo-count" to-match="1 item left" />
</it>
</test>

<it will="remove a todo">
<test name="remove a todo">
<expect text-of=".todo-list" to-be-truthy />
<trigger selector=".todo-list li .destroy" event="click" />
<expect text-of=".todo-list" to-be-falsy />
</it>
</test>

<it will="add then complete a todo">
<test name="add then complete a todo">
<set selector=".new-todo" value="Another" />
<trigger selector=".new-todo" event="keyup.enter" />
<trigger selector="input.toggle" event="click" />
<expect text-of=".todo.completed" to-match="Another" />
</it>
</test>

<it will="clicking `active` hides list">
<test name="clicking `active` hides list">
<expect text-of=".todo-list" to-be-truthy />
<trigger selector='a[href="#/active"]' event="click" />
<expect text-of=".todo-list" to-be-falsy />
</it>
</test>

<it will="clicking `completed` shows item we added + completed">
<test name="clicking `completed` shows item we added + completed">
<trigger selector='a[href="#/completed"]' event="click" />
<expect text-of=".todo-list" to-equal="Another" />
</it>
</test>

<it will="clear the list when `clear completed` is clicked">
<test name="clear the list when `clear completed` is clicked">
<expect text-of=".todo-list" to-equal="Another" />
<trigger selector=".clear-completed" event="click" />
<expect text-of=".todo-list" to-be-falsy />
</it>
</test>

<it will="mark all items completed when `toggle all` clicked">
<test name="mark all items completed when `toggle all` clicked">
<!-- Add a todo -->
<set selector=".new-todo" value="Another" />
<trigger selector=".new-todo" event="keyup.enter" />
Expand All @@ -62,5 +62,5 @@
<!-- Confirm the active list is empty -->
<trigger selector='a[href="#/active"]' event="click" />
<expect text-of=".todo-list" to-be-falsy />
</it>
</test>
</tests>
16 changes: 8 additions & 8 deletions generate.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// Loop through parsed xml and write out js
let generateIt = require('./generateIt');
let generateTest = require('./generateTest');

let head = `
/* THIS FILE IS AUTO-GENERATED, EDITS WILL BE OVERWRITTEN */
Expand All @@ -21,20 +21,20 @@ function generate(componentPath, parsed, script, localVue) {

lines.push(`describe('${componentPath}', () => {\n`);

let its;
let tests;

// parsed.tests.it might be either an object (single child) or array (multiple)
// parsed.tests.test might be either an object (single child) or array (multiple)
// if single child, turn into array then foreach like usual
if (Array.isArray(parsed.tests.it)) {
its = parsed.tests.it;
if (Array.isArray(parsed.tests.test)) {
tests = parsed.tests.test;
}
else {
its = [parsed.tests.it];
tests = [parsed.tests.test];
}

// loop through each 'its' to generate the case
its.forEach(it => {
lines = lines.concat(generateIt.generateIt(it));
tests.forEach(test => {
lines = lines.concat(generateTest.generateTest(test));
});

lines.push('});');
Expand Down
16 changes: 8 additions & 8 deletions generateIt.js → generateTest.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,30 @@ let { generateExpect } = require('./generateExpect');
let { generateTrigger } = require('./generateTrigger');
let { generateSet } = require('./generateSet');

function generateIt(it) {
function generateTest(test) {
let lines = [];

lines.push(` it('will ${it.$.will}', async () => {`);
lines.push(` it('${test.$.name}', async () => {`);

// TODO: move this out one level?
lines.push(` let options = { localVue, sync: false }`)
lines.push(` if (typeof store !== 'undefined') { options.store = store; }`);
lines.push(` let wrapper = mount(Component, options);`);

// v-bind:props="props" = wrapper.setProps(props)
let propsBinding = it.$['v-bind:props'];
let propsBinding = test.$['v-bind:props'];
if (propsBinding) {
lines.push(` wrapper.setProps(context.${propsBinding});`);
}

// v-bind:data="data" = wrapper.setData(data)
let dataBinding = it.$['v-bind:data'];
let dataBinding = test.$['v-bind:data'];
if (dataBinding) {
lines.push(` wrapper.setData(context.${dataBinding});`);
}

// loop through each child of it.$$ and build either an expect line or a trigger line
it.$$.forEach(child => {
// loop through each child of test.$$ and build either an expect line or a trigger line
test.$$.forEach(child => {
lines = lines.concat(generateLines(child));
});

Expand All @@ -52,7 +52,7 @@ function generateLines(child) {
break;
}

// For some reason, the first tag shows up in it.$$ and
// For some reason, the first tag shows up in test.$$ and
// the rest of the tags show up on the first child's $$
// on tags with bare attributes like 'to-be-truthy'
// This really seems like it could be a parser bug, but
Expand All @@ -69,5 +69,5 @@ function generateLines(child) {
}

module.exports = {
generateIt
generateTest
}

0 comments on commit 74fd0aa

Please sign in to comment.