Элементы тестирования, отображаемые в приложении Angular с помощью тестов Jasmine?

Это должен быть очень простой вопрос, я надеюсь... Я новичок Angular и новичок для всего процесса написания тестов.

Это мой контроллер:

angular
  .module('myModule', [])
  .controller('myCtrl', ['$scope', function ($scope) {
    $scope.questionIndex = -1;
    $scope.text = "Hello world";
}]);

My view (index.html) выглядит следующим образом:

<div id="text">{{ text }}</div>

Это мой тест, который проходит нормально:

describe('Controller: myCtrl', function () {

  // load the controller module
  beforeEach(module('myApp'));

  var MainCtrl,
    scope;

  // Initialize the controller and a mock scope
  beforeEach(inject(function ($controller, $rootScope) {
    scope = $rootScope.$new();
    MainCtrl = $controller('myCtrl', {
      $scope: scope
    });
  }));

  it('should have the initial question index set to -1', function () {
    expect(scope.questionIndex).toBe(-1);
  });

});

Теперь я хочу написать тест, чтобы проверить, что элемент text был фактически отображен на странице.

Как я могу сделать это в Жасмине? Извините, это, наверное, глупый вопрос, но я не могу понять это из документации.

ОТВЕТЫ

Ответ 1

Я дам вам два ответа на ваш вопрос:

Сначала: Тестирование привязок в вашем представлении, вероятно, должно выполняться в результате сквозного теста (E2E). И тест конца в конец используется, чтобы убедиться, что контроллеры, модели и представления работают вместе, как ожидалось, наряду с правильной интеграцией вашего бэкэнда (если он у вас есть). Здесь вы должны проверить, что данный div имеет ожидаемый текст. Вы можете прочитать все об этом в руководстве разработчика здесь. Причина, по которой вы используете тест E2E для этого, заключается в том, что привязка не является действительно ответственностью вашего контроллера. Контроллер управляет/управляет моделью. Затем модель передается в представление, и теперь это ответственность за визуализацию элементов DOM, использующих эту модель. Единственный надежный способ протестировать ваши элементы DOM - это тест E2E.

Второе: На самом деле это можно сделать в unit test, но способ сделать это не совсем красиво. Вы можете сделать это, используя службу angular $compile. Эта услуга - это то, что angular использует для анализа через DOM и превращает все привязки/директивы/etc в конечный продукт. Вот пример того, как это будет сделано:

var scope, compile, elem;
beforeEach(inject(function ($controller, $rootScope, $compile) {
    scope = $rootScope.$new();
    compile = $compile;
    MainCtrl = $controller('myCtrl', {
       $scope: scope
    });
}));

it('should set the div content to "' + scope.text + '"', function(){
    var html = '<div id="text">{{ text }}</div>';
    elem = angular.element(html);  // turn html into an element object
    compile(elem)(scope); // compile the html
    scope.$digest();  // update the scope
    expect(elem.text()).toBe(scope.text);  //test to see if it was updated.
});

Дополнительную информацию об этом втором варианте см. в подробном учебнике здесь. Надеюсь, что это поможет.