What is the best way to make unit tests and test HTL template and javascript interactivity?

[alankzp]

If I have code in ui.frontend that manipulates the DOM that the HTL renders, how should I be writing unit tests to test the interactivity between the ui.frontend and HTL?

I could try to copy and paste a small section of HTL template html as a unit test fixture but I can't copy page properties. Seems like there is no synergistic way to do this.

[Jörg_Hoh]

You need to build an integration test, e.g. using Selenium or any other test framework, which works with a browser.

[jgshultz]

I'm experimenting with the HTL Engine which is an Adobe Github project.

https://github.com/adobe/htlengine

and there are example mocha test available for testing HTL Templates. For example you test to see if a template inclusion is working properly. For my project we have adopted a strategy of using atomic components which have templates share among several components. If someone were to change an atomic, then it could cause dependency break. We could safeguard against that with a unit test on the HTL. When we do a build we will immediately know which components break. I have some questions though about this strategy and I'll raise them separately. Questions about the long term support for this Github project.

So far in my experimentation I have been using Jest unit testing framework and I am able to render HTML from HTL templates and pass sample data into the properties. Its a little tricky syntax because it deals with Asynchronous logic.

I have also thought about E2E testing on these and I think that approach might be a little heavy handed if there is a way to test these dependencies without running an entire AEM Instance.

[kautuk_sahni]

@alankzp If you have successfully found a solution on your own, we kindly ask that you share it with the community for future reference and mark it as the correct answer.