Migrate tests tab to vue pipeline tabs
What does this MR do and why?
For #360794 (closed)
This MR migrates the Tests
tab on the pipeline page to the new all-in-one pipeline tabs vue app, which will reduce complexity and page load times.
This MR is behind the pipeline_tabs_vue
feature flag.
Screenshots or screen recordings
No visual changes are expected, here is the tab anyway:
How to set up and validate locally
git checkout 360794-migrate-tests-tab
- find/clone a project that generates test reports
- run a pipeline in the project
- navigate to the pipeline page, click on the
Tests
tab - it should display:
- a badge on the tab with the total number of tests
- a table of test suites, their durations, and summaries of their results
- when each suite is clicked, a table of tests in that suite with details about each test
echo "Feature.enable(:pipeline_tabs_vue)" | bundle exec rails console
- refresh the page and repeat
4.
- everything should look and work the same way
Work required
-
Check the previous haml that we were using for the tab ( app/views/projects/pipelines/_with_tabs.html.haml
oree/app/views/projects/pipelines/_tabs_content.html.haml
. What data are we passing down to the app? Add the same data to the rightpipeline_helper.rb
(CE or EE) -
After adding the right data, we also need to update the helper specs (CE: spec/helpers/projects/pipeline_helper_spec.rb
, EE:ee/spec/helpers/ee/projects/pipeline_helper_spec.rb
). Note that if you are passing data through the EE helper, we need to expect it in the CE helper as well. -
In app/assets/javascripts/pipelines/pipeline_tabs.js
, pass your dataset to the Vue App. For this migration, we aim to pass all the data as it used to be without any changes. We can come back later to see if there are too many properties how we can better optimize this. -
For the test tab, it seems we are still using VueX. We can create the store in app/assets/javascripts/pipelines/pipeline_tabs.js
and pass it down the app. At some later point in the future, we can think of migrating this to graphQL to avoid having 2 different global store (Apollo and VueX) -
TAB SPECIFIC INSTRUCTION Add a badge to the tab if it applies, so either: Failed jobs count, Tests count, Licenses count. You can refer to the job MR as to how this can easily be done: !85946 (merged) -
Add the lazy property on the tab and make sure it still works as expected. This will ensure we only send the queries once the user click on a tab instead of loading them all at once. -
If the tab renders as expected and the badge is there, now it the time for specs! -
In spec/frontend/pipelines/components/pipeline_tabs_spec.js
or/andee/spec/frontend/pipelines/components/pipeline_tabs_spec.js
, remove the stub for the tab content as it should no longer be necessary. -
TAB SPECIFIC INSTRUCTION If you have a count badge, add specs for it as needed. We should aim to use it.each
in both the CE and EE version of the tabs spec (again, see the jobs tab MR for reference: !85946 (eacc76ee)) -
FAILED TAB SPECIFIC If it's the failed jobs tab, make sure to test the tab renders only conditionally if there are failed jobs. -
Lookout in the table below for the tab you are working on. For all the ones that are listed, make sure to enable the right tests by removing the pipeline_tabs_vue
stub in the specs.
Spec Name | Line number | Tab content required |
---|---|---|
spec/features/projects/pipelines/pipeline_spec.rb | 393 | Tests |
-
Once you have an MR, please add the link to the table here: #230749 (closed)
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Edited by Miranda Fluharty