1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
<script>
import { GlLoadingIcon } from '@gitlab/ui';
import { mapActions, mapGetters, mapState } from 'vuex';
import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import createTestReportsStore from '../../stores/test_reports';
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,
},
mixins: [glFeatureFlagMixin()],
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() {
if (!this.glFeatures.pipelineTabsVue) {
this.$store.registerModule(
'testReports',
createTestReportsStore({
blobPath: this.blobPath,
summaryEndpoint: this.summaryEndpoint,
suiteEndpoint: this.suiteEndpoint,
}),
);
}
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>
|
