굴삭기를 이용한 조롱과 그루터기
각도 측정기를 사용하여 각도 측정기를 테스트하고 싶습니다.앱에는 서버와 통신하는 API 모듈이 있습니다. 이 테스트 중에 이 API 모듈을 조롱하고 싶습니다.완전한 통합 테스트를 하는 것이 아니라 API에서 예상되는 값을 사용하여 사용자 입력에서 테스트를 하고 싶습니다.이것에 의해, 클라이언트의 테스트 속도가 빨라질 뿐만 아니라, 접속 에러등의 엣지 케이스도 테스트할 수 있게 됩니다.
어떻게 하면 이 일을 할 수 있을까요?통합 테스트를 막 시작했는데
npm protractor 모듈을 사용하여 selenium을 설치하고 기본 설정을 조정한 후 onProtractorRunner.js를 사용하여 설정이 작동하는지 확인했습니다.
조롱하기 위한 권장 방법은 무엇입니까?모의고사는 테스트 파일이 아닌 브라우저 내에서 해야 한다고 생각합니다.테스트 파일에 있는 명령어는 견인기에 따라 다르며 셀레늄 러너로 보내질 것입니다.따라서 세션과 테스트 중에 javascript 객체를 공유할 수 없습니다.
아무래도 sinon.js와 같은 스파이 라이브러리가 필요할 것 같습니다.아니면 이미 프로젝터에 포함되어 있는 것입니까?
편집: 이 문제에 대한 내용은 견인기 문제 추적기에서 확인했습니다.그것도 하나의 방법일 수 있습니다.기본적으로 모의 모듈은 브라우저/어플리케이션 범위에서 실행되도록 전송되는 테스트에 작성됩니다.
편집: 더 유망한 문제가 있습니다.첫 번째는 Angular App에 Mocks를 추가하는 것에 대해 이야기합니다.두 번째는 백엔드를 조롱하는 것에 대해 이야기합니다.
이 경우 Angular App은 원래 형태를 유지할 수 있어 매우 보기 좋습니다.그러나 이것은 현재 사용되지 않는 ng-scenarios에서만 작동합니다.
이 블로그 투고에서는, 프로젝터의 고도의 사용 시나리오에 대해 설명합니다.특히, 그것은 거의 모르는 것을 망라한다.addMockModule()영도기이 메서드를 사용하면 Protractor에 각도 모듈(API 모듈의 mock 또는 stub)을 생성하여 브라우저에 업로드하여 특정 사양 또는 사양 세트의 컨텍스트 내에서 실제 구현을 대체할 수 있습니다.
프로젝터 테스트 내에서 $httpBackend, 컨트롤러 또는 서비스에 액세스할 수 없기 때문에 테스트 중에 다른 각도 모듈을 생성하여 브라우저에 포함시키는 것이 좋습니다.
beforeEach(function(){
var httpBackendMock = function() {
angular.module('httpBackendMock', ['ngMockE2E', 'myApp'])
.run(function($httpBackend) {
$httpBackend.whenPOST('/api/packages').respond(200, {} );
})
}
browser.addMockModule('httpBackendMock', httpBackendMock)
})
ngMockE2E를 사용하면 어플리케이션의 가짜 백엔드 구현을 작성할 수 있습니다.다음은 http://product.moveline.com/testing-angular-apps-end-to-end-with-protractor.html 토픽에 대한 자세한 투고입니다.
아직 직접 사용해 본 적은 없지만, Angular는 E2E 테스트에 $httpBackend 모의 서비스를 제공하고 있습니다.
http://docs.angularjs.org/api/ngMockE2E/service/$httpBackend
따라서 위의 문서 페이지를 참고하여 다음과 같은 것을 시험 전에 사용하셔도 될 것 같습니다.
beforeEach(function() {
$httpBackend.whenGET('/remote-url').respond(edgeCaseData);
});
성공 시나리오와 오류 시나리오에 대처하기 위해 커스터마이즈 가능한 작은 모의 모듈을 만들었습니다.조롱을 정리하는 데 도움이 될 수도 있습니다.
https://github.com/unDemian/protractor-mock
저는 프로젝터로 몇 가지 서비스를 조롱하려고 노력했습니다.블로그를 몇 개 본 결과, 저에게 맞는 솔루션이 나왔습니다.아이디어는 무거운 조롱을 하는 것이 아니라 오류 응답을 생성하는 것입니다. 설비의 경우 API 서버에 백도어가 이미 있기 때문에 백도어를 사용하여 백엔드를 채웁니다.
에서는 「」를 하고 있습니다.$provide.decorator()과 같습니다.테스트에서 사용하는 방법은 다음과 같습니다.
it('should mock a service', function () {
app.mock.decorateService({
// This will return a rejected promise when calling to "user"
// service "login()" method resolved with the given object.
// rejectPromise() is a convenience method
user: app.mock.rejectPromise('login', { type: 'MockError' }),
// You can decorate the service
// Warning! This code get's stringified and send to the browser
// it does not have access to node
api: function ($delegate, $q) {
$delegate.get = function () {
var deferred = $q.defer();
deferred.resolve({ id: 'whatever', name: 'tess' });
return defer.promise;
};
return $delegate;
},
// Internally decorateService converts the function to string
// so if you prefer you can set an string. Usefull for creating your
// own helper methods like "rejectPromise()".
dialog: [
"function ($delegate, $window) {",
"$delegate.alert = $window.alert;",
"return $delegate;",
"}"
].join('\n')
});
// ...
// Important!
app.mock.clearDecorators();
});
코드는 다음과 같습니다.
App.prototype.mock = {
// This must be called before ".get()"
decorateService: function (services) {
var code = [
'var decorer = angular.module("serviceDecorator", ["visitaste"]);',
'decorer.config(function ($provide) {'
];
for (var service in services) {
var fn = services[service];
if (_.isFunction(fn)) {
code.push('$provide.decorator("'+ service +'", '+ String(fn) +');');
} else if (_.isString(fn)) {
code.push('$provide.decorator("'+ service +'", '+ fn +');');
}
}
code.push('});');
browser.addMockModule('serviceDecorator', code.join('\n'));
},
clearDecorators: function () {
browser.clearMockModules();
},
rejectPromise: function (method, error, delay) {
return [
'function ($delegate, $q) {',
'$delegate.'+ method +' = function () {',
'var deferred = $q.defer();',
'',
'setTimeout(function () {',
'deferred.reject('+ JSON.stringify(error) +');',
'}, '+ (delay || 200) +');',
'',
'return deferred.promise;',
'};',
'',
'return $delegate;',
'}'
].join('\n');
}
};
나는 너에게 도움이 될 수 있는 그런 조롱의 틀을 두 개 알고 있다.하나는 ng-apimock이고 다른 하나는 json-server입니다.
최근 백엔드 REST 호출을 조롱하기 위해 ng-apimock API를 사용하기 시작했습니다.이 npm 라이브러리에서 이용할 수 있는 재미있는 기능을 볼 수 있는 한 좋은 것 같습니다.여기서 시나리오 및 사전 설정(복수 모크)을 정의 및 선택하고 기본적으로 e2e 테스트 사례에 사용할 모크를 구성할 수 있습니다.이는 기본적으로 필수 응답 데이터를 필요에 따라 제공함으로써 e2e 테스트에 대한 세분화된 제어를 의미합니다.많은 블로그가 인터넷에 떠도는 것처럼 셋업이 쉽지 않다는 것은 확실히 확인할 수 있습니다.하지만 제 사용 사례에 대한 해결책인 것 같습니다.
기본적으로 proxy.conf.json을 셋업하고 mocks 및 presets(옵션)를 정의해야 하며 이 API를 사용하기 위해 일부 proxy.conf.json도 유지해야 했습니다.
기본적으로 e2e 테스트 실행 시 어떤 API 엔드포인트에서 반환해야 하는 값을 정확하게 설정할 수 있으며 각 e2e 테스트 케이스에 대해 반환해야 하는 값의 변경도 디세블로 할 수 있습니다.패스라고 하는 옵션이 하나 있습니다.또, 이 API에서는, 그 시나리오를 선택해, 모크가 디세블이 되어, 콜이 실제의 HTTP 백엔드로 전송 되는 것을 확인할 수도 있습니다.
자세한 내용을 알고 싶으시면 알려주시면 설정 방법에 대한 자세한 내용을 알려드리겠습니다.
업데이트(긴 POST 경고!!):
모의 서버 셋업(ng-apimock과 express를 동시에 사용)
mock-server.syslog
const express = require('express');
const apimock = require('@ng-apimock/core');
const devInterface = require('@ng-apimock/dev-interface');
const app = express();
app.set('port', (process.env.PORT || 30020));
apimock.processor.process({
src: 'mockapi', //name of the folder containing mocks and presets
watch: true
});
app.use(apimock.middleware);
app.use('/mocking', express.static(devInterface)); //endpoint for UI Dev Interface
app.listen(app.get('port'), function() {
console.log('mock app-server running on port', app.get('port'));
});
package.json(섹션 참조)
"test:e2e": "ng e2e",
"start:mockapi": "node mockapi/mock-server.js",
"e2e": "concurrently -k -s first \"npm run start:mockapi\" \"npm run test:e2e\""
package.json(디바이스의존성 섹션)
"@ng-apimock/core": "^2.6.0",
"@ng-apimock/dev-interface": "^1.1.0",
"@ng-apimock/protractor-plugin": "^1.1.0",
"ng-apimock": "^1.4.9",
"concurrently": "^6.0.1",
"express": "^4.17.1",
mock-proxy.conf.json 필요한 프록시 컨피규레이션파일이 mocks 폴더 내에 추가되었습니다.이는 프록시 http 백엔드 콜이 올바른 모의 서버 URL로 전송되도록 하기 위한 것입니다.
UI Dev Interface용으로 엔드포인트가 추가되어 개발 중에 시나리오 및 정의된 Mock과 관련된 기타 세부 정보를 수동으로 구성하기 위해 사용할 수작업으로 사용할 수 있습니다.모의 API 서버 부팅 후 localhost:30020/mocking을 실행할 수 있습니다.모두 합격모든 모의 시나리오를 비활성화하고 싶을 경우 UI에서 [Through Option]를 선택하면 실제 REST 백엔드 앱 서버로 콜이 전송됩니다.
{
"/api/*": {
"target": "http://localhost:30020",
"secure": false,
"logLevel": "debug"
},
"/application-server/*": {
"target": "http://localhost:30020",
"secure": false,
"logLevel": "debug"
},
"/ngapimock/*": {
"target": "http://localhost:30020",
"secure": false,
"logLevel": "debug"
},
"/mocking/*": {
"target": "http://localhost:30020",
"secure": false,
"logLevel": "debug"
}
}
(주의: 개발 앱 서버는 일반적으로 30020에서 실행됩니다.)
프로젝터 구성
Angular 버전과 관련된 ngApiMock 관련 옵션, protractor 플러그인 패키지 및 커스텀 글로벌 ngApiMock 클라이언트 이름(API 메서드 호출의 e2e 사양에서 사용하는 유일한 이름 선언)이 protractor.conf.js에 추가되었습니다.
options: {
globalName: 'ngApiMockClient', //this name should be used for declaration of Client in e2e tests
}
다음 옵션이 삭제되었습니다.
useAllAngular2AppRoots → ng-apimock protractor 옵션과 함께 제공되는 Angular 버전 사양과의 충돌을 피하기 위해 제거되었습니다.
baseUrl → 다음 단계에서 설명하는 프록시 구성과의 충돌을 방지하기 위해 제거되었습니다.
angular.json 변경 사항
mock-proxy.conf.json을 가리키는 새로운 Webpack DevServer 타깃 serv-e2e 추가.그런 다음 이 타깃은 일반적인 E2E 테스트 실행 중에 응용 프로그램을 실행하기 위한 일반적인 "서버" 타깃 대신 호출됩니다.이 새로운 타겟 추가에 의해 개발 중에 자주 사용되는 "ng serve"에서 트리거되는 일반적인 애플리케이션 부팅에 프록시 구성을 사용하지 않게 됩니다.
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "tnps-portal:build"
},
"configurations": {
"production": {
"browserTarget": "tnps-portal:build:production"
}
}
},
"serve-e2e": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "tnps-portal:build",
"proxyConfig": "mockapi/mock-proxy.conf.json"
},
"configurations": {
"production": {
"browserTarget": "tnps-portal:build:production"
}
}
},
serve-e2e를 e2e devServer 타겟으로 지정...
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "tnps-portal:serve-e2e"
},
"configurations": {
"production": {
"devServerTarget": "tnps-portal:serve:production"
E2E 사용 현황
모든 모크 및 프리셋 처리를 위해 모크 API 서버를 시작하기 전에 모든 모크 파일은 *.mock.json, 프리셋은 *.preset.json으로 선언해야 합니다.이 디폴트 설정은 mock-server.js 파일에 regex 패턴과 프리셋을 지정하여 변경할 수 있습니다.예를 들어 *Mock.json 및 *Preset.json이 됩니다.
import { Client } from '@ng-apimock/base-client';
declare const ngApiMockClient: Client; // !IMPORTANT: the name of the constant should match the global name defined in protractor.conf.js
it('sample mock test', () => {
ngApiMockClient.selectScenario('sample-mock-name', 'sample-scenario-name',);// sample-mock-name is the name of the mock, and sample-scenario-name is the response scenario name as defined in some sample.mock.json
위의 코드에서는 특정 모의 시나리오가 선택되어야 합니다.즉, 기본적으로 일부 특정 사용 사례에 대해 일부 특정 데이터가 반환될 수 있습니다.이 데이터는 sample.mock.json에서도 다음과 같이 정의되어 있습니다.
"name": "sample-mock-name",
"isArray": true,
"request": {
"url": "application-server/actual-endpoint-name", // Endpoint Url for the Mock Request
"method": "GET" // HTTP call type - GET, POST, etc.
},
"responses": {
"fileDataScenario": {
"file": "../data/sampleData.json", // returns json Array data from a file
"default": false
},
"emptyListScenario": {
"data": [{}], // returns data as array, "isArray" : true mandatory for the same mock.
"default": true // this scenario's data will be returned if no scenario is selected from E2E Code or /mocking UI.
}
시나리오를 선택하면 간단한 사용 사례를 테스트할 수 있습니다.실행 시 특정 모크에서 특정 시나리오를 반환해야 하는 복잡한 경우 다음과 같이 사전 설정을 하십시오.
{
"name": "sample-preset",
"mocks": {
"sample-mock-name": {
"scenario": "fileDataScenario",
"delay": 3000
},
"sample-mock-name-2": {
"scenario": "someOtherScenarioFromMock2",
"delay": 3000
},
"sample-mock-name-3": {
"scenario": "oneMoreScenarioFromMock3",
"delay": 3000
}
},
"variables": {
"something": "awesome"
}
}
및 e2e 사양
ngApiMockClient.selectPreset('sample-preset');
위의 코드 블록은 연장기 및 ng-apimock을 사용한E2E 테스트의 REST 콜을 조롱하는데 도움이 될 수 있는 몇 가지 일반적인 예를 설명하고 있습니다.
프로트랙터를 사용한 엔드 투 엔드 테스트의 목적은 애플리케이션이 통합으로 동작하는지 검증하는 것입니다.UI 요소를 분리하여 테스트하려는 경우 일반 테스트의 작은 요소를 사용하는 것이 더 쉽습니다.앵귤러와 똑같다JS 자체는 디렉티브를 테스트합니다.
즉, 실제 서비스가 아닌 stub을 사용하여 애플리케이션의 개별 빌드를 작성하는 방법이 있습니다.
다음으로 stub HTTP 서버에 대한 몇 가지 옵션을 나타냅니다.
- 노드 .Net 및 Java를 지원하는 소규모 웹 서버를 스터비합니다.직접 설치하고 호스트하려면 이 파일이 필요합니다.
- 가짜 API를 작성하기 위해 호스트된 서비스를 일람표시합니다.API 문서 작성에도 사용할 수 있습니다.
언급URL : https://stackoverflow.com/questions/19056349/mocking-and-stubbing-with-protractor
'programing' 카테고리의 다른 글
| 클라이언트 측 Javascript에서 Django를 'reverse' 호출 (0) | 2023.03.26 |
|---|---|
| AngularJS: ng-click은 "좋은 관행"입니까?AngularJS에 ng-{event}가 없는 이유는 무엇입니까? (0) | 2023.03.26 |
| Jest 설정 "SyntaxError:예기치 않은 토큰 내보내기" (0) | 2023.03.26 |
| Yoman for Angular 그러면 Grunt serv가 안 돼 (0) | 2023.03.26 |
| 리액트 컴포넌트를 동적으로 작성하다 (0) | 2023.03.26 |