BMC/OpenBmc/webui-vue.git/tests, branch master

Add expandable rows to Certificates page

2026-06-17T06:36:24+00:00

This change allows users to view detailed certificate information by clicking a chevron icon to expand each certificate row. This makes it easier for administrators to inspect certificates without leaving the page or using external tools. Why this enhancement is needed: System administrators need complete certificate details for security audits, compliance verification, and troubleshooting SSL/TLS issues. Previously, users had to export certificates or use external tools to view comprehensive information, which was inefficient. What's included in the expanded view: - Certificate metadata: version, serial number, signature algorithm - Complete issuer details: organization, common name, unit, location - Complete subject details: who the certificate is issued to - Full validity timestamps with timezone information Implementation details: - Expand button aria-label is row-specific (e.g. "Expand table row HTTPS Certificate") so screen readers identify each row uniquely - Two-column layout uses to stack on small screens, matching the Inventory page pattern - Section headings (Issuer Information, Subject Information) are conditionally rendered — hidden when all fields in the section are absent, avoiding empty bold headers - X.509 Version stored only when present in the API response; displayed as v1/v2/v3 (ASN.1 integer + 1) for human readability - formatSerialNumber only reformats strings that contain at least one A-F hex letter; pure decimal serials are returned as-is - CertificateString removed from Vuex state mapping entirely - Unit tests added: store mapping (issuer, subject, serialNumber, Version conversion, absent Version) and component tests (expandLabel per-row identity, formatSerialNumber all input cases) Tested with HTTPS, LDAP, and TrustStore certificate types. Change-Id: I735ad571c189d7ba84464bf4a9f1d2280175b128 Signed-off-by: Aravinth Sri Krishna Raja Raghavan

ProfileSettings: show current session privilege

2026-05-14T07:13:19+00:00

Show the current session privilege on the Profile Settings page. The displayed privilege is derived from the active Redfish session, not from the user account definition, so label it as Session privilege and present it with semantic description list markup. Also add a unit test covering the profile info list structure and session privilege display. Change-Id: I6cf539c29366dc0a9752f9994ebcf4a3c45cf6b8 Signed-off-by: Aravinth Sri Krishna Raja Raghavan

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

Fix Unit tests and useI18n() misuse

2026-01-13T21:32:20+00:00

Vue 3's vue-i18n requires useI18n() to be called within setup() or reactive contexts. Calling it in Options API data() creates disconnected i18n instances that cannot resolve linked messages. Component fixes: - Enable globalInjection in i18n.js for automatic $t injection - Remove explicit useI18n() imports from 84 components that incorrectly called useI18n().t in their data() functions Unit test fixes: - Mock @/i18n module in jest.setup.js because Webpack's require.context() does not work in Jest, leaving the real module with no locale messages loaded - Re-export real createI18nInstance so i18n unit tests work - Update snapshots to reflect real translated text instead of raw translation keys - Fix b-form-radio/checkbox stubs to wrap content in div for proper data-test-id attribute inheritance - Remove duplicate i18n plugin installations from individual test files that caused 'already registered' warnings - Suppress expected missing-key warning in vendor overlay test Tested: - Sanity testing on webui, ensured translations work. - All Unit tests pass (19/19) with no Errors or Warnings. Change-Id: I9789acd823261eccc7affde0957dd22e8fec06b1 Signed-off-by: Jason Westover

Migrate Vuelidate from v1 to v2 API

2026-01-11T22:17:22+00:00

Complete the migration from Vuelidate v1 (vuelidate 0.7.7) to v2 (@vuelidate/core 2.0.3 and @vuelidate/validators 2.0.4). Changes include: - Replace imports from 'vuelidate/lib/validators' with '@vuelidate/validators' - Convert static 'validations:' objects to 'validations()' methods which return the validation rules object - Update helpers.regex() syntax from v1 two-arg format helpers.regex('name', pattern) to v2 single-arg helpers.regex(pattern) - Create custom macAddress validator using regex since macAddress is not included in @vuelidate/validators v2 - Remove deprecated vuelidate 0.7.7 package from dependencies - Add unit tests for Vuelidate v2 migration verification - Fix DateTime store to continue with DateTime update even if NTP settings update fails - Fix Network Table components (IPv4, IPv6, DNS) missing @ok event handlers for Add modal dialogs - Fix CSR country dropdown by restoring COUNTRY_LIST data and moving useI18n() call to setup() function - Fix disconnected modals in Network page by using eventBus to communicate between child components and parent (hostname, MAC address, default gateway edit buttons) Tested: - npm run build completes successfully - npm run test:unit passes 66 new Vuelidate validation tests: - VuelidateMixin.spec.js: getValidationState method tests - TableDateFilter.spec.js: Date range validation tests - ModalHostname.spec.js: Hostname validation tests - ModalMacAddress.spec.js: MAC address validation tests - ModalUser.spec.js: User form validation tests - Manual testing performed: - User Management: Create/edit user with password confirmation - LDAP: Enable/disable with conditional field requirements - Date/Time: Switch between NTP and manual modes - Factory Reset: Confirm checkbox validation when server is on - Network Settings: Add IPv4, IPv6, DNS addresses via modals - Network Settings: Edit hostname, MAC address, default gateway - Certificates: Generate CSR with country dropdown working Change-Id: I0f6b5d89d1791b36977f1a3c16cbd10bca6a484a Signed-off-by: Jason Westover

Add i18n vendor overlays and dynamic bundling

2025-08-22T11:41:39+00:00

- Add opt-in vendor overlays under src/env/locales/ (and optional variant), merged on top of base locales at runtime. - Auto-discover and bundle all base locale JSON files in src/locales/. - Example: move dump type labels under pageDumps.dumpTypes; read vendor-only dump labels from overlays. - Docs: update i18n guidelines and env README (formatting fixes). - Tests: add focused unit tests for overlays and locale aliases. Tested: - Unit: i18n.locale-alias.spec.js, i18n.vendor.spec.js (passing) - Manual: Verified dynamic locale discovery and overlay merge in UI Change-Id: I8eae2bfec0e9622bafdafac3168dbf96650e8ae8 Signed-off-by: jason westover

style: add Sass configuration for Vue 3

2025-03-26T15:05:24+00:00

Configure sass in the vue.config.js file and remove the import of the scss file from each page. The styles are handled by the css loaderOptions in the config file. Every component and page has the appropriate style applied. The appearance adjusts to the openBmc webui in Vue 2. Change-Id: I3773c063646185b80b7bd61d05aa80a993cbd121 Signed-off-by: Surya Venkatesan

Upgrade vue3 and all dependencies

2024-10-03T18:34:06+00:00

Start the process of porting everything to Vue 3. I have most things working. npm run-scripts build works, npm install works. prettier passes. Styles load, login works, webui loads. This was primarily done using the linked documents below. It makes the following design decisions: 1. Vue is put in compat 2 mode, which allows most of the components to work as-is. 2. Bootstrap v4 is used along with bootstrap-vue to keep our components working. 3. Minor changes are made to load the latest versions of vue-router, vuex, and vue-i18n. I suspect this patchset is good enough to start with, and we can clean up the broken things one patchset at a time. The things that need to happen are: 1. Get remaining features working again. This primiarily is vue-i18n for mixins, and non vue components. This likely needs to be done by not pulling in i18n into the non vue components, then using the .Vue files to do the internationalization in the component context, NOT in the mixin context. Alternatively, we could drop MixIns alltogether. 2. Get custom styles working again. Previously, we used some path hackery in vue.config.js to optionally pre-load styles. This stops working now that we're required to @import our modules. Likely we need some rearangement of the paths such that custom styles are a complete replacement (possibly importing the original) rather than additive with overrides. That's a guess, but I don't really see anyone else doing customization the way we've defined it here. 3. Bootstrap 5 no longer requires ANY custom vue modules, as it has dropped the jquery dependency. We won't be able to pull in bootstrap 5 all at once, so pull in bootstrap 5 under an alias, like "bootstrap5" that we can optionally import 5 or 4. 4. One at a time, start porting components over to Vue3 syntax and bootstrap 5. This will be the bulk of the manual work and review. The only thing I think left is getting unit tests passing, which I commented out the pre-commit hook to make this PR. Tested: Code builds. Needs better testing. [1] https://router.vuejs.org/guide/migration/ [2] https://vue-i18n.intlify.dev/guide/migration/vue3 [3] https://vuelidate-next.netlify.app/migration_guide.html#package-name-and-imports Change-Id: I5bb3187b9efbf2e4ff63e57994bc528756e2a981 Signed-off-by: Ed Tanous

Inline the header svg

2024-04-24T17:21:02+00:00

Ideally we wouldn't have to pull down this file on every load, and we could just inline it. This commit implements inlining. Note, that this requires a minor modification to the unit test, as the inline header remains when unit tests are run. It's not clear at this time how to make inlining plugin operate on unit tests, but it doesn't seem terribly important. Tested: Loading the webui no longer shows a download of logo-header Change-Id: Iaa5be5b5a84e0ad6e1f430113f929032835c9f1c Signed-off-by: Ed Tanous

Add empty authentication module

2024-03-01T13:16:25+00:00

New versions of vuex warn if there are modules that are used in an element that haven't had their namespace defined. This module isn't actually used in the test, so add an empty Vuex module that matches the name of AuthenticationStore, so the test can pass. Change-Id: I5bceb3e1e0bad603028cfb17fa95b020d68ceb4d Signed-off-by: Ed Tanous