How to test dynamically created HTML when the tests are in a separate file?

Question

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.

Problem

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.

Question

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

or

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.

Answer 1

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.