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

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

@@ -268,11 +268,12 @@ export default {
       :key="deployment.id"
       :deployment="deployment"
     />
-    <div class="mr-section-container">
     <grouped-test-reports-app
       v-if="mr.testResultsPath"
+      class="js-reports-container"
       :endpoint="mr.testResultsPath"
     />
+    <div class="mr-section-container">
       <div class="mr-widget-section">
         <component
           :is="componentName"

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 {

changelogs/unreleased/52147-loading-state.yml

+---
+title: Removes extra border from test reports in the merge request widget
+merge_request:
+author:
+type: fixed

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