Quality Assurance and Testing with Chai - Run Functional Tests using a Headless Browser. 'All tests should pass' fails

FCC Challenge

The following image shows which test fails:

Tests

The boilerplate template was cloned 16 Jan 2021

Relevent code in ‘2_functional-tests.js’:

const Browser = require("zombie");

Browser.site = 'https://plum-stupendous-drive.glitch.me';

suite("Functional Tests with Zombie.js", function() {
  const browser = new Browser(
    //{waitDuration: 5 * 1000}
  );
  suiteSetup(function done() {
    return browser.visit("/", done);
  });
  suite('"Famous Italian Explorers" form', function() {
    // #5
    test('submit {"surname" : "Colombo"} - write your e2e test...', function(done) {
      browser.fill("surname", "Colombo").pressButton("submit", function() {
          browser.assert.success();
          browser.assert.text("span#name", "Cristoforo");
          browser.assert.text("span#surname", "Colombo");
          browser.assert.element("span#dates", 1);
          done();
        })
    });
    // #6
    test('submit "surname" : "Vespucci" - write your e2e test...', function(done) {
      browser.fill("surname", "Vespucci").pressButton("submit", function() {
        browser.assert.success();
        browser.assert.text("span#name", "Amerigo");
        browser.assert.text("span#surname", "Vespucci");
        browser.assert.element("span#dates", 1);
        done();
      });
    });
  });
});

All my code for the project may be found here.

The following shows up in the glitch console when the app runs :

 AssertionError [ERR_ASSERTION]: No open window with an HTML document
  at Browser.field (/rbd/pnpm-volume/e8239455-1801-4804-baee-7e96bd72875f/node_modules/zombie/lib/index.js:598:5)
  at Browser.fill (/rbd/pnpm-volume/e8239455-1801-4804-baee-7e96bd72875f/node_modules/zombie/lib/index.js:646:24)
  at Context.<anonymous> (tests/2_functional-tests.js:80:15)
  at processImmediate (node:internal/timers:463:21)

I’ve tried updating all packages to the following:

  "dependencies": {
    "body-parser": "^1.19.0",
    "chai": "^4.2.0",
    "chai-http": "^4.3.0",
    "cors": "^2.8.5",
    "express": "^5.0.0-alpha.2",
    "mocha": "^8.2.1",
    "node": "^15.4.0",
    "npm": "^7.4.2",
    "zombie": "^6.1.4"
  },

I’ve also tried adding wait() and then() functions in the code, but that didn’t change anything. ‘npm/zombie’ documentation mentions wrapping the fill() function in a before() wrapper, but when I tried that, none of the tests passed, so I removed it.

Any help/ advice would be greatly appreciated.

Many thanks for taking a look.

Phil :uk:

Can you try using the starter project on Repl.it instead.

Please also share the live project URL.

1 Like

The above code looks correct. So, I wonder if it has to do with the specifics of how Glitch works.

1 Like

Hi Lasse,

Thanks, that was a good idea, and well worth a try.

I completed it in Repl.it on the starter project…

https://boilerplate-mochachai.blokeproof.repl.co (Is this the live project URL?)

…but seem to be getting the similar errors:

1) Functional Tests Functional Tests with Zombie.js "Famous Italian Explorers" form submit "surname" : "Colombo" - write your e2e test...:
     AssertionError [ERR_ASSERTION]: No open window with an HTML document
      at Browser.field (node_modules/zombie/lib/index.js:743:7)
      at Browser.fill (node_modules/zombie/lib/index.js:837:24)
      at Context.<anonymous> (tests/2_functional-tests.js:73:17)
      at processImmediate (internal/timers.js:456:21)

  2) Functional Tests Functional Tests with Zombie.js "Famous Italian Explorers" form submit "surname" : "Vespucci" - write your e2e test...:

      AssertionError [ERR_ASSERTION]: The expression evaluated to a falsy value:

  assert(this.browser.success, message)

      + expected - actual

      -false
      +true
      
      at Assert.success (node_modules/zombie/lib/assert.js:70:7)
      at Context.<anonymous> (tests/2_functional-tests.js:83:24)
      at processImmediate (internal/timers.js:456:21)

The problem appears to result from line 83 of “tests/2_functional-tests.js”, but I can’t , for the life of me, figure it out.

This is the glitch live link, I think https://plum-stupendous-drive.glitch.me

Hi Shaun,

I completed it in Repl.it on the starter project…

…but seem to be getting the similar errors:

1) Functional Tests Functional Tests with Zombie.js "Famous Italian Explorers" form submit "surname" : "Colombo" - write your e2e test...:
     AssertionError [ERR_ASSERTION]: No open window with an HTML document
      at Browser.field (node_modules/zombie/lib/index.js:743:7)
      at Browser.fill (node_modules/zombie/lib/index.js:837:24)
      at Context.<anonymous> (tests/2_functional-tests.js:73:17)
      at processImmediate (internal/timers.js:456:21)

  2) Functional Tests Functional Tests with Zombie.js "Famous Italian Explorers" form submit "surname" : "Vespucci" - write your e2e test...:

      AssertionError [ERR_ASSERTION]: The expression evaluated to a falsy value:

  assert(this.browser.success, message)

      + expected - actual

      -false
      +true
      
      at Assert.success (node_modules/zombie/lib/assert.js:70:7)
      at Context.<anonymous> (tests/2_functional-tests.js:83:24)
      at processImmediate (internal/timers.js:456:21)

The problem appears to result from line 83 of “tests/2_functional-tests.js”, but I can’t , for the life of me, figure it out.

I found the issue…

Here is the lesson: Quality Assurance and Testing with Chai - Simulate Actions Using a Headless Browser | Learn | freeCodeCamp.org

Here is the line that is should be:

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

This is what is in your app:

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

Hope this helps

1 Like

Thank you so much Shaun.

I’m really embarrassed for not spotting that myself. Well done, You are eagle-eyed and awesome!

Once my mistake was fixed, there was only one error left to fix ie. browser.fill().buttonPress() was not a valid function. This was clearly mentioned in the console log.

Wrapping the buttonPress() and assertions in a then() solved that.

browser.fill("surname", "Colombo").then(
        browser.pressButton("submit", function() {
          browser.assert.success();
          browser.assert.text("span#name", "Cristoforo");
          browser.assert.text("span#surname", "Colombo");
          browser.assert.element("span#dates", 1);
          done();
        })
      );

This confirms that the testing works in glitch with all the latest package versions.

When running it in Repl.it, which runs on older packages …

	"dependencies": {
		"express": "^5.0.0-alpha.2",
		"body-parser": "^1.15.2",
		"mocha": "^3.1.0",
		"chai": "^3.5.0",
		"chai-http": "^3.0.0",
		"zombie": "^4.2.1",
		"cors": "^2.8.1"

…the then() wrapper should not be present.

Thank you so very much.

Best wishes and kind regards,

Phil :smiley:

1 Like