[Uptime] [Synthetics Integration] Add functional tests for Synthetics Integration

x-pack/plugins/uptime/public/components/fleet_package/combo_box.tsx

@@ -13,7 +13,7 @@ export interface Props {
   selectedOptions: string[];
 }
 
-export const ComboBox = ({ onChange, selectedOptions }: Props) => {
+export const ComboBox = ({ onChange, selectedOptions, ...props }: Props) => {
   const [formattedSelectedOptions, setSelectedOptions] = useState<
     Array<EuiComboBoxOptionOption<string>>
   >(selectedOptions.map((option) => ({ label: option, key: option })));
@@ -66,6 +66,7 @@ export const ComboBox = ({ onChange, selectedOptions }: Props) => {
       onChange={onOptionsChange}
       onSearchChange={onSearchChange}
       isInvalid={isInvalid}
+      {...props}
     />
   );
 };

x-pack/plugins/uptime/public/components/fleet_package/custom_fields.tsx

@@ -76,6 +76,7 @@ export const CustomFields = memo<Props>(
               defaultMessage="Configure your monitor with the following options."
             />
           }
+          data-test-subj="monitorSettingsSection"
         >
           <EuiFlexGroup>
             <EuiFlexItem>
@@ -104,6 +105,7 @@ export const CustomFields = memo<Props>(
                         configKey: ConfigKeys.MONITOR_TYPE,
                       })
                     }
+                    data-test-subj="syntheticsMonitorTypeField"
                   />
                 </EuiFormRow>
               )}
@@ -128,6 +130,7 @@ export const CustomFields = memo<Props>(
                     onChange={(event) =>
                       handleInputChange({ value: event.target.value, configKey: ConfigKeys.URLS })
                     }
+                    data-test-subj="syntheticsUrlField"
                   />
                 </EuiFormRow>
               )}
@@ -155,6 +158,7 @@ export const CustomFields = memo<Props>(
                         configKey: ConfigKeys.HOSTS,
                       })
                     }
+                    data-test-subj="syntheticsTCPHostField"
                   />
                 </EuiFormRow>
               )}
@@ -182,6 +186,7 @@ export const CustomFields = memo<Props>(
                         configKey: ConfigKeys.HOSTS,
                       })
                     }
+                    data-test-subj="syntheticsICMPHostField"
                   />
                 </EuiFormRow>
               )}
@@ -268,6 +273,7 @@ export const CustomFields = memo<Props>(
                       configKey: ConfigKeys.APM_SERVICE_NAME,
                     })
                   }
+                  data-test-subj="syntheticsAPMServiceName"
                 />
               </EuiFormRow>
               {isHTTP && (
@@ -364,6 +370,7 @@ export const CustomFields = memo<Props>(
                 <ComboBox
                   selectedOptions={fields[ConfigKeys.TAGS]}
                   onChange={(value) => handleInputChange({ value, configKey: ConfigKeys.TAGS })}
+                  data-test-subj="syntheticsTags"
                 />
               </EuiFormRow>
             </EuiFlexItem>
@@ -385,6 +392,7 @@ export const CustomFields = memo<Props>(
                 defaultMessage="Configure TLS options, including verification mode, certificate authorities, and client certificates."
               />
             }
+            data-test-subj="syntheticsIsTLSEnabled"
           >
             <EuiCheckbox
               id={'uptimeFleetIsTLSEnabled'}

x-pack/plugins/uptime/public/components/fleet_package/http_advanced_fields.tsx

@@ -52,6 +52,7 @@ export const HTTPAdvancedFields = memo<Props>(({ validate }) => {
           defaultMessage="Advanced HTTP options"
         />
       }
+      data-test-subj="syntheticsHTTPAdvancedFieldsAccordion"
     >
       <EuiSpacer size="xl" />
       <EuiDescribedFormGroup
@@ -69,6 +70,7 @@ export const HTTPAdvancedFields = memo<Props>(({ validate }) => {
             defaultMessage="Configure an optional request to send to the remote host including method, body, and headers."
           />
         }
+        data-test-subj="httpAdvancedFieldsSection"
       >
         <EuiSpacer size="s" />
         <EuiFormRow
@@ -94,6 +96,7 @@ export const HTTPAdvancedFields = memo<Props>(({ validate }) => {
                 configKey: ConfigKeys.USERNAME,
               })
             }
+            data-test-subj="syntheticsUsername"
           />
         </EuiFormRow>
         <EuiFormRow
@@ -119,6 +122,7 @@ export const HTTPAdvancedFields = memo<Props>(({ validate }) => {
                 configKey: ConfigKeys.PASSWORD,
               })
             }
+            data-test-subj="syntheticsPassword"
           />
         </EuiFormRow>
         <EuiFormRow
@@ -144,6 +148,7 @@ export const HTTPAdvancedFields = memo<Props>(({ validate }) => {
                 configKey: ConfigKeys.PROXY_URL,
               })
             }
+            data-test-subj="syntheticsProxyUrl"
           />
         </EuiFormRow>
         <EuiFormRow
@@ -169,6 +174,7 @@ export const HTTPAdvancedFields = memo<Props>(({ validate }) => {
                 configKey: ConfigKeys.REQUEST_METHOD_CHECK,
               })
             }
+            data-test-subj="syntheticsRequestMethod"
           />
         </EuiFormRow>
         <EuiFormRow
@@ -199,6 +205,7 @@ export const HTTPAdvancedFields = memo<Props>(({ validate }) => {
               defaultMessage="A dictionary of additional HTTP headers to send. By default the client will set the User-Agent header to identify itself."
             />
           }
+          data-test-subj="syntheticsRequestHeaders"
         >
           <HeaderField
             contentMode={
@@ -275,6 +282,7 @@ export const HTTPAdvancedFields = memo<Props>(({ validate }) => {
               <EuiCode>http.response.body.headers</EuiCode>
             </>
           }
+          data-test-subj="syntheticsIndexResponseHeaders"
         >
           <EuiCheckbox
             id={'uptimeFleetIndexResponseHeaders'}
@@ -363,6 +371,7 @@ export const HTTPAdvancedFields = memo<Props>(({ validate }) => {
                 configKey: ConfigKeys.RESPONSE_STATUS_CHECK,
               })
             }
+            data-test-subj="syntheticsResponseStatusCheck"
           />
         </EuiFormRow>
         <EuiFormRow
@@ -397,6 +406,7 @@ export const HTTPAdvancedFields = memo<Props>(({ validate }) => {
               defaultMessage="A list of expected response headers."
             />
           }
+          data-test-subj="syntheticsResponseHeaders"
         >
           <HeaderField
             defaultValue={fields[ConfigKeys.RESPONSE_HEADERS_CHECK]}
@@ -436,6 +446,7 @@ export const HTTPAdvancedFields = memo<Props>(({ validate }) => {
                 }),
               [handleInputChange]
             )}
+            data-test-subj="syntheticsResponseBodyCheckPositive"
           />
         </EuiFormRow>
         <EuiFormRow
@@ -464,6 +475,7 @@ export const HTTPAdvancedFields = memo<Props>(({ validate }) => {
                 }),
               [handleInputChange]
             )}
+            data-test-subj="syntheticsResponseBodyCheckNegative"
           />
         </EuiFormRow>
       </EuiDescribedFormGroup>

x-pack/plugins/uptime/public/components/fleet_package/index_response_body_field.tsx

@@ -38,7 +38,7 @@ export const ResponseBodyIndexField = ({ defaultValue, onChange }: Props) => {
 
   return (
     <EuiFlexGroup>
-      <EuiFlexItem>
+      <EuiFlexItem data-test-subj="syntheticsIndexResponseBody">
         <EuiCheckbox
           id="uptimeFleetIndexResponseBody"
           checked={checked}

x-pack/plugins/uptime/public/components/fleet_package/request_body_field.tsx

@@ -131,6 +131,7 @@ export const RequestBodyField = ({ onChange, type, value }: Props) => {
     {
       id: Mode.TEXT,
       name: modeLabels[Mode.TEXT],
+      'data-test-subj': `syntheticsRequestBodyTab__${Mode.TEXT}`,
       content: (
         <CodeEditor
           ariaLabel={i18n.translate(
@@ -151,6 +152,7 @@ export const RequestBodyField = ({ onChange, type, value }: Props) => {
     {
       id: Mode.JSON,
       name: modeLabels[Mode.JSON],
+      'data-test-subj': `syntheticsRequestBodyTab__${Mode.JSON}`,
       content: (
         <CodeEditor
           ariaLabel={i18n.translate(
@@ -171,6 +173,7 @@ export const RequestBodyField = ({ onChange, type, value }: Props) => {
     {
       id: Mode.XML,
       name: modeLabels[Mode.XML],
+      'data-test-subj': `syntheticsRequestBodyTab__${Mode.XML}`,
       content: (
         <CodeEditor
           ariaLabel={i18n.translate(
@@ -191,6 +194,7 @@ export const RequestBodyField = ({ onChange, type, value }: Props) => {
     {
       id: Mode.FORM,
       name: modeLabels[Mode.FORM],
+      'data-test-subj': `syntheticsRequestBodyTab__${Mode.FORM}`,
       content: (
         <KeyValuePairsField
           addPairControlLabel={

x-pack/plugins/uptime/public/components/fleet_package/tcp_advanced_fields.tsx

@@ -33,7 +33,11 @@ export const TCPAdvancedFields = () => {
   );
 
   return (
-    <EuiAccordion id="uptimeFleetTCPAdvancedOptions" buttonContent="Advanced TCP options">
+    <EuiAccordion
+      id="uptimeFleetTCPAdvancedOptions"
+      buttonContent="Advanced TCP options"
+      data-test-subj="syntheticsTCPAdvancedFieldsAccordion"
+    >
       <EuiSpacer size="m" />
       <EuiDescribedFormGroup
         title={
@@ -75,10 +79,11 @@ export const TCPAdvancedFields = () => {
                 configKey: ConfigKeys.PROXY_URL,
               })
             }
+            data-test-subj="syntheticsProxyUrl"
           />
         </EuiFormRow>
         {!!fields[ConfigKeys.PROXY_URL] && (
-          <EuiFormRow>
+          <EuiFormRow data-test-subj="syntheticsUseLocalResolver">
             <EuiCheckbox
               id={'uptimeFleetUseLocalResolverCheckbox'}
               checked={fields[ConfigKeys.PROXY_USE_LOCAL_RESOLVER]}
@@ -122,6 +127,7 @@ export const TCPAdvancedFields = () => {
                 }),
               [handleInputChange]
             )}
+            data-test-subj="syntheticsTCPRequestSendCheck"
           />
         </EuiFormRow>
       </EuiDescribedFormGroup>
@@ -166,6 +172,7 @@ export const TCPAdvancedFields = () => {
                 }),
               [handleInputChange]
             )}
+            data-test-subj="syntheticsTCPResponseReceiveCheck"
           />
         </EuiFormRow>
       </EuiDescribedFormGroup>

x-pack/plugins/uptime/public/components/fleet_package/tls_fields.tsx

@@ -139,6 +139,7 @@ export const TLSFields: React.FunctionComponent<{
               },
             }));
           }}
+          data-test-subj="syntheticsTLSVerificationMode"
         />
       </EuiFormRow>
       {fields[ConfigKeys.TLS_VERIFICATION_MODE].value === VerificationMode.NONE && (
@@ -229,6 +230,7 @@ export const TLSFields: React.FunctionComponent<{
               },
             }));
           }}
+          data-test-subj="syntheticsTLSCA"
         />
       </EuiFormRow>
       <EuiFormRow
@@ -271,6 +273,7 @@ export const TLSFields: React.FunctionComponent<{
               },
             }));
           }}
+          data-test-subj="syntheticsTLSCert"
         />
       </EuiFormRow>
       <EuiFormRow
@@ -313,6 +316,7 @@ export const TLSFields: React.FunctionComponent<{
               },
             }));
           }}
+          data-test-subj="syntheticsTLSCertKey"
         />
       </EuiFormRow>
       <EuiFormRow
@@ -345,6 +349,7 @@ export const TLSFields: React.FunctionComponent<{
               },
             }));
           }}
+          data-test-subj="syntheticsTLSCertKeyPassphrase"
         />
       </EuiFormRow>
     </EuiFormFieldset>

x-pack/test/functional/apps/uptime/index.ts

@@ -59,6 +59,7 @@ export default ({ loadTestFile, getService }: FtrProviderContext) => {
       loadTestFile(require.resolve('./locations'));
       loadTestFile(require.resolve('./settings'));
       loadTestFile(require.resolve('./certificates'));
+      loadTestFile(require.resolve('./synthetics_integration'));
     });
 
     describe('with generated data but no data reset', () => {