$는에서 테스트하는 1 개 이상의 가치를 제공 설명

Question

내가 각도 지침에 대한 카르마/재스민 시험이 : 내가 원하는대로

describe('placeholder directive', function() { 

    // Bindable members 
    var element; 

    // Load module 
    beforeEach(angular.mock.module('app')); 

    // Mock service response 
    beforeEach(module(function($provide) { 
    $provide.value('PlaceholderSupportService', function() { 
     return false; 
    }); 
    })); 

    // Bind references to global variables 
    beforeEach(inject(function($compile, $rootScope) { 
    element = $compile('<input name="test" placeholder="Test" />')($rootScope); 
    $rootScope.$digest(); 
    })); 

    // Check the correct HTML is rendered 
    it('Renders placeholder as input value when placeholder is not supported', inject(function($timeout) { 
    $timeout.flush(); 
    expect(element[0].value).toBe('Test'); 
    })); 

}); 

그것은 작동합니다. 그러나 PlaceholderSupportService() 값을 false으로 지정했습니다. 이 값이 true 인 두 번째 테스트를 실행하고 싶습니다. it 문 내에서 $provide에 액세스 할 수없는 것 같습니다. 어떻게해야합니까?

Answer 1

변수를 반환하도록 PlaceholderSupportService에게 알릴 수 있습니다. 그런 다음 테스트 블록에서 변수 값을 변경합니다. 이렇게하면 문제가 해결됩니다. 다음은 그 예입니다.

describe('placeholder directive', function() { 

    // Bindable members 
    var element; 
    var providerResult = false; //Here is the variable that you will change. 

    // Load module 
    beforeEach(angular.mock.module('app')); 

    // Mock service response 
    beforeEach(module(function($provide) { 
    $provide.value('PlaceholderSupportService', function() { 
     return providerResult; 
    }); 
    })); 

    // Check the correct HTML is rendered 
    it('Renders placeholder as input value when placeholder is not supported', inject(function($timeout) { 
    element = $compile('<input name="test" placeholder="Test" />')($rootScope); 
    $rootScope.$digest(); 
    $timeout.flush(); 
    expect(element[0].value).toBe('Test'); 
    })); 

    // Check the correct HTML is rendered 
    it('Renders placeholder as input value when placeholder is supported', inject(function($timeout) { 
    providerResult = true; //Here I will change the result of my PlaceholderSupportService 
    element = $compile('<input name="test" placeholder="Test" />')($rootScope); 
    $rootScope.$digest(); 
    $timeout.flush(); 
    expect(element[0].value).toBe('Test'); 
    })); 

}); 

Answer 2

it 각각에 대해 beforeEach을 제공하기 위해 테스트를 간단히 구조 할 수 있습니다. 이 코드는 아마도 약간 정리 될 수 있지만 여기에 아이디어가 있습니다.

describe('placeholder directive', function() { 
    // Bindable members 
    var element; 

    describe('when placeholder is supported', function() { 
    // Load module 
    beforeEach(angular.mock.module('app')); 

    // Mock service response 
    beforeEach(module(function($provide) { 
     $provide.value('PlaceholderSupportService', function() { 
     return true; 
     }); 
    })); 

    // Bind references to global variables 
    beforeEach(inject(function($compile, $rootScope) { 
     element = $compile('<input name="test" placeholder="Test" />')($rootScope); 
     $rootScope.$digest(); 
    })); 

    // Check the correct HTML is rendered 
    it('Renders placeholder as input value when placeholder is not supported', inject(function($timeout) { 
     $timeout.flush(); 
     expect(element[0].value).toBe('Test'); 
    })); 
    }); 

    describe('when placeholder is not supported', function() { 
    // Load module 
    beforeEach(angular.mock.module('app')); 

    // Mock service response 
    beforeEach(module(function($provide) { 
     $provide.value('PlaceholderSupportService', function() { 
     return false; 
     }); 
    })); 

    // Bind references to global variables 
    beforeEach(inject(function($compile, $rootScope) { 
     element = $compile('<input name="test" placeholder="Test" />')($rootScope); 
     $rootScope.$digest(); 
    })); 

    // Check the correct HTML is rendered 
    it('Renders placeholder as input value when placeholder is not supported', inject(function($timeout) { 
     $timeout.flush(); 
     expect(element[0].value).toBe('Test'); 
    })); 
    }); 
});