Add latest changes from gitlab-org/gitlab@master

15 files changed, 201 insertions, 135 deletions

diff --git a/spec/frontend/ci_variable_list/components/legacy_ci_variable_settings_spec.js b/spec/frontend/ci_variable_list/components/legacy_ci_variable_settings_spec.js
index 9c941f99982..7def4dd4f29 100644
--- a/spec/frontend/ci_variable_list/components/legacy_ci_variable_settings_spec.js
+++ b/spec/frontend/ci_variable_list/components/legacy_ci_variable_settings_spec.js
@@ -9,11 +9,11 @@ Vue.use(Vuex);
 describe('Ci variable table', () => {
   let wrapper;
   let store;
-  let isGroup;
+  let isProject;
 
-  const createComponent = (groupState) => {
+  const createComponent = (projectState) => {
     store = createStore();
-    store.state.isGroup = groupState;
+    store.state.isProject = projectState;
     jest.spyOn(store, 'dispatch').mockImplementation();
     wrapper = shallowMount(LegacyCiVariableSettings, {
       store,
@@ -25,14 +25,14 @@ describe('Ci variable table', () => {
   });
 
   it('dispatches fetchEnvironments when mounted', () => {
-    isGroup = false;
-    createComponent(isGroup);
+    isProject = true;
+    createComponent(isProject);
     expect(store.dispatch).toHaveBeenCalledWith('fetchEnvironments');
   });
 
   it('does not dispatch fetchenvironments when in group context', () => {
-    isGroup = true;
-    createComponent(isGroup);
+    isProject = false;
+    createComponent(isProject);
     expect(store.dispatch).not.toHaveBeenCalled();
   });
 });
diff --git a/spec/frontend/groups/components/transfer_group_form_spec.js b/spec/frontend/groups/components/transfer_group_form_spec.js
index 8cfe8ce8e18..7cbe6e5bbab 100644
--- a/spec/frontend/groups/components/transfer_group_form_spec.js
+++ b/spec/frontend/groups/components/transfer_group_form_spec.js
@@ -2,7 +2,7 @@ import { GlAlert, GlSprintf } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import Component from '~/groups/components/transfer_group_form.vue';
 import ConfirmDanger from '~/vue_shared/components/confirm_danger/confirm_danger.vue';
-import NamespaceSelect from '~/vue_shared/components/namespace_select/namespace_select.vue';
+import NamespaceSelect from '~/vue_shared/components/namespace_select/namespace_select_deprecated.vue';
 
 describe('Transfer group form', () => {
   let wrapper;
diff --git a/spec/frontend/import_entities/import_projects/components/advanced_settings_spec.js b/spec/frontend/import_entities/import_projects/components/advanced_settings_spec.js
new file mode 100644
index 00000000000..68716600592
--- /dev/null
+++ b/spec/frontend/import_entities/import_projects/components/advanced_settings_spec.js
@@ -0,0 +1,60 @@
+import { mount } from '@vue/test-utils';
+import { GlFormCheckbox } from '@gitlab/ui';
+import AdvancedSettingsPanel from '~/import_entities/import_projects/components/advanced_settings.vue';
+
+describe('Import Advanced Settings', () => {
+  let wrapper;
+  const OPTIONAL_STAGES = [
+    { name: 'stage1', label: 'Stage 1' },
+    { name: 'stage2', label: 'Stage 2', details: 'Extra details' },
+  ];
+
+  const createComponent = () => {
+    wrapper = mount(AdvancedSettingsPanel, {
+      propsData: {
+        stages: OPTIONAL_STAGES,
+        value: {
+          stage1: false,
+          stage2: false,
+        },
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders GLFormCheckbox for each optional stage', () => {
+    expect(wrapper.findAllComponents(GlFormCheckbox)).toHaveLength(OPTIONAL_STAGES.length);
+  });
+
+  it('renders label for each optional stage', () => {
+    wrapper.findAllComponents(GlFormCheckbox).wrappers.forEach((w, idx) => {
+      expect(w.text()).toContain(OPTIONAL_STAGES[idx].label);
+    });
+  });
+
+  it('renders details for stage with details', () => {
+    expect(wrapper.findAllComponents(GlFormCheckbox).at(1).text()).toContain(
+      OPTIONAL_STAGES[1].details,
+    );
+  });
+
+  it('emits new stages selection state when checkbox is changed', () => {
+    const firstCheckbox = wrapper.findComponent(GlFormCheckbox);
+
+    firstCheckbox.vm.$emit('change', true);
+
+    expect(wrapper.emitted('input')[0]).toStrictEqual([
+      {
+        stage1: true,
+        stage2: false,
+      },
+    ]);
+  });
+});
diff --git a/spec/frontend/import_entities/import_projects/components/import_projects_table_spec.js b/spec/frontend/import_entities/import_projects/components/import_projects_table_spec.js
index c0ae4294e3d..53807167fe8 100644
--- a/spec/frontend/import_entities/import_projects/components/import_projects_table_spec.js
+++ b/spec/frontend/import_entities/import_projects/components/import_projects_table_spec.js
@@ -5,6 +5,7 @@ import Vuex from 'vuex';
 import { STATUSES } from '~/import_entities/constants';
 import ImportProjectsTable from '~/import_entities/import_projects/components/import_projects_table.vue';
 import ProviderRepoTableRow from '~/import_entities/import_projects/components/provider_repo_table_row.vue';
+import AdvancedSettingsPanel from '~/import_entities/import_projects/components/advanced_settings.vue';
 import * as getters from '~/import_entities/import_projects/store/getters';
 import state from '~/import_entities/import_projects/store/state';
 
@@ -45,6 +46,7 @@ describe('ImportProjectsTable', () => {
     slots,
     filterable,
     paginatable,
+    optionalStages,
   } = {}) {
     Vue.use(Vuex);
 
@@ -71,6 +73,7 @@ describe('ImportProjectsTable', () => {
         providerTitle,
         filterable,
         paginatable,
+        optionalStages,
       },
       slots,
       stubs: {
@@ -271,4 +274,23 @@ describe('ImportProjectsTable', () => {
       expect(wrapper.text().includes(INCOMPATIBLE_TEXT)).toBe(shouldRenderSlot);
     },
   );
+
+  it('should not render advanced settings panel when no optional steps are passed', () => {
+    createComponent({ state: { providerRepos: [providerRepo] } });
+
+    expect(wrapper.findComponent(AdvancedSettingsPanel).exists()).toBe(false);
+  });
+
+  it('should render advanced settings panel when no optional steps are passed', () => {
+    const OPTIONAL_STAGES = [{ name: 'step1', label: 'Step 1' }];
+    createComponent({ state: { providerRepos: [providerRepo] }, optionalStages: OPTIONAL_STAGES });
+
+    expect(wrapper.findComponent(AdvancedSettingsPanel).exists()).toBe(true);
+    expect(wrapper.findComponent(AdvancedSettingsPanel).props('stages')).toStrictEqual(
+      OPTIONAL_STAGES,
+    );
+    expect(wrapper.findComponent(AdvancedSettingsPanel).props('value')).toStrictEqual({
+      step1: false,
+    });
+  });
 });
diff --git a/spec/frontend/import_entities/import_projects/components/provider_repo_table_row_spec.js b/spec/frontend/import_entities/import_projects/components/provider_repo_table_row_spec.js
index 17a07b1e9f9..40934e90b78 100644
--- a/spec/frontend/import_entities/import_projects/components/provider_repo_table_row_spec.js
+++ b/spec/frontend/import_entities/import_projects/components/provider_repo_table_row_spec.js
@@ -44,7 +44,7 @@ describe('ProviderRepoTableRow', () => {
 
     wrapper = shallowMount(ProviderRepoTableRow, {
       store,
-      propsData: { availableNamespaces, userNamespace, ...props },
+      propsData: { availableNamespaces, userNamespace, optionalStages: {}, ...props },
     });
   }
 
@@ -92,10 +92,24 @@ describe('ProviderRepoTableRow', () => {
 
       await nextTick();
 
-      const { calls } = fetchImport.mock;
+      expect(fetchImport).toHaveBeenCalledWith(expect.anything(), {
+        repoId: repo.importSource.id,
+        optionalStages: {},
+      });
+    });
+
+    it('includes optionalStages to import', async () => {
+      const OPTIONAL_STAGES = { stage1: true, stage2: false };
+      await wrapper.setProps({ optionalStages: OPTIONAL_STAGES });
+
+      findImportButton().vm.$emit('click');
+
+      await nextTick();
 
-      expect(calls).toHaveLength(1);
-      expect(calls[0][1]).toBe(repo.importSource.id);
+      expect(fetchImport).toHaveBeenCalledWith(expect.anything(), {
+        repoId: repo.importSource.id,
+        optionalStages: OPTIONAL_STAGES,
+      });
     });
   });
 
diff --git a/spec/frontend/import_entities/import_projects/store/actions_spec.js b/spec/frontend/import_entities/import_projects/store/actions_spec.js
index f6b34f4e4ca..e154863f339 100644
--- a/spec/frontend/import_entities/import_projects/store/actions_spec.js
+++ b/spec/frontend/import_entities/import_projects/store/actions_spec.js
@@ -198,7 +198,7 @@ describe('import_projects store actions', () => {
 
       return testAction(
         fetchImport,
-        importRepoId,
+        { repoId: importRepoId, optionalStages: {} },
         localState,
         [
           {
@@ -222,7 +222,7 @@ describe('import_projects store actions', () => {
 
       await testAction(
         fetchImport,
-        importRepoId,
+        { repoId: importRepoId, optionalStages: {} },
         localState,
         [
           {
@@ -245,7 +245,7 @@ describe('import_projects store actions', () => {
 
       await testAction(
         fetchImport,
-        importRepoId,
+        { repoId: importRepoId, optionalStages: {} },
         localState,
         [
           {
@@ -366,14 +366,22 @@ describe('import_projects store actions', () => {
 
   describe('importAll', () => {
     it('dispatches multiple fetchImport actions', async () => {
+      const OPTIONAL_STAGES = { stage1: true, stage2: false };
+
       await testAction(
         importAll,
-        null,
+        { optionalStages: OPTIONAL_STAGES },
         localState,
         [],
         [
-          { type: 'fetchImport', payload: importRepoId },
-          { type: 'fetchImport', payload: otherImportRepoId },
+          {
+            type: 'fetchImport',
+            payload: { repoId: importRepoId, optionalStages: OPTIONAL_STAGES },
+          },
+          {
+            type: 'fetchImport',
+            payload: { repoId: otherImportRepoId, optionalStages: OPTIONAL_STAGES },
+          },
         ],
       );
     });
diff --git a/spec/frontend/pipeline_schedules/components/pipeline_schedules_spec.js b/spec/frontend/pipeline_schedules/components/pipeline_schedules_spec.js
index fc73d65efb1..d0292c65bcd 100644
--- a/spec/frontend/pipeline_schedules/components/pipeline_schedules_spec.js
+++ b/spec/frontend/pipeline_schedules/components/pipeline_schedules_spec.js
@@ -1,3 +1,4 @@
+import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
@@ -14,6 +15,7 @@ describe('Pipeline schedules app', () => {
   let wrapper;
 
   const successHandler = jest.fn().mockResolvedValue(mockGetPipelineSchedulesGraphQLResponse);
+  const failedHandler = jest.fn().mockRejectedValue(new Error('GraphQL error'));
 
   const createMockApolloProvider = (handler) => {
     const requestHandlers = [[getPipelineSchedulesQuery, handler]];
@@ -31,24 +33,47 @@ describe('Pipeline schedules app', () => {
   };
 
   const findTable = () => wrapper.findComponent(PipelineSchedulesTable);
-
-  beforeEach(() => {
-    createComponent();
-  });
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
 
   afterEach(() => {
     wrapper.destroy();
   });
 
-  it('displays table', () => {
+  it('displays table', async () => {
+    createComponent();
+
+    await waitForPromises();
+
     expect(findTable().exists()).toBe(true);
+    expect(findAlert().exists()).toBe(false);
   });
 
   it('fetches query and passes an array of pipeline schedules', async () => {
+    createComponent();
+
     expect(successHandler).toHaveBeenCalled();
 
     await waitForPromises();
 
     expect(findTable().props('schedules')).toEqual(mockPipelineScheduleNodes);
   });
+
+  it('handles loading state', async () => {
+    createComponent();
+
+    expect(findLoadingIcon().exists()).toBe(true);
+
+    await waitForPromises();
+
+    expect(findLoadingIcon().exists()).toBe(false);
+  });
+
+  it('shows error alert', async () => {
+    createComponent(failedHandler);
+
+    await waitForPromises();
+
+    expect(findAlert().exists()).toBe(true);
+  });
 });
diff --git a/spec/frontend/projects/settings/components/transfer_project_form_spec.js b/spec/frontend/projects/settings/components/transfer_project_form_spec.js
index e455bf529eb..6e639f895a8 100644
--- a/spec/frontend/projects/settings/components/transfer_project_form_spec.js
+++ b/spec/frontend/projects/settings/components/transfer_project_form_spec.js
@@ -8,7 +8,7 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import TransferProjectForm from '~/projects/settings/components/transfer_project_form.vue';
-import NamespaceSelect from '~/vue_shared/components/namespace_select/namespace_select.vue';
+import NamespaceSelect from '~/vue_shared/components/namespace_select/namespace_select_deprecated.vue';
 import ConfirmDanger from '~/vue_shared/components/confirm_danger/confirm_danger.vue';
 import currentUserNamespaceQuery from '~/projects/settings/graphql/queries/current_user_namespace.query.graphql';
 import { getTransferLocations } from '~/api/projects_api';
diff --git a/spec/frontend/runner/admin_runners/admin_runners_app_spec.js b/spec/frontend/runner/admin_runners/admin_runners_app_spec.js
index 8a9ea77f6fd..25924296f00 100644
--- a/spec/frontend/runner/admin_runners/admin_runners_app_spec.js
+++ b/spec/frontend/runner/admin_runners/admin_runners_app_spec.js
@@ -367,15 +367,10 @@ describe('AdminRunnersApp', () => {
     expect(findRunnerPagination().attributes('disabled')).toBe('true');
   });
 
-  describe('when bulk delete is enabled', () => {
+  describe('Bulk delete', () => {
     describe('Before runners are deleted', () => {
       beforeEach(async () => {
-        await createComponent({
-          mountFn: mountExtended,
-          provide: {
-            glFeatures: { adminRunnersBulkDelete: true },
-          },
-        });
+        await createComponent({ mountFn: mountExtended });
       });
 
       it('runner bulk delete is available', () => {
@@ -414,12 +409,7 @@ describe('AdminRunnersApp', () => {
 
     describe('When runners are deleted', () => {
       beforeEach(async () => {
-        await createComponent({
-          mountFn: mountExtended,
-          provide: {
-            glFeatures: { adminRunnersBulkDelete: true },
-          },
-        });
+        await createComponent({ mountFn: mountExtended });
       });
 
       it('count data is refetched', async () => {
diff --git a/spec/frontend/vue_merge_request_widget/components/widget/__snapshots__/dynamic_content_spec.js.snap b/spec/frontend/vue_merge_request_widget/components/widget/__snapshots__/dynamic_content_spec.js.snap
index 034906d63c4..08424077269 100644
--- a/spec/frontend/vue_merge_request_widget/components/widget/__snapshots__/dynamic_content_spec.js.snap
+++ b/spec/frontend/vue_merge_request_widget/components/widget/__snapshots__/dynamic_content_spec.js.snap
@@ -1,8 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`~/vue_merge_request_widget/components/widget/dynamic_content.vue renders given data 1`] = `
-"<content-row-stub level=\\"2\\" statusiconname=\\"success\\" widgetname=\\"MyWidget\\">
-  <div class=\\"gl-mb-2\\"><strong class=\\"gl-display-block\\">This is a header</strong><span class=\\"gl-display-block\\">This is a subheader</span></div>
+"<content-row-stub level=\\"2\\" statusiconname=\\"success\\" widgetname=\\"MyWidget\\" header=\\"This is a header,This is a subheader\\">
   <div class=\\"gl-display-flex gl-flex-direction-column\\">
     <div>
       <p class=\\"gl-mb-0\\">Main text for the row</p>
@@ -16,10 +15,7 @@ exports[`~/vue_merge_request_widget/components/widget/dynamic_content.vue render
     </div>
     <ul class=\\"gl-m-0 gl-p-0 gl-list-style-none\\">
       <li>
-        <content-row-stub level=\\"3\\" statusiconname=\\"\\" widgetname=\\"MyWidget\\" data-qa-selector=\\"child_content\\">
-          <div class=\\"gl-mb-2\\"><strong class=\\"gl-display-block\\">Child row header</strong>
-            <!---->
-          </div>
+        <content-row-stub level=\\"3\\" statusiconname=\\"\\" widgetname=\\"MyWidget\\" header=\\"Child row header\\" data-qa-selector=\\"child_content\\">
           <div class=\\"gl-display-flex gl-flex-direction-column\\">
             <div>
               <p class=\\"gl-mb-0\\">This is recursive. It will be listed in level 3.</p>
diff --git a/spec/frontend/vue_merge_request_widget/components/widget/dynamic_content_spec.js b/spec/frontend/vue_merge_request_widget/components/widget/dynamic_content_spec.js
index 2372448c518..b7753a58747 100644
--- a/spec/frontend/vue_merge_request_widget/components/widget/dynamic_content_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/widget/dynamic_content_spec.js
@@ -1,8 +1,6 @@
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { EXTENSION_ICONS } from '~/vue_merge_request_widget/constants';
 import DynamicContent from '~/vue_merge_request_widget/components/widget/dynamic_content.vue';
-import ContentHeader from '~/vue_merge_request_widget/components/widget/widget_content_header.vue';
-import ContentBody from '~/vue_merge_request_widget/components/widget/widget_content_body.vue';
 
 describe('~/vue_merge_request_widget/components/widget/dynamic_content.vue', () => {
   let wrapper;
@@ -14,8 +12,6 @@ describe('~/vue_merge_request_widget/components/widget/dynamic_content.vue', ()
         ...propsData,
       },
       stubs: {
-        ContentHeader,
-        ContentBody,
         DynamicContent,
       },
     });
diff --git a/spec/frontend/vue_merge_request_widget/components/widget/widget_content_body_spec.js b/spec/frontend/vue_merge_request_widget/components/widget/widget_content_body_spec.js
deleted file mode 100644
index 2f3f99badd0..00000000000
--- a/spec/frontend/vue_merge_request_widget/components/widget/widget_content_body_spec.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import WidgetContentBody from '~/vue_merge_request_widget/components/widget/widget_content_body.vue';
-import StatusIcon from '~/vue_merge_request_widget/components/widget/status_icon.vue';
-
-describe('~/vue_merge_request_widget/components/widget/widget_content_body.vue', () => {
-  let wrapper;
-
-  const findStatusIcon = () => wrapper.findComponent(StatusIcon);
-
-  const createComponent = ({ propsData, slots } = {}) => {
-    wrapper = shallowMountExtended(WidgetContentBody, {
-      propsData: {
-        widgetName: 'MyWidget',
-        ...propsData,
-      },
-      slots,
-    });
-  };
-
-  it('does not render the status icon when it is not provided', () => {
-    createComponent();
-    expect(findStatusIcon().exists()).toBe(false);
-  });
-
-  it('renders the status icon when provided', () => {
-    createComponent({ propsData: { statusIconName: 'failed' } });
-    expect(findStatusIcon().exists()).toBe(true);
-  });
-
-  it('renders the default slot', () => {
-    createComponent({
-      slots: {
-        default: 'Hello world',
-      },
-    });
-
-    expect(wrapper.findByText('Hello world').exists()).toBe(true);
-  });
-});
diff --git a/spec/frontend/vue_merge_request_widget/components/widget/widget_content_header_spec.js b/spec/frontend/vue_merge_request_widget/components/widget/widget_content_header_spec.js
deleted file mode 100644
index 995d28e350c..00000000000
--- a/spec/frontend/vue_merge_request_widget/components/widget/widget_content_header_spec.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import WidgetContentHeader from '~/vue_merge_request_widget/components/widget/widget_content_header.vue';
-
-describe('~/vue_merge_request_widget/components/widget/widget_content_header.vue', () => {
-  let wrapper;
-
-  const createComponent = ({ propsData } = {}) => {
-    wrapper = shallowMountExtended(WidgetContentHeader, {
-      propsData: {
-        widgetName: 'MyWidget',
-        ...propsData,
-      },
-    });
-  };
-
-  it('renders an array of header and subheader', () => {
-    createComponent({ propsData: { header: ['this is a header', 'this is a subheader'] } });
-    expect(wrapper.findByText('this is a header').exists()).toBe(true);
-    expect(wrapper.findByText('this is a subheader').exists()).toBe(true);
-  });
-
-  it('renders a string', () => {
-    createComponent({ propsData: { header: 'this is a header' } });
-    expect(wrapper.findByText('this is a header').exists()).toBe(true);
-  });
-
-  it('escapes html injection properly', () => {
-    createComponent({ propsData: { header: '<b role="header">this is a header</b>' } });
-    expect(wrapper.findByText('<b role="header">this is a header</b>').exists()).toBe(true);
-  });
-});
diff --git a/spec/frontend/vue_merge_request_widget/components/widget/widget_content_row_spec.js b/spec/frontend/vue_merge_request_widget/components/widget/widget_content_row_spec.js
index 1cb8c7277d3..4c2578ff590 100644
--- a/spec/frontend/vue_merge_request_widget/components/widget/widget_content_row_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/widget/widget_content_row_spec.js
@@ -1,38 +1,63 @@
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import WidgetContentRow from '~/vue_merge_request_widget/components/widget/widget_content_row.vue';
-import WidgetContentBody from '~/vue_merge_request_widget/components/widget/widget_content_body.vue';
+import StatusIcon from '~/vue_merge_request_widget/components/widget/status_icon.vue';
 
 describe('~/vue_merge_request_widget/components/widget/widget_content_row.vue', () => {
   let wrapper;
 
-  const findContentBody = () => wrapper.findComponent(WidgetContentBody);
+  const findStatusIcon = () => wrapper.findComponent(StatusIcon);
 
   const createComponent = ({ propsData, slots } = {}) => {
     wrapper = shallowMountExtended(WidgetContentRow, {
       propsData: {
         widgetName: 'MyWidget',
+        level: 2,
         ...propsData,
       },
       slots,
     });
   };
 
-  it('renders slots properly', () => {
-    createComponent({
-      propsData: {
-        statusIconName: 'success',
-        level: 2,
-      },
-      slots: {
-        header: '<b>this is a header</b>',
-        body: '<span>this is a body</span>',
-      },
+  describe('body', () => {
+    it('renders the status icon when provided', () => {
+      createComponent({ propsData: { statusIconName: 'failed' } });
+      expect(findStatusIcon().exists()).toBe(true);
+    });
+
+    it('does not render the status icon when it is not provided', () => {
+      createComponent();
+      expect(findStatusIcon().exists()).toBe(false);
+    });
+
+    it('renders slots properly', () => {
+      createComponent({
+        propsData: {
+          statusIconName: 'success',
+        },
+        slots: {
+          body: '<span>this is a body</span>',
+        },
+      });
+
+      expect(wrapper.findByText('this is a body').exists()).toBe(true);
+    });
+  });
+
+  describe('header', () => {
+    it('renders an array of header and subheader', () => {
+      createComponent({ propsData: { header: ['this is a header', 'this is a subheader'] } });
+      expect(wrapper.findByText('this is a header').exists()).toBe(true);
+      expect(wrapper.findByText('this is a subheader').exists()).toBe(true);
+    });
+
+    it('renders a string', () => {
+      createComponent({ propsData: { header: 'this is a header' } });
+      expect(wrapper.findByText('this is a header').exists()).toBe(true);
     });
 
-    expect(wrapper.findByText('this is a header').exists()).toBe(true);
-    expect(findContentBody().props()).toMatchObject({
-      statusIconName: 'success',
-      widgetName: 'MyWidget',
+    it('escapes html injection properly', () => {
+      createComponent({ propsData: { header: '<b role="header">this is a header</b>' } });
+      expect(wrapper.findByText('<b role="header">this is a header</b>').exists()).toBe(true);
     });
   });
 });
diff --git a/spec/frontend/vue_shared/components/namespace_select/namespace_select_spec.js b/spec/frontend/vue_shared/components/namespace_select/namespace_select_deprecated_spec.js
index 6003f2b4c48..d930ef63dad 100644
--- a/spec/frontend/vue_shared/components/namespace_select/namespace_select_spec.js
+++ b/spec/frontend/vue_shared/components/namespace_select/namespace_select_deprecated_spec.js
@@ -11,14 +11,14 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import NamespaceSelect, {
   i18n,
   EMPTY_NAMESPACE_ID,
-} from '~/vue_shared/components/namespace_select/namespace_select.vue';
+} from '~/vue_shared/components/namespace_select/namespace_select_deprecated.vue';
 import { userNamespaces, groupNamespaces } from './mock_data';
 
 const FLAT_NAMESPACES = [...userNamespaces, ...groupNamespaces];
 const EMPTY_NAMESPACE_TITLE = 'Empty namespace TEST';
 const EMPTY_NAMESPACE_ITEM = { id: EMPTY_NAMESPACE_ID, humanName: EMPTY_NAMESPACE_TITLE };
 
-describe('Namespace Select', () => {
+describe('NamespaceSelectDeprecated', () => {
   let wrapper;
 
   const createComponent = (props = {}) =>