what is the real difference between ng test and ng e2e

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.