Contesto del codice

Ho una pagina complessa come parte della mia app Web che viene popolata in modo dinamico con le informazioni utilizzando knockout.js . La pagina ha creato dinamicamente i tag di ancoraggio che si collegano l'un l'altro. Ad esempio, potrebbe esserci un tag

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

nella parte superiore della pagina e

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

nella parte inferiore della pagina. Abbiamo un file test.html che contiene tutti i test front-end ed è separato da tutti i file view.html.

Test dell'ideologia

Il nostro ambiente di lavoro è impostato in modo tale che quando qualcuno sta eseguendo una revisione tra pari, può verificare se tutti i test front-end stanno passando e assicurarsi che tutto funzioni come previsto. Naturalmente, questo ambiente dipende da test ben scritti che coprono tutto il codice. Pertanto, quando viene rilevato un comportamento imprevisto, vogliamo scrivere un test dell'unità in errore per esporre quel comportamento come test in modo che il nostro sistema di test continui a funzionare.

Problema

È stato trovato un bug in cui il secondo tag <a> come visto sopra non veniva impostato correttamente. Seguendo la nostra ideologia di test, voglio scrivere un test unitario per garantire che entrambi i tag vengano creati correttamente.

Soluzioni che ho escluso

Copiare e incollare il codice HTML che genera i tag <a> dinamici dalla vista al file di test non ha senso perché se uno sviluppatore che lavora sul progetto in futuro modifica l'HTML nella vista e non lo fa aggiornalo nel file test.html, quindi il test è sbagliato.

Inoltre, non sono disposto a includere semplicemente i test sulla pagina view.html, in quanto ciò violerebbe un certo numero di principi e mi sembra una cattiva idea tutt'intorno.

Domanda

Quindi la mia domanda è: come posso testare l'HTML creato dinamicamente mentre permetto ai test di risiedere in un file separato?

EDIT: per rendere più chiaro il mio dilemma: come posso scrivere HTML in modo che esista in due file separati (A & B), in modo tale che solo un file (A, B o C) debba essere modificato in per aggiornare l'HTML sia in A & B?

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

o

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

Possibile soluzione?

Mi sono chiesto se le importazioni di HTML sarebbero una possibile soluzione a questo problema e se qualcuno ne sapesse qualcosa in questa situazione apprezzerei le tue opinioni.