fix: Check page visibility while checking rules for element visibility/validation (#5678)

* Check page visibility while recusively checking rules for element visibility

* Fix tests

* uncomment test

* Add a few tests

* Write some more tests

Author: dsamojlenko

lib/formContext.ts

@@ -146,6 +146,34 @@ export const getElementById = (elements: FormElement[], id: string) => {
   return elements.find((el) => el.id.toString() === id);
 };
 
+/**
+ * Checks a page/group visibility based on the current form values groupHistory.
+ *
+ * @param formRecord - The form record containing the form and its groups.
+ * @param element - The form element to check visibility for.
+ * @param values - The current form values from Formik, which should include groupHistory.
+ * @returns {boolean} - Returns true if the page/group is visible based on the groupHistory, false otherwise.
+ */
+export const checkPageVisibility = (
+  formRecord: PublicFormRecord,
+  element: FormElement,
+  values: FormValues
+): boolean => {
+  if (!formRecord.form.groups) {
+    return true;
+  }
+
+  const groups = formRecord.form.groups as GroupsType;
+
+  // Get the current element's group ID
+  const groupId = Object.keys(groups).find((groupKey) => inGroup(groupKey, element.id, groups));
+
+  const groupHistory = Array.isArray(values.groupHistory)
+    ? values.groupHistory
+    : [values.groupHistory];
+  return !!groupHistory.find((visitedGroupId: string | undefined) => visitedGroupId === groupId);
+};
+
 /**
  * Recursively determines the "visibility" of a form element for the purposes of validation
  * based on its conditional rules and the current form values.
@@ -161,14 +189,21 @@ export const getElementById = (elements: FormElement[], id: string) => {
  * @param formRecord - The form record.
  * @param element - The form element whose visibility is being determined.
  * @param values - The current form values from Formik.
- * @returns `true` if the element should be visible, `false` otherwise.
+ * @returns {boolean} -Returns `true` if the element should be visible, `false` otherwise.
  */
 export const checkVisibilityRecursive = (
   formRecord: PublicFormRecord,
   element: FormElement,
   values: FormValues,
   checked: Set<string> = new Set()
 ): boolean => {
+  // If the current page is not visible, the element is not visible
+  const pageVisible = checkPageVisibility(formRecord, element, values);
+
+  if (!pageVisible) {
+    return false;
+  }
+
   const rules = element.properties.conditionalRules;
   if (!rules || rules.length === 0) return true;
 
@@ -191,7 +226,6 @@ export const checkVisibilityRecursive = (
     return (
       checkVisibilityRecursive(formRecord, ruleParent, values, checked) &&
       matchRule(rule, formElements, values)
-      // @TODO: && checkPageVisibilityRecursive
     );
   });
 };

lib/tests/formContextCheckPageVisibility.test.ts

@@ -0,0 +1,75 @@
+import { checkPageVisibility, FormValues, GroupsType } from "../formContext";
+import type { PublicFormRecord, FormElement } from "../types";
+
+describe("checkPageVisibility", () => {
+  const baseElement: FormElement = {
+      id: 1,
+      type: "textField",
+      properties: { conditionalRules: [] }
+  } as unknown as FormElement;
+
+  it("returns true if form has no groups", () => {
+    const formRecord = {
+      form: {
+        elements: [baseElement]
+      }
+    } as PublicFormRecord;
+    expect(checkPageVisibility(formRecord, baseElement, {})).toBe(true);
+  });
+
+  it("returns true if element's group is in groupHistory (array)", () => {
+    const groups: GroupsType = {
+      groupA: { name: "A", titleEn: "", titleFr: "", elements: ["1"] }
+    };
+    const formRecord = {
+      form: {
+        elements: [baseElement],
+        groups
+      }
+    } as PublicFormRecord;
+    const values: FormValues = { groupHistory: ["groupA"] };
+    expect(checkPageVisibility(formRecord, baseElement, values)).toBe(true);
+  });
+
+  it("returns true if element's group is in groupHistory (string)", () => {
+    const groups: GroupsType = {
+      groupA: { name: "A", titleEn: "", titleFr: "", elements: ["1"] }
+    };
+    const formRecord = {
+      form: {
+        elements: [baseElement],
+        groups
+      }
+    } as PublicFormRecord;
+    const values: FormValues = { groupHistory: "groupA" };
+    expect(checkPageVisibility(formRecord, baseElement, values)).toBe(true);
+  });
+
+  it("returns false if element's group is not in groupHistory", () => {
+    const groups: GroupsType = {
+      groupA: { name: "A", titleEn: "", titleFr: "", elements: ["1"] }
+    };
+    const formRecord = {
+      form: {
+        elements: [baseElement],
+        groups
+      }
+    } as PublicFormRecord;
+    const values: FormValues = { groupHistory: ["groupB"] };
+    expect(checkPageVisibility(formRecord, baseElement, values)).toBe(false);
+  });
+
+  it("returns false if element is not in any group", () => {
+    const groups: GroupsType = {
+      groupA: { name: "A", titleEn: "", titleFr: "", elements: ["2"] }
+    };
+    const formRecord = {
+      form: {
+        elements: [baseElement],
+        groups
+      }
+    } as PublicFormRecord;
+    const values: FormValues = { groupHistory: ["groupA"] };
+    expect(checkPageVisibility(formRecord, baseElement, values)).toBe(false);
+  });
+});