Commit 7c159330 authored by Scott Hampton's avatar Scott Hampton Committed by Ezekiel Kigbo

Change selectedSuite to use index

`selectedSuite` in the test reports store was
setting the whole suite object. This worked, but
we are moving towards not having the whole
suite object loaded at first. If we were to keep this,
then when clicking on the suite, the report wouldn't
show any test cases because they hadn't loaded yet.

Instead, we can set the index of the selectedSuite so
that when we load the whole suite we can still use
the index to get the testCases from the suite.
parent 024ce684
<script> <script>
import { mapActions, mapState } from 'vuex'; import { mapActions, mapGetters, mapState } from 'vuex';
import { GlLoadingIcon } from '@gitlab/ui'; import { GlLoadingIcon } from '@gitlab/ui';
import TestSuiteTable from './test_suite_table.vue'; import TestSuiteTable from './test_suite_table.vue';
import TestSummary from './test_summary.vue'; import TestSummary from './test_summary.vue';
...@@ -14,9 +14,10 @@ export default { ...@@ -14,9 +14,10 @@ export default {
TestSummaryTable, TestSummaryTable,
}, },
computed: { computed: {
...mapState(['isLoading', 'selectedSuite', 'testReports']), ...mapState(['isLoading', 'selectedSuiteIndex', 'testReports']),
...mapGetters(['getSelectedSuite']),
showSuite() { showSuite() {
return this.selectedSuite.total_count > 0; return this.selectedSuiteIndex !== null;
}, },
showTests() { showTests() {
const { test_suites: testSuites = [] } = this.testReports; const { test_suites: testSuites = [] } = this.testReports;
...@@ -27,12 +28,12 @@ export default { ...@@ -27,12 +28,12 @@ export default {
this.fetchSummary(); this.fetchSummary();
}, },
methods: { methods: {
...mapActions(['fetchSummary', 'setSelectedSuite', 'removeSelectedSuite']), ...mapActions(['fetchSummary', 'setSelectedSuiteIndex', 'removeSelectedSuiteIndex']),
summaryBackClick() { summaryBackClick() {
this.removeSelectedSuite(); this.removeSelectedSuiteIndex();
}, },
summaryTableRowClick(suite) { summaryTableRowClick(index) {
this.setSelectedSuite(suite); this.setSelectedSuiteIndex(index);
}, },
beforeEnterTransition() { beforeEnterTransition() {
document.documentElement.style.overflowX = 'hidden'; document.documentElement.style.overflowX = 'hidden';
...@@ -60,7 +61,7 @@ export default { ...@@ -60,7 +61,7 @@ export default {
@after-leave="afterLeaveTransition" @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 position-absolute slide-enter-to-element">
<test-summary :report="selectedSuite" show-back @on-back-click="summaryBackClick" /> <test-summary :report="getSelectedSuite" show-back @on-back-click="summaryBackClick" />
<test-suite-table /> <test-suite-table />
</div> </div>
......
...@@ -27,8 +27,8 @@ export default { ...@@ -27,8 +27,8 @@ export default {
}, },
}, },
methods: { methods: {
tableRowClick(suite) { tableRowClick(index) {
this.$emit('row-click', suite); this.$emit('row-click', index);
}, },
}, },
maxShownRows: 20, maxShownRows: 20,
...@@ -82,7 +82,7 @@ export default { ...@@ -82,7 +82,7 @@ export default {
:class="{ :class="{
'gl-responsive-table-row-clickable cursor-pointer': !testSuite.suite_error, 'gl-responsive-table-row-clickable cursor-pointer': !testSuite.suite_error,
}" }"
@click="tableRowClick(testSuite)" @click="tableRowClick(index)"
> >
<div class="table-section section-25"> <div class="table-section section-25">
<div role="rowheader" class="table-mobile-header font-weight-bold"> <div role="rowheader" class="table-mobile-header font-weight-bold">
......
...@@ -35,8 +35,10 @@ export const fetchFullReport = ({ state, commit, dispatch }) => { ...@@ -35,8 +35,10 @@ export const fetchFullReport = ({ state, commit, dispatch }) => {
}); });
}; };
export const setSelectedSuite = ({ commit }, data) => commit(types.SET_SELECTED_SUITE, data); export const setSelectedSuiteIndex = ({ commit }, data) =>
export const removeSelectedSuite = ({ commit }) => commit(types.SET_SELECTED_SUITE, {}); commit(types.SET_SELECTED_SUITE_INDEX, data);
export const removeSelectedSuiteIndex = ({ commit }) =>
commit(types.SET_SELECTED_SUITE_INDEX, null);
export const toggleLoading = ({ commit }) => commit(types.TOGGLE_LOADING); export const toggleLoading = ({ commit }) => commit(types.TOGGLE_LOADING);
// prevent babel-plugin-rewire from generating an invalid default during karma tests // prevent babel-plugin-rewire from generating an invalid default during karma tests
......
...@@ -9,14 +9,12 @@ export const getTestSuites = state => { ...@@ -9,14 +9,12 @@ export const getTestSuites = state => {
})); }));
}; };
export const getSuiteTests = state => { export const getSelectedSuite = state =>
const { selectedSuite } = state; state.testReports?.test_suites?.[state.selectedSuiteIndex] || {};
if (selectedSuite.test_cases) {
return selectedSuite.test_cases.sort(sortTestCases).map(addIconStatus);
}
return []; export const getSuiteTests = state => {
const { test_cases: testCases = [] } = getSelectedSuite(state);
return testCases.sort(sortTestCases).map(addIconStatus);
}; };
// prevent babel-plugin-rewire from generating an invalid default during karma tests // prevent babel-plugin-rewire from generating an invalid default during karma tests
......
export const SET_REPORTS = 'SET_REPORTS'; export const SET_REPORTS = 'SET_REPORTS';
export const SET_SELECTED_SUITE = 'SET_SELECTED_SUITE'; export const SET_SELECTED_SUITE_INDEX = 'SET_SELECTED_SUITE_INDEX';
export const SET_SUMMARY = 'SET_SUMMARY'; export const SET_SUMMARY = 'SET_SUMMARY';
export const TOGGLE_LOADING = 'TOGGLE_LOADING'; export const TOGGLE_LOADING = 'TOGGLE_LOADING';
...@@ -5,8 +5,8 @@ export default { ...@@ -5,8 +5,8 @@ export default {
Object.assign(state, { testReports }); Object.assign(state, { testReports });
}, },
[types.SET_SELECTED_SUITE](state, selectedSuite) { [types.SET_SELECTED_SUITE_INDEX](state, selectedSuiteIndex) {
Object.assign(state, { selectedSuite }); Object.assign(state, { selectedSuiteIndex });
}, },
[types.SET_SUMMARY](state, summary) { [types.SET_SUMMARY](state, summary) {
......
...@@ -2,7 +2,7 @@ export default ({ fullReportEndpoint = '', summaryEndpoint = '' }) => ({ ...@@ -2,7 +2,7 @@ export default ({ fullReportEndpoint = '', summaryEndpoint = '' }) => ({
summaryEndpoint, summaryEndpoint,
fullReportEndpoint, fullReportEndpoint,
testReports: {}, testReports: {},
selectedSuite: {}, selectedSuiteIndex: null,
summary: {}, summary: {},
isLoading: false, isLoading: false,
}); });
...@@ -22,7 +22,7 @@ describe('Actions TestReports Store', () => { ...@@ -22,7 +22,7 @@ describe('Actions TestReports Store', () => {
fullReportEndpoint, fullReportEndpoint,
summaryEndpoint, summaryEndpoint,
testReports: {}, testReports: {},
selectedSuite: {}, selectedSuite: null,
summary: {}, summary: {},
}; };
...@@ -101,28 +101,28 @@ describe('Actions TestReports Store', () => { ...@@ -101,28 +101,28 @@ describe('Actions TestReports Store', () => {
}); });
}); });
describe('set selected suite', () => { describe('set selected suite index', () => {
const selectedSuite = testReports.test_suites[0]; const selectedSuiteIndex = 0;
it('sets selectedSuite', done => { it('sets selectedSuiteIndex', done => {
testAction( testAction(
actions.setSelectedSuite, actions.setSelectedSuiteIndex,
selectedSuite, selectedSuiteIndex,
state, state,
[{ type: types.SET_SELECTED_SUITE, payload: selectedSuite }], [{ type: types.SET_SELECTED_SUITE_INDEX, payload: selectedSuiteIndex }],
[], [],
done, done,
); );
}); });
}); });
describe('remove selected suite', () => { describe('remove selected suite index', () => {
it('sets selectedSuite to {}', done => { it('sets selectedSuiteIndex to null', done => {
testAction( testAction(
actions.removeSelectedSuite, actions.removeSelectedSuiteIndex,
{}, {},
state, state,
[{ type: types.SET_SELECTED_SUITE, payload: {} }], [{ type: types.SET_SELECTED_SUITE_INDEX, payload: null }],
[], [],
done, done,
); );
......
...@@ -9,12 +9,12 @@ describe('Getters TestReports Store', () => { ...@@ -9,12 +9,12 @@ describe('Getters TestReports Store', () => {
const defaultState = { const defaultState = {
testReports, testReports,
selectedSuite: testReports.test_suites[0], selectedSuiteIndex: 0,
}; };
const emptyState = { const emptyState = {
testReports: {}, testReports: {},
selectedSuite: {}, selectedSuite: null,
}; };
beforeEach(() => { beforeEach(() => {
...@@ -47,6 +47,17 @@ describe('Getters TestReports Store', () => { ...@@ -47,6 +47,17 @@ describe('Getters TestReports Store', () => {
}); });
}); });
describe('getSelectedSuite', () => {
it('should return the selected suite', () => {
setupState();
const selectedSuite = getters.getSelectedSuite(state);
const expected = testReports.test_suites[state.selectedSuiteIndex];
expect(selectedSuite).toEqual(expected);
});
});
describe('getSuiteTests', () => { describe('getSuiteTests', () => {
it('should return the test cases inside the suite', () => { it('should return the test cases inside the suite', () => {
setupState(); setupState();
......
...@@ -10,7 +10,7 @@ describe('Mutations TestReports Store', () => { ...@@ -10,7 +10,7 @@ describe('Mutations TestReports Store', () => {
const defaultState = { const defaultState = {
endpoint: '', endpoint: '',
testReports: {}, testReports: {},
selectedSuite: {}, selectedSuite: null,
isLoading: false, isLoading: false,
}; };
...@@ -27,12 +27,12 @@ describe('Mutations TestReports Store', () => { ...@@ -27,12 +27,12 @@ describe('Mutations TestReports Store', () => {
}); });
}); });
describe('set selected suite', () => { describe('set selected suite index', () => {
it('should set selectedSuite', () => { it('should set selectedSuiteIndex', () => {
const selectedSuite = testReports.test_suites[0]; const selectedSuiteIndex = 0;
mutations[types.SET_SELECTED_SUITE](mockState, selectedSuite); mutations[types.SET_SELECTED_SUITE_INDEX](mockState, selectedSuiteIndex);
expect(mockState.selectedSuite).toEqual(selectedSuite); expect(mockState.selectedSuiteIndex).toEqual(selectedSuiteIndex);
}); });
}); });
......
...@@ -3,6 +3,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'; ...@@ -3,6 +3,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
import { getJSONFixture } from 'helpers/fixtures'; import { getJSONFixture } from 'helpers/fixtures';
import TestReports from '~/pipelines/components/test_reports/test_reports.vue'; import TestReports from '~/pipelines/components/test_reports/test_reports.vue';
import * as actions from '~/pipelines/stores/test_reports/actions'; import * as actions from '~/pipelines/stores/test_reports/actions';
import * as getters from '~/pipelines/stores/test_reports/getters';
const localVue = createLocalVue(); const localVue = createLocalVue();
localVue.use(Vuex); localVue.use(Vuex);
...@@ -29,6 +30,7 @@ describe('Test reports app', () => { ...@@ -29,6 +30,7 @@ describe('Test reports app', () => {
...actions, ...actions,
fetchSummary: () => {}, fetchSummary: () => {},
}, },
getters,
}); });
wrapper = shallowMount(TestReports, { wrapper = shallowMount(TestReports, {
......
...@@ -28,7 +28,10 @@ describe('Test reports suite table', () => { ...@@ -28,7 +28,10 @@ describe('Test reports suite table', () => {
const createComponent = (suite = testSuite) => { const createComponent = (suite = testSuite) => {
store = new Vuex.Store({ store = new Vuex.Store({
state: { state: {
selectedSuite: suite, testReports: {
test_suites: [suite],
},
selectedSuiteIndex: 0,
}, },
getters, getters,
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment