Make specs independent of the whitespace between elements

What does this MR do and why?

These specs pass with the Vue 2 template compiler and fail with the Vue 3 compiler. The components render the same with both compilers. The specs read text that spans several elements, or the first line of a table header, so they depend on the whitespace the compiler keeps between elements:

Spec Reads Vue 3 compiler result
agent_table_spec.js, Artifact Registry versions_table_spec.js, manifests_table_spec.js, repositories_list_spec.js the first line of a sortable GlTable header Name↑ (Click to sort ascending) instead of Name
security_scores_spec.js the text of several <p> elements 9.1CVSS v2 instead of 9.1 CVSS v2
both usage cards specs the text of a GlCard stub with adjacent header and body slots Total usage42.50 instead of Total usage 42.50
discussion_notes_spec.js $vnode.key of each placeholder note 1, 1, because the compiler keys the <template v-for> instead of its children

The fixes:

  • A new helper, getTableHeaderLabel, reads a GlTable header label without the sort icon and the screen reader hint. The four table specs use it.
  • security_scores_spec.js compares the CVSS paragraphs one by one.
  • The GlCard stubs put a space between the header and body slots.
  • discussion_notes_spec.js checks which note each placeholder renders. With Vue 2, a duplicate key still fails it, because Vue 2 warns about duplicate keys. With the Vue 3 compiler, child keys do not matter: the wrapper in config/vue3migration/compilers/vue3_template.js keys the <template v-for> with the first child's key.

Every assertion checks the same thing as before. The fixed specs pass with VUE_VERSION=2, with VUE_VERSION=3, and with VUE_VERSION=3 VUE_COMPILER_VERSION=3: 8 suites, 320 tests. repositories_list_spec.js needs generated fixtures, so CI checks it.

The Vue 2 removal proof of concept !263207 found these specs. !263251 (merged) runs the Vue 3 CI jobs with the Vue 3 compiler, and needs this MR for a green jest vue3.

References

Screenshots or screen recordings

Not applicable. Spec changes only.

How to set up and validate locally

Run the changed specs with VUE_VERSION=3 VUE_COMPILER_VERSION=3 yarn jest <spec>. On master they fail. On this branch they pass. They also pass without the variables.

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.

Edited by Miguel Rincon

Merge request reports

Loading
Loading