Skip to content

test: add comprehensive Vue component tests with Vitest#142

Merged
Nowely merged 5 commits intonextfrom
add-vue-tests
Mar 6, 2026
Merged

test: add comprehensive Vue component tests with Vitest#142
Nowely merged 5 commits intonextfrom
add-vue-tests

Conversation

@Nowely
Copy link
Owner

@Nowely Nowely commented Mar 6, 2026

Summary

  • Adds Vitest browser mode testing infrastructure for Vue Storybook
  • Introduces test suites for base functionality, keyboard interactions, nested marks, overlay handling, and slot rendering
  • Refactors Vue components (Container, Token) to Options API with improved type definitions
  • Adds shared test utilities for focus management and DOM helpers

Test Coverage

  • Base.spec.ts - Core component rendering and behavior (187 tests)
  • keyboard.spec.ts - Keyboard navigation and shortcuts
  • nested.spec.ts - Nested mark token handling
  • Overlay.spec.ts - Overlay component integration
  • slots.spec.ts - Slot rendering scenarios

## Summary
- Added Vitest for testing Vue components in Storybook
- Introduced new test scripts for running and watching tests
- Updated package dependencies to include Vitest and related tools
- Created new test files for various components to ensure functionality

## Changes
- Modified `package.json` in the Storybook Vue package to include test scripts
- Updated `vite.config.ts` to configure Vitest for testing
- Added new test files for components, including nested marks and overlays
- Enhanced focus utilities for better test interactions

## Benefits
- Improved testing capabilities for Vue components within Storybook
- Streamlined development workflow with integrated testing
- Ensured component reliability through comprehensive test coverage
@vercel
Copy link

vercel bot commented Mar 6, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
markput-react Ready Ready Preview, Comment Mar 6, 2026 8:44pm
markput-vue Ready Ready Preview, Comment Mar 6, 2026 8:44pm
markput-website Ready Ready Preview, Comment Mar 6, 2026 8:44pm

## Summary
- Changed the version of '@types/node' from 24.12.0 to 17.0.45 for '@types/sax' dependency.

## Changes
- Updated the pnpm-lock.yaml file to reflect the new dependency version.

## Benefits
- Ensures compatibility with the specified version of '@types/sax' and maintains consistency in the dependency tree.
@vercel
Copy link

vercel bot commented Mar 6, 2026

Deployment failed with the following error:

Resource is limited - try again in 20 hours (more than 100, code: "api-deployments-free-per-day").

Learn More: https://vercel.com/nowelys-projects?upgradeToPro=build-rate-limit

## Summary
- Updated type definitions to allow `Component` types for `container` and `span` slots.
- Improved handling of component references in `Container.vue` to support both Vue component instances and raw elements.
- Enhanced `MarkRenderer.vue` to conditionally render components based on child nodes.
- Refined `resolveSlot.ts` to return either a string or a `Component` type for slot resolution.

## Benefits
- Increases flexibility in slot usage, allowing for more complex component structures.
- Improves type safety and clarity in component props, enhancing developer experience.
- Ensures better rendering logic in components, leading to more robust UI behavior.
@vercel
Copy link

vercel bot commented Mar 6, 2026

Deployment failed with the following error:

Resource is limited - try again in 19 hours (more than 100, code: "api-deployments-free-per-day").

Learn More: https://vercel.com/nowelys-projects?upgradeToPro=build-rate-limit

Nowely added 2 commits March 7, 2026 01:52
## Summary
- Converted `Container.vue` and `Token.vue` from `<script setup>` to the options API.
- Encapsulated logic within the `setup` function for better organization and clarity.
- Enhanced type definitions for props in `Token.vue` to improve type safety.

## Benefits
- Improves readability and maintainability of the components.
- Aligns with the options API for consistency across the codebase.
- Facilitates easier debugging and testing of component logic.
## Summary
- Updated type definitions for `className` and `style` in `Container.vue` to improve type safety.
- Introduced `StyleProperties` type for better clarity in style handling.

## Benefits
- Enhances type safety and developer experience when working with component styles and class names.
@Nowely Nowely changed the title feat: enhance Storybook setup for Vue with Vitest integration test: add comprehensive Vue component tests with Vitest Mar 6, 2026
@Nowely Nowely merged commit 231f3dc into next Mar 6, 2026
6 of 9 checks passed
@Nowely Nowely deleted the add-vue-tests branch March 6, 2026 22:58
Nowely pushed a commit that referenced this pull request Mar 7, 2026
🤖 I have created a release *beep* *boop*
---


## [0.5.0](0.4.0...0.5.0)
(2026-03-07)


### Features

* **core:** add ContentEditableController for DOM-based editing
([#134](#134))
([633133b](633133b))


### Refactoring

* extract shared logic from framework adapters to core
([#145](#145))
([795c0e8](795c0e8))
* improve Signal typing with interface augmentation for
framework-specific use() return types
([#143](#143))
([e6d4efc](e6d4efc))


### Miscellaneous

* migrate to pnpm catalog for centralized dependency management
([#140](#140))
([b71cd55](b71cd55))
* update oxlint configuration
([#144](#144))
([1db73ec](1db73ec))


### Tests

* add comprehensive Vue component tests with Vitest
([#142](#142))
([231f3dc](231f3dc))

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant