aptivate/kashana

Re-write javascript tests to make meaning clearer

Opened this issue · 0 comments

After the code review with @daniell I'm trying to understand the meaning of these tests. The assertioncount isn't counting assertions, its just counting the elements of the generated list of elements that satisfy some conditions.

If we look at the setup:

    var ids = ["1", "2", "3"],
            models = _.map(ids, function(n){return {id: n};}),
            MyListView = AddOneList.extend({
                itemView: BB.View.extend({
                    render: function(){
                        var content = this.model.get('id') || "empty";
                        this.$el.html(content);
                    },
                }),
            });

... then clauses like this make a bit more sense:

        it("Blank element if max size not yet reached", function() {
            var listView = new MyListView({
                maxLength: 4,
                collection: new BB.Collection(models)
            });
            listView.render();

            var assertionCount = 0;
            listView.$el.children("div").each(function (i, el) {
                var contents = $(el).html();
                if (contents==="empty") {
                    expect(true).toBe(true);
                    assertionCount++;
                } else if (contents === "") {
                    expect(false).toBe(true);
                } else {
                    expect(_.contains(ids, contents, "ID rendered is from list")).toBe(true);
                    assertionCount++;
                }
            });
            expect(assertionCount).toEqual(4);
        })});

What we'er doing here is looking at the output of a rendered list view with the model ["1", "2", "3"]. This should contain four divs containing "1", "2", "3", and "empty" -- because that' show the blank element gets rendered. And none of those divs should be properly empty (none of them have content = ""). I think we can do much better.

I'm thinking instead of .each() we could use .map() to project a list of the contents of the list of divs, and then make some simpler assertions about those:

  • there should be four elements: "1", "3", "3", "empty", and no empty elements.

something like this??...

contents = listView.$el.children("div").map(function(){ return this.html(); })
expect(contents.get().join()).toBe("1,2,3,empty")