Skip to content

Implement custom snapshot serializer for Vue.js v3

Illya Klymov requested to merge xanf-fix-serializer into master

What does this MR do and why?

Related to Port custom snapshot serializer for Vue from gi... (#386757 - closed)

This one implements custom snapshot serializer to unify differences between Vue.js 2 and Vue.js 3:

  • drop extra attributes
  • normalize ids
  • normalize text nodes

Based on work by @f_caplette and @ntepluhina in !116001 (closed)

How to set up and validate locally

Note! Full functionality is based on multiple merge-requests to be merged before testing this:

(gitlab-ui, note that this should not be both merged and upgraded in gitlab project):

  1. Let's prepare required version of gitlab-ui and merge all required branches (if you're receiving message that some of them does not exists - just skip it)
git merge origin/xanf-fix-ugly-vue
git merge origin/xanf-fix-router-v2
git merge origin/xanf-improve-stubbing-once-again-v2

# install version of gitlab-ui with all needed fixes
yarn add https://gitlab.com/gitlab-org/gitlab-ui/-/jobs/4809835526/artifacts/raw/gitlab-ui.xanf-fix-emptiness-check.tgz

# required to kick-in patch-package
yarn
  1. Let's regenerate all snapshots (integration too!) in Vue.js 2 mode (ensure you have up-to-date fixtures!):
yarn jest --maxWorkers 6 -u $(grep -rlE 'toMatchSnapshot|toMatchInlineSnapshot' spec/frontend ee/spec/frontend)

these should complete successfully

Now let's see how many differences we have between Vue.js 2 and 3:

export VUE_VERSION=3
yarn jest --maxWorkers 6 -u $(grep -rlE 'toMatchSnapshot|toMatchInlineSnapshot' spec/frontend ee/spec/frontend)

🎉 YAY! We have just 7 failing suites:

Snapshot Summary
 › 15 snapshots failed from 7 test suites. Inspect your code changes or run `yarn run jest -u` to update them.

All of them require just tiny nitpicking changes and will be addressed outside of this MR in Fix remaining Vue.js 2/3 snapshot specs differe... (!128554 - merged)

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 Illya Klymov

Merge request reports