Most of the Smart Dumb Component UI pattern implemented for Angular that I have seen seem to split each view component into one smart component and one dumb/presentation component. I have recently come up with a variation to this pattern where one global smart component can be setup for all the view components for an Angular SPA.
Here is a demo of the implementation of this pattern for an SPA - StackBlitz
and here is the link to the source - GitHub
An interesting thing happens when the view component is split into a Smart and Dumb components - you need only to unit test the smart component and the dumb components get tested in e2e. If you have only one smart component for the whole project then you only need to unit test one method (but with different input data for each view).
For the example given above if you run "ng test" you would get:
Interestingly, the unit test script used above can be reused in any Angular project. You only need to change input data.
If you run "ng e2e" you would get
Conclusions
The smart dumb component pattern described here is shown to offer several advantages towards Testing.
Top comments (0)