[Security Solution] Per-field diffs test coverage

x-pack/plugins/security_solution/docs/testing/test_plans/detection_response/prebuilt_rules/installation_and_upgrade.md

@@ -978,13 +978,14 @@ Then the preview should display the changes for the newly selected rule
 
 #### **Scenario: User can see changes when updated rule is a different rule type**
 
-**Automation**: 1 UI integration test
+**Automation**: 1 e2e test
 
 ```Gherkin
 Given a prebuilt rule is installed in Kibana
 And this rule has an update available that changes the rule type
 When user opens the upgrade preview
 Then the rule type changes should be displayed in grouped field diffs with corresponding query fields
+# When tooltip enhancement is added, this step needs to be added to the corresponding test scenario
 And a tooltip is displayed with information about changing rule types
 ```
 

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/diff_components/field_diff.tsx

@@ -26,7 +26,7 @@ const SubFieldComponent = ({
   <EuiFlexGroup justifyContent="spaceBetween">
     <EuiFlexGroup direction="column">
       {shouldShowSubtitles ? (
-        <EuiTitle size="xxxs">
+        <EuiTitle data-test-subj="ruleUpgradePerFieldDiffSubtitle" size="xxxs">
           <h4>{fieldToDisplayNameMap[fieldName] ?? startCase(camelCase(fieldName))}</h4>
         </EuiTitle>
       ) : null}

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/diff_components/panel_wrapper.tsx

@@ -20,7 +20,7 @@ export const RuleDiffPanelWrapper = ({ fieldName, children }: RuleDiffPanelWrapp
   const { euiTheme } = useEuiTheme();
 
   return (
-    <EuiSplitPanel.Outer hasBorder>
+    <EuiSplitPanel.Outer data-test-subj="ruleUpgradePerFieldDiffWrapper" hasBorder>
       <EuiAccordion
         initialIsOpen={true}
         css={css`
@@ -31,12 +31,14 @@ export const RuleDiffPanelWrapper = ({ fieldName, children }: RuleDiffPanelWrapp
         `}
         id={fieldName}
         buttonContent={
-          <EuiTitle size="xs">
+          <EuiTitle data-test-subj="ruleUpgradePerFieldDiffLabel" size="xs">
             <h5>{fieldToDisplayNameMap[fieldName] ?? startCase(camelCase(fieldName))}</h5>
           </EuiTitle>
         }
       >
-        <EuiSplitPanel.Inner color="transparent">{children}</EuiSplitPanel.Inner>
+        <EuiSplitPanel.Inner data-test-subj="ruleUpgradePerFieldDiffContent" color="transparent">
+          {children}
+        </EuiSplitPanel.Inner>
       </EuiAccordion>
     </EuiSplitPanel.Outer>
   );

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/diff_components/rule_diff_section.tsx

@@ -13,19 +13,21 @@ import { FieldGroupDiffComponent } from './field_diff';
 interface RuleDiffSectionProps {
   title: string;
   fieldGroups: FieldsGroupDiff[];
+  dataTestSubj?: string;
 }
 
-export const RuleDiffSection = ({ title, fieldGroups }: RuleDiffSectionProps) => (
+export const RuleDiffSection = ({ title, fieldGroups, dataTestSubj }: RuleDiffSectionProps) => (
   <>
     <EuiSpacer size="m" />
     <EuiAccordion
+      data-test-subj={dataTestSubj}
       initialIsOpen={true}
       id={title}
       css={css`
         padding-top: 1px; // Fixes border disappearing bug
       `}
       buttonContent={
-        <EuiTitle size="s">
+        <EuiTitle data-test-subj="ruleUpgradePerFieldDiffSectionHeader" size="s">
           <h3>{title}</h3>
         </EuiTitle>
       }

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/per_field_rule_diff_tab.test.tsx

@@ -0,0 +1,172 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import {
+  KqlQueryType,
+  ThreeWayDiffOutcome,
+  ThreeWayMergeOutcome,
+} from '../../../../../common/api/detection_engine';
+import type { PartialRuleDiff } from '../../../../../common/api/detection_engine';
+import { TestProviders } from '../../../../common/mock';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { PerFieldRuleDiffTab } from './per_field_rule_diff_tab';
+
+const ruleFieldsDiffBaseFieldsMock = {
+  diff_outcome: ThreeWayDiffOutcome.StockValueCanUpdate,
+  has_conflict: false,
+  has_update: true,
+  merge_outcome: ThreeWayMergeOutcome.Target,
+};
+
+const ruleFieldsDiffMock: PartialRuleDiff = {
+  fields: {
+    version: {
+      ...ruleFieldsDiffBaseFieldsMock,
+      base_version: 1,
+      current_version: 1,
+      merged_version: 2,
+      target_version: 2,
+    },
+  },
+  has_conflict: false,
+};
+
+const renderPerFieldRuleDiffTab = (ruleDiff: PartialRuleDiff) => {
+  return render(
+    <TestProviders>
+      <PerFieldRuleDiffTab ruleDiff={ruleDiff} />
+    </TestProviders>
+  );
+};
+
+describe('PerFieldRuleDiffTab', () => {
+  test('Field groupings should be rendered together in the same accordion panel', () => {
+    const mockData: PartialRuleDiff = {
+      ...ruleFieldsDiffMock,
+      fields: {
+        kql_query: {
+          ...ruleFieldsDiffBaseFieldsMock,
+          base_version: {
+            filters: [],
+            language: 'lucene',
+            query: 'old query',
+            type: KqlQueryType.inline_query,
+          },
+          current_version: {
+            filters: [],
+            language: 'lucene',
+            query: 'old query',
+            type: KqlQueryType.inline_query,
+          },
+          merged_version: {
+            filters: [],
+            language: 'kuery',
+            query: 'new query',
+            type: KqlQueryType.inline_query,
+          },
+          target_version: {
+            filters: [],
+            language: 'kuery',
+            query: 'new query',
+            type: KqlQueryType.inline_query,
+          },
+        },
+      },
+    };
+    const wrapper = renderPerFieldRuleDiffTab(mockData);
+
+    const matchedSubtitleElements = wrapper.queryAllByTestId('ruleUpgradePerFieldDiffSubtitle');
+    const subtitles = matchedSubtitleElements.map((element) => element.textContent);
+
+    // `filters` and `type` have not changed between versions so shouldn't be displayed
+    expect(subtitles).toEqual(['Query', 'Language']);
+  });
+
+  describe('Undefined values are displayed with empty diffs', () => {
+    test('Displays only an updated field value when changed from undefined', () => {
+      const mockData: PartialRuleDiff = {
+        ...ruleFieldsDiffMock,
+        fields: {
+          timestamp_field: {
+            ...ruleFieldsDiffBaseFieldsMock,
+            base_version: undefined,
+            current_version: undefined,
+            merged_version: 'new timestamp field',
+            target_version: 'new timestamp field',
+          },
+        },
+      };
+      const wrapper = renderPerFieldRuleDiffTab(mockData);
+      const diffContent = wrapper.getByTestId('ruleUpgradePerFieldDiffContent').textContent;
+
+      // Only the new timestamp field should be displayed
+      expect(diffContent).toEqual('+new timestamp field');
+    });
+
+    test('Displays only an outdated field value when incoming update is undefined', () => {
+      const mockData: PartialRuleDiff = {
+        ...ruleFieldsDiffMock,
+        fields: {
+          timestamp_field: {
+            ...ruleFieldsDiffBaseFieldsMock,
+            base_version: 'old timestamp field',
+            current_version: 'old timestamp field',
+            merged_version: undefined,
+            target_version: undefined,
+          },
+        },
+      };
+      const wrapper = renderPerFieldRuleDiffTab(mockData);
+      const diffContent = wrapper.getByTestId('ruleUpgradePerFieldDiffContent').textContent;
+
+      // Only the old timestamp_field should be displayed
+      expect(diffContent).toEqual('-old timestamp field');
+    });
+  });
+
+  test('Field diff components have the same grouping and order as in rule details overview', () => {
+    const mockData: PartialRuleDiff = {
+      ...ruleFieldsDiffMock,
+      fields: {
+        setup: {
+          ...ruleFieldsDiffBaseFieldsMock,
+          base_version: 'old setup',
+          current_version: 'old setup',
+          merged_version: 'new setup',
+          target_version: 'new setup',
+        },
+        timestamp_field: {
+          ...ruleFieldsDiffBaseFieldsMock,
+          base_version: undefined,
+          current_version: undefined,
+          merged_version: 'new timestamp',
+          target_version: 'new timestamp',
+        },
+        name: {
+          ...ruleFieldsDiffBaseFieldsMock,
+          base_version: 'old name',
+          current_version: 'old name',
+          merged_version: 'new name',
+          target_version: 'new name',
+        },
+      },
+    };
+    const wrapper = renderPerFieldRuleDiffTab(mockData);
+
+    const matchedSectionElements = wrapper.queryAllByTestId('ruleUpgradePerFieldDiffSectionHeader');
+    const sectionLabels = matchedSectionElements.map((element) => element.textContent);
+
+    // Schedule doesn't have any fields in the diff and shouldn't be displayed
+    expect(sectionLabels).toEqual(['About', 'Definition', 'Setup guide']);
+
+    const matchedFieldElements = wrapper.queryAllByTestId('ruleUpgradePerFieldDiffLabel');
+    const fieldLabels = matchedFieldElements.map((element) => element.textContent);
+
+    expect(fieldLabels).toEqual(['Name', 'Timestamp Field', 'Setup']);
+  });
+});

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/per_field_rule_diff_tab.tsx

@@ -43,16 +43,32 @@ export const PerFieldRuleDiffTab = ({ ruleDiff }: PerFieldRuleDiffTabProps) => {
     <>
       <RuleDiffHeaderBar />
       {aboutFields.length !== 0 && (
-        <RuleDiffSection title={i18n.ABOUT_SECTION_LABEL} fieldGroups={aboutFields} />
+        <RuleDiffSection
+          title={i18n.ABOUT_SECTION_LABEL}
+          fieldGroups={aboutFields}
+          dataTestSubj="perFieldDiffAboutSection"
+        />
       )}
       {definitionFields.length !== 0 && (
-        <RuleDiffSection title={i18n.DEFINITION_SECTION_LABEL} fieldGroups={definitionFields} />
+        <RuleDiffSection
+          title={i18n.DEFINITION_SECTION_LABEL}
+          fieldGroups={definitionFields}
+          dataTestSubj="perFieldDiffDefinitionSection"
+        />
       )}
       {scheduleFields.length !== 0 && (
-        <RuleDiffSection title={i18n.SCHEDULE_SECTION_LABEL} fieldGroups={scheduleFields} />
+        <RuleDiffSection
+          title={i18n.SCHEDULE_SECTION_LABEL}
+          fieldGroups={scheduleFields}
+          dataTestSubj="perFieldDiffScheduleSection"
+        />
       )}
       {setupFields.length !== 0 && (
-        <RuleDiffSection title={i18n.SETUP_GUIDE_SECTION_LABEL} fieldGroups={setupFields} />
+        <RuleDiffSection
+          title={i18n.SETUP_GUIDE_SECTION_LABEL}
+          fieldGroups={setupFields}
+          dataTestSubj="perFieldDiffSetupSection"
+        />
       )}
     </>
   );