Vitest Unit Testing

[memisrose]

Adding unit testing into @semoss/client to first set up the testing env.

Tests can run with pnpm run test but will also run with pre-commit. Only test files that have been added or changed will be tested.

An example of a test failing and exiting the pre-commit:

[github-actions]

@CodiumAI-Agent /describe

[github-actions]

@CodiumAI-Agent /review

[QodoAI-Agent]

Title

Vitest Unit Testing

---

User description

Adding unit testing into @semoss/client to first set up the testing env.

Tests can run with pnpm run test but will also run with pre-commit. Only test files that have been added or changed will be tested via the pre-commit hook.

---

PR Type

• Tests
• Enhancement
• Documentation

---

Description

• Introduce Vitest configuration and unit tests.

• Remove outdated Cypress tests and config.

• Update package, TypeScript, and pre-commit hooks.

• Add documentation for unit testing.

---

Changes walkthrough 📝

	Relevant files
Tests	11 files cypress.config.ts Remove obsolete Cypress configuration file                              +0/-24    commands.ts Remove Cypress custom commands support                                      +0/-37    e2e.ts Remove outdated Cypress support file                                          +0/-22    AppCards.spec.tsx Add Vitest unit test for ProjectTileCard component              +12/-0    test.spec.ts Add basic Vitest setup test                                                            +8/-0      vitest.setup.ts Add Vitest setup file for testing-library integration        +1/-0      login.cy.js Remove obsolete Cypress login test                                              +0/-36    settings-app-settings.test.cy.js Remove obsolete Cypress app settings test                                +0/-27    index.js Remove outdated Cypress plugin file                                            +0/-21    package.json Add Vitest test script and update client dependencies        +12/-2    example.json Remove unused Cypress fixture file                                              +0/-5
Enhancement	2 files vite.config.ts Set up Vite configuration with Vitest options                        +50/-0    pre-commit Enhance pre-commit with lint and Vitest checks                      +5/-1
Configuration changes	4 files vitest.workspace.ts Add workspace configuration for Vitest files                          nx.json Update NX configuration with Vite plugin settings                +11/-0    tsconfig.json Update TypeScript config with Vitest types settings            +8/-4      tsconfig.spec.json Add TypeScript configuration for Vitest tests                        +30/-0
Dependencies	1 files package.json Update root package scripts and dependencies for Vitest    +17/-3
Documentation	2 files README.md Remove obsolete Cypress documentation file                              +0/-16    README.md Add documentation for Vitest unit testing usage                    +19/-0
Additional files	9 files open-database.test.cy.js +0/-25    open-function.test.cy.js +0/-25    open-model.test.cy.js +0/-25    open-settings.test.cy.js +0/-25    open-storage.test.cy.js +0/-25    open-vector.test.cy.js +0/-25    settings-non-admin.test.cy.js +0/-33    pnpm-lock.yaml +4208/-2507 vitest.workspace.ts +1/-0

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[github-actions]

@CodiumAI-Agent /improve

[QodoAI-Agent]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 PR contains tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Testing Setup Review the test configuration block to ensure the settings (like environment and coverage options) work as expected with Vitest and do not impact other parts of the build process. test: { watch: false, globals: true, environment: 'jsdom', include: ['**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], deps: { // Required for vitest-canvas-mock inline: ['vitest-canvas-mock'], }, reporters: ['default'], coverage: { reportsDirectory: '../../coverage/packages/client', provider: 'v8', }, environmentOptions: { jsdom: { resources: 'usable', }, }, cache: { dir: '../../node_modules/.vitest', }, setupFiles: ['./vitest.setup.ts'], }, }); Pre-commit Hook Confirm that running linting and tests on commit does not introduce significant delays, particularly in larger codebases. Dependency Management Check for possible duplicate or mismatched versions of testing related libraries that could lead to inconsistencies in the test environment. "cache": true, "dependsOn": [ "^build" ], "inputs": [ "production", "^production", { "externalDependencies": [ "webpack-cli" ] } ], "outputs": [ "{projectRoot}/dist" ], "metadata": { "technologies": [ "webpack" ], "description": "Runs Webpack build", "help": { "command": "pnpm exec webpack-cli build --help", "example": { "options": { "json": "stats.json" }, "args": [ "--profile" ] } } }, "executor": "nx:run-commands", "configurations": {}, "parallelism": true }, "dev": { "options": { "cwd": "packages/client", "args": [ "--mode=development", "--node-env=development", "--watch" ], "command": "webpack-cli" },

[QodoAI-Agent]

PR Code Suggestions ✨

Latest suggestions up to 27e1414

Category	Suggestion	Impact
Possible issue	Remove improper async wait Remove the unnecessary use of "await" with getByText or replace with an asynchronous query (findByText) if waiting is required. packages/client/src/testing/AppCards.spec.tsx [10] -const cardElement = await screen.getByText('app-card-title'); +const cardElement = screen.getByText('app-card-title'); Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies that using "await" with getByText is unnecessary and recommends removing it, which improves code clarity and potentially avoids confusion regarding asynchronous behavior.	Medium

---

Previous suggestions

Suggestions up to commit 8d30847

Category	Suggestion	Impact
Possible issue	Correct async query usage Remove the unnecessary "await" with getByText or switch to findByText if waiting for async rendering. packages/client/src/testing/AppCards.spec.tsx [10] -const cardElement = await screen.getByText('app-card-title'); +const cardElement = screen.getByText('app-card-title'); Suggestion importance[1-10]: 5 __ Why: The suggestion correctly identifies the unnecessary use of await with a synchronous getByText call, improving clarity though its impact is moderate.	Low

[johbaxter]

Can we get a script in the root package.json too

[memisrose]

PR for adding script to root: #693

[github-actions]

@CodiumAI-Agent /update_changelog

[QodoAI-Agent]

Changelog updates: 🔄

2025-03-14

Added

• Vitest unit testing setup with pre-commit integration.
• New icon block component and supporting configurations.

to commit the new content to the CHANGELOG.md file, please type:
'/update_changelog --pr_update_changelog.push_changelog_changes=true'