chore(i18n,curriculum): processed translations (#43361)
This commit is contained in:
@@ -8,27 +8,25 @@ dashedName: understanding-the-differences-between-the-freecodecamp-and-browser-c
|
||||
|
||||
# --description--
|
||||
|
||||
你可能已经注意到一些 freeCodeCamp JavaScript 的挑战有自己的控制台。 这些控制台的行为与上一次挑战中使用的浏览器控制台略有不同。
|
||||
你可能已经注意到一些 freeCodeCamp 的挑战有自己的控制台。 这个控制台的行为与浏览器控制台有些不同。
|
||||
|
||||
以下挑战旨在强调 freeCodeCamp 控制台与浏览器控制台之间的一些差异。
|
||||
|
||||
当在浏览器中加载并运行 JavaScript 文件时,`console.log()` 语句会在控制台中按照调用的次数准确地打印出要求的内容。
|
||||
|
||||
在编辑器检测到脚本中的更改之后,以及测试期间,freeCodeCamp 控制台将打印 `console.log()` 语句。
|
||||
|
||||
在运行测试之前,将清除 freeCodeCamp 控制台,为避免破坏,仅在第一次测试期间打印日志(请参见下面的注释)。
|
||||
|
||||
如果你想看到每次测试的日志,运行测试,并打开浏览器控制台。 如果你喜欢使用浏览器控制台,想要它模仿 freeCodeCamp 控制台,请在其他 `console` 调用前加上 `console.clear()`,以清除浏览器控制台。
|
||||
|
||||
**注意:** 每次调用函数时,函数内的 `console.log` 都会被打印到 freeCodeCamp 控制台。 这样可以帮助在测试期间调试函数。
|
||||
有许多方法可以与 `console` 一起使用来输出消息。 `log`、`warn` 和 `clear` 就是几个例子。 freeCodeCamp 控制台只会输出 `log` 消息,而浏览器控制台会输出所有消息。 当你对你的代码进行修改时,它将自动运行并显示日志。 每次代码运行时,freeCodeCamp 控制台都会被清除。
|
||||
|
||||
# --instructions--
|
||||
|
||||
首先,使用 `console.log` 打印 `output` 变量。 然后使用 `console.clear` 清除浏览器控制台。
|
||||
首先,打开浏览器控制台,以便查看日志。 要做到这一点,在大多数浏览器上,你可以右击顶部的 freeCodeCamp 导航栏,并点击 `inspect`。 然后在打开的窗口中找到 `console` 选项卡。
|
||||
|
||||
之后,使用 `console.log` 记录 `output` 变量。 查看这两个控制台,可以看到日志。 最后,在你的日志后面使用 `console.clear` 清除浏览器控制台。 查看两个控制台的差异。
|
||||
|
||||
# --hints--
|
||||
|
||||
应该使用 `console.clear()` 清除浏览器控制台。
|
||||
你应该使用 `console.log()` 来打印 `output` 变量。
|
||||
|
||||
```js
|
||||
assert(__helpers.removeWhiteSpace(code).match(/console\.log\(output\)/));
|
||||
```
|
||||
|
||||
你应该使用 `console.clear()` 来清除浏览器控制台。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -38,10 +36,14 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
应该使用 `console.log()` 打印 `output` 变量。
|
||||
你应该在你的日志之后清除控制台。
|
||||
|
||||
```js
|
||||
assert(__helpers.removeWhiteSpace(code).match(/console\.log\(output\)/));
|
||||
assert(
|
||||
__helpers
|
||||
.removeWhiteSpace(code)
|
||||
.match(/console\.log\(output\)[\s\S]*console.clear\(\)/)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@@ -49,25 +51,15 @@ assert(__helpers.removeWhiteSpace(code).match(/console\.log\(output\)/));
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
// Open your browser console.
|
||||
let output = "Get this to log once in the freeCodeCamp console and twice in the browser console";
|
||||
// Use console.log() to print the output variable.
|
||||
let output = "Get this to show once in the freeCodeCamp console and not at all in the browser console";
|
||||
|
||||
// Run the tests to see the difference between the two consoles.
|
||||
|
||||
// Now, add console.clear() before your console.log() to clear the browser console, and pass the tests.
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
// Open your browser console.
|
||||
let output = "Get this to log once in the freeCodeCamp console and twice in the browser console";
|
||||
// Use console.log() to print the output variable.
|
||||
console.clear();
|
||||
let output = "Get this to show once in the freeCodeCamp console and not at all in the browser console";
|
||||
|
||||
console.log(output);
|
||||
|
||||
// Run the tests to see the difference between the two consoles.
|
||||
|
||||
// Now, add console.clear() before your console.log() to clear the browser console, and pass the tests.
|
||||
console.clear();
|
||||
```
|
||||
|
@@ -10,29 +10,37 @@ dashedName: run-functional-tests-on-an-api-response-using-chai-http-iii---put-me
|
||||
|
||||
请注意,本项目在[这个 Replit 项目](https://replit.com/github/freeCodeCamp/boilerplate-mochachai)的基础上进行开发。你也可以从 [GitHub](https://repl.it/github/freeCodeCamp/boilerplate-mochachai) 上克隆。
|
||||
|
||||
接下来,我们将了解如何使用请求的 payload(body)发送数据。 我们需要测试一个 PUT 请求, `'/travellers'` 接收如下的 JSON 对象:
|
||||
当你测试一个 `PUT` 请求时,你经常会随同它一起发送数据。 你在 `PUT` 请求中包含的数据被称为请求的主体。
|
||||
|
||||
要将 `PUT` 请求和 JSON 对象发送到 `'/travellers'` 端点,你可以使用 `chai-http` 插件的 `put` 和 `send` 方法:
|
||||
|
||||
```js
|
||||
chai
|
||||
.request(server)
|
||||
.put('/travellers')
|
||||
.send({
|
||||
"surname": [last name of a traveller of the past]
|
||||
})
|
||||
...
|
||||
```
|
||||
|
||||
并且路由响应如下:
|
||||
|
||||
```json
|
||||
{
|
||||
"surname": [last name of a traveller of the past]
|
||||
"name": [first name],
|
||||
"surname": [last name],
|
||||
"dates": [birth - death years]
|
||||
}
|
||||
```
|
||||
|
||||
路由响应如下:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": [first name], "surname": [last name], "dates": [birth - death years]
|
||||
}
|
||||
```
|
||||
|
||||
更多细节请查看服务器代码。
|
||||
请参阅服务器代码以了解对 `'/travellers'` 端点的不同响应。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `tests/2_functional-tests.js` 中,修改 `'send {surname: "Colombo"}'` 测试(`// #3`):
|
||||
在 `tests/2_functional-tests.js` 中,更改 `'Send {surname: "Colombo"}'` 测试(`// #3`),并使用 `put` 和 `send` 方法来测试 `'/travellers'` 端点。
|
||||
|
||||
发送以下 JSON 响应作为有效载荷:
|
||||
在你的 PUT 请求中发送以下 JSON 对象。
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -40,14 +48,14 @@ dashedName: run-functional-tests-on-an-api-response-using-chai-http-iii---put-me
|
||||
}
|
||||
```
|
||||
|
||||
在 `request.end` 返回中检查以下情况:
|
||||
在 `request.end` 的返回中检查以下情况:
|
||||
|
||||
1. `status`
|
||||
2. `type`
|
||||
3. `body.name`
|
||||
4. `body.surname`
|
||||
1. `status` 应该是 `200`
|
||||
2. `type` 应该是 `application/json`
|
||||
3. `body.name` 应该是 `Cristoforo`
|
||||
4. `body.surname` 应该是 `Colombo`
|
||||
|
||||
请按照以上顺序书写断言,顺序错误会影响系统判定。 完成后,请务必移除 `assert.fail()`。
|
||||
请按照以上顺序书写断言,顺序错误会影响系统判定。 此外,请确保在完成后删除 `assert.fail()`。
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -65,7 +73,7 @@ dashedName: run-functional-tests-on-an-api-response-using-chai-http-iii---put-me
|
||||
);
|
||||
```
|
||||
|
||||
应测试 “res.status” 是否为 200。
|
||||
应该测试 `res.status` 为 200。
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -81,7 +89,7 @@ dashedName: run-functional-tests-on-an-api-response-using-chai-http-iii---put-me
|
||||
);
|
||||
```
|
||||
|
||||
需要测试 “res.type” 是否为 “application/json”。
|
||||
应该测试 `res.type` 是否为 `'application/json'`。
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -97,7 +105,7 @@ dashedName: run-functional-tests-on-an-api-response-using-chai-http-iii---put-me
|
||||
);
|
||||
```
|
||||
|
||||
需要测试 “res.body.name” 是否为 “Cristoforo”。
|
||||
你应该测试 `res.body.name` 是否为 `'Cristoforo'`。
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -113,7 +121,7 @@ dashedName: run-functional-tests-on-an-api-response-using-chai-http-iii---put-me
|
||||
);
|
||||
```
|
||||
|
||||
需要测试 “res.body.surname” 是否为 “Colombo”。
|
||||
你应该测试 `res.body.surname` 是否为 `'Colombo'`。
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
@@ -8,15 +8,17 @@ dashedName: run-functional-tests-on-an-api-response-using-chai-http-iv---put-met
|
||||
|
||||
# --description--
|
||||
|
||||
请注意,本项目在[这个 Replit 项目](https://replit.com/github/freeCodeCamp/boilerplate-mochachai)的基础上进行开发。你也可以从 [GitHub](https://repl.it/github/freeCodeCamp/boilerplate-mochachai) 上克隆。 这个练习与上一个类似, 我们详细看看。
|
||||
请注意,本项目在 [这个 Replit 项目](https://replit.com/github/freeCodeCamp/boilerplate-mochachai) 的基础上进行开发。你也可以从 [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/) 上克隆。
|
||||
|
||||
你已经看到了它是如何完成的,现在你需要从零开始搭建。
|
||||
这个练习与上一个类似。
|
||||
|
||||
现在你知道如何测试一个 `PUT` 请求了,轮到你从头开始做了。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `tests/2_functional-tests.js` 中,修改 `'send {surname: "da Verrazzano"}'` 测试(`// #4`)。
|
||||
在 `tests/2_functional-tests.js` 中,更改 `'Send {surname: "da Verrazzano"}'` 测试(`// #4`)并使用 `put` 和 `send` 方法来测试 `'/travellers'` 端点。
|
||||
|
||||
发送以下 JSON 响应作为有效载荷到 `/travellers` 路径:
|
||||
在你的 PUT 请求中发送以下 JSON 对象。
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -24,18 +26,18 @@ dashedName: run-functional-tests-on-an-api-response-using-chai-http-iv---put-met
|
||||
}
|
||||
```
|
||||
|
||||
在 `request.end` 返回中检查以下情况:
|
||||
在 `request.end` 的返回中检查以下情况:
|
||||
|
||||
1. `status`
|
||||
2. `type`
|
||||
3. `body.name`
|
||||
4. `body.surname`
|
||||
1. `status` 应该是 `200`
|
||||
2. `type` 应该是 `application/json`
|
||||
3. `body.name` 应该是 `Giovanni`
|
||||
4. `body.surname` 应该是 `da Verrazzano`
|
||||
|
||||
请按照以上顺序书写断言,顺序错误会影响系统判定。 完成后请务必删除 `assert.fail()`。
|
||||
请按照以上顺序书写断言,顺序错误会影响系统判定。 此外,请确保在完成后删除 `assert.fail()`。
|
||||
|
||||
# --hints--
|
||||
|
||||
需要通过所有测试。
|
||||
应通过所有测试。
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -49,7 +51,7 @@ dashedName: run-functional-tests-on-an-api-response-using-chai-http-iv---put-met
|
||||
);
|
||||
```
|
||||
|
||||
需要测试 “res.status” 是否为 200。
|
||||
应该测试 `res.status` 为 200。
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -65,7 +67,7 @@ dashedName: run-functional-tests-on-an-api-response-using-chai-http-iv---put-met
|
||||
);
|
||||
```
|
||||
|
||||
需要测试 “res.type” 是否为 “application/json”。
|
||||
应该测试 `res.type` 是否为 `'application/json'`。
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -81,7 +83,7 @@ dashedName: run-functional-tests-on-an-api-response-using-chai-http-iv---put-met
|
||||
);
|
||||
```
|
||||
|
||||
需要测试 “res.body.name” 为 “Giovanni”。
|
||||
应该测试 `res.body.name` 是否为 `'Giovanni'`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -97,7 +99,7 @@ dashedName: run-functional-tests-on-an-api-response-using-chai-http-iv---put-met
|
||||
);
|
||||
```
|
||||
|
||||
需要测试 “res.body.surname” 是否为 “da Verrazzano”。
|
||||
应该测试 `res.body.surname` 是否为 `'da Verrazzano'`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
@@ -12,9 +12,9 @@ dashedName: run-functional-tests-on-api-endpoints-using-chai-http-ii
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `tests/2_functional-tests.js` 中,修改 `'Test GET /hello with your name'` 测试(`// #2`),对 `status` 和 `text` 断言。
|
||||
在 `tests/2_functional-tests.js` 中,修改 `'Test GET /hello with your name'` 测试(`// #2`),对响应的 `status` 和 `text` 使用断言来通过测试。
|
||||
|
||||
在查询中发送 name,将 `?name=<your_name>` 添加到路由。 端点响应 `'hello <your_name>'`。
|
||||
通过将 `?name=<your_name>` 附加到路由,将你的姓名作为 URL 查询发送。 端点响应 `'hello <your_name>'`。
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -32,7 +32,7 @@ dashedName: run-functional-tests-on-api-endpoints-using-chai-http-ii
|
||||
);
|
||||
```
|
||||
|
||||
应测试 “res.status” 是否为 200。
|
||||
应该测试 `res.status` 为 200
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -48,7 +48,7 @@ dashedName: run-functional-tests-on-api-endpoints-using-chai-http-ii
|
||||
);
|
||||
```
|
||||
|
||||
应测试 “res.text“ 是否为 ”hello Guest“。
|
||||
应该测试 `res.text` == `'hello <your_name>'`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
@@ -10,37 +10,36 @@ dashedName: run-functional-tests-on-api-endpoints-using-chai-http
|
||||
|
||||
请注意,本项目在[这个 Replit 项目](https://replit.com/github/freeCodeCamp/boilerplate-mochachai)的基础上进行开发。你也可以从 [GitHub](https://repl.it/github/freeCodeCamp/boilerplate-mochachai) 上克隆。
|
||||
|
||||
Mocha 允许测试异步操作。 有一个差异, 你能发现它吗?
|
||||
Mocha 允许你使用名为 `chai-http` 的插件测试异步操作,例如调用 API 端点。
|
||||
|
||||
我们可以使用一个叫作 `chai-http` 的插件测试 API 端点。 让我们看看它是如何工作的。 请记住,API 调用是异步的。
|
||||
|
||||
以下是使用 `chai-http` 测试 `'GET /hello?name=[name] => "hello [name]"'` 套件的例子。 测试通过 `GET` 请求在 url 查询字符串 `?name=John` 中发送一个名称字符串给 `server`。 在 `end` 方法的回调函数中,接收包含 `status` 属性的响应对象(`res`)。 第一个 `assert.equal` 检查状态是否为 `200`。 第二个 `assert.equal` 检查响应字符串 `res.text` 是否为 `"hello John"`。
|
||||
以下是使用 `chai-http` 测试名为 `'GET /hello?name=[name] => "hello [name]"'` 的套件的示例:
|
||||
|
||||
```js
|
||||
suite('GET /hello?name=[name] => "hello [name]"', function () {
|
||||
test("?name=John", function (done) {
|
||||
test('?name=John', function (done) {
|
||||
chai
|
||||
.request(server)
|
||||
.get("/hello?name=John")
|
||||
.get('/hello?name=John')
|
||||
.end(function (err, res) {
|
||||
assert.equal(res.status, 200, "response status should be 200");
|
||||
assert.equal(
|
||||
res.text,
|
||||
"hello John",
|
||||
'response should be "hello John"'
|
||||
);
|
||||
assert.equal(res.status, 200, 'Response status should be 200');
|
||||
assert.equal(res.text, 'hello John', 'Response should be "hello John"');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
请注意测试的回调函数中的 `done` 参数。 在没有传入参数的情况下调用它,是成功完成异步任务所必需的。
|
||||
该测试向服务器发送一个 `GET` 请求,并将名称作为 URL 查询字符串(`?name=John`)。 在`end` 方法的回调函数中,接收到响应对象(`res`)并包含 `status` 属性。
|
||||
|
||||
第一个 `assert.equal` 检查状态是否为 `200`。 第二个 `assert.equal` 检查响应字符串(`res.text`)是否为 `"hello John"`。
|
||||
|
||||
同时,请注意测试的回调函数中的 `done` 参数。 在测试结束时,调用它且不带参数,是发出异步操作完成所必需的信号。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `tests/2_functional-tests.js` 中,修改 `'Test GET /hello with no name'` 测试(`// #1`),对 `status` 和 `text` 使用断言。 不要修改传给断言的参数。
|
||||
在 `tests/2_functional-tests.js` 中,修改 `'Test GET /hello with no name'` 测试(`// #1`),对响应的 `status` 和 `text` 使用断言来通过测试。 不要改变传递给断言的参数。
|
||||
|
||||
不要在 query 中传入 name,端点将会返回 `hello Guest`。
|
||||
不应该有任何 URL 查询。 如果没有名称 URL 查询,端点将使用 `hello Guest` 进行响应。
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -58,7 +57,7 @@ suite('GET /hello?name=[name] => "hello [name]"', function () {
|
||||
);
|
||||
```
|
||||
|
||||
应测试 “res.status” 是否为 200。
|
||||
应该测试 `res.status` 为 200。
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -74,7 +73,7 @@ suite('GET /hello?name=[name] => "hello [name]"', function () {
|
||||
);
|
||||
```
|
||||
|
||||
应测试 “res.text“ 是否为 ”hello Guest“。
|
||||
应该测试 `res.text` == `'hello Guest'`。
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
@@ -12,17 +12,17 @@ dashedName: run-functional-tests-using-a-headless-browser-ii
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `tests/2_functional-tests.js` 中,`'submit "surname" : "Vespucci" - write your e2e test...'` 测试(`// #6`),自动化填写和提交表单:
|
||||
在 `tests/2_functional-tests.js` 中,在 `'Submit the surname "Vespucci" in the HTML form'` 测试(`// #5`),自动执行以下操作:
|
||||
|
||||
1. 在表单中填写 `Vespucci` 的 `surname`。
|
||||
2. 点击 `'submit'` 按钮提交表单
|
||||
1. 在表格中填写姓氏 `Vespucci`。
|
||||
2. 点击提交按钮
|
||||
|
||||
在回调中:
|
||||
在 `pressButton` 回调中:
|
||||
|
||||
1. 断言状态是正常的 `200`
|
||||
2. 断言元素 `span#name` 中的文本是 `'Amerigo'`
|
||||
3. 断言元素 `span#surname` 元素中的文本是 `'Vespucci'`
|
||||
4. 断言有 `span#dates` 元素,它们的计数是 `1`
|
||||
1. 断言状态是正常的 `200`。
|
||||
2. 断言元素 `span#name` 中的文本是 `'Amerigo'`。
|
||||
3. 断言元素 `span#surname` 元素中的文本是 `'Vespucci'`。
|
||||
4. 断言有 `span#dates` 元素,它们的计数是 `1`。
|
||||
|
||||
不要忘记删除 `assert.fail()` 调用。
|
||||
|
||||
@@ -32,7 +32,7 @@ dashedName: run-functional-tests-using-a-headless-browser-ii
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=6').then(
|
||||
(data) => {
|
||||
assert.equal(data.state, 'passed');
|
||||
},
|
||||
@@ -46,7 +46,7 @@ dashedName: run-functional-tests-using-a-headless-browser-ii
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=6').then(
|
||||
(data) => {
|
||||
assert.equal(data.assertions[0].method, 'browser.success');
|
||||
},
|
||||
@@ -56,11 +56,11 @@ dashedName: run-functional-tests-using-a-headless-browser-ii
|
||||
);
|
||||
```
|
||||
|
||||
应断言元素 “span#surname” 中的文本为 “Vespucci”。
|
||||
应断言元素 `span#name` 中的文本是 `'Amerigo'`。
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=6').then(
|
||||
(data) => {
|
||||
assert.equal(data.assertions[1].method, 'browser.text');
|
||||
assert.match(data.assertions[1].args[0], /('|")span#name\1/);
|
||||
@@ -72,11 +72,11 @@ dashedName: run-functional-tests-using-a-headless-browser-ii
|
||||
);
|
||||
```
|
||||
|
||||
应断言元素 “span#surname” 中的文本为 “Vespucci”。
|
||||
应断言元素 `span#surname` 中的文本是 `'Vespucci'`。
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=6').then(
|
||||
(data) => {
|
||||
assert.equal(data.assertions[2].method, 'browser.text');
|
||||
assert.match(data.assertions[2].args[0], /('|")span#surname\1/);
|
||||
@@ -88,11 +88,11 @@ dashedName: run-functional-tests-using-a-headless-browser-ii
|
||||
);
|
||||
```
|
||||
|
||||
应该断言元素 “span#dates” 存在,且它的值为 1。
|
||||
应该断言元素 `span#dates` 存在,且它的值为 1。
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=6').then(
|
||||
(data) => {
|
||||
assert.equal(data.assertions[3].method, 'browser.elements');
|
||||
assert.match(data.assertions[3].args[0], /('|")span#dates\1/);
|
||||
|
@@ -10,23 +10,31 @@ dashedName: run-functional-tests-using-a-headless-browser
|
||||
|
||||
请注意,本项目在[这个 Replit 项目](https://replit.com/github/freeCodeCamp/boilerplate-mochachai)的基础上进行开发。你也可以从 [GitHub](https://repl.it/github/freeCodeCamp/boilerplate-mochachai) 上克隆。
|
||||
|
||||
在 HTML 主视图中有一个输入表格。 它发送数据到 `PUT /travellers` 端点,我们在上面的 Ajax 请求中使用。 当请求成功完成时,客户端代码会给 DOM 增加一个包含调用返回信息的 `<div>`。 下面的例子展示了如何使用这个表格:
|
||||
在页面上有一个输入表单。 它将数据作为 AJAX 请求发送到 `PUT /travellers` 端点。
|
||||
|
||||
当请求成功完成后,客户端代码将一个包含响应信息的 `<div>` 附加到 DOM 中。
|
||||
|
||||
下面是一个如何使用 Zombie.js 与表单互动的例子。
|
||||
|
||||
```js
|
||||
test('#test - submit the input "surname" : "Polo"', function (done) {
|
||||
browser.fill('surname', 'Polo').pressButton('submit', function () {
|
||||
browser.assert.success();
|
||||
browser.assert.text('span#name', 'Marco');
|
||||
browser.assert.text('span#surname', 'Polo');
|
||||
browser.assert.elements('span#dates', 1);
|
||||
done();
|
||||
test('Submit the surname "Polo" in the HTML form', function (done) {
|
||||
browser.fill('surname', 'Polo').then(() => {
|
||||
browser.pressButton('submit', () => {
|
||||
browser.assert.success();
|
||||
browser.assert.text('span#name', 'Marco');
|
||||
browser.assert.text('span#surname', 'Polo');
|
||||
browser.assert.elements('span#dates', 1);
|
||||
done();
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
首先, `browser` 对象的 `fill` 方法在表格的 `surname` 字段中填入值 `'Polo'`。 紧接着,`pressButton` 方法调用表单的 `submit` 事件监听器。 `pressButton` 方法是异步的。
|
||||
首先, `browser` 对象的 `fill` 方法在表格的 `surname` 字段中填入值 `'Polo'`。 `fill` 返回一个 promise,所以 `then` 被链接起来。
|
||||
|
||||
收到 AJAX 请求的响应之后,会有几项断言确认:
|
||||
在 `then` 回调中,`browser` 对象的 `pressButton` 方法用于调用表单的 `submit` 的事件侦听器。 `pressButton` 方法是异步的。
|
||||
|
||||
然后,一旦收到来自 AJAX 请求的响应,就会做出一些断言来确认:
|
||||
|
||||
1. 响应状态是 `200`
|
||||
2. `<span id='name'></span>` 元素的文本是 `'Marco'`
|
||||
@@ -37,17 +45,17 @@ test('#test - submit the input "surname" : "Polo"', function (done) {
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `tests/2_functional-tests.js` 中,`'submit "surname" : "Colombo" - write your e2e test...'` 测试(`// #5`),自动化填入和提交表单:
|
||||
在 `tests/2_functional-tests.js` 中,在 `'Submit the surname "Colombo" in the HTML form'` 测试(`// #5`),自动执行以下操作:
|
||||
|
||||
1. 填写表单
|
||||
2. 点击 `'submit'` 按钮提交表单
|
||||
1. 在表格中填写姓氏 `Colombo`。
|
||||
2. 点击提交按钮
|
||||
|
||||
在回调中:
|
||||
在 `pressButton` 回调中:
|
||||
|
||||
1. 断言状态是正常的 `200`
|
||||
2. 断言元素 `span#name` 中的文本是 `'Cristoforo'`
|
||||
3. 断言元素 `span#surname` 元素中的文本是 `'Colombo'`
|
||||
4. 断言有 `span#dates` 元素,它们的计数是 `1`
|
||||
1. 断言状态是正常的 `200`。
|
||||
2. 断言元素 `span#name` 中的文本是 `'Cristoforo'`。
|
||||
3. 断言元素 `span#surname` 中的文本是 `'Colombo'`。
|
||||
4. 断言有 `span#dates` 元素,它们的计数是 `1`。
|
||||
|
||||
不要忘记删除 `assert.fail()` 调用。
|
||||
|
||||
@@ -57,7 +65,7 @@ test('#test - submit the input "surname" : "Polo"', function (done) {
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=4').then(
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
|
||||
(data) => {
|
||||
assert.equal(data.state, 'passed');
|
||||
},
|
||||
@@ -67,11 +75,11 @@ test('#test - submit the input "surname" : "Polo"', function (done) {
|
||||
);
|
||||
```
|
||||
|
||||
应该断言无头浏览器请求成功。
|
||||
应断言无头浏览器成功执行请求。
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=4').then(
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
|
||||
(data) => {
|
||||
assert.equal(data.assertions[0].method, 'browser.success');
|
||||
},
|
||||
@@ -81,11 +89,11 @@ test('#test - submit the input "surname" : "Polo"', function (done) {
|
||||
);
|
||||
```
|
||||
|
||||
应该断言元素 “span#name” 中的文字为 “Cristoforo”。
|
||||
应断言元素 `span#name` 中的文本是 `'Cristoforo'`。
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=4').then(
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
|
||||
(data) => {
|
||||
assert.equal(data.assertions[1].method, 'browser.text');
|
||||
assert.match(data.assertions[1].args[0], /('|")span#name\1/);
|
||||
@@ -97,11 +105,11 @@ test('#test - submit the input "surname" : "Polo"', function (done) {
|
||||
);
|
||||
```
|
||||
|
||||
应该断言元素 “span#surname” 中的文字为 “Colombo”。
|
||||
应断言元素 `span#surname` 中的文本是 `'Colombo'`。
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=4').then(
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
|
||||
(data) => {
|
||||
assert.equal(data.assertions[2].method, 'browser.text');
|
||||
assert.match(data.assertions[2].args[0], /('|")span#surname\1/);
|
||||
@@ -113,11 +121,11 @@ test('#test - submit the input "surname" : "Polo"', function (done) {
|
||||
);
|
||||
```
|
||||
|
||||
应该断言元素 “span#dates” 存在,且它的值为 1。
|
||||
应该断言元素 `span#dates` 存在,且它的值为 1。
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=4').then(
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
|
||||
(data) => {
|
||||
assert.equal(data.assertions[3].method, 'browser.elements');
|
||||
assert.match(data.assertions[3].args[0], /('|")span#dates\1/);
|
||||
|
@@ -9,37 +9,35 @@ dashedName: simulate-actions-using-a-headless-browser
|
||||
|
||||
请注意,本项目在[这个 Replit 项目](https://replit.com/github/freeCodeCamp/boilerplate-mochachai)的基础上进行开发。你也可以从 [GitHub](https://repl.it/github/freeCodeCamp/boilerplate-mochachai) 上克隆。
|
||||
|
||||
在接下来的挑战中,我们将使用名为 “Headless Browser(无头浏览器)” 的设备模拟人与页面的交互。
|
||||
在接下来的挑战中,你将使用无头浏览器模拟人类与页面的交互。
|
||||
|
||||
无头浏览器是没有图形用户界面的 Web 浏览器。 这种工具对于测试网页特别有用,因为它能够以与浏览器相同的方式呈现和理解 HTML、CSS 和 JavaScript。
|
||||
无头浏览器是没有 GUI 的 Web 浏览器。 它们能够以与常规浏览器相同的方式呈现和解释 HTML、CSS 和 JavaScript,这使得它们对于测试网页特别有用。
|
||||
|
||||
针对这些挑战,我们使用 Zombie.JS。 它是一个轻量级浏览器,完全基于 JS,而不需要额外的二进制文件来安装。 这个特性使我们可以在 Replit 等环境中使用它。 还有许多其他(更强大的)选择。
|
||||
在下面的挑战中,你将使用Zombie.js,它是一个轻量级的无头浏览器,不依赖额外的二进制文件来安装。 这一特点使其可以在 Replit 这样的有限环境中使用。 但是还有许多其他更强大的无头浏览器选项。
|
||||
|
||||
Mocha 允许你在实际测试之前准备一些代码运行的基础。 这可能有助于例如在数据库中创建项目,用于连续测试。
|
||||
Mocha 允许你在任何实际测试运行之前运行一些代码。 这对做一些事情很有用,比如向数据库添加条目,这些条目将在其余测试中使用。
|
||||
|
||||
使用无头浏览器,在进行实际测试之前,我们需要**访问**我们将要检查的页面。 `suiteSetup` “hook” 仅在套件启动时执行。 其他不同的钩子类型可以在每次测试之前、每次测试之后或者在套件的末尾执行。 更多信息请参阅 Mocha 文档。
|
||||
使用无头浏览器,在运行测试之前,你需要 **访问** 你要测试的页面。
|
||||
|
||||
`suiteSetup` 钩子仅在测试套件开始时执行一次。
|
||||
|
||||
还有其他几种钩子类型,可以在每次测试前、每次测试后或测试套件结束时执行代码。 有关更多信息,请参阅 Mocha 文档。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `tests/2_functional-tests.js`中,紧接着 `Browser` 声明之后,将你的项目 URL 添加到变量的 `site` 属性:
|
||||
在 `tests/2_functional-tests.js` 中,紧跟在 `Browser` 声明之后,将你的项目 URL 添加到变量的 `site` 属性:
|
||||
|
||||
```js
|
||||
Browser.site = 'https://sincere-cone.gomix.me'; // Your URL here
|
||||
Browser.site = 'https://boilerplate-mochachai.your-username.repl.co'; // Your URL here
|
||||
```
|
||||
|
||||
如果你在本地环境中测试,则替换上面的代码为:
|
||||
|
||||
```js
|
||||
Browser.localhost('example.com', process.env.PORT || 3000);
|
||||
```
|
||||
|
||||
在 `tests/2_functional-tests.js` 中,在 `'Functional Tests with Zombie.js'` 套件的底部,使用以下代码实例化一个新的 `Browser` 对象:
|
||||
然后在 `'Functional Tests with Zombie.js'` 套件的根级别,使用以下代码实例化 `Browser` 对象的新实例:
|
||||
|
||||
```js
|
||||
const browser = new Browser();
|
||||
```
|
||||
|
||||
然后,通过以下代码,使用 `suiteSetup` 钩子把 `browser` 指向 `/` 路由:
|
||||
并使用 `suiteSetup` 钩子将 `browser` 定向到带有以下代码的 `/` 路由:
|
||||
|
||||
```js
|
||||
suiteSetup(function(done) {
|
||||
@@ -53,11 +51,9 @@ suiteSetup(function(done) {
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional').then(
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=4').then(
|
||||
(data) => {
|
||||
data.slice(0, 4).forEach((test) => {
|
||||
assert.equal(test.state, 'passed');
|
||||
})
|
||||
assert.equal(data.state, 'passed');
|
||||
},
|
||||
(xhr) => {
|
||||
throw new Error(xhr.responseText);
|
||||
|
Reference in New Issue
Block a user