Как написать тестовые примеры Jasmine для метода jQuery on()

Question

Я новичок в Jasmine. Цените, если кто-то может, пожалуйста, кратко мне о том, как писать тесты на следующий код JQuery:

$(document).on('startViewDetail', function(event, transactionId) { 
    $(document).trigger('ClearMessages', [{ 
    containerName: 'EnterDetails' 
    }]); 
    logger.debug('view transaction detail started'); 
    startViewTransaction(transactionId); 
}); 

var startViewTransaction = function(transactionId){...} 

Благодаря в ожидании!

тест Jasmine для приведенного выше кода:

describe('Working with transaction details component', function() { 
    beforeEach(function() { 
     spyOnEvent(document, 'startViewDetail'); 
     $(document).trigger('startViewDetail', mockDataObject.transactionId); 
    }); 
    it('test startViewTransaction', function() { 
     spyOn(document, 'startViewTransaction').and.callFake(function(e) {
   console.log("This is a spy call for startViewTransaction");
   }); 
     expect(document.startViewTransaction).toHaveBeenCalled();
   expect(document.startViewTransaction).toHaveBeenCalledWith(mockDataObject.transactionId); 
    }); 
}); 

Answer 1

Это сообщение имеет широкую сферу применения, поэтому я хотел бы начать с одного подхода

Так вот несколько вещей, которые вы должны задать, прежде чем вы хотите для модульного тестирования кода

• тестирует функциональность вашего кода или функциональность события связывания
• If он тестирует привязку события, тогда я боюсь, что jQuery уже тщательно протестировал его.

Я лично не чувствую необходимости тестировать методы jQuery. Это просто отвлекает цель проверки фактического рукописного кода. Сказав, что вот образец теста, который я подготовил на основе вашего кода.

$(document).on('startViewDetail', function(event, transactionId) { 
    $(document).trigger('ClearMessages', [{ 
    containerName: 'EnterDetails' 
    }]); 
    console.log('view transaction detail started'); 
    startViewTransaction(transactionId); 
}); 

var startViewTransaction = function(transactionId) { 
    console.log('started transaction with transactionId: ' + transactionId); 
} 

describe('sample test', function() { 
    it('test startViewTransaction', function() { 
    spyOn(window, 'startViewTransaction').and.callFake(function(e) { 
     console.log("This is a spy call for startViewTransaction"); 
    }); 
    var obj = $(document); 
    obj.trigger('startViewDetail', 1); 
    expect(window.startViewTransaction).toHaveBeenCalled(); 
    expect(window.startViewTransaction).toHaveBeenCalledWith(1); 
    }) 
}); 

EDIT: Ответ на комментарии:

• startViewDetail это не метод, это название события, так что ваша линия spyOnEvent(document, 'startViewDetail'); является недействительным. Удалите его, поскольку он не служит никакой цели.
• Интересно, почему вы следите за объектом document, бродячие/автономные функции javascript всегда идут под окном. Поэтому переключите свой шпион, чтобы идти против окна, а не документа.
• Вы не должны использовать эту строку $(document).trigger('startViewDetail', mockDataObject.transactionId); в beforeEach, это должно использоваться в вашем тесте, как я использовал выше.
• spyOn(document, 'startViewTransaction').and.callFake(function(e) {
 console.log("This is a spy call for startViewTransaction");
 }); также нуждается в модификации, он должен идти против объекта окна и документа NOT.
• То же самое и в случае с expect(document.startViewTransaction).toHaveBeenCalled();
 expect(document.startViewTransaction).toHaveBeenCalledWith(mockDataObject.transactionId);
  • Жасмин documentation является лучшим источником, чтобы понять, как beforeEach, это, afterEach блоки работают.