ng test 和 ng e2e 之间的真正区别是什么 [英] what is the real difference between ng test and ng e2e

问题描述

恐怕有人会结束我的问题，但我找不到令人满意的问题(可能是因为我在 Angular 2+ 世界中非常有限，而且我理解错了).

据我所知，在完成了几次 Hello World 和观看了很少的 YouTube 演示后:

ng 测试:

• 您使用 Jasmine 语言编写测试
• 您使用 Karma 使用许多可用的浏览器来测试您的测试
• 您执行单元测试或集成测试
• 所有 xxx.compnent.spec.ts 运行并在浏览器中显示类似于 JUnit 的最终报告

ng e2e:

• 您使用 Jasmine 语言编写测试
• 您使用 Karma 使用许多可用的浏览器来测试您的测试

• 您在编写测试时考虑了嵌套用户事件

   例如.page.navigateTo();page.getParagraphText().then(msg => expect(msg).toEqual('欢迎使用应用程序！！')).then(msg => expect(msg).toEqual('xxx')).then(done, done.fail);

• 您主要在将应用程序部署到一种预生产环境之后使用量角器执行端到端测试

• 触发 e2e 文件夹下的测试并在命令行控制台中打印结果

理论上来说，第二种是端到端的，重点是模拟最终用户完成的整个流程.

希望在正确之前，我想知道幕后发生的事情真正让他们与众不同.我不想比较哪个更好，但我肯定会以某种方式错过某些点，因为我使用最终用户完成的完全相同的想法创建了一些测试，并且我通过 ng test 触发了它.

例如:

<预><代码>...it('当点击`create Paste`时应该显示模态', () => {让 createPasteButton = fixture.debugElement.query(By.css("button"));//在createPaste方法上创建一个间谍spyOn(component,"createPaste").and.callThrough();//triggerEventHandler 模拟按钮对象上的点击事件createPasteButton.triggerEventHandler('click',null);//spy 检查该方法是否被调用期望(component.createPaste).toHaveBeenCalled();夹具.detectChanges();expect(component.showModal).toBeTruthy("showModal 现在应该是真的");expect(element.innerHTML).toContain("source-modal");});...

我记得我读过类似量角器在测试执行期间提供等待/睡眠行为"之类的内容，但是当我看到在没有量角器能够模拟最终用户的情况下完成的测试时，我看不到这个聚合值的位置.只要您对测试进行编码以执行与最终用户完全相同的流程，它就会与 Angular Cli 创建的 e2e 文件夹下的 e2e 测试建议相同.

如果我的研究促使我正确理解上面发布的内容，那么唯一真正的区别是我作为开发人员组织测试的方式.幕后并没有发生什么真正不同的事情.

同样，我很高兴将此问题视为用于教学目的的澄清问题:根本不打算在这里比较框架.

解决方案

你已经走在了理解这一切的良好道路上.

• Ng 测试(通过 Karma 启动的 Jasmine + Angular 测试实用程序测试):

您正在使用 jasmine 框架来编写测试并将它们定义为套件并期望您可以测试的结果，但主要的是您实际上是在使用 karma 启动器直接在浏览器上执行测试.这通常在 angular 应用程序中配置.

这意味着只有一台服务器在运行测试，仅此而已.您使用自己的值进行测试并检查您的组件是否正常工作.

目的是检查单个组件(单元测​​试)或多个模块/组件(集成测试)是否单个功能/小型工作流按预期正常工作，没有副作用.

• Ng E2E(茉莉花 + 量角器):

<块引用>

Protractor 是一个用于 Angular 和 AngularJS 的端到端测试框架应用程序.量角器针对正在运行的应用程序运行测试在真实的浏览器中，像用户一样与之交互.

在这里，您编写的测试将充当用户.这意味着您的应用程序在您的浏览器中运行，另一个程序将对您的应用程序运行测试，模拟用户交互.

这很重要，因为这意味着两件事:

1. 单元测试和集成测试使用静态的模拟数据来运行测试.
2. 量角器测试使用真实数据，并执行 HTTP(或任何您使用的)调用来获取数据并使用/测试它.

量角器的目的是验证应用程序中的完整操作工作流.例如，我将为我的登录组件编写单元测试，为我的登录服务编写单元测试，为我的整个模块编写集成测试以及我需要测试的依赖于多个组件/服务的任何行为.完成此操作后，我稍后将编写一个完整的端到端测试，以验证我在应用程序中的整个身份验证过程.

请记住，对于测试来说，有一个非常重要的比率非常合乎逻辑:

• 单元测试应占您测试的 70%.
• 集成测试应占测试的 20%.
• 端到端测试应占测试的 10%.

这是为什么?因为如果您对许多组件进行了正确的单元测试，您就不需要在端到端测试中再次进行测试.

<小时>

结论:

• 它们的运作方式不同，目的是测试不同的事物(单元功能/完整的工作流程).
• 它们是互补的，这意味着如果您只实现单元/集成测试，您将永远无法保证工作流从头到尾都能正常工作；而且，如果您只编写 E2E 测试，您将永远无法确认您的工作流程中没有副作用.

<小时>

注意:也要注意这些要点:

• Jasmine、Karma 和 Protractor 可以随意定制，因此您可以将它们输出到可由 Jenkins 作业处理的 XML 文件中，而不是不切实际的命令行.
• 是的，您可以为两者编写相同的代码并有效地测试同一事物，但请记住，您想要的是高效并编写可维护的测试代码.我谈到的比率非常重要.

希望这会有所帮助.

I am afraid someone close my question but I couldn't find a satisfying question (maybe because I am very limited in Angular 2+ world and I understood something wrong).

As far as I could understand after few Hello World done and few YouTube demo watched:

ng test:

• you write your test using Jasmine language
• you test your test with many Browsers available using Karma
• you execute either unit or integrated testing
• all xxx.compnent.spec.ts run and a final report similar to JUnit is showed in browser

ng e2e:

• you write your test using Jasmine language
• you test your test with many Browsers available using Karma

• you write your tests with nesting user event in mind

  eg. page.navigateTo();
  page.getParagraphText()
    .then(msg => expect(msg).toEqual('Welcome to app!!'))
    .then(msg => expect(msg).toEqual('xxx'))
    .then(done, done.fail);
  

• you execute End to End test using protractor mainly after deployed the application a kind of pre-production environment

• the tests under e2e folder are triggered and the result is printed in command line console

Theoracly saying, the second is specific for end to end where the focus is to simulate a entire flow done by an end user.

Hopefully, until here is correct, I am wondering what is happening behind the scene that really make them different. I don't want to compare which is better but certainly I am missing some point somehow because I created few tests using exact same idea done by end user and I triggered it by ng test.

For instance:

...

it('should display the modal when `create Paste` is clicked', () => {

    let createPasteButton = fixture.debugElement.query(By.css("button"));
    //create a spy on the createPaste  method
    spyOn(component,"createPaste").and.callThrough();

    //triggerEventHandler simulates a click event on the button object
    createPasteButton.triggerEventHandler('click',null);

    //spy checks whether the method was called
    expect(component.createPaste).toHaveBeenCalled();
    fixture.detectChanges();
    expect(component.showModal).toBeTruthy("showModal should now be true");
    expect(element.innerHTML).toContain("source-modal");
});

...

I remenbered I read something like "protractor offer a waiting/sleeping behaviour during tests execution" but I can't see where this aggregate value when I see the tests done without protractor been able to simulate a final user as well. As long as you code your tests to do exact same flow done by an end user it will be same e2e test propose under e2e folder created by Angular Cli.

If my study drove me to correctly understanding as posted above then, the only real difference is the way I, as developer, is organizing my tests. There is nothing really different happening behind the scene.

Again, I would appreciate see this as clarifing question for didatic purpose: there is no intention to compare frameworks here at all.

解决方案

You are on the good road to understand all of it.

• Ng test (Jasmine + Angular Testing Utilities tests launched through Karma):

You are using the jasmine framework to write your tests and define them as suites and expect results that you can test, but the main thing is that you are actually using the karma launcher to execute tests directly on the browser. This is normaly configured in the angular app.

This means there is one server running the tests and that's it. You test with your own values and check that your components are working correctly.

The aim is to check for single components (unit test) or several modules / components (integration tests) that a single function / small workflow is working correctly as intended without side effects.

• Ng E2E (Jasmine + Protractor) :

Protractor is an end-to-end test framework for Angular and AngularJS applications. Protractor runs tests against your application running in a real browser, interacting with it as a user would.

Here, the tests you have written will act as a user. This means there is your application running in your browser, and another program will run the tests against your application, simulating a user interaction.

This is very important, because that means two things :

1. Unit tests and Integration tests are using static, mock data to run the tests.
2. Protractor tests are using real data, and doing the HTTP (or whatever you are using) calls to fetch the data and consume/test it.

The aim with protractor is to validate a full operationnal workflow in your application. For example, I'll write my unit test for my login component, write an unit test for my login service, write an integration test for my whole module and whatever behavior I need to test that depends on several components / services. Once this is done, I'll write later a full end-to-end test that will validate my whole authentication process in my application.

Bear in mind, there is a ratio that is important about testing which is very logical :

• Unit tests should represent 70% of your tests.
• Integration tests should represent 20% of your tests.
• E2E tests should represent 10% of your tests.

Why is that ? Because if you did unit test correctly a lot of your components, you won't need to test that again in your End-to-End tests.

---

Conclusion :

• They operate differently and their aim is to test different things (unit function / full workflow).
• They are complementary, which means that if you only realize Unit / Integration tests, you will never have the guarantee that a workflow will work from A to Z; as well as if you only write E2E tests you will never be able to confirm that there are no side-effects in your workflow.

---

N.B. : Be also aware of those points :

• Jasmine, Karma, and Protractor can be customized at will, so you can make them output in an XML file that could be processed by a Jenkins job instead of a command line which is not practical.
• Yes, you can write the same code for both and effectively test the same thing, but bear in mind that what you want is to be efficient and write maintanable test code. The ratios I talked about are very important.

Hope this helps.

这篇关于ng test 和 ng e2e 之间的真正区别是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！