Skip to content
This repository was archived by the owner on Sep 3, 2024. It is now read-only.

[Doc EN]: development-tools.md review. #263

Merged
merged 1 commit into from
Sep 28, 2017
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 11 additions & 7 deletions en/guide/development-tools.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,15 @@ description: Nuxt.js helps you to make your web development enjoyable.

## End-to-End Testing

[Ava](https://github.com/avajs/ava) is a powerful JavaScript testing framework, mixed with [jsdom](https://github.com/tmpvar/jsdom), we can use them to do end-to-end testing easily.
[AVA](https://github.com/avajs/ava) is a powerful JavaScript testing framework, mixed with [jsdom](https://github.com/tmpvar/jsdom), we can use them to do end-to-end testing easily.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AVA is in capitalize as mentioned in official documentation
— Source: https://github.com/avajs/ava


Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Line return like Markdown convention.

First, we need to add AVA and jsdom as development dependencies:

First, we need to add ava and jsdom as development dependencies:
```bash
npm install --save-dev ava jsdom
```

And add a test script to our `package.json` and configure ava to compile files that we import into our tests.
Then add a test script to our `package.json` and configure AVA to compile files that we import into our tests.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AVA in capitalize and « And » to « Then » to avoid repetition with « and » after package.


```javascript
"scripts": {
Expand All @@ -33,11 +34,13 @@ And add a test script to our `package.json` and configure ava to compile files t
```

We are going to write our tests in the `test` folder:

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Line return like Markdown convention.

```bash
mkdir test
```

Let's say we have a page in `pages/index.vue`:

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Line return like Markdown convention.

```html
<template>
<h1 class="red">Hello {{ name }}!</h1>
Expand All @@ -58,7 +61,7 @@ export default {
</style>
```

When we launch our app with `npm run dev` and open [http://localhost:3000](http://localhost:3000), we can see our red `Hello world!` title.
When we launch our app with `npm run dev` and open http://localhost:3000, we can see our red `Hello world!` title.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid link for all localhost path because in most cases that conduces to 404 page.


We add our test file `test/index.test.js`:

Expand All @@ -67,7 +70,7 @@ import test from 'ava'
import { Nuxt, Builder } from 'nuxt'
import { resolve } from 'path'

// We keep a reference to nuxt so we can close
// We keep a reference to Nuxt so we can close
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Product name

// the server at the end of the test
let nuxt = null

Expand All @@ -90,7 +93,7 @@ test('Route / exits and render HTML', async t => {
t.true(html.includes('<h1 class="red">Hello world!</h1>'))
})

// Example of testing via dom checking
// Example of testing via DOM checking
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The DOM is in capitalize.
— Source: https://www.w3.org/DOM/

test('Route / exits and render HTML with CSS applied', async t => {
const window = await nuxt.renderAndGetWindow('http://localhost:4000/')
const element = window.document.querySelector('.red')
Expand All @@ -100,13 +103,14 @@ test('Route / exits and render HTML with CSS applied', async t => {
t.is(window.getComputedStyle(element).color, 'red')
})

// Close the nuxt server
// Close the Nuxt server
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Product name.

test.after('Closing server', t => {
nuxt.close()
})
```

We can now launch our tests:

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Line return like Markdown convention.

```bash
npm test
```
Expand Down