An error occurred while fetching the assigned iteration of the selected issue.
Refactor Test Summary and Test Report to use the same modal for error details
Proposal
Refactor these two features so they use the same component so improvements get to both places and improve DRYness.
test_case_details.vue |
grouped_test_report/components/modal.vue |
|
---|---|---|
Screenshot | ![]() |
![]() |
Test case properties currently shown in each modal, if defined (unique properties in bold) |
classname (modal title), name , execution_time (using formattedTime ), recent_failures , attachment_url , system_output
|
name (modal title), classname , filename (with link to file), execution_time (not using formattedTime ), failure , system_output
|
Structure relative to parent components | We have a modal for each test case, clicking the button for the case opens that case's modal | We have one modal that displays data from the state, clicking on a test case puts its data into the state and then opens the modal |
Code readability | It's easy to see every test case property that goes in the modal right there in the contents of the component |
There are layers of abstraction that make it hard to tell what goes into the modal (using this filtering function instead of a v-if , iterating through fields with a v-for instead of writing them out explicitly) |
Flexibility and reliability | Less flexible and more reliable, new fields are fully written directly into the modal component code and wrapped in components that we want to use to display them, there's a lower chance of things going wrong when we update code/tests for each added field | More flexible and less reliable, fields are defined in an array so it might be easier to adapt into a generic MR widget modal, but there's a higher chance of things going wrong if we add a new field to the array without considering all edge cases |
Other notes | Has a close button, uses truncated classname as title but it's still copy-able | Does not have a close button, uses wrapped name as title, classname extends beyond the modal if long enough |
- We could approach this as a refactoring of the contents of these two modals, leaving the structural differences and opening/closing of them to the parent components for flexibility.
- We could start off by making a component out of the contents of the modal in
test_case_details.vue
, then add the file name with a link to the file to the new component, then replace the body of the other modal with this new component and do any final refactoring we need to accommodate that change. - We might want to make this flexible enough to function as a generic MR widget details modal, but that would require more time/effort invested up front, and we might not want to do that until we know the outcome of the MR widget working group.
Remaining questions:
- Is there anything that we want to intentionally show in one of these modals and not the other one? (Or are the existing differences just coincidental?)