Repository navigation
Add Vitest unit tests for frontend admin UI - #3797
Merged
Merged
Conversation
Vondry
force-pushed
the
chore/vitest-unit-tests
branch
from
September 28, 2026 07:28
c7c8132 to
07763cd
Compare
Vondry
force-pushed
the
chore/vitest-unit-tests
branch
from
September 28, 2026 07:47
07763cd to
9ea0950
Compare
Contributor
There was a problem hiding this comment.
🔵 Needs a closer look
The broad test harness and dependency changes need human validation of coverage and build results, with locale-dependent assertions still unresolved.
2 open issues
What changed in this PR
Adds a frontend regression suite for Bolt’s Vue 2.7 admin UI ahead of the Vue 3 migration, without changing application source code.
Changes:
- Adds component, store, filter, service, and app-script tests with shared fixtures and cleanup helpers.
- Configures Vitest coverage thresholds and shuffled CI runs.
- Extends TypeScript and ESLint checks to tests and documents migration conventions.
| File | Description |
|---|---|
vitest.config.ts |
Configures Vue 2 testing, isolation, and coverage thresholds. |
tsconfig.json |
Includes tests and adds module typing support. |
tests/unit/store/sidebar-toolbar.spec.ts |
Tests sidebar, toolbar, and editor stores. |
tests/unit/store/listing.spec.ts |
Tests listing state, selection, and isolation. |
tests/unit/shims-vuex.d.ts |
Types the Vuex mount option. |
tests/unit/shims-vue.d.ts |
Declares component imports for tests. |
tests/unit/setup.ts |
Adds shared browser setup and teardown. |
tests/unit/services/api.spec.ts |
Tests API requests and cached responses. |
tests/unit/README.md |
Documents testing conventions and migration steps. |
tests/unit/mixins/value.spec.ts |
Tests field-value initialization and decoding. |
tests/unit/mixins/type.spec.ts |
Tests reactive content-type access. |
tests/unit/helpers/warnings.ts |
Captures and checks Vue warnings. |
tests/unit/helpers/stubs.ts |
Provides third-party component stubs. |
tests/unit/helpers/store.ts |
Builds isolated stores from application modules. |
tests/unit/helpers/errors.ts |
Captures expected Vue lifecycle errors. |
tests/unit/helpers/dom.ts |
Provides surrounding DOM fixtures and cleanup. |
tests/unit/helpers/bus.ts |
Drives and records field-bus events. |
tests/unit/helpers/async.ts |
Adds asynchronous test flushing. |
tests/unit/filters/string.spec.ts |
Tests string formatting and edge cases. |
tests/unit/filters/date.spec.ts |
Tests date and datetime formatting. |
tests/unit/components/toolbar/Toolbar.spec.ts |
Tests toolbar rendering and color state. |
tests/unit/components/ThemeSelect.spec.ts |
Tests theme stylesheet switching. |
tests/unit/components/Textarea.spec.ts |
Tests textarea metadata and editing. |
tests/unit/components/Text.spec.ts |
Tests text fields and slug-generation events. |
tests/unit/components/Slug.spec.ts |
Tests slug generation, locking, and editing. |
tests/unit/components/sidebar/SubMenu.spec.ts |
Tests submenu links and labels. |
tests/unit/components/sidebar/SidebarToggler.spec.ts |
Tests sidebar toggling and persistence. |
tests/unit/components/sidebar/Sidebar.spec.ts |
Tests sidebar rendering and restored state. |
tests/unit/components/sidebar/Menu.spec.ts |
Tests navigation and singleton links. |
tests/unit/components/Select.spec.ts |
Tests selections, tagging, ordering, and fetching. |
tests/unit/components/ProgressBar.spec.ts |
Tests progress dimensions and accessibility attributes. |
tests/unit/components/Password.spec.ts |
Tests password visibility and strength scoring. |
tests/unit/components/Number.spec.ts |
Tests numeric field metadata and editing. |
tests/unit/components/Markdown.spec.ts |
Tests markdown editor integration. |
tests/unit/components/listing/Table.spec.ts |
Tests record rendering and reordering. |
tests/unit/components/listing/SelectBox.spec.ts |
Tests bulk-action controls and form data. |
tests/unit/components/listing/RowSorting.spec.ts |
Tests sorting-handle visibility. |
tests/unit/components/listing/RowMeta.spec.ts |
Tests record metadata rendering. |
tests/unit/components/listing/RowCheckbox.spec.ts |
Tests row selection and sorting interactions. |
tests/unit/components/listing/RowActions.spec.ts |
Tests action links and record details. |
tests/unit/components/listing/Row.spec.ts |
Tests row composition and display modes. |
tests/unit/components/listing/Records.spec.ts |
Tests initial record-store population. |
tests/unit/components/listing/Filter.spec.ts |
Tests listing controls and saved preferences. |
tests/unit/components/Language.spec.ts |
Tests locale selection and navigation. |
tests/unit/components/Imagelist.spec.ts |
Tests image-list ordering and removal. |
tests/unit/components/Html.spec.ts |
Tests rich-text editor integration. |
tests/unit/components/Filelist.spec.ts |
Tests file-list controls and indexing. |
tests/unit/components/File.spec.ts |
Tests uploads and server-file browsing. |
tests/unit/components/Embed.spec.ts |
Tests embed lookup, debounce, and previews. |
tests/unit/components/Email.spec.ts |
Tests email-field rendering and metadata. |
tests/unit/components/Date.spec.ts |
Tests real flatpickr integration. |
tests/unit/components/Collection.spec.ts |
Tests collection controls and submitted ordering. |
tests/unit/components/Checkbox.spec.ts |
Tests checkbox state and submitted values. |
tests/unit/app/save-on-ctrl-s.spec.ts |
Tests keyboard save behavior. |
tests/unit/app/patience-is-a-virtue.spec.ts |
Tests loading indicators and button restoration. |
tests/unit/app/notifications.spec.ts |
Tests flash-message toast initialization. |
tests/unit/app/modal.spec.ts |
Tests shared modal reset behavior. |
tests/unit/app/common.spec.ts |
Tests shared admin-page interactions. |
tests/unit/app/ajax-save.spec.ts |
Tests saving, validation, and unload warnings. |
package.json |
Adds test tooling and scripts; updates Terser. |
eslint.config.mjs |
Extends TypeScript linting to tests. |
.gitignore |
Excludes generated coverage reports. |
.github/workflows/assets_code_analysis.yaml |
Runs shuffled unit tests with coverage. |
Review effort: Balanced
bobvandevijver
approved these changes
Oct 24, 2026
Member
|
Thanks @Vondry! |
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
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 effectively the third step in the Vue 3 migration, following #3794 (now merged). It adds
> 90% test coverageto the admin UI assets, so that we can be much more confident with the Vue 3 refactor later.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)Pinning current behaviour, so the Vue 3 refactor can decide what to fixtest:unit,test:unit:watch, andtest:unit:coveragenpm scriptsassets_code_analysis.yaml), with test order shuffled (--sequence.shuffle) to catch order-dependent testscoverage/to.gitignoreVerification
npm run test:unit:coveragepasses (47 test files, 486 passed, 2 skipped, 9 todo; 97% lines, 92% branches)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,enableAutoDestroy→enableAutoUnmount,.at(i)→[i]v-modelevent frominputtoupdate:modelValue$root.$emit/$onwithmitt(Slug ↔ Text) and Vuex with Piniait.skiptests and write the 9it.todotests once their component fixes land. Each one names the commit onrefactor/vue3-composition-apithat unblocks it (grep -rnE 'it\.(skip|todo)' tests/unit)