chore(i18n,curriculum): processed translations (#43361)

This commit is contained in:
camperbot
2021-09-03 01:11:45 -07:00
committed by GitHub
parent 53c88efb0d
commit fddb88327c
36 changed files with 540 additions and 531 deletions

View File

@@ -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();
```

View File

@@ -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) 上克隆。
接下來,我們將瞭解如何使用請求的 payloadbody發送數據。 我們需要測試一個 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) =>

View File

@@ -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) =>

View File

@@ -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) =>

View File

@@ -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) =>

View File

@@ -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/);

View File

@@ -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/);

View File

@@ -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);