Add Vitest unit tests for frontend admin UI - #3797
Open
Vondry wants to merge 2 commits into
Open
Conversation
First step of the staged Vue 3 / TypeScript migration. Introduces TypeScript on the existing Vue 2.7 codebase without touching any component logic, so the eventual framework swap lands as a much smaller, mechanical change. Build tooling: - Upgrade @symfony/webpack-encore 1.8.2 -> 4.7.0. 4.7 is the last release supporting Vue 2; Encore 5.0 dropped it. The version option of enableVueLoader() is deliberately omitted: it only accepts 2 or 3, and passing 2 selects the target that still requires vue-template-compiler. Left unset, Encore detects vue@2.7 and picks its "vue2.7" target, which uses the SFC compiler Vue 2.7 ships itself, so vue-template-compiler is no longer needed. - Bump sass-loader 9 -> 14 and postcss-loader 4 -> 8 to match Encore 4.7's peer ranges, and add webpack and webpack-cli as explicit dependencies as Encore 4 requires. - Drop @babel/plugin-transform-regenerator and @babel/plugin-transform-runtime, which were declared but unreferenced. TypeScript: - Add tsconfig.json with strict plus noImplicitReturns, noFallthroughCasesInSwitch, noImplicitOverride, isolatedModules, allowUnreachableCode false and allowUnusedLabels false. The include list is .ts/.d.ts only; the SFCs have no lang="ts" yet, so they are not type-checked until they move to <script setup lang="ts"> and the checker becomes vue-tsc. - Add typescript 6, ts-loader and @types/luxon, wire ts-loader through Encore.enableTypeScriptLoader(), and add a typecheck script plus a CI step running it. - Scope typescript-eslint to assets/**/*.ts so the Vue 2 SFCs keep being linted by the vue2 preset. Filters: - Convert assets/js/filters and assets/js/services/api to TypeScript. - Replace the Vue 2 global filters, removed in Vue 3, with directly imported functions at all 13 call sites across 7 components. Return types are inferred rather than annotated. Behaviour is unchanged apart from trim(), strip() and uppercase() no longer throwing a TypeError on null or non-string input. Values that previously rendered are unaffected: trim() still passes non-strings through untouched instead of coercing them, so numbers are not truncated and objects do not become "[object Object]".
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR is based on the previous #3794 (should be merged first) and it is effectively third step in the Vue 3 migration which adds
> 90% test coverageto the admin UI assets, so that we can be later much more confident with the Vue 3 refactor.What's Changed
Adds Vitest and
@vue/test-utilsfor the frontend admin UI components, Vuex stores, filters, and app scripts. This creates a solid regression test suite on Vue 2.7 ahead of the Vue 3 migration.Text,File,Image,Select,Date,Collection,Embed, etc.)ajax-save,common,modal,notifications,patience-is-a-virtue,save-on-ctrl-s)test:unit,test:unit:watch, andtest:unit:coveragenpm scriptsassets_code_analysis.yaml)coverage/to.gitignoreVerification
npm run test:unitpasses (47 test files, 485 passed, 11 skipped)npm run lintpasses (0 errors, 0 warnings)npm run typecheckpassesnpm run stylelintpassesnpm run buildsucceedsNotes for the Vue 3 Migration
Tests assert against rendered DOM rather than component internals, so adapting them to Vue 3 is mostly mechanical:
@vue/test-utils:propsData:→props:,store/localVue→global.plugins,destroy()→unmount(),.at(i)→[i]v-modelevent frominputtoupdate:modelValue$root.$emit/$onwithmitt(Slug ↔ Text) and Vuex with Piniait.skiptests once component fixes land