Angular Testing DOM after update by Factory

Question

Ok, I'm trying to test the outcome of a function that updates the DOM> I have a directive that loads a template via url. Then a controller calls a factory method to update the html table with data. I have the tests showing that I can get the data that is all good. but how can I test that the updates to the table have taken place?

I am using NodeJS with Karma and Jasmine.

I have followed tutorials on how to load in templates, and I have that working, I can load and access the templates in my test fine.

but when I run the method to update the table, the tests fail.

I'll give an scaled down example of what I'm trying to do. Note, this is just demo code, Not a working app.

Template.

<table><tr><td class="cell1"></td></tr></table>

Directive.

    dataTable.directive('dataTable', function () {
    return {
        restrict: 'E',
        templateUrl: 'path/to/template/dataTable.html'
    };
});

Controller

dataTable.controller('dataTableController', ['$scope', 'dataTableFactory',
                     function ($scope, dataTableFactory){        

    $scope.updateTable = function(){           
       dataTableFactory.loadData(); 
       // code to load data from dataTableFactory here! //          
       dataTableFactory.updateTable();
    }

}])

Factory

dataTable.factory('dataTableFactory',['$document',function($document){
    var _tableData;
    return(
            "tableData": _tableData,
            loadData: function(){
              // code to get data and populate _tableData.
            }
            updateTable: function(){
                $document.find('.cell1').append(this.tableData.data);
            }
    )
}])

Unit Test

describe('dataTable Tests', function () {
    var scope, element, $compile, mDataTableFactory, controller, tableData, doc, factory;
    beforeEach(module('dataTable'));
    beforeEach(module('app.templates')); // setup via ng-html2js
    beforeEach(inject(function (_$rootScope_, _$compile_,_$controller_,_dataTableFactory_) {
        scope   = _$rootScope_.$new();
        doc = _$compile_('<flood-guidance></flood-guidance>')(scope);
        factory = _dataTableFactory_;
        controller = _$controller_('dataTableController', {
            $scope: scope,
            $element: doc,
            dataTableFactory: factory
        }); 
        scope.$digest();
    }));

    it("Template should contain the cell cell1", function(){
        expect(doc.find('.cell1').contents().length).toBe(0);
        expect(doc.find('.cell1').html()).toBeDefined();
    });
    // Passes fine, so I know the template loads ok.
    it('Should show data in cell1',function(){
        factory.tableData = {data: 'someData'};
        scope.updateTable();
        expect(doc.find('.cell1').contents().length).toBe(1);
        expect(doc.find('.cell1').html()).toBe('SomeData');
    });
  });
});

Test Ouptut

Expected 0 to be 1. Expected '' to be 'someData'.

If I put the updateTable code in to the controller and call the update function there, the test passes, but I'd like to have this in a factory, how can I make this test pass (the app runs and works as expected, I just can't get a working test).

I understand this kind of testing is more focused on the UI and not exactly 'Unit Testing' but is it possible to do this?

Answer 1

So essentially updateTable cannot find the changes performed by factory.tableData. I guess the problem may be due to the way how your factory exposes the _tableData property. Could you try to modify your factory like this:

dataTable.factory('dataTableFactory',['$document',function($document){
    var _tableData;
    return(
            getTableData: function() { return _tableData; },
            setTableData: function(newVal) { _tableData = newVal; },
            loadData: function(){
              // code to get data and populate _tableData.
            }
            updateTable: function(){
                $document.find('.cell1').append(this.tableData.data);
            }
    )
}])

and then of course use the setter/getter accordingly. See if it works this way.

OK so I'm still not sure if I fully get your intention but here is a fiddle with my refactored example. http://jsfiddle.net/ene4jebb/1/

First of all the factory shouldn't touch the DOM, that's the directives responsibility. Thus my rework passes the cellvalue (new scope property) to the directive, which renders it. Now when you call setTableData (which will change _tableData.data) and since in test environment call the $digest loop yourself, the directive will automatically redraw the new stuff. Controller is kept thin as possible thus only providing a scope property to the factory.

As said not sure if you were after this, but hope it helps. If there are any questions just ask.