Skip to content

Migrate tests tab to vue pipeline tabs

Miranda Fluharty requested to merge 360794-migrate-tests-tab into master

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:

Screen_Shot_2022-07-25_at_18.30.00

How to set up and validate locally

  1. git checkout 360794-migrate-tests-tab
  2. find/clone a project that generates test reports
  3. run a pipeline in the project
  4. navigate to the pipeline page, click on the Tests tab
  5. 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
  6. echo "Feature.enable(:pipeline_tabs_vue)" | bundle exec rails console
  7. 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 or ee/app/views/projects/pipelines/_tabs_content.html.haml. What data are we passing down to the app? Add the same data to the right pipeline_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/and ee/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

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Miranda Fluharty

Merge request reports