Угловое тестирование DOM после обновления Factory

Question

Хорошо, я пытаюсь проверить результат функции, которая обновляет DOM> У меня есть директива, которая загружает шаблон по URL-адресу. Затем контроллер вызывает фабричный метод для обновления таблицы html данными. У меня есть тесты, показывающие, что я могу получить данные, которые все хороши. , но как я могу проверить, что произошли обновления таблицы?

Я использую NodeJS с кармой и жасмином.

Я следил за учебниками по загрузке в шаблонах, и у меня есть эта работа, я могу загрузить и получить доступ к шаблонам в своем тестовом порядке.

, но когда я запускаю метод обновления таблицы, тесты терпят неудачу.

Я дам уменьшенный пример того, что я пытаюсь сделать. Заметьте, это всего лишь демо-код, а не работающее приложение.

Шаблон.

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

Директива.

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

Контроллер

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

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

}]) 

завод

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'); 
    }); 
    }); 
}); 

Тест Ouptut

Ожидается, что 0 будет 1. Ожидается '' быть 'некоторыми данными'.

Если я помещаю код updateTable в контроллер и вызываю функцию обновления там, тест проходит, но я хотел бы иметь это на заводе, как я могу сделать этот тестовый проход (приложение запускается и работает, как ожидалось, я просто не могу получить рабочий тест).

Я понимаю, что такое тестирование больше ориентировано на пользовательский интерфейс, а не на «Unit Testing», но возможно ли это сделать?

Answer 1

По существу updateTable не может найти изменения, выполненные фабрикой.tableData. Я думаю, проблема может быть связана с тем, как ваш завод предоставляет свойство _tableData. могли бы попытаться изменить ваш завод, как это:

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); 
      } 
    ) 
}]) 

, а затем, конечно, использовать сеттер/добытчика соответственно. Посмотрите, работает ли это так.

ОК, поэтому я все еще не уверен, полностью ли я намерен, но вот скрипка с моим реорганизованным примером. http://jsfiddle.net/ene4jebb/1/

Прежде всего, завод не должен касаться DOM, это ответственность за директивы. Таким образом, моя переделка передает свойство cellvalue (новое свойство scope) в директиву, которая делает это. Теперь, когда вы вызываете setTableData (который изменит _tableData.данные), и поскольку в тестовой среде вы вызываете цикл $ digest самостоятельно, директива автоматически перерисовывает новый материал. Контроллер остается как можно более тонким, таким образом, только предоставляя свойство области на заводе.

Как сказал не уверен, были ли вы после этого, но надеюсь, что это поможет. Если есть вопросы, просто спросите.