fix: update mocha chai challenge text, code snippets (#43065)
* fix: update mocha chai challenge text, code snippets * fix: add expected output values to instructions * fix: reword instructions a little bit * fix: adjust challenge test for new test suite in boilerpplate Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com>
This commit is contained in:
Kristofer Koishigawa
committed by
GitHub
GitHub
parent
005aefc2d0
commit
361fba686e
@ -10,29 +10,37 @@ dashedName: run-functional-tests-on-an-api-response-using-chai-http-iii---put-me
|
||||
|
||||
As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
In the next example we'll see how to send data in a request payload (body). We are going to test a PUT request. The `'/travellers'` endpoint accepts a JSON object taking the structure:
|
||||
When you test a `PUT` request, you'll often send data along with it. The data you include with your `PUT` request is called the body of the request.
|
||||
|
||||
To send a `PUT` request and a JSON object to the `'/travellers'` endpoint, you can use `chai-http` plugin's `put` and `send` methods:
|
||||
|
||||
```js
|
||||
chai
|
||||
.request(server)
|
||||
.put('/travellers')
|
||||
.send({
|
||||
"surname": [last name of a traveller of the past]
|
||||
})
|
||||
...
|
||||
```
|
||||
|
||||
And the route responds with:
|
||||
|
||||
```json
|
||||
{
|
||||
"surname": [last name of a traveller of the past]
|
||||
"name": [first name],
|
||||
"surname": [last name],
|
||||
"dates": [birth - death years]
|
||||
}
|
||||
```
|
||||
|
||||
The route responds with :
|
||||
|
||||
```json
|
||||
{
|
||||
"name": [first name], "surname": [last name], "dates": [birth - death years]
|
||||
}
|
||||
```
|
||||
|
||||
See the server code for more details.
|
||||
See the server code for the different responses to the `'/travellers'` endpoint.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Within `tests/2_functional-tests.js`, alter the `'send {surname: "Colombo"}'` test (`// #3`):
|
||||
Within `tests/2_functional-tests.js`, alter the `'Send {surname: "Colombo"}'` test (`// #3`) and use the `put` and `send` methods to test the `'/travellers'` endpoint.
|
||||
|
||||
Send the following JSON response as a payload:
|
||||
Send the following JSON object with your PUT request:
|
||||
|
||||
```json
|
||||
{
|
||||
@ -40,14 +48,14 @@ Send the following JSON response as a payload:
|
||||
}
|
||||
```
|
||||
|
||||
Check for the following, within the `request.end` callback:
|
||||
Check for the following within the `request.end` callback:
|
||||
|
||||
1. `status`
|
||||
2. `type`
|
||||
3. `body.name`
|
||||
4. `body.surname`
|
||||
1. The `status` should be `200`
|
||||
2. The `type` should be `application/json`
|
||||
3. The `body.name` should be `Cristoforo`
|
||||
4. The `body.surname` should be `Colombo`
|
||||
|
||||
Follow the assertion order above - we rely on it. Be sure to remove `assert.fail()`, once complete.
|
||||
Follow the assertion order above - we rely on it. Also, be sure to remove `assert.fail()` once complete.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -65,7 +73,7 @@ All tests should pass.
|
||||
);
|
||||
```
|
||||
|
||||
You should test for 'res.status' to be 200.
|
||||
You should test for `res.status` to be 200.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -81,7 +89,7 @@ You should test for 'res.status' to be 200.
|
||||
);
|
||||
```
|
||||
|
||||
You should test for 'res.type' to be 'application/json'.
|
||||
You should test for `res.type` to be `'application/json'`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -97,7 +105,7 @@ You should test for 'res.type' to be 'application/json'.
|
||||
);
|
||||
```
|
||||
|
||||
You should test for 'res.body.name' to be 'Cristoforo'.
|
||||
You should test for `res.body.name` to be `'Cristoforo'`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -113,7 +121,7 @@ You should test for 'res.body.name' to be 'Cristoforo'.
|
||||
);
|
||||
```
|
||||
|
||||
You should test for 'res.body.surname' to be 'Colombo'.
|
||||
You should test for `res.body.surname` to be `'Colombo'`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -8,15 +8,17 @@ dashedName: run-functional-tests-on-an-api-response-using-chai-http-iv---put-met
|
||||
|
||||
# --description--
|
||||
|
||||
As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). This exercise is similar to the preceding one. Look at it for the details.
|
||||
As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
Now that you have seen how it is done, it is your turn to do it from scratch.
|
||||
This exercise is similar to the previous one.
|
||||
|
||||
Now that you know how to test a `PUT` request, it's your turn to do it from scratch.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Within `tests/2_functional-tests.js`, alter the `'send {surname: "da Verrazzano"}'` test (`// #4`):
|
||||
Within `tests/2_functional-tests.js`, alter the `'Send {surname: "da Verrazzano"}'` test (`// #4`) and use the `put` and `send` methods to test the `'/travellers'` endpoint.
|
||||
|
||||
Send the following JSON response as a payload to the `/travellers` route:
|
||||
Send the following JSON object with your PUT request:
|
||||
|
||||
```json
|
||||
{
|
||||
@ -24,14 +26,14 @@ Send the following JSON response as a payload to the `/travellers` route:
|
||||
}
|
||||
```
|
||||
|
||||
Check for the following, within a `request.end` callback:
|
||||
Check for the following within the `request.end` callback:
|
||||
|
||||
1. `status`
|
||||
2. `type`
|
||||
3. `body.name`
|
||||
4. `body.surname`
|
||||
1. The `status` should be `200`
|
||||
2. The `type` should be `application/json`
|
||||
3. The `body.name` should be `Giovanni`
|
||||
4. The `body.surname` should be `da Verrazzano`
|
||||
|
||||
Follow the assertion order above - we rely on it. Be sure to remove `assert.fail()`, once complete.
|
||||
Follow the assertion order above - we rely on it. Also, be sure to remove `assert.fail()` once complete.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -49,7 +51,7 @@ All tests should pass
|
||||
);
|
||||
```
|
||||
|
||||
You should test for 'res.status' to be 200
|
||||
You should test for `res.status` to be 200
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -65,7 +67,7 @@ You should test for 'res.status' to be 200
|
||||
);
|
||||
```
|
||||
|
||||
You should test for 'res.type' to be 'application/json'
|
||||
You should test for `res.type` to be `'application/json'`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -81,7 +83,7 @@ You should test for 'res.type' to be 'application/json'
|
||||
);
|
||||
```
|
||||
|
||||
You should test for 'res.body.name' to be 'Giovanni'
|
||||
You should test for `res.body.name` to be `'Giovanni'`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -97,7 +99,7 @@ You should test for 'res.body.name' to be 'Giovanni'
|
||||
);
|
||||
```
|
||||
|
||||
You should test for 'res.body.surname' to be 'da Verrazzano'
|
||||
You should test for `res.body.surname` to be `'da Verrazzano'`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -12,9 +12,9 @@ As a reminder, this project is being built upon the following starter project on
|
||||
|
||||
# --instructions--
|
||||
|
||||
Within `tests/2_functional-tests.js`, alter the `'Test GET /hello with your name'` test (`// #2`) to assert the `status` and the `text` response to make the test pass.
|
||||
Within `tests/2_functional-tests.js`, alter the `'Test GET /hello with your name'` test (`// #2`) to assert the `status` and the `text` of the response to make the test pass.
|
||||
|
||||
Send your name in the query, appending `?name=<your_name>` to the route. The endpoint responds with `'hello <your_name>'`.
|
||||
Send your name as a URL query by appending `?name=<your_name>` to the route. The endpoint responds with `'hello <your_name>'`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -32,7 +32,7 @@ All tests should pass
|
||||
);
|
||||
```
|
||||
|
||||
You should test for 'res.status' == 200
|
||||
You should test for `res.status` == 200
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -48,7 +48,7 @@ You should test for 'res.status' == 200
|
||||
);
|
||||
```
|
||||
|
||||
You should test for 'res.text' == 'hello Guest'
|
||||
You should test for `res.text` == `'hello <your_name>'`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -10,37 +10,36 @@ dashedName: run-functional-tests-on-api-endpoints-using-chai-http
|
||||
|
||||
As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
Mocha allows testing asyncronous operations. There is a small (BIG) difference. Can you spot it?
|
||||
Mocha allows you to test asynchronous operations like calls to API endpoints with a plugin called `chai-http`.
|
||||
|
||||
We can test our API endpoints using a plugin, called `chai-http`. Let's see how it works. And remember, API calls are asynchronous.
|
||||
|
||||
The following is an example of a test using `chai-http` for the `'GET /hello?name=[name] => "hello [name]"'` suite. The test sends a name string in a url query string (`?name=John`) using a `GET`request to the `server`. In the `end` method's callback function, the response object (`res`) is received and contains the `status` property. The first `assert.equal` checks if the status is equal to `200`. The second `assert.equal` checks that the response string (`res.text`) is equal to `"hello John"`.
|
||||
The following is an example of a test using `chai-http` for a suite called `'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();
|
||||
});
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
Notice the `done` parameter in the test's callback function. Calling it at the end without an argument is necessary to signal successful asynchronous completion.
|
||||
The test sends a `GET` request to the server with a name as a URL query string (`?name=John`). In the `end` method's callback function, the response object (`res`) is received and contains the `status` property.
|
||||
|
||||
The first `assert.equal` checks if the status is equal to `200`. The second `assert.equal` checks that the response string (`res.text`) is equal to `"hello John"`.
|
||||
|
||||
Also, notice the `done` parameter in the test's callback function. Calling it without an argument at the end of a test is necessary to signal that the asynchronous operation is complete.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Within `tests/2_functional-tests.js`, alter the `'Test GET /hello with no name'` test (`// #1`) to assert the `status` and the `text` response to make the test pass. Do not alter the arguments passed to the asserts.
|
||||
Within `tests/2_functional-tests.js`, alter the `'Test GET /hello with no name'` test (`// #1`) to assert the `status` and the `text` of the response to make the test pass. Do not alter the arguments passed to the asserts.
|
||||
|
||||
There should be no name in the query; the endpoint responds with `hello Guest`.
|
||||
There should be no URL query. Without a name URL query, the endpoint responds with `hello Guest`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -58,7 +57,7 @@ All tests should pass
|
||||
);
|
||||
```
|
||||
|
||||
You should test for 'res.status' == 200
|
||||
You should test for `res.status` == 200
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -74,7 +73,7 @@ You should test for 'res.status' == 200
|
||||
);
|
||||
```
|
||||
|
||||
You should test for 'res.text' == 'hello Guest'
|
||||
You should test for `res.text` == `'hello Guest'`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -12,19 +12,19 @@ As a reminder, this project is being built upon the following starter project on
|
||||
|
||||
# --instructions--
|
||||
|
||||
Within `tests/2_functional-tests.js`, in the `'submit "surname" : "Vespucci" - write your e2e test...'` test (`// #6`), automate filling-in and submitting the form from scratch:
|
||||
Within `tests/2_functional-tests.js`, in the `'Submit the surname "Vespucci" in the HTML form'` test (`// #5`), automate the following:
|
||||
|
||||
1. Fill in the form with the `surname` of `Vespucci`
|
||||
2. Submit it pressing `'submit'` button
|
||||
1. Fill in the form with the surname `Vespucci`
|
||||
2. Press the submit button
|
||||
|
||||
Within the callback:
|
||||
And within the `pressButton` callback:
|
||||
|
||||
1. assert that status is `200`
|
||||
2. assert that the text inside the element `span#name` is `'Amerigo'`
|
||||
3. assert that the text inside the element `span#surname` is `'Vespucci'`
|
||||
4. assert that the element(s) `span#dates` exist and their count is `1`
|
||||
1. Assert that status is OK `200`
|
||||
2. Assert that the text inside the element `span#name` is `'Amerigo'`
|
||||
3. Assert that the text inside the element `span#surname` is `'Vespucci'`
|
||||
4. Assert that the element(s) `span#dates` exist and their count is `1`
|
||||
|
||||
Do not forget to to remove the `assert.fail()` call.
|
||||
Do not forget to remove the `assert.fail()` call.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -32,7 +32,7 @@ All tests should pass.
|
||||
|
||||
```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 @@ You should assert that the headless browser request succeeded.
|
||||
|
||||
```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 @@ You should assert that the headless browser request succeeded.
|
||||
);
|
||||
```
|
||||
|
||||
You should assert that the text inside the element 'span#name' is 'Amerigo'.
|
||||
You should assert that the text inside the element `span#name` is `'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 @@ You should assert that the text inside the element 'span#name' is 'Amerigo'.
|
||||
);
|
||||
```
|
||||
|
||||
You should assert that the text inside the element 'span#surname' is 'Vespucci'.
|
||||
You should assert that the text inside the element `span#surname` is `'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 @@ You should assert that the text inside the element 'span#surname' is 'Vespucci'.
|
||||
);
|
||||
```
|
||||
|
||||
You should assert that the element 'span#dates' exist and its count is 1.
|
||||
You should assert that the element `span#dates` exist and its count is 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/);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d8250367417b2b2512c5d
|
||||
title: Run Functional Tests using a Headless Browser
|
||||
title: Run Functional Tests Using a Headless Browser
|
||||
challengeType: 2
|
||||
forumTopicId: 301595
|
||||
dashedName: run-functional-tests-using-a-headless-browser
|
||||
@ -10,21 +10,29 @@ dashedName: run-functional-tests-using-a-headless-browser
|
||||
|
||||
As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
In the HTML main view we provided a input form. It sends data to the `PUT /travellers` endpoint that we used above with an Ajax request. When the request successfully completes, the client code appends a `<div>` containing the info returned by the call to the DOM. Here is an example of how to interact with this form:
|
||||
On the page there's an input form. It sends data to the `PUT /travellers` endpoint as an AJAX request.
|
||||
|
||||
When the request successfully completes, the client code appends a `<div>` containing the information in the response to the DOM.
|
||||
|
||||
Here's an example of how to use Zombie.js to interact with the form:
|
||||
|
||||
```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();
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
First, the `fill` method of the `browser` object fills the `surname` field of the form with the value `'Polo'`. Immediately after, the `pressButton` method invokes the `submit` event listener of the form. The `pressButton` method is asynchronous.
|
||||
First, the `fill` method of the `browser` object fills the `surname` field of the form with the value `'Polo'`. `fill` returns a promise, so `then` is chained off of it.
|
||||
|
||||
Within the `then` callback, the `pressButton` method of the `browser` object is used to invoke the form's `submit` event listener. The `pressButton` method is asynchronous.
|
||||
|
||||
Then, once a response is received from the AJAX request, a few assertions are made confirming:
|
||||
|
||||
@ -37,17 +45,17 @@ Finally, the `done` callback is invoked, which is needed due to the asynchronous
|
||||
|
||||
# --instructions--
|
||||
|
||||
Within `tests/2_functional-tests.js`, in the `'submit "surname" : "Colombo" - write your e2e test...'` test (`// #5`), automate filling-in and submitting the form:
|
||||
Within `tests/2_functional-tests.js`, in the `'Submit the surname "Colombo" in the HTML form'` test (`// #5`), automate the following:
|
||||
|
||||
1. Fill in the form
|
||||
2. Submit it pressing `'submit'` button.
|
||||
1. Fill in the form with the surname `Colombo`
|
||||
2. Press the submit button
|
||||
|
||||
Within the callback:
|
||||
And within the `pressButton` callback:
|
||||
|
||||
1. assert that status is OK `200`
|
||||
2. assert that the text inside the element `span#name` is `'Cristoforo'`
|
||||
3. assert that the text inside the element `span#surname` is `'Colombo'`
|
||||
4. assert that the element(s) `span#dates` exist and their count is `1`
|
||||
1. Assert that status is OK `200`
|
||||
2. Assert that the text inside the element `span#name` is `'Cristoforo'`
|
||||
3. Assert that the text inside the element `span#surname` is `'Colombo'`
|
||||
4. Assert that the element(s) `span#dates` exist and their count is `1`
|
||||
|
||||
Do not forget to remove the `assert.fail()` call.
|
||||
|
||||
@ -57,7 +65,7 @@ All tests should pass.
|
||||
|
||||
```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');
|
||||
},
|
||||
@ -71,7 +79,7 @@ You should assert that the headless browser request succeeded.
|
||||
|
||||
```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 @@ You should assert that the headless browser request succeeded.
|
||||
);
|
||||
```
|
||||
|
||||
You should assert that the text inside the element 'span#name' is 'Cristoforo'.
|
||||
You should assert that the text inside the element `span#name` is `'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 @@ You should assert that the text inside the element 'span#name' is 'Cristoforo'.
|
||||
);
|
||||
```
|
||||
|
||||
You should assert that the text inside the element 'span#surname' is 'Colombo'.
|
||||
You should assert that the text inside the element `span#surname` is `'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 @@ You should assert that the text inside the element 'span#surname' is 'Colombo'.
|
||||
);
|
||||
```
|
||||
|
||||
You should assert that the element 'span#dates' exist and its count is 1.
|
||||
You should assert that the element `span#dates` exist and its count is 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
|
||||
|
||||
As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
In the next challenges we are going to simulate the human interaction with a page using a device called 'Headless Browser'.
|
||||
In the next challenges, you'll simulate human interaction with a page by using a headless browser.
|
||||
|
||||
A headless browser is a web browser without a graphical user interface. This kind of tool is particularly useful for testing web pages, as it is able to render and understand HTML, CSS, and JavaScript the same way a browser would.
|
||||
Headless browsers are web browsers without a GUI. They are able to render and interpret HTML, CSS, and JavaScript the same way a regular browser would, making them particularly useful for testing web pages.
|
||||
|
||||
For these challenges we are using Zombie.JS. It's a lightweight browser which is totally based on JS, without relying on additional binaries to be installed. This feature makes it usable in an environment such as Replit. There are many other (more powerful) options.
|
||||
For the following challenges you'll use Zombie.js, which is a lightweight headless browser that doesn't rely on additional binaries to be installed. This feature makes it usable in limited environments like Replit. But there are many other, more powerful headless browser options.
|
||||
|
||||
Mocha allows you to prepare the ground running some code before the actual tests. This can be useful for example to create items in the database, which will be used in the successive tests.
|
||||
Mocha allows you to run some code before any of the actual tests run. This can be useful to do things like add entries to a database which will be used in the rest of the tests.
|
||||
|
||||
With a headless browser, before the actual testing, we need to **visit** the page we are going to inspect. The `suiteSetup` 'hook' is executed only once at the suite startup. Other different hook types can be executed before each test, after each test, or at the end of a suite. See the Mocha docs for more information.
|
||||
With a headless browser, before running tests, you need to **visit** the page you'll test.
|
||||
|
||||
The `suiteSetup` hook is executed only once at the beginning of a test suite.
|
||||
|
||||
There are several other hook types that can execute code before each test, after each test, or at the end of a test suite. See the Mocha docs for more information.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Within `tests/2_functional-tests.js`, immediately after the `Browser` declaration, add your project URL to the `site` property of the variable:
|
||||
|
||||
```js
|
||||
Browser.site = 'https://sincere-cone.gomix.me'; // Your URL here
|
||||
Browser.site = 'https://boilerplate-mochachai.your-username.repl.co'; // Your URL here
|
||||
```
|
||||
|
||||
If you are testing on a local environment replace the line above with
|
||||
|
||||
```js
|
||||
Browser.localhost('example.com', process.env.PORT || 3000);
|
||||
```
|
||||
|
||||
Within `tests/2_functional-tests.js`, at the root level of the `'Functional Tests with Zombie.js'` suite, instantiate a new instance of the `Browser` object with the following code:
|
||||
Then at the root level of the `'Functional Tests with Zombie.js'` suite, instantiate a new instance of the `Browser` object with the following code:
|
||||
|
||||
```js
|
||||
const browser = new Browser();
|
||||
```
|
||||
|
||||
Then, use the `suiteSetup` hook to direct the `browser` to the `/` route with the following code:
|
||||
And use the `suiteSetup` hook to direct the `browser` to the `/` route with the following code:
|
||||
|
||||
```js
|
||||
suiteSetup(function(done) {
|
||||
@ -53,11 +51,9 @@ All tests should pass.
|
||||
|
||||
```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);
|
||||
|
||||
@ -13,9 +13,9 @@ As a reminder, this project is being built upon the following starter project on
|
||||
`isTrue()` will test for the boolean value `true` and `isNotTrue()` will pass when given anything but the boolean value of `true`.
|
||||
|
||||
```js
|
||||
assert.isTrue(true, 'this will pass with the boolean value true');
|
||||
assert.isTrue('true', 'this will NOT pass with the string value "true"');
|
||||
assert.isTrue(1, 'this will NOT pass with the number value 1');
|
||||
assert.isTrue(true, 'This will pass with the boolean value true');
|
||||
assert.isTrue('true', 'This will NOT pass with the string value "true"');
|
||||
assert.isTrue(1, 'This will NOT pass with the number value 1');
|
||||
```
|
||||
|
||||
`isFalse()` and `isNotFalse()` also exist, and behave similarly to their true counterparts except they look for the boolean value of `false`.
|
||||
|
||||
Reference in New Issue
Block a user