What is the difference between integration, unit and e2e testing on the frontend?

Question

JavaScript

Good afternoon. Recently, I had to quickly delve into front-end testing, and confusion remained in my head, it would be great if you could help put everything in its place using an example.
Unit testing - testing a separate module, element, unit.
Integration testing - testing components in conjunction.
E2E tests are user-level tests.
We use Angular 1 on the project.
These methods are usually used in conjunction, that is, writing one does not interfere with writing another. For example, I'm testing a module window. Or the back to top button. What tests will need to cover all this?
How to test button clicks in unit tests? Or can we only test the handler function?

Answer 1

How to test button clicks in unit tests? Or can we only test the handler function?

In unit tests, you can test the controller of the component, saying that it exposes the desired state. The DOM does not need to be checked. The binding mechanism is already well covered by unit tests at the framework level. More often, units cover services, resolvers, and so on. They check the logic of the work of individual small pieces.
in integration, you can already slowly check the DOM of individual components. Simply because you could have mistyped when writing the bindings. Well, that is, the purpose of integration tests is to check that the components work in the assembly.
In e2e (end to end), you download the entire application and mimic user actions. And the interaction goes through. From a button in the browser to queries in the database on the server (if there is a backend). This is the slowest type of testing and should only cover positive scenarios.
Read about the testing pyramid.