1 files changed, 15 insertions, 13 deletions

diff --git a/spec/frontend/alerts_settings/components/alert_mapping_builder_spec.js b/spec/frontend/alerts_settings/components/alert_mapping_builder_spec.js
index 7e1d1acb62c..dba9c8be669 100644
--- a/spec/frontend/alerts_settings/components/alert_mapping_builder_spec.js
+++ b/spec/frontend/alerts_settings/components/alert_mapping_builder_spec.js
@@ -1,10 +1,10 @@
 import { GlIcon, GlFormInput, GlDropdown, GlSearchBoxByType, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import AlertMappingBuilder, { i18n } from '~/alerts_settings/components/alert_mapping_builder.vue';
-import parsedMapping from '~/alerts_settings/components/mocks/parsedMapping.json';
 import * as transformationUtils from '~/alerts_settings/utils/mapping_transformations';
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
-import alertFields from '../mocks/alertFields.json';
+import alertFields from '../mocks/alert_fields.json';
+import parsedMapping from '../mocks/parsed_mapping.json';
 
 describe('AlertMappingBuilder', () => {
   let wrapper;
@@ -12,8 +12,8 @@ describe('AlertMappingBuilder', () => {
   function mountComponent() {
     wrapper = shallowMount(AlertMappingBuilder, {
       propsData: {
-        parsedPayload: parsedMapping.samplePayload.payloadAlerFields.nodes,
-        savedMapping: parsedMapping.storedMapping.nodes,
+        parsedPayload: parsedMapping.payloadAlerFields,
+        savedMapping: parsedMapping.payloadAttributeMappings,
         alertFields,
       },
     });
@@ -33,6 +33,15 @@ describe('AlertMappingBuilder', () => {
   const findColumnInRow = (row, column) =>
     wrapper.findAll('.gl-display-table-row').at(row).findAll('.gl-display-table-cell ').at(column);
 
+  const getDropdownContent = (dropdown, types) => {
+    const searchBox = dropdown.findComponent(GlSearchBoxByType);
+    const dropdownItems = dropdown.findAllComponents(GlDropdownItem);
+    const mappingOptions = parsedMapping.payloadAlerFields.filter(({ type }) =>
+      types.includes(type),
+    );
+    return { searchBox, dropdownItems, mappingOptions };
+  };
+
   it('renders column captions', () => {
     expect(findColumnInRow(0, 0).text()).toContain(i18n.columns.gitlabKeyTitle);
     expect(findColumnInRow(0, 2).text()).toContain(i18n.columns.payloadKeyTitle);
@@ -63,10 +72,7 @@ describe('AlertMappingBuilder', () => {
   it('renders mapping dropdown for each field', () => {
     alertFields.forEach(({ types }, index) => {
       const dropdown = findColumnInRow(index + 1, 2).find(GlDropdown);
-      const searchBox = dropdown.findComponent(GlSearchBoxByType);
-      const dropdownItems = dropdown.findAllComponents(GlDropdownItem);
-      const { nodes } = parsedMapping.samplePayload.payloadAlerFields;
-      const mappingOptions = nodes.filter(({ type }) => types.includes(type));
+      const { searchBox, dropdownItems, mappingOptions } = getDropdownContent(dropdown, types);
 
       expect(dropdown.exists()).toBe(true);
       expect(searchBox.exists()).toBe(true);
@@ -80,11 +86,7 @@ describe('AlertMappingBuilder', () => {
       expect(dropdown.exists()).toBe(Boolean(numberOfFallbacks));
 
       if (numberOfFallbacks) {
-        const searchBox = dropdown.findComponent(GlSearchBoxByType);
-        const dropdownItems = dropdown.findAllComponents(GlDropdownItem);
-        const { nodes } = parsedMapping.samplePayload.payloadAlerFields;
-        const mappingOptions = nodes.filter(({ type }) => types.includes(type));
-
+        const { searchBox, dropdownItems, mappingOptions } = getDropdownContent(dropdown, types);
         expect(searchBox.exists()).toBe(Boolean(numberOfFallbacks));
         expect(dropdownItems).toHaveLength(mappingOptions.length);
       }