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.jscompares the CVSS paragraphs one by one.- The GlCard stubs put a space between the header and body slots.
discussion_notes_spec.jschecks 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 inconfig/vue3migration/compilers/vue3_template.jskeys 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
- Found in the Vue 2 removal proof of concept: !263207
- Vue 3 compiler in the Vue 3 CI jobs: !263251 (merged)
- Plan to remove Vue 2: #634491
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.