AngularJS : FabricJS/캔버스를 사용한 테스트

Question

FabricJS와 같은 지시문 및 서비스 테스트를 어떻게 작성합니까?

예제 응용 프로그램 : http://fabricjs.com/kitchensink/

나는 시도하고있다하지만 난 정말 나쁜 해킹없이 많은 진전을 보이고 있지 않다. 다른 사람들이이 강력한 라이브러리를 사용할 수 있도록이 서비스 및 지시문을 내 https://github.com/clouddueling/angular-common 저장소에 통합하려고합니다.

내 시나리오 :

나는 서비스 및 지침이 포함되어 내 모듈을 테스트하기 위해 노력하고있어. 내 애플 리케이션을 FabricJS에 연결합니다. js 파일을 포함 할 때 생성되는 글로벌 fabric var을 조롱하는 데 문제가 있습니다. 나는 그때 패브릭 캔버스가 들어있는 var를 간첩이라고 가정합니다.

서비스가 fabric과 올바르게 상호 작용하는지 확인해야합니다. 나는 조롱하거나 패브릭을 스터핑하는 데 문제가 있습니다. 내가 카르마와 함께 사용할 수있는 테스트의

• 예 :
  는 현상금을 승리합니다.

Answer 1

테스트하려는 코드를 제공하지 않아서 어렵습니다. 그러나, 테스트 용이성, 나는 먼저

app.factory('fabric', function($window) { 
    return $window.fabric; 
}); 

이 공장은 다음 모의 $ 창을 주입하고 패브릭 속성이 반환되는 것을 확인하여 테스트 할 수있는 글로벌 패브릭 객체를 반환하는 매우 작은 공장을 만들 것입니다.

describe('Factory: fabric', function() { 

    // load the service's module 
    beforeEach(module('plunker')); 

    var fabric; 
    var fakeFabric; 

    beforeEach(function() { 
    fakeFabric = {}; 
    }); 

    beforeEach(module(function($provide) { 
    $provide.value('$window', { 
     fabric: fakeFabric 
    });  
    })); 

    beforeEach(inject(function (_fabric_) { 
    fabric = _fabric_; 
    })); 

    it('should return $window.fabric', function() { 
    expect(fabric).toBe(fakeFabric); 
    }); 

}); 

다음은이 팩토리를 사용하는 서비스 예입니다.

app.service('MyFabricService', function(fabric) { 

    this.newCanvas = function(element) { 
    return new fabric.Canvas(element); 
    } 

    this.newRectangle = function(options) { 
    return new fabric.Rect(options); 
    } 

    this.addToCanvas = function(canvas, obj) { 
    return canvas.add(obj); 
    } 
}); 

다음과 같은 방법으로 테스트 할 수 있습니다. 생성자로 호출 될 수동으로 만든 스파이와 모의 패브릭 객체를 생성하고 instanceof를 사용하고 toHaveBeenCalledWith에 의해 '새로운'개체를 테스트 할 수 있습니다 반환 기능은 구축 된 확인하는 방법 :

// Create mock fabric object 
beforeEach(function() { 
    mockFabric = { 
    Canvas: jasmine.createSpy() 
    } 
}); 

// Pass it to DI system 
beforeEach(module(function($provide) { 
    $provide.value('fabric', mockFabric);  
})); 

// Fetch MyFabricService 
beforeEach(inject(function (_MyFabricService_) { 
    MyFabricService = _MyFabricService_; 
})); 

it('should return an instance of fabric.Canvas', function() { 
    var newCanvas = MyFabricService.newCanvas(); 
    expect(newCanvas instanceof mockFabric.Canvas).toBe(true); 
}); 

it('should pass the element to the constructor', function() { 
    var element = {}; 
    var newCanvas = MyFabricService.newCanvas(element); 
    expect(mockFabric.Canvas).toHaveBeenCalledWith(element); 
}); 

addToCanvas 함수는 'add'스파이로 모의 캔버스 객체를 생성하여 테스트 할 수 있습니다.

var canvas; 

// Create mock canvas object 
beforeEach(function() { 
    canvas = { 
    add: jasmine.createSpy() 
    } 
}); 

// Fetch MyFabricService 
beforeEach(inject(function (_MyFabricService_) { 
    MyFabricService = _MyFabricService_; 
})); 

it('should call canvas.add(obj)', function() { 
    var obj = {}; 
    MyFabricService.addToCanvas(canvas, obj); 
    expect(canvas.add).toHaveBeenCalledWith(obj); 
}); 

이

는 모든이 Plunker 그는 아마, 응용 프로그램 별 기능을하지 시각적으로 테스트를 작성하고자하는 http://plnkr.co/edit/CTlTmtTLYPwemZassYF0?p=preview

Answer 2

왜 외부 종속성 테스트를 작성 하시겠습니까?

FabricJS가 작동한다고 가정하여 시작하십시오. 테스트 해 보는 것이 자신의 직업이 아니며, 그렇다고하더라도 바이트 스트림 비교 (캔버스가 이미지 인 것으로 해석되는 바이트 스트림)를 수행해야합니다. 사용자 입력을 테스트하는 것은 완전히 다른 것입니다. Selenium을보세요.

그런 다음 FabricJS에 대한 올바른 입력을 생성하는 코드에 대한 테스트를 작성합니다.