Migrate unit tests from Jest to Vitest

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 <jwestover@nvidia.com>
35 files changed
tree: c034287c8683e4538c51d0b7d6419af379c2e627
  1. .github/
  2. docs/
  3. public/
  4. src/
  5. tests/
  6. .browserslistrc
  7. .env.ibm
  8. .env.intel
  9. .gitattributes
  10. .gitignore
  11. .npmrc
  12. .prettierrc.yaml
  13. .shellcheck
  14. CONTRIBUTING.md
  15. eslint.config.js
  16. format-code.sh
  17. index.html
  18. LICENSE
  19. OWNERS
  20. package-lock.json
  21. package.json
  22. README.md
  23. run-ci
  24. vite.config.js
README.md

webui-vue

webui-vue is a web-based user interface for the OpenBMC firmware stack built on Vue.js.

Hold on... What happened to phosphor-webui?

phosphor-webui was built on AngularJS and AngularJS went End of Life on June 30, 2021. This repository is its replacement.

When will this new Vue.js application reach feature parity with phosphor-webui?

A few, mostly minor, features remain for feature parity. See GitHub Issues label:phosphor-webui-feature-parity for the complete list.

What improvements does webui-vue have?

As mentioned, this application is built using Vue.js, a modern open-source Model-View-ViewModel JavaScript framework supported by an active community and strong documentation. It has been architected to allow organizations to easily update the theme to support their brand. This rewrite takes advantage of front-end development best practices and does not suffer from some of the anti-patterns that exist in phosphor-webui today.

Should I switch to webui-vue from phosphor-webui?

It is recommended you switch from phosphor-webui if you haven't already.

webui-vue has the following additional features:

  • Ability to easily theme to meet brand guidelines
  • Accessibility
  • Full Redfish
  • Improved user experience based on user feedback
  • Language translation-ready
  • Modern front-end framework with an active community and future development roadmap

How can I get involved?

Documentation

The documentation for coding standards and components is located in the docs directory. It is created using the VuePress static site generator. Information about how to write documentation can be found on the VuePress website.