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