Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Long Term Support for HTL Engine for Javascript

Avatar

Level 1

Hello, I am researching testing options for HTL templates. I am experimenting with this project call HTL Engine for Javascript which is an Adobe Github project.

 

https://github.com/adobe/htlengine

 

In that project it demonstrates using Mocha testing to write unit tests for HTL. I'm currently experimenting with using the HTL rendering engine in Jest to check if inclusions are working properly and we have all the properties matching as I foresee we could run into some dependency breaks with our current atomic component strategy.

 

My colleagues want me to find out a few things about it before we commit to using this testing strategy. 

 

  1. What is the long term support for this Github project?
  2. Will we still be using HTL in cloud manager?
  3. Are there any other testing strategies that would help us test our templates are working properly aside from an integration test?

 

Note: I also added a comment in this question about experimenting with the HTL Engine and why I see the benefit to adopting unit testing to check for dependency breaks in the HTL inclusions. Our development team is working with an Atomic strategy. Button would be an atom and a Banner would be component. One or more atoms can be used in a component. If a developer is working on one component they won't realize what other components are getting affected by template that is being reused in other places. So if you have a button template that is used in one component, if you removed a property in the button then other components that depend on that property in the button will break. The developer won't realize it, but a unit test will help us fix it early by identifying component templates that fail to render properly.

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/what-is-the-best-way-to-ma...

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @jgshultz 
Not related to your question but we also had a atomic approach and based on atoms , we created composite components.

we used visual regression testing to find an issue if changing an atom can cause an issue. However we did not do any functional testing as HTL is used only for rendering.

 

Visual testing framework : https://github.com/garris/BackstopJS



Arun Patidar

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

Hi @jgshultz 
Not related to your question but we also had a atomic approach and based on atoms , we created composite components.

we used visual regression testing to find an issue if changing an atom can cause an issue. However we did not do any functional testing as HTL is used only for rendering.

 

Visual testing framework : https://github.com/garris/BackstopJS



Arun Patidar

Avatar

Administrator

@jgshultz Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.



Kautuk Sahni