dimanche 17 décembre 2017

Testing for html output, but not defined

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.

Aucun commentaire:

Enregistrer un commentaire