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:
xxx.compnent.spec.ts
run and a final report similar to JUnit is showed in browserng e2e:
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
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.
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.
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 :
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 :
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 :
N.B. : Be also aware of those points :
Hope this helps.