Find an empty catalog input description when hidden

Miguel Rinconrequested to merge
634491-qa-catalog-empty-input-description into master

What does this MR do and why?

The E2E spec release_with_glab_spec.rb fails when GitLab compiles templates with the Vue 3 compiler. This blocks the removal of Vue 2.

The spec checks the inputs of a CI/CD Catalog component. One input has an empty description. The QA page object looks for the description span with has_element?, which finds only visible elements.

The span has no size when the description is empty. The two compilers render it differently:

  • Vue 2 compiler: the span holds one empty text node. Selenium counts an element with a text node child as visible, even with no size. The check passes.
  • Vue 3 compiler: the span has no child node. Selenium treats it as hidden. The check fails.

The page is correct with both compilers. Only the QA check depended on the Vue 2 output. This MR looks for the span without a visibility filter when the expected description is empty. The check is the same for any other description.

How was it verified?

  • A Jest probe of ci_resource_components.vue showed the difference. With an empty or null description, the Vue 2 compiler renders [text node ""] in the span, and the Vue 3 compiler renders no child nodes.

  • A headless Chrome check with Capybara and Selenium, on one span of each kind:

    Span Child nodes visible: true visible: false
    Vue 2 output 1 found found
    Vue 3 output 0 not found found

  • The E2E run of the Vue 2 removal proof of concept will confirm the fix. It now includes this commit.

Screenshots or screen recordings

Not applicable. No UI change.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

References

Merge request reports