fix(medic#8226): skip form pages where all contents are hidden (medic#10917)

Co-authored-by: Joshua Kuestersteffen <[email protected]>

Author: megha1807

tests/e2e/default/enketo/db-object-widget.wdio-spec.js

@@ -72,11 +72,11 @@ describe('DB Object Widget', () => {
             name: offlineUser.contact.name,
             sex: offlineUser.contact.sex
           },
-          user_contact: {
-            _id: offlineUser.contact._id,
-            name: offlineUser.contact.name,
-            sex: offlineUser.contact.sex
-          },
+        },
+        user_contact: {
+          _id: offlineUser.contact._id,
+          name: offlineUser.contact.name,
+          sex: offlineUser.contact.sex
         },
         people: {
           user_contact: {

tests/e2e/default/enketo/forms/db-object-form.xlsx

@@ -14,7 +14,7 @@
         </translation>
       </itext>
       <instance>
-        <data id="db-object-form" version="2024-09-05 00:00:00" prefix="J1!db-object-form!" delimiter="#">
+        <data id="db-object-form" version="2026-04-30 00:00:00" prefix="J1!db-object-form!" delimiter="#">
           <inputs>
             <meta>
               <location>
@@ -29,12 +29,12 @@
               <name/>
               <sex/>
             </user>
-            <user_contact>
-              <_id/>
-              <name/>
-              <sex/>
-            </user_contact>
           </inputs>
+          <user_contact>
+            <_id/>
+            <name/>
+            <sex/>
+          </user_contact>
           <people>
             <user_contact>
               <_id/>
@@ -55,9 +55,9 @@
       <bind nodeset="/data/inputs/user/contact_id" type="string"/>
       <bind nodeset="/data/inputs/user/name" type="string"/>
       <bind nodeset="/data/inputs/user/sex" type="string"/>
-      <bind nodeset="/data/inputs/user_contact/_id" type="string" calculate="../../user/contact_id"/>
-      <bind nodeset="/data/inputs/user_contact/name" type="string"/>
-      <bind nodeset="/data/inputs/user_contact/sex" type="string"/>
+      <bind nodeset="/data/user_contact/_id" type="string" calculate="../../inputs/user/contact_id"/>
+      <bind nodeset="/data/user_contact/name" type="string"/>
+      <bind nodeset="/data/user_contact/sex" type="string"/>
       <bind nodeset="/data/people/user_contact/_id" type="string" calculate="../../../inputs/user/contact_id"/>
       <bind nodeset="/data/people/user_contact/name" type="string"/>
       <bind nodeset="/data/people/user_contact/sex" type="string"/>
@@ -69,12 +69,12 @@
   <h:body class="pages">
     <group ref="/data/inputs">
       <group ref="/data/inputs/user">
-        <input ref="/data/inputs/user/contact_id" appearance="hidden select-contact type-person"/>
-      </group>
-      <group ref="/data/inputs/user_contact">
-        <input ref="/data/inputs/user_contact/_id" appearance="hidden select-contact type-person"/>
+        <input ref="/data/inputs/user/contact_id" appearance="select-contact type-person"/>
       </group>
     </group>
+    <group appearance="hidden" ref="/data/user_contact">
+      <input ref="/data/user_contact/_id" appearance="select-contact type-person"/>
+    </group>
     <group appearance="field-list" ref="/data/people">
       <group ref="/data/people/user_contact">
         <input ref="/data/people/user_contact/_id" appearance="hidden select-contact type-person"/>

tests/e2e/default/enketo/forms/db-object-form.xml

@@ -31,6 +31,7 @@
     require( './widgets/display-base64-image' ),
     require( './widgets/dynamic-url' ),
     require( './widgets/draw' ),
+    require( './widgets/hidden-group' ),
   ];
 
   module.exports = widgets;

webapp/src/js/enketo/widgets.js

@@ -0,0 +1,24 @@
+'use strict';
+const Widget = require('enketo-core/src/js/widget').default;
+
+/**
+ * Widget that disables groups with the `hidden` appearance. This prevents Enketo from rendering an empty page for
+ * a root-level hidden group.
+ *
+ * @extends Widget
+ */
+class HiddenGroup extends Widget {
+  /**
+   * Matches groups that have the `hidden` appearance.
+   * These are top-level groups that should not be rendered as a page.
+   */
+  static get selector() {
+    return '.or-group-data.or-appearance-hidden';
+  }
+
+  _init() {
+    this.element.classList.add('disabled');
+  }
+}
+
+module.exports = HiddenGroup;

webapp/src/js/enketo/widgets/hidden-group.js

@@ -0,0 +1,75 @@
+import { expect } from 'chai';
+import sinon from 'sinon';
+const $ = require('jquery');
+
+const HiddenGroup = require('../../../../../src/js/enketo/widgets/hidden-group');
+
+const testId = 'hidden-group-test';
+const buildHtml = (html: string) => document.body.insertAdjacentHTML(
+  'afterbegin',
+  `<div id="${testId}">${html}</div>`
+);
+
+describe('HiddenGroup Widget', () => {
+
+  afterEach(() => {
+    sinon.restore();
+    $(`#${testId}`).remove();
+  });
+
+  describe('selector', () => {
+    it('matches groups with both group and hidden appearances', () => {
+      buildHtml(`
+        <section class="or-group-data or-appearance-hidden">
+          <div class="question or-appearance-hidden"></div>
+        </section>
+      `);
+      const el = document.querySelector('.or-group-data.or-appearance-hidden');
+      expect(el).to.not.be.null;
+      expect(el!.matches(HiddenGroup.selector)).to.be.true;
+    });
+
+    it('does not match groups with only group appearance', () => {
+      buildHtml(`<section class="or-group-data"></section>`);
+      const el = document.querySelector(`#${testId} .or-group-data`);
+      expect(el!.matches(HiddenGroup.selector)).to.be.false;
+    });
+
+    it('does not match groups with only hidden appearance', () => {
+      buildHtml(`<section class="or-appearance-hidden"></section>`);
+      const el = document.querySelector(`#${testId} .or-appearance-hidden`);
+      expect(el!.matches(HiddenGroup.selector)).to.be.false;
+    });
+  });
+
+  describe('_init', () => {
+    it('adds disabled class to group with hidden appearance', () => {
+      buildHtml(`
+        <form class="or">
+          <section class="or-group-data or-appearance-hidden">
+            <div class="question or-appearance-hidden"></div>
+          </section>
+        </form>
+      `);
+      const el = document.querySelector(HiddenGroup.selector) as HTMLElement;
+      new HiddenGroup(el, {});
+      expect(el.classList.contains('disabled')).to.be.true;
+    });
+
+    it('preserves existing classes when adding disabled', () => {
+      buildHtml(`
+        <form class="or">
+          <section class="or-group-data or-appearance-hidden">
+            <div class="question or-appearance-hidden"></div>
+          </section>
+        </form>
+      `);
+      const el = document.querySelector(HiddenGroup.selector) as HTMLElement;
+      new HiddenGroup(el, {});
+      expect(el.classList.contains('or-group-data')).to.be.true;
+      expect(el.classList.contains('or-appearance-hidden')).to.be.true;
+      expect(el.classList.contains('disabled')).to.be.true;
+    });
+  });
+
+});