BMC/OpenBmc/webui-vue.git/docs/guide/coding-standards, branch master

Migrate unit tests from Jest to Vitest

2026-01-23T20:01:27+00:00

Replace Jest test runner with Vitest for native ES modules support and faster test execution. This migration aligns the test tooling with the Vite build system and eliminates CommonJS compatibility issues. Why Vitest over Jest? While Jest is a mature ecosystem with broader adoption (45.5k GitHub stars vs Vitest's 15.7k), Vitest is the recommended testing framework for Vue 3 + Vite projects: 1. **Native ESM Support**: Vitest runs tests directly as ESM without transformation, while Jest requires Babel/transformation layers that add complexity and slow down test execution. 2. **Vite Integration**: Shares the same configuration, plugins, and resolvers as the Vite build system. This eliminates the dual-config maintenance burden (vite.config.js + jest.config.js). 3. **Vue 3 Ecosystem Alignment**: Vitest is created by the Vue team and is the official recommendation in Vue 3 documentation. It has first-class Vue component testing support via @vue/test-utils. 4. **Performance**: Cold start is significantly faster due to Vite's on-demand compilation. HMR for tests provides instant feedback during test-driven development. 5. **API Compatibility**: Vitest intentionally matches Jest's API, making migration straightforward and allowing developers to leverage existing Jest knowledge. ESLint 9 Upgrade: - Upgrade ESLint from 8.57.1 to 9.18.0 - Migrate from .eslintrc.cjs to eslint.config.js (flat config) - Upgrade eslint-plugin-vue from 9.2.0 to 10.0.0 - Replace eslint-plugin-vitest with @vitest/eslint-plugin@1.1.43 - Replace @vue/eslint-config-prettier with eslint-config-prettier - Add globals package for flat config environment definitions - Update lint-staged from 13.0.3 to 16.0.0 - Update prettier from 3.2.5 to 3.4.2 - Disable stricter vue rules for follow-up PR: vue/no-reserved-component-names, vue/no-unused-components, vue/no-deprecated-delete-set, vue/no-required-prop-with-default Pre-commit Hooks: - Add simple-git-hooks and lint-staged for automatic linting - Run eslint --fix on JS/Vue files before commit - Run prettier --write on markdown files before commit - Add .prettierrc.yaml matching CI configuration - Include .cjs/.mjs files in prettier JS override Documentation: - Update unit testing guide for Vitest - Update coding standards with pre-commit hook details References: - Vitest official comparison: https://vitest.dev/guide/comparisons.html#jest - Vue 3 testing guide: https://vuejs.org/guide/scaling-up/testing.html#unit-testing - Vite ecosystem recommendations: https://vitejs.dev/guide/features.html#testing Test Results: - 19 test files, 123 tests passing - No warnings or deprecation messages - Test execution: ~3.1s (on par with Jest) Changes: - Replace jest.config.js with Vitest config in vite.config.js - Create tests/vitest.setup.js with Vitest-compatible mocks - Update package.json scripts for Vitest - Add vue3-snapshot-serializer for cleaner snapshots - Use happy-dom and real i18n instance for faster tests Dependency Updates: - Remove @vue/cli-plugin-unit-jest, @vue/vue3-jest, babel-jest, jest - Add vitest, @vitest/coverage-v8, jsdom, happy-dom, vue3-snapshot-serializer Test File Migrations: - Replace jest.fn() with vi.fn() - Replace jest.spyOn() with vi.spyOn() - Replace jest.mock() with vi.mock() - Replace jest.resetModules() with vi.resetModules() - Replace jest.unmock() with vi.unmock() - Replace require() with dynamic import() for ESM compatibility - Add explicit Vitest imports (vi, describe, it, expect, etc.) Snapshot Improvements: - Use vue3-snapshot-serializer to strip data-v-* scoped style attributes from snapshots for cleaner, more stable output - Add SVG component stubs for logo assets to avoid verbose path data in snapshots (logo-header.svg, login-company-logo.svg, built-on-openbmc-logo.svg) - Updated all snapshot files for Vitest format - Removed obsolete Jest snapshot entries Performance Optimizations: - Use happy-dom instead of jsdom (17% faster environment setup) - Use real i18n instance instead of mock (eliminates redundant dynamic imports, 55% faster test execution) Tested: - npm run test:unit runs 19 test files, 123 tests, and passed them all with 0 warnings. Change-Id: Iaf04335db54a5ceeff09bcd43675a488828dc44f Signed-off-by: Jason Westover

prettier: re-format

2022-12-08T12:13:13+00:00

Prettier is enabled in openbmc-build-scripts on Markdown, JSON, and YAML files to have consistent formatting for these file types. Re-run the formatter on the whole repository. Change-Id: I2804ee3ab5ff6bcbf986b028db2fafec8e616779 Signed-off-by: Patrick Williams

Update text wrapping in documentation

2021-03-22T13:27:10+00:00

To meet best practices and standards for markdown, this commit updates all markdown files used for the VuePress documentation so that each line is limited to 80 characters. Signed-off-by: Derick Montague Change-Id: I0cadb33343ce1bc331dfefd096d8137a04c33604

Update coding standards documentation

2021-02-26T20:30:46+00:00

- Remove pages without content - Update overview page name Signed-off-by: Derick Montague Change-Id: Icf26e65d72d2900ddbe216be974930bcc9c0e196

Add coding standards overview page

2020-10-27T13:19:12+00:00

Signed-off-by: Derick Montague Change-Id: I2dd0fb44a78da62864442fd633654a3e4f887184

Remove blank overview pages in documentation

2020-10-26T14:32:53+00:00

Signed-off-by: Dixsie Wolmers Change-Id: I6238767b89eda7e0aaebe73faa2ca3e0a61ebf5e

Add narrator to screen reader list

2020-10-20T19:53:53+00:00

Signed-off-by: Derick Montague Change-Id: I4399271998fca392f457d0d1769f1e9337881f44

Update accessibility documentation

2020-06-28T15:26:20+00:00

- Update IBM Accessibility resources link text - Add IBM Accessibility tools link to tools section Signed-off-by: Derick Montague Change-Id: I602a0f44464ccb373069d37b0313a89ad6311149

Add themes documentation

2020-05-14T21:47:04+00:00

- Renamed all index.md to readme.md to make consuming the documentation from the Github repo easier. VuePress treats index.md and readme.md the same way when building the static pages. - Added theme section overview documentation - Added how to customize documentation - Added custom style imports to support OpenBMC Web UI component documentation to remove Bootstrap framework base styles that conflict with the Vuepress theme - Found occurrences of the word Sass in upper-case and changed to use sentence case. Signed-off-by: Derick Montague Change-Id: If5588f88a3d75761cc47e85a3fb0a582b31d373c

Add accessibility documentation

2020-03-12T13:19:40+00:00

Create resources and guidance for the accessibility needs of the OpenBMC Web UI. Signed-off-by: Derick Montague Change-Id: I6d63ce2e23e403840cfb263622c0bd3dac906abd