Code context

I have a complex page as part of my web app that is dynamically populated with information using knockout.js. The page has dynamically created anchor tags that link to each other. For example, there might be a tag

<a data-bind="attr: { id: 'top-' + myArray().length, href: '#bottom-' + myArray().length }">

at the top of the page and

<a data-bind="attr: { id: 'bottom-' + myArray().length, href: '#top-' + myArray().length }">

at the bottom of the page. We have one test.html file that contains all front-end tests and is separate from all view.html files.

Testing ideology

Our work environment is set up so that when someone is doing a peer review, they can check if all front-end tests are passing and be assured that everything will work as expected. Of course, this environment depends on well-written tests that cover all code. Therefore, when unexpected behaviour is found, we want to write a failing unit test to expose that behavior as a test so that our system of checking tests continues to work.


A bug was found where the second <a> tag as seen above was not being set correctly. Following our testing ideology, I want to write a unit test to ensure that both tags are being created correctly.

Solutions I've ruled out

Copy and pasting the HTML code that generates the dynamic <a> tags from the view to the test file won't make sense because if a developer working on the project in the future changes the HTML in the view and doesn't update it in the test.html file, then the test is wrong.

I am also unwilling to simply include the tests on the view.html page itself, as that would violate a number of principles and just seems like a poor idea all around.


Therefore my question is: How can I test dynamically created HTML while allowing the tests to reside in a separate file?

EDIT: To make my dilemma more clear: How can I write HTML so that it exists in two separate files (A & B), such that only one file (A, B, or C) needs to be modified in order to update the HTML in both A & B?

A modified --> A and B both updated with changes to A


C modified --> A and B both updated with changes to C

Possible solution?

I've wondered if HTML imports would be a possible solution to this problem and if anyone knows anything about them in this situation I would appreciate your thoughts.


If you want to test dynamically created html your test must dynamically create it.

Any testing routine that involves coping and pasting is bad. Testing duplicates is bad. Manual steps in a test is bad.

Any solution that asks operational code to know about the tests is bad.

However, it maybe worth considering a redesign to make it possible for operational code and test code to both easily create the dynamic html.

Tests should control what is generated to make comparison easy.

Avoid testing trivial things. Concentrate of verifying behavior.

  • I agree with everything you're saying, but I don't see an actual idea or suggestion in your answer. > However, it maybe worth considering a redesign... Yes, that is my question: what is that redesign? How to design it in such a way? – TW80000 Aug 29 '16 at 16:09
  • Be sure you're following the dependency inversion principle. I'd need a lot more detail before I could tell you how. – candied_orange Aug 29 '16 at 19:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.