[RFC] Add vitest integration for package unit testing
[!NOTE]
RFC We would like to discuss if there's actually a need to introduce Vitest to have another testing step along with Cypress or if with Cypress would be enough
This pull request introduces several changes to the project, primarily focusing on adding unit testing capabilities using Vitest, updating dependencies, and configuring the testing environment. The most important changes are summarized below:
Testing Enhancements:
- Added new unit test scripts using Vitest in
package.jsonandpackages/extension-bold/package.json. [1] [2] - Created a new test configuration file
vitest.config.tsto set up the testing environment with JSDOM and alias resolutions. - Added a specific Vitest configuration file for the
extension-boldpackage to include JSDOM environment setup and alias resolutions.
Dependency Updates:
- Added
jsdomandvitestas new dependencies inpackage.jsonandpackages/extension-bold/package.json. [1] [2] [3]
New Tests:
- Added a new test file
bold.spec.tsfor theextension-boldpackage to test the initialization and commands of the Bold extension. - Created a corresponding HTML file
test.dom.htmlto serve as the test document for the Bold extension tests.
⚠️ No Changeset found
Latest commit: 8b188433322490409954ede1c8c7f163f7f04a3b
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
Deploy Preview for tiptap-embed ready!
| Name | Link |
|---|---|
| Latest commit | 8b188433322490409954ede1c8c7f163f7f04a3b |
| Latest deploy log | https://app.netlify.com/sites/tiptap-embed/deploys/67a606cf9705fd0008c26334 |
| Deploy Preview | https://deploy-preview-6089--tiptap-embed.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site configuration.
Should this only live on extension-bold? I guess every extension would have it's own test run which we can run through with turbo?
@tiptap/core
npm i https://pkg.pr.new/@tiptap/core@6089
@tiptap/extension-blockquote
npm i https://pkg.pr.new/@tiptap/extension-blockquote@6089
@tiptap/extension-bubble-menu
npm i https://pkg.pr.new/@tiptap/extension-bubble-menu@6089
@tiptap/extension-bullet-list
npm i https://pkg.pr.new/@tiptap/extension-bullet-list@6089
@tiptap/extension-character-count
npm i https://pkg.pr.new/@tiptap/extension-character-count@6089
@tiptap/extension-bold
npm i https://pkg.pr.new/@tiptap/extension-bold@6089
@tiptap/extension-code
npm i https://pkg.pr.new/@tiptap/extension-code@6089
@tiptap/extension-code-block
npm i https://pkg.pr.new/@tiptap/extension-code-block@6089
@tiptap/extension-code-block-lowlight
npm i https://pkg.pr.new/@tiptap/extension-code-block-lowlight@6089
@tiptap/extension-collaboration
npm i https://pkg.pr.new/@tiptap/extension-collaboration@6089
@tiptap/extension-collaboration-cursor
npm i https://pkg.pr.new/@tiptap/extension-collaboration-cursor@6089
@tiptap/extension-color
npm i https://pkg.pr.new/@tiptap/extension-color@6089
@tiptap/extension-document
npm i https://pkg.pr.new/@tiptap/extension-document@6089
@tiptap/extension-dropcursor
npm i https://pkg.pr.new/@tiptap/extension-dropcursor@6089
@tiptap/extension-floating-menu
npm i https://pkg.pr.new/@tiptap/extension-floating-menu@6089
@tiptap/extension-focus
npm i https://pkg.pr.new/@tiptap/extension-focus@6089
@tiptap/extension-font-family
npm i https://pkg.pr.new/@tiptap/extension-font-family@6089
@tiptap/extension-gapcursor
npm i https://pkg.pr.new/@tiptap/extension-gapcursor@6089
@tiptap/extension-hard-break
npm i https://pkg.pr.new/@tiptap/extension-hard-break@6089
@tiptap/extension-heading
npm i https://pkg.pr.new/@tiptap/extension-heading@6089
@tiptap/extension-highlight
npm i https://pkg.pr.new/@tiptap/extension-highlight@6089
@tiptap/extension-history
npm i https://pkg.pr.new/@tiptap/extension-history@6089
@tiptap/extension-horizontal-rule
npm i https://pkg.pr.new/@tiptap/extension-horizontal-rule@6089
@tiptap/extension-image
npm i https://pkg.pr.new/@tiptap/extension-image@6089
@tiptap/extension-italic
npm i https://pkg.pr.new/@tiptap/extension-italic@6089
@tiptap/extension-link
npm i https://pkg.pr.new/@tiptap/extension-link@6089
@tiptap/extension-list-item
npm i https://pkg.pr.new/@tiptap/extension-list-item@6089
@tiptap/extension-list-keymap
npm i https://pkg.pr.new/@tiptap/extension-list-keymap@6089
@tiptap/extension-mention
npm i https://pkg.pr.new/@tiptap/extension-mention@6089
@tiptap/extension-ordered-list
npm i https://pkg.pr.new/@tiptap/extension-ordered-list@6089
@tiptap/extension-paragraph
npm i https://pkg.pr.new/@tiptap/extension-paragraph@6089
@tiptap/extension-placeholder
npm i https://pkg.pr.new/@tiptap/extension-placeholder@6089
@tiptap/extension-strike
npm i https://pkg.pr.new/@tiptap/extension-strike@6089
@tiptap/extension-subscript
npm i https://pkg.pr.new/@tiptap/extension-subscript@6089
@tiptap/extension-superscript
npm i https://pkg.pr.new/@tiptap/extension-superscript@6089
@tiptap/extension-table
npm i https://pkg.pr.new/@tiptap/extension-table@6089
@tiptap/extension-table-cell
npm i https://pkg.pr.new/@tiptap/extension-table-cell@6089
@tiptap/extension-table-header
npm i https://pkg.pr.new/@tiptap/extension-table-header@6089
@tiptap/extension-table-row
npm i https://pkg.pr.new/@tiptap/extension-table-row@6089
@tiptap/extension-task-item
npm i https://pkg.pr.new/@tiptap/extension-task-item@6089
@tiptap/extension-task-list
npm i https://pkg.pr.new/@tiptap/extension-task-list@6089
@tiptap/extension-text
npm i https://pkg.pr.new/@tiptap/extension-text@6089
@tiptap/extension-text-align
npm i https://pkg.pr.new/@tiptap/extension-text-align@6089
@tiptap/extension-text-style
npm i https://pkg.pr.new/@tiptap/extension-text-style@6089
@tiptap/extension-typography
npm i https://pkg.pr.new/@tiptap/extension-typography@6089
@tiptap/extension-underline
npm i https://pkg.pr.new/@tiptap/extension-underline@6089
@tiptap/extension-youtube
npm i https://pkg.pr.new/@tiptap/extension-youtube@6089
@tiptap/html
npm i https://pkg.pr.new/@tiptap/html@6089
@tiptap/pm
npm i https://pkg.pr.new/@tiptap/pm@6089
@tiptap/react
npm i https://pkg.pr.new/@tiptap/react@6089
@tiptap/starter-kit
npm i https://pkg.pr.new/@tiptap/starter-kit@6089
@tiptap/suggestion
npm i https://pkg.pr.new/@tiptap/suggestion@6089
@tiptap/vue-2
npm i https://pkg.pr.new/@tiptap/vue-2@6089
@tiptap/vue-3
npm i https://pkg.pr.new/@tiptap/vue-3@6089
commit: 8b18843
Should this only live on
extension-bold? I guess every extension would have it's own test run which we can run through with turbo?
As this is more like the initial state of the Vitest setup I wanted to make sure that it works fine with one extension and now we could build up from there to have it in all extensions, either way, there's no need from turbo unless required, since running npm run test:unit in the root, will run all of the unit tests in the packages folder.
I'm not that sure about vitest for now since we already use Cypress for E2E and integration tests.
I think with Cypress we should also be able to test smaller units (like functions and their return values) while also using it for the E2E tests actually making sure that our commands and editor functions run as expected.
Having another testing framework would just complicate things and mix things up I believe.