Quality Assurance and Testing with Chai - Simulate Actions Using a Headless Browser

[itty11]

I’m not understanding the problem. I did the exact code according to the tests but it didn’t work

Your project link(s)

solution: boilerplate-mochachai - Replit

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Challenge: {{challengeTitle}} Quality Assurance and Testing with Chai - Simulate Actions Using a Headless Browser

Link to the challenge:

freeCodeCamp.org

[igorgetmeabrain]

Your code is improperly formatted, meaning that it’s pretty unreadable.
Because of this you have some errors in closing off tests and suites correctly.
So, when you try to run your code you get errors in your console.

I forked your repl and re-indented the code properly.
Once I’d done that I could see where you had missing or incorrectly placed brackets.

Having fixed that, all of your tests passed (except for the assert.fail() ones of course).

Having said that, you may still have issues getting the challenges to pass on FCC because of issues with Zombie and Replit.

If you do, I’d advise adding the following code to the bottom of your functional-tests file:

after(function() {
  chai.request(server)
  .get('/')
});

This mitigates against the repl crashing when the tests run.

You may also need to run the tests locally by changing your Browser.site url to http://localhost:3000/, if you’re still having no joy.

[itty11]

I’m still not getting .

[itty11]

const Browser = require(‘zombie’);
Browser.site = ‘https://boilerplate-mochachai.itty11.repl.co’;

suite(‘Functional Tests with Zombie.js’, function () {
after(function() {
chai.request(server)
.get(‘/’)
});
//this.timeout(5000);
const browser = new Browser();

suiteSetup(function(done) {
return browser.visit(‘/’, done);
});

suite(‘Headless browser’, function() {
test(‘should have a working “site” property’, function() {
assert.isNotNull(browser.site);
});
});

[igorgetmeabrain]

The ‘after’ code which I suggested goes at the very bottom of the file, below all of your tests suites.

[itty11]

onst Browser = require(‘zombie’);
//Browser.site = ‘https://boilerplate-mochachai.itty11.repl.co’;
Browser.site = ‘https://boilerplate-mochachai.itty11.repl.co’;

suite(‘Functional Tests with Zombie.js’, function () {
//this.timeout(5000);
const browser = new Browser();

suiteSetup(function(done) {
return browser.visit(‘/’, done);
});

after(function() {
chai.request(server)
.get(‘/’)
});

suite(‘Headless browser’, function() {
test(‘should have a working “site” property’, function() {
assert.isNotNull(browser.site);
});
});

If you can please try to explain step by step. Because I’m struggling here. I did everything accordingly.

[igorgetmeabrain]

No, put the ‘after’ code at the BOTTOM of the whole file. Not in between test suites or elsewhere in the middle of your code. The very bottom of the file, after ALL other code.

[itty11]

const chai = require(‘chai’);
const assert = chai.assert;

const server = require(‘…/server’);

const chaiHttp = require(‘chai-http’);
chai.use(chaiHttp);

suite(‘Functional Tests’, function() {
this.timeout(5000);
suite(‘Integration tests with chai-http’, function() {
// #1
test(‘Test GET /hello with no name’, function(done) {
chai
.request(server)
.keepOpen()
.get(‘/hello’)
.end(function(err, res) {
assert.equal(res.status, 200);
assert.equal(res.text, ‘hello Guest’);
done();
});
});
// #2
test(‘Test GET /hello with your name’, function(done) {
chai
.request(server)
.keepOpen()
.get(‘/hello?name=Ittyavira’)
.end(function(err, res) {
assert.equal(res.status, 200);
assert.equal(res.text, ‘hello Ittyavira’);
done();
});
});
// #3
test(‘Send {surname: “Colombo”}’, function(done) {
chai
.request(server)
.keepOpen()
.put(‘/travellers’)
.send({
“surname”: “Colombo”
})
.end(function(err, res) {
assert.equal(res.status, 200);
assert.equal(res.type, ‘application/json’);
assert.equal(res.body.name, ‘Cristoforo’);
assert.equal(res.body.surname, ‘Colombo’);
done();
});
});

// #4
test('Send {surname: "da Verrazzano"}', function(done) {
  chai
    .request(server)
    .put('/travellers')
    .send({
      surname: 'da Verrazzano',
      name: 'Giovanni'
    })
    .end(function(err, res) {
      assert.equal(res.status, 200);
      assert.equal(res.type, 'application/json');
      assert.equal(res.body.name, 'Giovanni');
      assert.equal(res.body.surname, 'da Verrazzano');
      done();
    });
});

});
});

const Browser = require(‘zombie’);
Browser.site = ‘http://localhost:3000/’;

suite(‘Functional Tests with Zombie.js’, function() {
this.timeout(5000);
const browser = new Browser();

suiteSetup(function(done) {
browser.visit(‘/’, done);
});

suite(‘Headless browser’, function() {
test(‘should have a working “site” property’, function() {
assert.isNotNull(browser.site);
});
});
});

suite(‘“Famous Italian Explorers” form’, function() {
// #5
test(‘Submit the surname “Colombo” in the HTML form’, function(done) {
assert.fail();

  done();
});
// #6
test('Submit the surname "Vespucci" in the HTML form', function(done) {
  assert.fail();

  done();
});

});
Still not working. I don’t know what is happening?

[igorgetmeabrain]

I just forked your repl again and it runs fine and passes all tests (except the two you haven’t completed).

You appear to have removed the ‘after’ code altogether though, which probably stops the tests from passing on the FCC site.

Just add the ‘after’ code to the very bottom of the functional-tests file, as I said. This will reboot the repl after it crashes and allow FCC to pass the challenge.

EDIT: Yep, I added the ‘after’ code and now it works.

[itty11]

Thank you so much. It is working now.