Skip to content

Apply `gl-break-words` to test file name in Pipeline test suite detail

What does this MR do and why?

Apply gl-break-word to test file name in Pipeline test suite detail

This prevents the filename from breaking out of the modal.

Screenshots or screen recordings

Before After
image image

How to set up and validate locally

  1. check out this branch locally
  2. Visit a pipeline page that has tests
    • Alternatively, apply this patch to fake it:
      diff --git a/app/assets/javascripts/ci/pipeline_details/test_reports/test_reports.vue b/app/assets/javascripts/ci/pipeline_details/test_reports/test_reports.vue
      index ced2843095c5..a8d6273d64ec 100644
      --- a/app/assets/javascripts/ci/pipeline_details/test_reports/test_reports.vue
      +++ b/app/assets/javascripts/ci/pipeline_details/test_reports/test_reports.vue
      @@ -27,11 +27,10 @@ export default {
            ...mapState('testReports', ['isLoading', 'selectedSuiteIndex', 'testReports']),
            ...mapGetters('testReports', ['getSelectedSuite', 'getTestSuites']),
            showSuite() {
      -      return this.selectedSuiteIndex !== null;
      +      return true;
            },
            showTests() {
      -      const { test_suites: testSuites = [] } = this.testReports;
      -      return testSuites.length > 0;
      +      return true;
            },
      },
      async created() {
      diff --git a/app/assets/javascripts/ci/pipeline_details/test_reports/test_suite_table.vue b/app/assets/javascripts/ci/pipeline_details/test_reports/test_suite_table.vue
      index cb2e52941db5..7f2b61f15dbc 100644
      --- a/app/assets/javascripts/ci/pipeline_details/test_reports/test_suite_table.vue
      +++ b/app/assets/javascripts/ci/pipeline_details/test_reports/test_suite_table.vue
      @@ -59,7 +59,7 @@ export default {
            'getSuiteArtifactsExpired',
            ]),
            hasSuites() {
      -      return this.getSuiteTests.length > 0;
      +      return true;
            },
      },
      methods: {
      @@ -106,7 +106,22 @@ export default {
            </div>
      
            <div
      -        v-for="(testCase, index) in getSuiteTests"
      +        v-for="(testCase, index) in [
      +          {
      +            id: 1,
      +            classname:
      +              'Container protection rules project settings table container protection rules renders table with container protection rules',
      +            name:
      +              'Container protection rules project settings table container protection rules renders table with container protection rules',
      +            status: 'success',
      +            icon: 'status_success',
      +            file:
      +              'spec/frontend/packages_and_registries/settings/project/settings/components/container_protection_rules_spec.js',
      +            filePath:
      +              'spec/frontend/packages_and_registries/settings/project/settings/components/container_protection_rules_spec.js',
      +            formattedTime: '3.58s',
      +          },
      +        ]"
            :key="index"
            class="gl-responsive-table-row gl-rounded-base gl-align-items-flex-start"
            data-testid="test-case-row"
  3. Click the "View details" on a test that has a long filename (or on the faked test added with the patch above)
  4. You will see that the filename wraps in the link inside the modal.
Edited by Chad Lavimoniere

Merge request reports