Allow for optional types (#1261)

* Allow for optional types

* Minor rename

injected/integration-test/broker-protection.spec.js

@@ -353,6 +353,16 @@ test.describe('Broker Protection communications', () => {
             await dbp.isFormFilled();
         });
 
+        test('fillForm with optional information', async ({ page }, workerInfo) => {
+            const dbp = BrokerProtectionPage.create(page, workerInfo.project.use);
+            await dbp.enabled();
+            await dbp.navigatesTo('form.html');
+            await dbp.receivesAction('fill-form-optional.json');
+            const response = await dbp.collector.waitForMessage('actionCompleted');
+            dbp.isSuccessMessage(response);
+            await dbp.isFormFilled();
+        });
+
         test('click', async ({ page }, workerInfo) => {
             const dbp = BrokerProtectionPage.create(page, workerInfo.project.use);
             await dbp.enabled();

injected/integration-test/test-pages/broker-protection/actions/fill-form-optional.json

@@ -0,0 +1,59 @@
+{
+    "state": {
+      "action": {
+        "actionType": "fillForm",
+        "id": "3",
+        "selector": ".ahm",
+        "dataSource": "userProfile",
+        "elements": [
+          {
+            "type": "firstName",
+            "selector": "#user_first_name"
+          },
+          {
+            "type": "lastName",
+            "selector": "#user_last_name"
+          },
+          {
+            "type": "$generated_phone_number$",
+            "selector": "#user_phone"
+          },
+          {
+            "type": "$generated_street_address$",
+            "selector": "#user_street_address"
+          },
+          {
+            "type": "state",
+            "selector": "#state"
+          },
+          {
+            "type": "$generated_zip_code$",
+            "selector": "#user_zip_code"
+          },
+          {
+            "type": "$generated_random_number$",
+            "selector": "#random_number",
+            "min": "5",
+            "max": "15"
+          },
+          {
+            "type": "cityState",
+            "selector": "#city_state"
+          },
+          {
+            "type": "middleName",
+            "selector": "#user_middle_name"
+          }
+        ]
+      },
+      "data": {
+        "userProfile": {
+          "firstName": "John",
+          "lastName": "Smith",
+          "city": "Chicago",
+          "state": "IL"
+        }
+      }
+    }
+  }
+

injected/integration-test/test-pages/broker-protection/pages/form.html

@@ -18,6 +18,10 @@
         First Name:
         <input type="text" name="first-name" id="user_first_name">
     </label>
+    <label>
+        Middle Name:
+        <input type="text" name="middle-name" id="user_middle_name">
+    </label>
     <label>
         Last Name:
         <input type="text" name="last-name" id="user_last_name">

injected/src/features/broker-protection/actions/fill-form.js

@@ -89,6 +89,9 @@ export function fillMany(root, elements, data) {
             }
             results.push(setValueForInput(inputElem, data.city + ', ' + data.state));
         } else {
+            if (isElementTypeOptional(element.type)) {
+                continue;
+            }
             if (!Object.prototype.hasOwnProperty.call(data, element.type)) {
                 results.push({
                     result: false,
@@ -110,6 +113,20 @@ export function fillMany(root, elements, data) {
     return results;
 }
 
+/**
+ * Returns whether an element type is optional, allowing some checks to be skipped
+ *
+ * @param { string } type
+ * @returns Boolean
+ */
+function isElementTypeOptional(type) {
+    if (type === 'middleName') {
+        return true;
+    }
+
+    return false;
+}
+
 /**
  * NOTE: This code comes from Autofill, the reasoning is to make React autofilling work on Chrome and Safari.
  *