diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/test_reports')
3 files changed, 91 insertions, 21 deletions
diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue b/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue new file mode 100644 index 00000000000..504cf138d07 --- /dev/null +++ b/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue @@ -0,0 +1,67 @@ +<script> +import { GlModal } from '@gitlab/ui'; +import { __ } from '~/locale'; +import CodeBlock from '~/vue_shared/components/code_block.vue'; + +export default { + name: 'TestCaseDetails', + components: { + CodeBlock, + GlModal, + }, + props: { + modalId: { + type: String, + required: true, + }, + testCase: { + type: Object, + required: true, + validator: ({ classname, formattedTime, name }) => + Boolean(classname) && Boolean(formattedTime) && Boolean(name), + }, + }, + text: { + name: __('Name'), + duration: __('Execution time'), + trace: __('System output'), + }, + modalCloseButton: { + text: __('Close'), + attributes: [{ variant: 'info' }], + }, +}; +</script> + +<template> + <gl-modal + :modal-id="modalId" + :title="testCase.classname" + :action-primary="$options.modalCloseButton" + > + <div class="gl-display-flex gl-flex-wrap gl-mx-n4 gl-my-3"> + <strong class="gl-text-right col-sm-3">{{ $options.text.name }}</strong> + <div class="col-sm-9" data-testid="test-case-name"> + {{ testCase.name }} + </div> + </div> + + <div class="gl-display-flex gl-flex-wrap gl-mx-n4 gl-my-3"> + <strong class="gl-text-right col-sm-3">{{ $options.text.duration }}</strong> + <div class="col-sm-9" data-testid="test-case-duration"> + {{ testCase.formattedTime }} + </div> + </div> + + <div + v-if="testCase.system_output" + class="gl-display-flex gl-flex-wrap gl-mx-n4 gl-my-3" + data-testid="test-case-trace" + > + <strong class="gl-text-right col-sm-3">{{ $options.text.trace }}</strong> + <div class="col-sm-9"> + <code-block :code="testCase.system_output" /> + </div> + </div> + </gl-modal> +</template> diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_reports.vue b/app/assets/javascripts/pipelines/components/test_reports/test_reports.vue index c3398e90895..a56dcf48d92 100644 --- a/app/assets/javascripts/pipelines/components/test_reports/test_reports.vue +++ b/app/assets/javascripts/pipelines/components/test_reports/test_reports.vue @@ -61,7 +61,7 @@ export default { <div v-else-if="!isLoading && showTests" ref="container" - class="tests-detail position-relative" + class="position-relative" data-testid="tests-detail" > <transition @@ -69,13 +69,13 @@ export default { @before-enter="beforeEnterTransition" @after-leave="afterLeaveTransition" > - <div v-if="showSuite" key="detail" class="w-100 position-absolute slide-enter-to-element"> + <div v-if="showSuite" key="detail" class="w-100 slide-enter-to-element"> <test-summary :report="getSelectedSuite" show-back @on-back-click="summaryBackClick" /> <test-suite-table /> </div> - <div v-else key="summary" class="w-100 position-absolute slide-enter-from-element"> + <div v-else key="summary" class="w-100 slide-enter-from-element"> <test-summary :report="testReports" /> <test-summary-table @row-click="summaryTableRowClick" /> diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue b/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue index 2b92ffc3f26..7afbb59cbd6 100644 --- a/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue +++ b/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue @@ -1,7 +1,8 @@ <script> import { mapGetters } from 'vuex'; -import { GlTooltipDirective, GlFriendlyWrap, GlIcon, GlButton } from '@gitlab/ui'; +import { GlModalDirective, GlTooltipDirective, GlFriendlyWrap, GlIcon, GlButton } from '@gitlab/ui'; import { __ } from '~/locale'; +import TestCaseDetails from './test_case_details.vue'; export default { name: 'TestsSuiteTable', @@ -9,9 +10,11 @@ export default { GlIcon, GlFriendlyWrap, GlButton, + TestCaseDetails, }, directives: { GlTooltip: GlTooltipDirective, + GlModalDirective, }, props: { heading: { @@ -43,7 +46,7 @@ export default { <div role="rowheader" class="table-section section-20"> {{ __('Suite') }} </div> - <div role="rowheader" class="table-section section-20"> + <div role="rowheader" class="table-section section-40"> {{ __('Name') }} </div> <div role="rowheader" class="table-section section-10"> @@ -52,12 +55,12 @@ export default { <div role="rowheader" class="table-section section-10 text-center"> {{ __('Status') }} </div> - <div role="rowheader" class="table-section flex-grow-1"> - {{ __('Trace'), }} - </div> - <div role="rowheader" class="table-section section-10 text-right"> + <div role="rowheader" class="table-section section-10"> {{ __('Duration') }} </div> + <div role="rowheader" class="table-section section-10"> + {{ __('Details'), }} + </div> </div> <div @@ -72,7 +75,7 @@ export default { </div> </div> - <div class="table-section section-20 section-wrap"> + <div class="table-section section-40 section-wrap"> <div role="rowheader" class="table-mobile-header">{{ __('Name') }}</div> <div class="table-mobile-content gl-md-pr-2 gl-overflow-wrap-break"> <gl-friendly-wrap :symbols="$options.wrapSymbols" :text="testCase.name" /> @@ -107,24 +110,24 @@ export default { </div> </div> - <div class="table-section flex-grow-1"> - <div role="rowheader" class="table-mobile-header">{{ __('Trace'), }}</div> - <div class="table-mobile-content"> - <pre - v-if="testCase.system_output" - class="build-trace build-trace-rounded text-left" - ><code class="bash p-0">{{testCase.system_output}}</code></pre> - </div> - </div> - <div class="table-section section-10 section-wrap"> <div role="rowheader" class="table-mobile-header"> {{ __('Duration') }} </div> - <div class="table-mobile-content text-right pr-sm-1"> + <div class="table-mobile-content pr-sm-1"> {{ testCase.formattedTime }} </div> </div> + + <div class="table-section section-10 section-wrap"> + <div role="rowheader" class="table-mobile-header">{{ __('Details'), }}</div> + <div class="table-mobile-content"> + <gl-button v-gl-modal-directive="`test-case-details-${index}`">{{ + __('View details') + }}</gl-button> + <test-case-details :modal-id="`test-case-details-${index}`" :test-case="testCase" /> + </div> + </div> </div> </div> |