В JavaScript мы часто используем цепные методы. В основном мы используем JQuery. Как покрыть их в тестовом случае?? Мы все знаем, что не стремимся писать тестовые примеры для кода JavaScript. Но, как и другие языки, тестовый пример Js имеет такое же значение.

Пожалуйста, просмотрите другие мои блоги, посвященные тестовому примеру JavaScript. Я пишу блог для конкретных случаев блогов JavaScript.



Шпионить за Жасмин и Мокко + Синон + Чай
Шпионить за Жасмин и Мокко + Синон + Чай Будучи разработчиками интерфейсов пользовательского интерфейса, многие из нас сталкивались с Жасмин…javascripttestcases.blogspot.com.au





Тестовый пример для angular $http Post and Get
Тестовый пример: просто использовать whenGet. whenGet предоставляется httpBackend mock API, который отвечает заданными данными один раз…javascripttestcases.blogspot.com.au





Ручная активация событий и прослушивание событий в angular
Мы можем столкнуться с ситуацией, когда нам нужно вручную инициировать событие для какого-либо элемента или прослушивать существующие события в DOM… javascripttestcases.blogspot.com



Давайте к теме. Я приведу пример кода и то, как покрыть этот код тест-кейсами. В приведенном ниже примере вы можете видеть, что у нас есть один связанный метод load для возвращаемого jQuery объекта с помощью $el.find().

loadExternalURL : function (loadExtranalUrl) {
  if (loadExtranalUrl) {
    this.$el.find('.external-sec').load(loadExtranalUrl);
  }
}

Теперь, как покрыть функцию нагрузки в тестовом примере? мы можем охватить метод поиска в тестовом примере, но при возврате метода поиска вызывается загрузка. Так на что можно поставить шпиона?? мы не знаем возвращаемый объект. Мы можем написать, как показано ниже.

describe('loadExternalURL', function () {
  beforeEach(function () {
    view.$el = $('<div><div class="external-sec"></div></div>');
  });
it('should load external url if present ', function  () {
    spyOn(view.$el,  'find').andCallThrough();
    spyOn($.fn,  'load');
    var div = view.$el.find('.external-sec');
    view.loadExternalURL('abcd.html');     
    expect(view.$el.find).toHaveBeenCalledWith('.external-sec');  
    expect($.fn.load.mostRecentCall.object).toEqual(div);
    expect($.fn.load).toHaveBeenCalledWith('abcd.html');
  });                
});

Вы видите, как я подсмотрел цепочный метод load?? Я поместил шпион для функции find в обычноепредставление. $el, так как знаю, что для этого объекта будет вызываться find, но не знаю load так же, как она вызывается при возврате объекта функции find.

Да, я отслеживаю непосредственно объект jQuery fn. потому что все функции вызываются для этой функции. Я перехватил наиболее частый вызов функции загрузки jQuery, а также был вызван с заданным URL-адресом.

Заключение

Это был обычный пример, но вы можете столкнуться с таким сценарием, поскольку мы используем множество связанных функций в JavaScript. Я надеюсь, что это поможет в будущем для таких ситуаций.

Примечание:

я использовал представление Backbone, например, и Jasmine framework в качестве тестового примера.