diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue')
-rw-r--r-- | app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue | 67 |
1 files changed, 67 insertions, 0 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> |