-
Notifications
You must be signed in to change notification settings - Fork 928
[Doc EN]: development-tools.md
review.
#263
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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. | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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": { | ||
|
@@ -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: | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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`: | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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> | ||
|
@@ -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. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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`: | ||
|
||
|
@@ -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 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 | ||
|
||
|
@@ -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 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The DOM is in capitalize. |
||
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') | ||
|
@@ -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 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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: | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Line return like Markdown convention. |
||
```bash | ||
npm test | ||
``` | ||
|
There was a problem hiding this comment.
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