Testing for html output, but not defined

Question

I have written a basic testing framework and am challenging myself to make a single page app in vanilla Javascript.

I've been struggling to work out why my test for view is not recognizing the 'list' constructor when I run it.

My specrunner has all the files loaded into it, and my previous tests on my model works fine. Also, imitating the test using the browser console in Specrunner gives the correct output as well.

Feel free to clone my repo if that is quicker here.

Note that my testing framework "espresso" uses expect in the place of assert and also has an extra parameter for the description of test.

espresso.js

var describe = function(description, test) {
  document.getElementById("output").innerHTML +=
    "<br><b>" + description + "</b></br>";
  try {
    test();
  } catch (err) {
    document.getElementById("output").innerHTML +=
      "<br><li>error: " + err.message + "</li></br>";
    console.log(err);
  }
};

var expect = {
  isEqual: function(description, first, second) {
    if (first === second) {
      document.getElementById("output").innerHTML +=
        description +
        "<br><li><font color='green'>PASS: [" +
        first +
        "] is equal to [" +
        second +
        "]</li></br>";
    } else {
      document.getElementById("output").innerHTML +=
        "<br><li><font color='red'>FAIL: [" +
        first +
        "] is not equal to [" +
        second +
        "]</li></br>";
    }
  }
}

Specrunner.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Expresso Spec Runner</title>
  </head>
  <body>
    <h1><u>Expresso Spec Runner</u></h1>
    <br>
    <div id="output"></div>
    <script src="expresso/expresso.js"></script>

    <!-- include source files here... -->
    <script src="lib/list-model.js"></script>
    <script src="lib/note-model.js"></script>
    <script src="lib/list-view.js"></script>

    <!-- include spec files here... -->
    <script src="tests/expresso-test.js"></script>
    <script src="tests/model-tests.js"></script>
    <script src="tests/view-tests.js"></script>
  </body>
</html>

list-model.js

(function(exports) {
  "use strict";

  function List() {
    this.notelist = [];
  }

  List.prototype.add = function(text) {
    let note = new Note(text);
    this.notelist.push(note);
  };

  exports.List = List;
})(this);

// note-model.js

(function(exports) {
  "use strict";

  function Note(text) {
    this.text = text;
  }

  Note.prototype.show = function() {
    return this.text;
  };

  exports.Note = Note;
})(this);

list-view.js

(function(exports) {
  "use strict";

  function View() {
    this.test = "hello there";

    View.prototype.convert = function(note) {
      var output = [];
      list.notelist.forEach(function(element) {
        output.push("<br><ul>" + element.text + "</ul></br>");
      });
      console.log(output);
      return output;
    };
  }

  exports.View = View;
})(this);

model-test.js

describe("List #initialize", function() {
  var list = new List();
  expect.isEqual("blank array is loaded", list.notelist.length, 0);
});

describe("List #add", function() {
  var list = new List();
  list.add("hello");
  expect.isEqual(
    "can create and store a note",
    list.notelist[0].show(),
    "hello"
  );
  list.add("goodbye");
  expect.isEqual(
    "second note says goodbye",
    list.notelist[1].show(),
    "goodbye"
  );
  expect.isEqual("there are two notes in the list", list.notelist.length, 2);
});

view-tests.js (the failing test)

describe("View #convert", function() {
  var view = new View();
  expect.isEqual(
    "converts the note into a HTML list",
    view.convert(list.notelist),
    "<br><ul>hello</ul></br>"
  );
});

Thanks in advance.

posit labs · Accepted Answer · 2017-12-17 21:31:13Z

1

You need to define list in view-test.js.

describe("View #convert", function() {
  var list = new List();
  // ...
});

If you need to define list outside of this test function, then you would either need to pass it in as an argument, or define it on the window object so it's globally accessible.

answered Dec 17, 2017 at 21:31

posit labs

9,5114 gold badges42 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Testing for html output, but not defined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related