Merge branch '52147-loading-state' into 'master'

Fixes styling issues in test reports

Closes #51386 and #52147

See merge request gitlab-org/gitlab-ce!22204

4 files changed, 16 insertions, 11 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 0e445a29de4..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
@@ -268,11 +268,12 @@ export default {
       :key="deployment.id"
       :deployment="deployment"
     />
+    <grouped-test-reports-app
+      v-if="mr.testResultsPath"
+      class="js-reports-container"
+      :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
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