如何使用Angular HttpClient为我的后端api编写e2e测试?

时间:2018-01-04 21:58:36

标签: angular angular-httpclient angular-e2e

我想为我的后端api编写一些测试。因为我的前端是Angular,所以我已经在我的环境中拥有一个完整的测试框架,并认为使用它而不是导入和学习新东西会很好(如果我正在进行单元测试我需要一个原生的测试框架,但我只想在这里测试http接口。)

为了避免让我的问题复杂化,请忘记我的后端,而只是在这里使用公共API(People-In-Space)。

使用Angular CLI创建新应用程序很容易,添加superagent并编写测试:

api.e2e-spec.ts

import * as superagent from 'superagent';

describe('people-in-space API', () => {

    it('should report success getting a list of people in space', (done) => {
        superagent.get('http://api.open-notify.org/astros.json').then((response: superagent.Response) => {
            expect(response.body.message).toEqual('success');
            done();
        }).catch(done.fail);
    });

});

运行正常,您可以在this repository找到它。

现在我很高兴能够谈论这些,但理想情况下,我认为我不应该使用superagent作为我的http客户端,因为我的所有其余代码都将使用{{ 3}}

在使用HttpClient重写上述测试之前,我到底需要配置什么呢?

到目前为止我尝试了什么

您可以找到解决问题的尝试Angular's HttpClient。我'已经:

  • 写测试
  • 将zone.js添加到我的protractor.conf.js文件
  • 尝试导入HttpClient模块(并且这样做看起来我已经打破了其他一些依赖)

我得到的错误是:

> people-in-space@0.0.0 e2e C:\git\people-in-space
> ng e2e

** NG Live Development Server is listening on localhost:49152, open your browser on http://localhost:49152/ **
[0mDate: [1m[37m2018-01-04T21:43:44.807Z[39m[22m[0m
[0mHash: [1m[37m6929b70a097b5cdc054b[39m[22m[0m
[0mTime: [1m[37m7234[39m[22mms[0m
[0mchunk {[1m[33minline[39m[22m} [1m[32minline.bundle.js, inline.bundle.js.map[39m[22m (inline) 5.83 kB [1m[33m[entry][39m[22m[1m[32m [rendered][39m[22m[0m
[0mchunk {[1m[33mmain[39m[22m} [1m[32mmain.bundle.js, main.bundle.js.map[39m[22m (main) 8.54 kB [1m[33m[initial][39m[22m[1m[32m [rendered][39m[22m[0m
[0mchunk {[1m[33mpolyfills[39m[22m} [1m[32mpolyfills.bundle.js, polyfills.bundle.js.map[39m[22m (polyfills) 202 kB [1m[33m[initial][39m[22m[1m[32m [rendered][39m[22m[0m
[0mchunk {[1m[33mstyles[39m[22m} [1m[32mstyles.bundle.js, styles.bundle.js.map[39m[22m (styles) 11.4 kB [1m[33m[initial][39m[22m[1m[32m [rendered][39m[22m[0m
[0mchunk {[1m[33mvendor[39m[22m} [1m[32mvendor.bundle.js, vendor.bundle.js.map[39m[22m (vendor) 2.66 MB [1m[33m[initial][39m[22m[1m[32m [rendered][39m[22m[0m
(node:18016) [DEP0022] DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.

webpack: Compiled successfully.
[21:43:45] I/update - chromedriver: file exists C:\git\people-in-space\node_modules\protractor\node_modules\webdriver-manager\selenium\chromedriver_2.34.zip
[21:43:45] I/update - chromedriver: unzipping chromedriver_2.34.zip
[21:43:45] I/update - chromedriver: chromedriver_2.34.exe up to date
[21:43:45] I/launcher - Running 1 instances of WebDriver
[21:43:45] I/direct - Using ChromeDriver directly...
Jasmine started

people-in-space API
    [31m× should report success getting a list of people in space[39m
    [31m- [39m[31mFailed: Cannot read property 'getComponentFromError' of null[39m
        at TestBed._initIfNeeded (C:\git\people-in-space\node_modules\packages\core\esm5\testing\src\test_bed.js:400:22)
        at TestBed.get (C:\git\people-in-space\node_modules\@angular\core\bundles\core-testing.umd.js:1071:14)
        at Function.TestBed.get (C:\git\people-in-space\node_modules\@angular\core\bundles\core-testing.umd.js:863:29)
        at UserContext.<anonymous> (C:\git\people-in-space\e2e\api.e2e-spec.ts:11:24)
        at new ManagedPromise (C:\git\people-in-space\node_modules\selenium-webdriver\lib\promise.js:1067:7)
        at ControlFlow.promise (C:\git\people-in-space\node_modules\selenium-webdriver\lib\promise.js:2396:12)
        at TaskQueue.execute_ (C:\git\people-in-space\node_modules\selenium-webdriver\lib\promise.js:2970:14)
        at TaskQueue.executeNext_ (C:\git\people-in-space\node_modules\selenium-webdriver\lib\promise.js:2953:27)
        at asyncRun (C:\git\people-in-space\node_modules\selenium-webdriver\lib\promise.js:2860:25)
        at C:\git\people-in-space\node_modules\selenium-webdriver\lib\promise.js:676:7
        at ZoneDelegate.invoke (C:\git\people-in-space\node_modules\zone.js\dist\zone-node.js:388:26)
        at Zone.run (C:\git\people-in-space\node_modules\zone.js\dist\zone-node.js:138:43)
        at C:\git\people-in-space\node_modules\zone.js\dist\zone-node.js:870:57
        at ZoneDelegate.invokeTask (C:\git\people-in-space\node_modules\zone.js\dist\zone-node.js:421:31)
    From: Task: Run beforeAll in control flow
        at Function.promise (C:\git\people-in-space\node_modules\protractor\node_modules\q\q.js:682:9)
    From asynchronous test: 
    Error
        at Suite.<anonymous> (C:\git\people-in-space\e2e\api.e2e-spec.ts:9:5)
        at Object.<anonymous> (C:\git\people-in-space\e2e\api.e2e-spec.ts:5:1)
        at Module._compile (module.js:635:30)
        at Module.m._compile (C:\git\people-in-space\node_modules\ts-node\src\index.ts:392:23)
        at Module._extensions..js (module.js:646:10)
        at Object.require.extensions.(anonymous function) [as .ts] (C:\git\people-in-space\node_modules\ts-node\src\index.ts:395:12)
        at Module.load (module.js:554:32)
        at tryModuleLoad (module.js:497:12)
        at Function.Module._load (module.js:489:3)
        at Module.require (module.js:579:17)
        at require (internal/module.js:11:18)
    [31m- [39m[31mFailed: Cannot read property 'assertPresent' of undefined[39m
        at resetFakeAsyncZone (C:\git\people-in-space\node_modules\@angular\core\bundles\core-testing.umd.js:401:19)
        at UserContext.<anonymous> (C:\git\people-in-space\node_modules\packages\core\esm5\testing\src\before_each.js:25:12)
        at new ManagedPromise (C:\git\people-in-space\node_modules\selenium-webdriver\lib\promise.js:1067:7)
        at ControlFlow.promise (C:\git\people-in-space\node_modules\selenium-webdriver\lib\promise.js:2396:12)
        at TaskQueue.execute_ (C:\git\people-in-space\node_modules\selenium-webdriver\lib\promise.js:2970:14)
        at TaskQueue.executeNext_ (C:\git\people-in-space\node_modules\selenium-webdriver\lib\promise.js:2953:27)
        at asyncRun (C:\git\people-in-space\node_modules\selenium-webdriver\lib\promise.js:2860:25)
        at C:\git\people-in-space\node_modules\selenium-webdriver\lib\promise.js:676:7
        at ZoneDelegate.invoke (C:\git\people-in-space\node_modules\zone.js\dist\zone-node.js:388:26)
        at Zone.run (C:\git\people-in-space\node_modules\zone.js\dist\zone-node.js:138:43)
        at C:\git\people-in-space\node_modules\zone.js\dist\zone-node.js:870:57
        at ZoneDelegate.invokeTask (C:\git\people-in-space\node_modules\zone.js\dist\zone-node.js:421:31)
        at Zone.runTask (C:\git\people-in-space\node_modules\zone.js\dist\zone-node.js:188:47)
        at drainMicroTaskQueue (C:\git\people-in-space\node_modules\zone.js\dist\zone-node.js:594:35)
    From: Task: Run beforeEach in control flow
        at ControlFlow.emit (C:\git\people-in-space\node_modules\selenium-webdriver\lib\events.js:62:21)
        at ControlFlow.shutdown_ (C:\git\people-in-space\node_modules\selenium-webdriver\lib\promise.js:2565:10)
    From asynchronous test: 
    Error
        at C:\git\people-in-space\node_modules\@angular\core\bundles\core-testing.umd.js:1283:15
        at Object.setPrototypeOf.__proto__ (C:\git\people-in-space\node_modules\tslib\tslib.es6.js:1:1)
        at Object.<anonymous> (C:\git\people-in-space\node_modules\@angular\core\bundles\core-testing.umd.js:10:2)
        at Module._compile (module.js:635:30)
        at Object.Module._extensions..js (module.js:646:10)
        at Module.load (module.js:554:32)
        at tryModuleLoad (module.js:497:12)
        at Function.Module._load (module.js:489:3)
        at Module.require (module.js:579:17)
        at require (internal/module.js:11:18)
        at Object.<anonymous> (C:\git\people-in-space\e2e\api.e2e-spec.ts:1:1)
        at Module._compile (module.js:635:30)
        at Module.m._compile (C:\git\people-in-space\node_modules\ts-node\src\index.ts:392:23)
        at Module._extensions..js (module.js:646:10)
        at Object.require.extensions.(anonymous function) [as .ts] (C:\git\people-in-space\node_modules\ts-node\src\index.ts:395:12)
    [31m- [39m[31mFailed: Cannot read property 'get' of null[39m
        at UserContext.<anonymous> (C:\git\people-in-space\e2e\api.e2e-spec.ts:26:14)
        at new ManagedPromise (C:\git\people-in-space\node_modules\selenium-webdriver\lib\promise.js:1067:7)
        at ControlFlow.promise (C:\git\people-in-space\node_modules\selenium-webdriver\lib\promise.js:2396:12)
        at TaskQueue.execute_ (C:\git\people-in-space\node_modules\selenium-webdriver\lib\promise.js:2970:14)
        at TaskQueue.executeNext_ (C:\git\people-in-space\node_modules\selenium-webdriver\lib\promise.js:2953:27)
        at asyncRun (C:\git\people-in-space\node_modules\selenium-webdriver\lib\promise.js:2860:25)
        at C:\git\people-in-space\node_modules\selenium-webdriver\lib\promise.js:676:7
        at ZoneDelegate.invoke (C:\git\people-in-space\node_modules\zone.js\dist\zone-node.js:388:26)
        at Zone.run (C:\git\people-in-space\node_modules\zone.js\dist\zone-node.js:138:43)
        at C:\git\people-in-space\node_modules\zone.js\dist\zone-node.js:870:57
        at ZoneDelegate.invokeTask (C:\git\people-in-space\node_modules\zone.js\dist\zone-node.js:421:31)
        at Zone.runTask (C:\git\people-in-space\node_modules\zone.js\dist\zone-node.js:188:47)
        at drainMicroTaskQueue (C:\git\people-in-space\node_modules\zone.js\dist\zone-node.js:594:35)
        at <anonymous>
    From: Task: Run it("should report success getting a list of people in space") in control flow
        at ControlFlow.emit (C:\git\people-in-space\node_modules\selenium-webdriver\lib\events.js:62:21)
        at ControlFlow.shutdown_ (C:\git\people-in-space\node_modules\selenium-webdriver\lib\promise.js:2565:10)
        at shutdownTask_.MicroTask (C:\git\people-in-space\node_modules\selenium-webdriver\lib\promise.js:2490:53)
        at MicroTask.asyncRun (C:\git\people-in-space\node_modules\selenium-webdriver\lib\promise.js:2619:9)
        at C:\git\people-in-space\node_modules\selenium-webdriver\lib\promise.js:676:7
        at ZoneDelegate.invoke (C:\git\people-in-space\node_modules\zone.js\dist\zone-node.js:388:26)
        at Zone.run (C:\git\people-in-space\node_modules\zone.js\dist\zone-node.js:138:43)
        at C:\git\people-in-space\node_modules\zone.js\dist\zone-node.js:870:57
    From asynchronous test: 
    Error
        at Suite.<anonymous> (C:\git\people-in-space\e2e\api.e2e-spec.ts:25:5)
        at Object.<anonymous> (C:\git\people-in-space\e2e\api.e2e-spec.ts:5:1)
        at Module._compile (module.js:635:30)
        at Module.m._compile (C:\git\people-in-space\node_modules\ts-node\src\index.ts:392:23)
        at Module._extensions..js (module.js:646:10)
        at Object.require.extensions.(anonymous function) [as .ts] (C:\git\people-in-space\node_modules\ts-node\src\index.ts:395:12)
        at Module.load (module.js:554:32)
        at tryModuleLoad (module.js:497:12)
        at Function.Module._load (module.js:489:3)
        at Module.require (module.js:579:17)
        at require (internal/module.js:11:18)

people-in-space App
    [31m× should display welcome message[39m
    [31m- [39m[31mFailed: Cannot read property 'assertPresent' of undefined[39m
        at resetFakeAsyncZone (C:\git\people-in-space\node_modules\@angular\core\bundles\core-testing.umd.js:401:19)
        at UserContext.<anonymous> (C:\git\people-in-space\node_modules\packages\core\esm5\testing\src\before_each.js:25:12)
        at new ManagedPromise (C:\git\people-in-space\node_modules\selenium-webdriver\lib\promise.js:1067:7)
        at ControlFlow.promise (C:\git\people-in-space\node_modules\selenium-webdriver\lib\promise.js:2396:12)
        at TaskQueue.execute_ (C:\git\people-in-space\node_modules\selenium-webdriver\lib\promise.js:2970:14)
        at TaskQueue.executeNext_ (C:\git\people-in-space\node_modules\selenium-webdriver\lib\promise.js:2953:27)
        at asyncRun (C:\git\people-in-space\node_modules\selenium-webdriver\lib\promise.js:2860:25)
        at C:\git\people-in-space\node_modules\selenium-webdriver\lib\promise.js:676:7
        at ZoneDelegate.invoke (C:\git\people-in-space\node_modules\zone.js\dist\zone-node.js:388:26)
        at Zone.run (C:\git\people-in-space\node_modules\zone.js\dist\zone-node.js:138:43)
        at C:\git\people-in-space\node_modules\zone.js\dist\zone-node.js:870:57
        at ZoneDelegate.invokeTask (C:\git\people-in-space\node_modules\zone.js\dist\zone-node.js:421:31)
        at Zone.runTask (C:\git\people-in-space\node_modules\zone.js\dist\zone-node.js:188:47)
        at drainMicroTaskQueue (C:\git\people-in-space\node_modules\zone.js\dist\zone-node.js:594:35)
    From: Task: Run beforeEach in control flow
    From asynchronous test: 
    Error
        at C:\git\people-in-space\node_modules\@angular\core\bundles\core-testing.umd.js:1283:15
        at Object.setPrototypeOf.__proto__ (C:\git\people-in-space\node_modules\tslib\tslib.es6.js:1:1)
        at Object.<anonymous> (C:\git\people-in-space\node_modules\@angular\core\bundles\core-testing.umd.js:10:2)
        at Module._compile (module.js:635:30)
        at Object.Module._extensions..js (module.js:646:10)
        at Module.load (module.js:554:32)
        at tryModuleLoad (module.js:497:12)
        at Function.Module._load (module.js:489:3)
        at Module.require (module.js:579:17)
        at require (internal/module.js:11:18)
        at Object.<anonymous> (C:\git\people-in-space\e2e\api.e2e-spec.ts:1:1)
        at Module._compile (module.js:635:30)
        at Module.m._compile (C:\git\people-in-space\node_modules\ts-node\src\index.ts:392:23)
        at Module._extensions..js (module.js:646:10)
        at Object.require.extensions.(anonymous function) [as .ts] (C:\git\people-in-space\node_modules\ts-node\src\index.ts:395:12)

**************************************************
*                    Failures                    *
**************************************************

1) people-in-space API should report success getting a list of people in space
[31m- [39m[31mFailed: Cannot read property 'getComponentFromError' of null[39m
[31m- [39m[31mFailed: Cannot read property 'assertPresent' of undefined[39m
[31m- [39m[31mFailed: Cannot read property 'get' of null[39m

2) people-in-space App should display welcome message
[31m- [39m[31mFailed: Cannot read property 'assertPresent' of undefined[39m

Executed 2 of 2 specs[31m (2 FAILED)[39m in 1 sec.
[21:43:49] I/launcher - 0 instance(s) of WebDriver still running
[21:43:49] I/launcher - chrome #01 failed 2 test(s)
[21:43:49] I/launcher - overall: 2 failed spec(s)
[21:43:49] E/launcher - Process exited with error code 1
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! people-in-space@0.0.0 e2e: `ng e2e`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the people-in-space@0.0.0 e2e script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\akb\AppData\Roaming\npm-cache\_logs\2018-01-04T21_43_49_504Z-debug.log

1 个答案:

答案 0 :(得分:0)

如果我绕过Angular的依赖注入,我发现我可以在e2e测试中使用HttpClient。

Action

<强> api.e2e-spec.ts

npm install xmlhttprequest

repo