Support a city/state composite value (#1158)

* Support a city/state composite value

* Remove debugging statement

Author: brianhall

injected/integration-test/page-objects/broker-protection.js

@@ -52,19 +52,21 @@ export class BrokerProtectionPage {
      * @return {Promise<void>}
      */
     async isFormFilled () {
-        await expect(this.page.getByLabel('First Name:')).toHaveValue('John')
-        await expect(this.page.getByLabel('Last Name:')).toHaveValue('Smith')
-        await expect(this.page.getByLabel('Phone Number:')).toHaveValue(/^\d{10}$/)
-        await expect(this.page.getByLabel('Street Address:')).toHaveValue(/^\d+ [A-Za-z]+(?: [A-Za-z]+)?$/)
-        await expect(this.page.getByLabel('State:')).toHaveValue('IL')
-        await expect(this.page.getByLabel('Zip Code:')).toHaveValue(/^\d{5}$/)
+        await expect(this.page.getByLabel('First Name:', { exact: true })).toHaveValue('John')
+        await expect(this.page.getByLabel('Last Name:', { exact: true })).toHaveValue('Smith')
+        await expect(this.page.getByLabel('Phone Number:', { exact: true })).toHaveValue(/^\d{10}$/)
+        await expect(this.page.getByLabel('Street Address:', { exact: true })).toHaveValue(/^\d+ [A-Za-z]+(?: [A-Za-z]+)?$/)
+        await expect(this.page.locator('#state')).toHaveValue('IL')
+        await expect(this.page.getByLabel('Zip Code:', { exact: true })).toHaveValue(/^\d{5}$/)
 
         const randomValue = await this.page.getByLabel('Random number between 5 and 15:').inputValue()
         const randomValueInt = parseInt(randomValue)
 
         expect(Number.isInteger(randomValueInt)).toBe(true)
         expect(randomValueInt).toBeGreaterThanOrEqual(5)
         expect(randomValueInt).toBeLessThanOrEqual(15)
+
+        await expect(this.page.getByLabel('City & State:', { exact: true })).toHaveValue('Chicago, IL')
     }
 
     /**

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

@@ -34,6 +34,10 @@
           "selector": "#random_number",
           "min": "5",
           "max": "15"
+        },
+        {
+          "type": "cityState",
+          "selector": "#city_state"
         }
       ]
     },

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

@@ -51,6 +51,10 @@
         Random number between 5 and 15:
         <input type="text" name="random_number" id="random_number">
     </label>
+    <label>
+        City & State:
+        <input type="text" name="city_state" id="city_state">
+    </label>
     <button class="btn-sbmt">Submit</button>
 </form>
 <script>

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

@@ -69,6 +69,14 @@ export function fillMany (root, elements, data) {
             results.push(setValueForInput(inputElem, generateRandomInt(parseInt(element.min), parseInt(element.max)).toString()))
         } else if (element.type === '$generated_street_address$') {
             results.push(setValueForInput(inputElem, generateStreetAddress()))
+
+        // This is a composite of existing (but separate) city and state fields
+        } else if (element.type === 'cityState') {
+            if (!Object.prototype.hasOwnProperty.call(data, 'city') || !Object.prototype.hasOwnProperty.call(data, 'state')) {
+                results.push({ result: false, error: `element found with selector '${element.selector}', but data didn't contain the keys 'city' and 'state'` })
+                continue
+            }
+            results.push(setValueForInput(inputElem, data.city + ', ' + data.state))
         } else {
             if (!Object.prototype.hasOwnProperty.call(data, element.type)) {
                 results.push({ result: false, error: `element found with selector '${element.selector}', but data didn't contain the key '${element.type}'` })