Adjusted styles and test for mr_widget_terraform

app/assets/javascripts/vue_merge_request_widget/components/terraform/mr_widget_terraform_container.vue

@@ -20,16 +20,20 @@ export default {
     return {
       loading: true,
       plans: {},
+      poll: null,
     };
   },
   created() {
     this.fetchPlans();
   },
+  beforeDestroy() {
+    this.poll.stop();
+  },
   methods: {
     fetchPlans() {
       this.loading = true;
 
-      const poll = new Poll({
+      this.poll = new Poll({
         resource: {
           fetchPlans: () => axios.get(this.endpoint),
         },
@@ -40,17 +44,17 @@ export default {
 
           if (Object.keys(this.plans).length) {
             this.loading = false;
-            poll.stop();
+            this.poll.stop();
           }
         },
         errorCallback: () => {
           this.plans = { bad_plan: {} };
           this.loading = false;
-          poll.stop();
+          this.poll.stop();
         },
       });
 
-      poll.makeRequest();
+      this.poll.makeRequest();
     },
   },
 };

app/assets/javascripts/vue_merge_request_widget/components/terraform/terraform_plan.vue

@@ -12,7 +12,6 @@ export default {
   props: {
     plan: {
       required: true,
-      default: () => {},
       type: Object,
     },
   },
@@ -51,7 +50,9 @@ export default {
 
 <template>
   <div class="gl-display-flex">
-    <span class="append-right-default gl-align-self-start gl-mt-3">
+    <span
+      class="gl-display-flex gl-align-items-center gl-justify-content-center append-right-default gl-align-self-start gl-mt-1"
+    >
       <gl-icon name="status_warning" :size="24" />
     </span>
 
@@ -82,7 +83,7 @@ export default {
         </p>
       </div>
 
-      <div class="terraform-mr-plan-actions">
+      <div>
         <gl-link
           v-if="plan.job_path"
           :href="plan.job_path"

spec/frontend/vue_mr_widget/components/terraform/mr_widget_terraform_container_spec.js

@@ -13,6 +13,8 @@ describe('MrWidgetTerraformConainer', () => {
 
   const propsData = { endpoint: '/path/to/terraform/report.json' };
 
+  const findPlans = () => wrapper.findAll(TerraformPlan).wrappers.map(x => x.props('plan'));
+
   const mockPollingApi = (response, body, header) => {
     mock.onGet(propsData.endpoint).reply(response, body, header);
   };
@@ -44,7 +46,7 @@ describe('MrWidgetTerraformConainer', () => {
     it('diplays loading skeleton', () => {
       expect(wrapper.find(GlSkeletonLoading).exists()).toBe(true);
 
-      expect(wrapper.find(TerraformPlan).exists()).toBe(false);
+      expect(findPlans()).toEqual([]);
     });
   });
 
@@ -72,7 +74,7 @@ describe('MrWidgetTerraformConainer', () => {
       it('diplays terraform components and stops loading', () => {
         expect(wrapper.find(GlSkeletonLoading).exists()).toBe(false);
 
-        expect(wrapper.findAll(TerraformPlan).length).toEqual(Object.keys(plans).length);
+        expect(findPlans().length).toEqual(Object.keys(plans).length);
       });
 
       it('does not make additional requests after poll is successful', () => {
@@ -92,11 +94,7 @@ describe('MrWidgetTerraformConainer', () => {
       });
 
       it('generates one broken plan', () => {
-        const displayPlans = wrapper.findAll(TerraformPlan);
-
-        expect(displayPlans.length).toEqual(1);
-
-        expect(displayPlans.at(0).props('plan')).toEqual({});
+        expect(findPlans()).toEqual([{}]);
       });
 
       it('does not make additional requests after poll is unsuccessful', () => {

spec/frontend/vue_mr_widget/components/terraform/terraform_plan_spec.js

@@ -6,6 +6,8 @@ import TerraformPlan from '~/vue_merge_request_widget/components/terraform/terra
 describe('TerraformPlan', () => {
   let wrapper;
 
+  const findLogButton = () => wrapper.find('.js-terraform-report-link');
+
   const mountWrapper = propsData => {
     wrapper = shallowMount(TerraformPlan, { stubs: { GlLink, GlSprintf }, propsData });
   };
@@ -32,7 +34,8 @@ describe('TerraformPlan', () => {
     });
 
     it('renders button when url is found', () => {
-      expect(wrapper.text()).toContain('View full log');
+      expect(findLogButton().exists()).toBe(true);
+      expect(findLogButton().text()).toEqual('View full log');
     });
   });
 
@@ -50,7 +53,7 @@ describe('TerraformPlan', () => {
     });
 
     it('does not render button because url is missing', () => {
-      expect(wrapper.text()).not.toContain('View full log');
+      expect(findLogButton().exists()).toBe(false);
     });
   });
 });