1 files changed, 23 insertions, 17 deletions

diff --git a/spec/frontend/vue_mr_widget/deployment/deployment_view_button_spec.js b/spec/frontend/vue_mr_widget/deployment/deployment_view_button_spec.js
index a5d91468ef2..eb6e3711e2e 100644
--- a/spec/frontend/vue_mr_widget/deployment/deployment_view_button_spec.js
+++ b/spec/frontend/vue_mr_widget/deployment/deployment_view_button_spec.js
@@ -1,4 +1,5 @@
-import { mount } from '@vue/test-utils';
+import { GlDropdown, GlLink } from '@gitlab/ui';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import DeploymentViewButton from '~/vue_merge_request_widget/components/deployment/deployment_view_button.vue';
 import ReviewAppLink from '~/vue_merge_request_widget/components/review_app_link.vue';
 import { deploymentMockData } from './deployment_mock_data';
@@ -11,14 +12,14 @@ const appButtonText = {
 describe('Deployment View App button', () => {
   let wrapper;
 
-  const factory = (options = {}) => {
-    wrapper = mount(DeploymentViewButton, {
+  const createComponent = (options = {}) => {
+    wrapper = mountExtended(DeploymentViewButton, {
       ...options,
     });
   };
 
   beforeEach(() => {
-    factory({
+    createComponent({
       propsData: {
         deployment: deploymentMockData,
         appButtonText,
@@ -30,15 +31,21 @@ describe('Deployment View App button', () => {
     wrapper.destroy();
   });
 
+  const findReviewAppLink = () => wrapper.findComponent(ReviewAppLink);
+  const findMrWigdetDeploymentDropdown = () => wrapper.findComponent(GlDropdown);
+  const findMrWigdetDeploymentDropdownIcon = () =>
+    wrapper.findByTestId('mr-wigdet-deployment-dropdown-icon');
+  const findDeployUrlMenuItems = () => wrapper.findAllComponents(GlLink);
+
   describe('text', () => {
     it('renders text as passed', () => {
-      expect(wrapper.find(ReviewAppLink).text()).toContain(appButtonText.text);
+      expect(findReviewAppLink().props().display.text).toBe(appButtonText.text);
     });
   });
 
   describe('without changes', () => {
     beforeEach(() => {
-      factory({
+      createComponent({
         propsData: {
           deployment: { ...deploymentMockData, changes: null },
           appButtonText,
@@ -47,13 +54,13 @@ describe('Deployment View App button', () => {
     });
 
     it('renders the link to the review app without dropdown', () => {
-      expect(wrapper.find('.js-mr-wigdet-deployment-dropdown').exists()).toBe(false);
+      expect(findMrWigdetDeploymentDropdown().exists()).toBe(false);
     });
   });
 
   describe('with a single change', () => {
     beforeEach(() => {
-      factory({
+      createComponent({
         propsData: {
           deployment: { ...deploymentMockData, changes: [deploymentMockData.changes[0]] },
           appButtonText,
@@ -62,21 +69,20 @@ describe('Deployment View App button', () => {
     });
 
     it('renders the link to the review app without dropdown', () => {
-      expect(wrapper.find('.js-mr-wigdet-deployment-dropdown').exists()).toBe(false);
+      expect(findMrWigdetDeploymentDropdown().exists()).toBe(false);
+      expect(findMrWigdetDeploymentDropdownIcon().exists()).toBe(false);
     });
 
     it('renders the link to the review app linked to to the first change', () => {
       const expectedUrl = deploymentMockData.changes[0].external_url;
-      const deployUrl = wrapper.find('.js-deploy-url');
 
-      expect(deployUrl.attributes().href).not.toBeNull();
-      expect(deployUrl.attributes().href).toEqual(expectedUrl);
+      expect(findReviewAppLink().attributes('href')).toBe(expectedUrl);
     });
   });
 
   describe('with multiple changes', () => {
     beforeEach(() => {
-      factory({
+      createComponent({
         propsData: {
           deployment: deploymentMockData,
           appButtonText,
@@ -85,18 +91,18 @@ describe('Deployment View App button', () => {
     });
 
     it('renders the link to the review app with dropdown', () => {
-      expect(wrapper.find('.js-mr-wigdet-deployment-dropdown').exists()).toBe(true);
+      expect(findMrWigdetDeploymentDropdown().exists()).toBe(true);
+      expect(findMrWigdetDeploymentDropdownIcon().exists()).toBe(true);
     });
 
     it('renders all the links to the review apps', () => {
-      const allUrls = wrapper.findAll('.js-deploy-url-menu-item').wrappers;
+      const allUrls = findDeployUrlMenuItems().wrappers;
       const expectedUrls = deploymentMockData.changes.map((change) => change.external_url);
 
       expectedUrls.forEach((expectedUrl, idx) => {
         const deployUrl = allUrls[idx];
 
-        expect(deployUrl.attributes().href).not.toBeNull();
-        expect(deployUrl.attributes().href).toEqual(expectedUrl);
+        expect(deployUrl.attributes('href')).toBe(expectedUrl);
       });
     });
   });