From 2fa9b1fe8bd77b0579ab1373146b21646a92c3e8 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Mon, 8 Oct 2018 18:02:48 +0100
Subject: [PATCH 1/2] Fixes styling issues in test reports

In the Merge Request widget, the reports for tests
had an extra border.
The loading icon in the mr widget used in all
report sections had an extra margin causing text
to be misaligned.
This commit fixes both issues

Closes #52147
---
 .../vue_merge_request_widget/mr_widget_options.vue        | 8 ++++----
 app/assets/stylesheets/pages/merge_requests.scss          | 1 -
 changelogs/unreleased/52147-loading-state.yml             | 5 +++++
 3 files changed, 9 insertions(+), 5 deletions(-)
 create mode 100644 changelogs/unreleased/52147-loading-state.yml

diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index 0e445a29de4..eeb90294f3f 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -268,11 +268,11 @@ export default {
       :key="deployment.id"
       :deployment="deployment"
     />
+    <grouped-test-reports-app
+      v-if="mr.testResultsPath"
+      :endpoint="mr.testResultsPath"
+    />
     <div class="mr-section-container">
-      <grouped-test-reports-app
-        v-if="mr.testResultsPath"
-        :endpoint="mr.testResultsPath"
-      />
       <div class="mr-widget-section">
         <component
           :is="componentName"
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 45382d4ea43..895db89f289 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -201,7 +201,6 @@
 
   .mr-widget-icon {
     font-size: 22px;
-    margin-right: $gl-btn-padding;
   }
 
   .ci-status-icon svg {
diff --git a/changelogs/unreleased/52147-loading-state.yml b/changelogs/unreleased/52147-loading-state.yml
new file mode 100644
index 00000000000..5ae844073f7
--- /dev/null
+++ b/changelogs/unreleased/52147-loading-state.yml
@@ -0,0 +1,5 @@
+---
+title: Removes extra border from test reports in the merge request widget
+merge_request:
+author:
+type: fixed

From 5ea377a492e15ae78bff906b37a51e3b6169c35d Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Tue, 9 Oct 2018 10:42:17 +0100
Subject: [PATCH 2/2] Adds a `js-` class to allow for specs

Rspec was using a CSS class to check if the content
was being rendered. Since the CSS has changed, the specs failed
This commit replaces the CSS class with a `js-` prepended one
to guarantee changing CSS won't break a pipeline
---
 .../vue_merge_request_widget/mr_widget_options.vue   |  1 +
 .../merge_request/user_sees_merge_widget_spec.rb     | 12 ++++++------
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index eeb90294f3f..c2971d662a6 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -270,6 +270,7 @@ export default {
     />
     <grouped-test-reports-app
       v-if="mr.testResultsPath"
+      class="js-reports-container"
       :endpoint="mr.testResultsPath"
     />
     <div class="mr-section-container">
diff --git a/spec/features/merge_request/user_sees_merge_widget_spec.rb b/spec/features/merge_request/user_sees_merge_widget_spec.rb
index a5dc9017699..f15129759de 100644
--- a/spec/features/merge_request/user_sees_merge_widget_spec.rb
+++ b/spec/features/merge_request/user_sees_merge_widget_spec.rb
@@ -423,7 +423,7 @@ describe 'Merge request > User sees merge widget', :js do
         end
 
         it 'shows test reports summary which includes the new failure' do
-          within(".mr-section-container") do
+          within(".js-reports-container") do
             click_button 'Expand'
 
             expect(page).to have_content('Test summary contained 1 failed test result out of 2 total tests')
@@ -438,7 +438,7 @@ describe 'Merge request > User sees merge widget', :js do
 
         context 'when user clicks the new failure' do
           it 'shows the test report detail' do
-            within(".mr-section-container") do
+            within(".js-reports-container") do
               click_button 'Expand'
 
               within(".js-report-section-container") do
@@ -468,7 +468,7 @@ describe 'Merge request > User sees merge widget', :js do
         end
 
         it 'shows test reports summary which includes the existing failure' do
-          within(".mr-section-container") do
+          within(".js-reports-container") do
             click_button 'Expand'
 
             expect(page).to have_content('Test summary contained 1 failed test result out of 2 total tests')
@@ -483,7 +483,7 @@ describe 'Merge request > User sees merge widget', :js do
 
         context 'when user clicks the existing failure' do
           it 'shows test report detail of it' do
-            within(".mr-section-container") do
+            within(".js-reports-container") do
               click_button 'Expand'
 
               within(".js-report-section-container") do
@@ -519,7 +519,7 @@ describe 'Merge request > User sees merge widget', :js do
         end
 
         it 'shows test reports summary which includes the resolved failure' do
-          within(".mr-section-container") do
+          within(".js-reports-container") do
             click_button 'Expand'
 
             expect(page).to have_content('Test summary contained 1 fixed test result out of 2 total tests')
@@ -533,7 +533,7 @@ describe 'Merge request > User sees merge widget', :js do
 
         context 'when user clicks the resolved failure' do
           it 'shows test report detail of it' do
-            within(".mr-section-container") do
+            within(".js-reports-container") do
               click_button 'Expand'
 
               within(".js-report-section-container") do