diff options
Diffstat (limited to 'app/assets/javascripts/ci/pipeline_details/test_reports/test_reports.vue')
-rw-r--r-- | app/assets/javascripts/ci/pipeline_details/test_reports/test_reports.vue | 91 |
1 files changed, 91 insertions, 0 deletions
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 new file mode 100644 index 00000000000..a7737d33285 --- /dev/null +++ b/app/assets/javascripts/ci/pipeline_details/test_reports/test_reports.vue @@ -0,0 +1,91 @@ +<script> +import { GlLoadingIcon } from '@gitlab/ui'; +// eslint-disable-next-line no-restricted-imports +import { mapActions, mapGetters, mapState } from 'vuex'; +import EmptyState from './empty_state.vue'; +import TestSuiteTable from './test_suite_table.vue'; +import TestSummary from './test_summary.vue'; +import TestSummaryTable from './test_summary_table.vue'; + +export default { + name: 'TestReports', + components: { + EmptyState, + GlLoadingIcon, + TestSuiteTable, + TestSummary, + TestSummaryTable, + }, + inject: ['blobPath', 'summaryEndpoint', 'suiteEndpoint'], + computed: { + ...mapState('testReports', ['isLoading', 'selectedSuiteIndex', 'testReports']), + ...mapGetters('testReports', ['getSelectedSuite']), + showSuite() { + return this.selectedSuiteIndex !== null; + }, + showTests() { + const { test_suites: testSuites = [] } = this.testReports; + return testSuites.length > 0; + }, + }, + created() { + this.fetchSummary(); + }, + methods: { + ...mapActions('testReports', [ + 'fetchTestSuite', + 'fetchSummary', + 'setSelectedSuiteIndex', + 'removeSelectedSuiteIndex', + ]), + summaryBackClick() { + this.removeSelectedSuiteIndex(); + }, + summaryTableRowClick(index) { + this.setSelectedSuiteIndex(index); + + // Fetch the test suite when the user clicks to see more details + this.fetchTestSuite(index); + }, + beforeEnterTransition() { + document.documentElement.style.overflowX = 'hidden'; + }, + afterLeaveTransition() { + document.documentElement.style.overflowX = ''; + }, + }, +}; +</script> + +<template> + <div v-if="isLoading"> + <gl-loading-icon size="lg" class="gl-mt-3" /> + </div> + + <div + v-else-if="!isLoading && showTests" + ref="container" + class="gl-relative" + data-testid="tests-detail" + > + <transition + name="slide" + @before-enter="beforeEnterTransition" + @after-leave="afterLeaveTransition" + > + <div v-if="showSuite" key="detail" class="gl-w-full slide-enter-to-element"> + <test-summary :report="getSelectedSuite" show-back @on-back-click="summaryBackClick" /> + + <test-suite-table /> + </div> + + <div v-else key="summary" class="gl-w-full slide-enter-from-element"> + <test-summary :report="testReports" /> + + <test-summary-table @row-click="summaryTableRowClick" /> + </div> + </transition> + </div> + + <empty-state v-else /> +</template> |