Harness failing to bind contact-summary context onto forms containing elements where name is non-self-closing HTML tag (eg. form)

[jonathanbataire]

Description

Some config-ug-vht tests are failing because forms logic relies on contact summary values passed into the forms. Harness doesnt seem to pass these values into the form hence the form workflow logic fails then the test

Example of failing tests

https://github.com/medic/config-ug-vht/blob/c4ba8c280c6545e14fd7b5c999413bc23b085cf9/test/contact-summary/family_planning_card.spec.js#L78

Tested using v3.0.6 branch

[kennsippell]

The contact summary isn't being bound onto the form because this condition is failing to evaluate. The check for doc.hasContactSummary is false.

This is the definition of hasContactSummary:

const hasContactSummary = $(model).find('> instance[id="contact-summary"]').length === 1;

At first glance, this appears to be because of an eccentric behavior in jQuery.

This returns 0 (hasContactSummary is false)

$(`<model>
    <instance>
      <form />
    </instance>
    <instance id="contact-summary" />
  </model>`).find('> instance[id=\"contact-summary\"]').length

But this returns 1 (hasContactSummary is true)

$(`<model>
    <instance>
    </instance>
    <instance id="contact-summary" />
  </model>`).find('> instance[id=\"contact-summary\"]').length

I'm going to test this form on cht-core latest version and see if it is working as expected.

[kennsippell]

Works fine on cht-core latest. @jkuester Any thoughts on what I'm seeing above? Have you seen this in your journeys?

[jkuester]

Short answer is no, I have not seen this before.

That being said, I am really confused by everything in this thread. (Maybe I just need more coffee....)

• The fp_registration form that is used in the family_planning_card tests does not seem to have any logic in it that references contact-summary (either in the version from the linked commit or in master).
• I cannot recreate your described jquery behavior. (Both examples return 1 for me when just run in isolation.)
• I tried spinning up the fp_registration form on a CHT instance running the enketo-service-refactor and it seemed to work fine

[jonathanbataire]

@jkuester it's the fp_follow_up form That's where you get the stuff The fp_registration will trigger the follow up task

[jkuester]

Ah of course! :facepalm:

@jonathanbataire do you have a branch where the test is failing?

[jonathanbataire]

Ah of course! facepalm

@jonathanbataire do you have a branch where the test is failing?

Yes here https://github.com/medic/config-ug-vht/blob/4.x-upgrade/test/contact-summary/family_planning_card.spec.js

[jkuester]

Found it!

So, the longer I looked at this the more familiar it felt. Finally I realized it is because of a change in how JQuery deals with self-closing xml tags: https://jquery.com/upgrade-guide/3.5/.

Basically, tags like p, span and form are not allowed to be self-closing in HTML. But they can be in XML. However, JQuery uses the "htmlPrefilter" even when parsing XML. In the case of the fp_registration form, one of the fields in the model is <form/>.

The solution here is just to update the test-harness to implement the override suggested in the above linked jQuery upgrade guide (similar to what we did in cht-core: https://github.com/medic/cht-core/blob/722d4802da6c5c2f9a7f0f2a840446bd39e94d6d/webapp/src/ts/main.ts#L45

[kennsippell]

Published as cht-conf-test-harness@3.0.7