Add latest changes from gitlab-org/gitlab@13-4-stable-ee

11 files changed, 174 insertions, 216 deletions

diff --git a/spec/frontend/vue_mr_widget/components/mock_data.js b/spec/frontend/vue_mr_widget/components/mock_data.js
index 39c7d75cda5..73e254f2b1a 100644
--- a/spec/frontend/vue_mr_widget/components/mock_data.js
+++ b/spec/frontend/vue_mr_widget/components/mock_data.js
@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/prefer-default-export
 export const artifactsList = [
   {
     text: 'result.txt',
diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_container_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_container_spec.js
index 60f970e0018..4e3e918f7fb 100644
--- a/spec/frontend/vue_mr_widget/components/mr_widget_container_spec.js
+++ b/spec/frontend/vue_mr_widget/components/mr_widget_container_spec.js
@@ -20,8 +20,8 @@ describe('MrWidgetContainer', () => {
   it('has layout', () => {
     factory();
 
-    expect(wrapper.is('.mr-widget-heading')).toBe(true);
-    expect(wrapper.contains('.mr-widget-content')).toBe(true);
+    expect(wrapper.classes()).toContain('mr-widget-heading');
+    expect(wrapper.find('.mr-widget-content').exists()).toBe(true);
   });
 
   it('accepts default slot', () => {
@@ -31,7 +31,7 @@ describe('MrWidgetContainer', () => {
       },
     });
 
-    expect(wrapper.contains('.mr-widget-content .test-body')).toBe(true);
+    expect(wrapper.find('.mr-widget-content .test-body').exists()).toBe(true);
   });
 
   it('accepts footer slot', () => {
@@ -42,7 +42,7 @@ describe('MrWidgetContainer', () => {
       },
     });
 
-    expect(wrapper.contains('.mr-widget-content .test-body')).toBe(true);
-    expect(wrapper.contains('.test-footer')).toBe(true);
+    expect(wrapper.find('.mr-widget-content .test-body').exists()).toBe(true);
+    expect(wrapper.find('.test-footer').exists()).toBe(true);
   });
 });
diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_expandable_section_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_expandable_section_spec.js
index 69a50899d4d..3e111cd308a 100644
--- a/spec/frontend/vue_mr_widget/components/mr_widget_expandable_section_spec.js
+++ b/spec/frontend/vue_mr_widget/components/mr_widget_expandable_section_spec.js
@@ -18,7 +18,7 @@ describe('MrWidgetExpanableSection', () => {
   });
 
   it('renders Icon', () => {
-    expect(wrapper.contains(GlIcon)).toBe(true);
+    expect(wrapper.find(GlIcon).exists()).toBe(true);
   });
 
   it('renders header slot', () => {
diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js
index 21058005d29..caea9a757ae 100644
--- a/spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js
+++ b/spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js
@@ -25,10 +25,14 @@ describe('MRWidgetHeader', () => {
     const downloadEmailPatchesEl = vm.$el.querySelector('.js-download-email-patches');
     const downloadPlainDiffEl = vm.$el.querySelector('.js-download-plain-diff');
 
-    expect(downloadEmailPatchesEl.textContent.trim()).toEqual('Email patches');
-    expect(downloadEmailPatchesEl.getAttribute('href')).toEqual('/mr/email-patches');
-    expect(downloadPlainDiffEl.textContent.trim()).toEqual('Plain diff');
-    expect(downloadPlainDiffEl.getAttribute('href')).toEqual('/mr/plainDiffPath');
+    expect(downloadEmailPatchesEl.innerText.trim()).toEqual('Email patches');
+    expect(downloadEmailPatchesEl.querySelector('a').getAttribute('href')).toEqual(
+      '/mr/email-patches',
+    );
+    expect(downloadPlainDiffEl.innerText.trim()).toEqual('Plain diff');
+    expect(downloadPlainDiffEl.querySelector('a').getAttribute('href')).toEqual(
+      '/mr/plainDiffPath',
+    );
   };
 
   describe('computed', () => {
diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_icon_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_icon_spec.js
index cee0b9b0118..ea8b33495ab 100644
--- a/spec/frontend/vue_mr_widget/components/mr_widget_icon_spec.js
+++ b/spec/frontend/vue_mr_widget/components/mr_widget_icon_spec.js
@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
+import { GlIcon } from '@gitlab/ui';
 import MrWidgetIcon from '~/vue_merge_request_widget/components/mr_widget_icon.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 
 const TEST_ICON = 'commit';
 
@@ -21,6 +21,6 @@ describe('MrWidgetIcon', () => {
 
   it('renders icon and container', () => {
     expect(wrapper.is('.circle-icon-container')).toBe(true);
-    expect(wrapper.find(Icon).props('name')).toEqual(TEST_ICON);
+    expect(wrapper.find(GlIcon).props('name')).toEqual(TEST_ICON);
   });
 });
diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_pipeline_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_pipeline_spec.js
index 6486826c3ec..7ecd8629607 100644
--- a/spec/frontend/vue_mr_widget/components/mr_widget_pipeline_spec.js
+++ b/spec/frontend/vue_mr_widget/components/mr_widget_pipeline_spec.js
@@ -29,6 +29,8 @@ describe('MRWidgetPipeline', () => {
   const findAllPipelineStages = () => wrapper.findAll(PipelineStage);
   const findPipelineCoverage = () => wrapper.find('[data-testid="pipeline-coverage"]');
   const findPipelineCoverageDelta = () => wrapper.find('[data-testid="pipeline-coverage-delta"]');
+  const findPipelineCoverageTooltipText = () =>
+    wrapper.find('[data-testid="pipeline-coverage-tooltip"]').text();
   const findMonitoringPipelineMessage = () =>
     wrapper.find('[data-testid="monitoring-pipeline-message"]');
   const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
@@ -49,257 +51,208 @@ describe('MRWidgetPipeline', () => {
     }
   });
 
-  describe('computed', () => {
-    describe('hasPipeline', () => {
-      beforeEach(() => {
-        createWrapper();
-      });
-
-      it('should return true when there is a pipeline', () => {
-        expect(wrapper.vm.hasPipeline).toBe(true);
-      });
+  it('should render CI error if there is a pipeline, but no status', () => {
+    createWrapper({ ciStatus: null }, mount);
+    expect(findCIErrorMessage().text()).toBe(ciErrorMessage);
+  });
 
-      it('should return false when there is no pipeline', async () => {
-        wrapper.setProps({ pipeline: {} });
+  it('should render a loading state when no pipeline is found', () => {
+    createWrapper({ pipeline: {} }, mount);
 
-        await wrapper.vm.$nextTick();
+    expect(findMonitoringPipelineMessage().text()).toBe(monitoringMessage);
+    expect(findLoadingIcon().exists()).toBe(true);
+  });
 
-        expect(wrapper.vm.hasPipeline).toBe(false);
+  describe('with a pipeline', () => {
+    beforeEach(() => {
+      createWrapper({
+        pipelineCoverageDelta: mockData.pipelineCoverageDelta,
+        buildsWithCoverage: mockData.buildsWithCoverage,
       });
     });
 
-    describe('hasCIError', () => {
-      beforeEach(() => {
-        createWrapper();
-      });
+    it('should render pipeline ID', () => {
+      expect(
+        findPipelineID()
+          .text()
+          .trim(),
+      ).toBe(`#${mockData.pipeline.id}`);
+    });
 
-      it('should return false when there is no CI error', () => {
-        expect(wrapper.vm.hasCIError).toBe(false);
-      });
+    it('should render pipeline status and commit id', () => {
+      expect(findPipelineInfoContainer().text()).toMatch(mockData.pipeline.details.status.label);
 
-      it('should return true when there is a pipeline, but no ci status', async () => {
-        wrapper.setProps({ ciStatus: null });
+      expect(
+        findCommitLink()
+          .text()
+          .trim(),
+      ).toBe(mockData.pipeline.commit.short_id);
 
-        await wrapper.vm.$nextTick();
+      expect(findCommitLink().attributes('href')).toBe(mockData.pipeline.commit.commit_path);
+    });
 
-        expect(wrapper.vm.hasCIError).toBe(true);
-      });
+    it('should render pipeline graph', () => {
+      expect(findPipelineGraph().exists()).toBe(true);
+      expect(findAllPipelineStages().length).toBe(mockData.pipeline.details.stages.length);
     });
 
-    describe('coverageDeltaClass', () => {
-      beforeEach(() => {
-        createWrapper({ pipelineCoverageDelta: '0' });
+    describe('should render pipeline coverage information', () => {
+      it('should render coverage percentage', () => {
+        expect(findPipelineCoverage().text()).toMatch(`Coverage ${mockData.pipeline.coverage}%`);
       });
 
-      it('should return no class if there is no coverage change', async () => {
-        expect(wrapper.vm.coverageDeltaClass).toBe('');
+      it('should render coverage delta', () => {
+        expect(findPipelineCoverageDelta().exists()).toBe(true);
+        expect(findPipelineCoverageDelta().text()).toBe(`(${mockData.pipelineCoverageDelta}%)`);
       });
 
-      it('should return text-success if the coverage increased', async () => {
-        wrapper.setProps({ pipelineCoverageDelta: '10' });
-
-        await wrapper.vm.$nextTick();
+      it('coverage delta should have no special style if there is no coverage change', () => {
+        createWrapper({ pipelineCoverageDelta: '0' });
+        expect(findPipelineCoverageDelta().classes()).toEqual([]);
+      });
 
-        expect(wrapper.vm.coverageDeltaClass).toBe('text-success');
+      it('coverage delta should have text-success style if coverage increased', () => {
+        createWrapper({ pipelineCoverageDelta: '10' });
+        expect(findPipelineCoverageDelta().classes()).toEqual(['text-success']);
       });
 
-      it('should return text-danger if the coverage decreased', async () => {
-        wrapper.setProps({ pipelineCoverageDelta: '-12' });
+      it('coverage delta should have text-danger style if coverage increased', () => {
+        createWrapper({ pipelineCoverageDelta: '-10' });
+        expect(findPipelineCoverageDelta().classes()).toEqual(['text-danger']);
+      });
 
-        await wrapper.vm.$nextTick();
+      it('should render tooltip for jobs contributing to code coverage', () => {
+        const tooltipText = findPipelineCoverageTooltipText();
+        const expectedDescription = `Coverage value for this pipeline was calculated by averaging the resulting coverage values of ${mockData.buildsWithCoverage.length} jobs.`;
 
-        expect(wrapper.vm.coverageDeltaClass).toBe('text-danger');
+        expect(tooltipText).toContain(expectedDescription);
       });
+
+      it.each(mockData.buildsWithCoverage)(
+        'should have name and coverage for build %s listed in tooltip',
+        build => {
+          const tooltipText = findPipelineCoverageTooltipText();
+
+          expect(tooltipText).toContain(`${build.name} (${build.coverage}%)`);
+        },
+      );
     });
   });
 
-  describe('rendered output', () => {
+  describe('without commit path', () => {
     beforeEach(() => {
-      createWrapper({ ciStatus: null }, mount);
-    });
+      const mockCopy = JSON.parse(JSON.stringify(mockData));
+      delete mockCopy.pipeline.commit;
 
-    it('should render CI error if there is a pipeline, but no status', async () => {
-      expect(findCIErrorMessage().text()).toBe(ciErrorMessage);
+      createWrapper({});
     });
 
-    it('should render a loading state when no pipeline is found', async () => {
-      wrapper.setProps({
-        pipeline: {},
-        hasCi: false,
-        pipelineMustSucceed: true,
-      });
-
-      await wrapper.vm.$nextTick();
-
-      expect(findMonitoringPipelineMessage().text()).toBe(monitoringMessage);
-      expect(findLoadingIcon().exists()).toBe(true);
+    it('should render pipeline ID', () => {
+      expect(
+        findPipelineID()
+          .text()
+          .trim(),
+      ).toBe(`#${mockData.pipeline.id}`);
     });
 
-    describe('with a pipeline', () => {
-      beforeEach(() => {
-        createWrapper(
-          {
-            pipelineCoverageDelta: mockData.pipelineCoverageDelta,
-          },
-          mount,
-        );
-      });
-
-      it('should render pipeline ID', () => {
-        expect(
-          findPipelineID()
-            .text()
-            .trim(),
-        ).toBe(`#${mockData.pipeline.id}`);
-      });
-
-      it('should render pipeline status and commit id', () => {
-        expect(findPipelineInfoContainer().text()).toMatch(mockData.pipeline.details.status.label);
-
-        expect(
-          findCommitLink()
-            .text()
-            .trim(),
-        ).toBe(mockData.pipeline.commit.short_id);
-
-        expect(findCommitLink().attributes('href')).toBe(mockData.pipeline.commit.commit_path);
-      });
-
-      it('should render pipeline graph', () => {
-        expect(findPipelineGraph().exists()).toBe(true);
-        expect(findAllPipelineStages().length).toBe(mockData.pipeline.details.stages.length);
-      });
-
-      it('should render coverage information', () => {
-        expect(findPipelineCoverage().text()).toMatch(`Coverage ${mockData.pipeline.coverage}%`);
-      });
+    it('should render pipeline status', () => {
+      expect(findPipelineInfoContainer().text()).toMatch(mockData.pipeline.details.status.label);
+    });
 
-      it('should render pipeline coverage delta information', () => {
-        expect(findPipelineCoverageDelta().exists()).toBe(true);
-        expect(findPipelineCoverageDelta().text()).toBe(`(${mockData.pipelineCoverageDelta}%)`);
-      });
+    it('should render pipeline graph', () => {
+      expect(findPipelineGraph().exists()).toBe(true);
+      expect(findAllPipelineStages().length).toBe(mockData.pipeline.details.stages.length);
     });
 
-    describe('without commit path', () => {
-      beforeEach(() => {
-        const mockCopy = JSON.parse(JSON.stringify(mockData));
-        delete mockCopy.pipeline.commit;
+    it('should render coverage information', () => {
+      expect(findPipelineCoverage().text()).toMatch(`Coverage ${mockData.pipeline.coverage}%`);
+    });
+  });
 
-        createWrapper({}, mount);
-      });
+  describe('without coverage', () => {
+    beforeEach(() => {
+      const mockCopy = JSON.parse(JSON.stringify(mockData));
+      delete mockCopy.pipeline.coverage;
 
-      it('should render pipeline ID', () => {
-        expect(
-          findPipelineID()
-            .text()
-            .trim(),
-        ).toBe(`#${mockData.pipeline.id}`);
-      });
+      createWrapper({ pipeline: mockCopy.pipeline });
+    });
 
-      it('should render pipeline status', () => {
-        expect(findPipelineInfoContainer().text()).toMatch(mockData.pipeline.details.status.label);
-      });
+    it('should not render a coverage component', () => {
+      expect(findPipelineCoverage().exists()).toBe(false);
+    });
+  });
 
-      it('should render pipeline graph', () => {
-        expect(findPipelineGraph().exists()).toBe(true);
-        expect(findAllPipelineStages().length).toBe(mockData.pipeline.details.stages.length);
-      });
+  describe('without a pipeline graph', () => {
+    beforeEach(() => {
+      const mockCopy = JSON.parse(JSON.stringify(mockData));
+      delete mockCopy.pipeline.details.stages;
 
-      it('should render coverage information', () => {
-        expect(findPipelineCoverage().text()).toMatch(`Coverage ${mockData.pipeline.coverage}%`);
+      createWrapper({
+        pipeline: mockCopy.pipeline,
       });
     });
 
-    describe('without coverage', () => {
-      beforeEach(() => {
-        const mockCopy = JSON.parse(JSON.stringify(mockData));
-        delete mockCopy.pipeline.coverage;
-
-        createWrapper(
-          {
-            pipeline: mockCopy.pipeline,
-          },
-          mount,
-        );
-      });
-
-      it('should not render a coverage component', () => {
-        expect(findPipelineCoverage().exists()).toBe(false);
-      });
+    it('should not render a pipeline graph', () => {
+      expect(findPipelineGraph().exists()).toBe(false);
     });
+  });
 
-    describe('without a pipeline graph', () => {
-      beforeEach(() => {
-        const mockCopy = JSON.parse(JSON.stringify(mockData));
-        delete mockCopy.pipeline.details.stages;
+  describe('for each type of pipeline', () => {
+    let pipeline;
 
-        createWrapper({
-          pipeline: mockCopy.pipeline,
-        });
-      });
+    beforeEach(() => {
+      ({ pipeline } = JSON.parse(JSON.stringify(mockData)));
 
-      it('should not render a pipeline graph', () => {
-        expect(findPipelineGraph().exists()).toBe(false);
-      });
+      pipeline.details.name = 'Pipeline';
+      pipeline.merge_request_event_type = undefined;
+      pipeline.ref.tag = false;
+      pipeline.ref.branch = false;
     });
 
-    describe('for each type of pipeline', () => {
-      let pipeline;
-
-      beforeEach(() => {
-        ({ pipeline } = JSON.parse(JSON.stringify(mockData)));
-
-        pipeline.details.name = 'Pipeline';
-        pipeline.merge_request_event_type = undefined;
-        pipeline.ref.tag = false;
-        pipeline.ref.branch = false;
+    const factory = () => {
+      createWrapper({
+        pipeline,
+        sourceBranchLink: mockData.source_branch_link,
       });
+    };
 
-      const factory = () => {
-        createWrapper({
-          pipeline,
-          sourceBranchLink: mockData.source_branch_link,
-        });
-      };
-
-      describe('for a branch pipeline', () => {
-        it('renders a pipeline widget that reads "Pipeline <ID> <status> for <SHA> on <branch>"', () => {
-          pipeline.ref.branch = true;
+    describe('for a branch pipeline', () => {
+      it('renders a pipeline widget that reads "Pipeline <ID> <status> for <SHA> on <branch>"', () => {
+        pipeline.ref.branch = true;
 
-          factory();
+        factory();
 
-          const expected = `Pipeline #${pipeline.id} ${pipeline.details.status.label} for ${pipeline.commit.short_id} on ${mockData.source_branch_link}`;
-          const actual = trimText(findPipelineInfoContainer().text());
+        const expected = `Pipeline #${pipeline.id} ${pipeline.details.status.label} for ${pipeline.commit.short_id} on ${mockData.source_branch_link}`;
+        const actual = trimText(findPipelineInfoContainer().text());
 
-          expect(actual).toBe(expected);
-        });
+        expect(actual).toBe(expected);
       });
+    });
 
-      describe('for a tag pipeline', () => {
-        it('renders a pipeline widget that reads "Pipeline <ID> <status> for <SHA> on <branch>"', () => {
-          pipeline.ref.tag = true;
+    describe('for a tag pipeline', () => {
+      it('renders a pipeline widget that reads "Pipeline <ID> <status> for <SHA> on <branch>"', () => {
+        pipeline.ref.tag = true;
 
-          factory();
+        factory();
 
-          const expected = `Pipeline #${pipeline.id} ${pipeline.details.status.label} for ${pipeline.commit.short_id}`;
-          const actual = trimText(findPipelineInfoContainer().text());
+        const expected = `Pipeline #${pipeline.id} ${pipeline.details.status.label} for ${pipeline.commit.short_id}`;
+        const actual = trimText(findPipelineInfoContainer().text());
 
-          expect(actual).toBe(expected);
-        });
+        expect(actual).toBe(expected);
       });
+    });
 
-      describe('for a detached merge request pipeline', () => {
-        it('renders a pipeline widget that reads "Detached merge request pipeline <ID> <status> for <SHA>"', () => {
-          pipeline.details.name = 'Detached merge request pipeline';
-          pipeline.merge_request_event_type = 'detached';
+    describe('for a detached merge request pipeline', () => {
+      it('renders a pipeline widget that reads "Detached merge request pipeline <ID> <status> for <SHA>"', () => {
+        pipeline.details.name = 'Detached merge request pipeline';
+        pipeline.merge_request_event_type = 'detached';
 
-          factory();
+        factory();
 
-          const expected = `Detached merge request pipeline #${pipeline.id} ${pipeline.details.status.label} for ${pipeline.commit.short_id}`;
-          const actual = trimText(findPipelineInfoContainer().text());
+        const expected = `Detached merge request pipeline #${pipeline.id} ${pipeline.details.status.label} for ${pipeline.commit.short_id}`;
+        const actual = trimText(findPipelineInfoContainer().text());
 
-          expect(actual).toBe(expected);
-        });
+        expect(actual).toBe(expected);
       });
     });
   });
diff --git a/spec/frontend/vue_mr_widget/components/review_app_link_spec.js b/spec/frontend/vue_mr_widget/components/review_app_link_spec.js
index 7b063653a93..7d47621c64a 100644
--- a/spec/frontend/vue_mr_widget/components/review_app_link_spec.js
+++ b/spec/frontend/vue_mr_widget/components/review_app_link_spec.js
@@ -30,7 +30,7 @@ describe('review app link', () => {
   });
 
   it('renders provided cssClass as class attribute', () => {
-    expect(el.getAttribute('class')).toEqual(props.cssClass);
+    expect(el.getAttribute('class')).toContain(props.cssClass);
   });
 
   it('renders View app text', () => {
diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_commits_header_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_commits_header_spec.js
index 67746b062b9..62fc3330444 100644
--- a/spec/frontend/vue_mr_widget/components/states/mr_widget_commits_header_spec.js
+++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_commits_header_spec.js
@@ -1,6 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
 import CommitsHeader from '~/vue_merge_request_widget/components/states/commits_header.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 
 describe('Commits header component', () => {
   let wrapper;
@@ -23,7 +22,6 @@ describe('Commits header component', () => {
 
   const findHeaderWrapper = () => wrapper.find('.js-mr-widget-commits-count');
   const findCommitToggle = () => wrapper.find('.commit-edit-toggle');
-  const findIcon = () => wrapper.find(Icon);
   const findCommitsCountMessage = () => wrapper.find('.commits-count-message');
   const findTargetBranchMessage = () => wrapper.find('.label-branch');
   const findModifyButton = () => wrapper.find('.modify-message-button');
@@ -61,7 +59,7 @@ describe('Commits header component', () => {
       wrapper.setData({ expanded: false });
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(findIcon().props('name')).toBe('chevron-right');
+        expect(findCommitToggle().props('icon')).toBe('chevron-right');
       });
     });
 
@@ -119,7 +117,7 @@ describe('Commits header component', () => {
 
     it('has a chevron-down icon', done => {
       wrapper.vm.$nextTick(() => {
-        expect(findIcon().props('name')).toBe('chevron-down');
+        expect(findCommitToggle().props('icon')).toBe('chevron-down');
         done();
       });
     });
diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_conflicts_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_conflicts_spec.js
index c3a16a776a7..19f8a67d066 100644
--- a/spec/frontend/vue_mr_widget/components/states/mr_widget_conflicts_spec.js
+++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_conflicts_spec.js
@@ -148,8 +148,8 @@ describe('MRWidgetConflicts', () => {
         },
       });
 
-      expect(vm.contains('.js-resolve-conflicts-button')).toBe(false);
-      expect(vm.contains('.js-merge-locally-button')).toBe(false);
+      expect(vm.find('.js-resolve-conflicts-button').exists()).toBe(false);
+      expect(vm.find('.js-merge-locally-button').exists()).toBe(false);
     });
 
     it('should not have resolve button when no conflict resolution path', () => {
@@ -161,7 +161,7 @@ describe('MRWidgetConflicts', () => {
         },
       });
 
-      expect(vm.contains('.js-resolve-conflicts-button')).toBe(false);
+      expect(vm.find('.js-resolve-conflicts-button').exists()).toBe(false);
     });
   });
 
diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js
index f591393d721..6778a8f4a1f 100644
--- a/spec/frontend/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js
+++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js
@@ -125,7 +125,11 @@ describe('MRWidgetFailedToMerge', () => {
     });
 
     it('renders refresh button', () => {
-      expect(vm.$el.querySelector('.js-refresh-button').textContent.trim()).toEqual('Refresh now');
+      expect(
+        vm.$el
+          .querySelector('[data-testid="merge-request-failed-refresh-button"]')
+          .textContent.trim(),
+      ).toEqual('Refresh now');
     });
 
     it('renders remaining time', () => {
diff --git a/spec/frontend/vue_mr_widget/components/terraform/mr_widget_terraform_container_spec.js b/spec/frontend/vue_mr_widget/components/terraform/mr_widget_terraform_container_spec.js
index ffcf9b1477a..7fe6b44ecc7 100644
--- a/spec/frontend/vue_mr_widget/components/terraform/mr_widget_terraform_container_spec.js
+++ b/spec/frontend/vue_mr_widget/components/terraform/mr_widget_terraform_container_spec.js
@@ -1,4 +1,4 @@
-import { GlSkeletonLoading, GlSprintf } from '@gitlab/ui';
+import { GlDeprecatedSkeletonLoading as GlSkeletonLoading, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { invalidPlanWithName, plans, validPlanWithName } from './mock_data';
@@ -49,8 +49,8 @@ describe('MrWidgetTerraformConainer', () => {
     });
 
     it('diplays loading skeleton', () => {
-      expect(wrapper.contains(GlSkeletonLoading)).toBe(true);
-      expect(wrapper.contains(MrWidgetExpanableSection)).toBe(false);
+      expect(wrapper.find(GlSkeletonLoading).exists()).toBe(true);
+      expect(wrapper.find(MrWidgetExpanableSection).exists()).toBe(false);
     });
   });
 
@@ -61,8 +61,8 @@ describe('MrWidgetTerraformConainer', () => {
     });
 
     it('displays terraform content', () => {
-      expect(wrapper.contains(GlSkeletonLoading)).toBe(false);
-      expect(wrapper.contains(MrWidgetExpanableSection)).toBe(true);
+      expect(wrapper.find(GlSkeletonLoading).exists()).toBe(false);
+      expect(wrapper.find(MrWidgetExpanableSection).exists()).toBe(true);
       expect(findPlans()).toEqual(Object.values(plans));
     });
 
@@ -156,7 +156,7 @@ describe('MrWidgetTerraformConainer', () => {
       });
 
       it('stops loading', () => {
-        expect(wrapper.contains(GlSkeletonLoading)).toBe(false);
+        expect(wrapper.find(GlSkeletonLoading).exists()).toBe(false);
       });
 
       it('generates one broken plan', () => {