tiptap icon indicating copy to clipboard operation
tiptap copied to clipboard

[RFC] Add vitest integration for package unit testing

Open alexvcasillas opened this issue 1 year ago • 6 comments

[!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.json and packages/extension-bold/package.json. [1] [2]
  • Created a new test configuration file vitest.config.ts to set up the testing environment with JSDOM and alias resolutions.
  • Added a specific Vitest configuration file for the extension-bold package to include JSDOM environment setup and alias resolutions.

Dependency Updates:

  • Added jsdom and vitest as new dependencies in package.json and packages/extension-bold/package.json. [1] [2] [3]

New Tests:

  • Added a new test file bold.spec.ts for the extension-bold package to test the initialization and commands of the Bold extension.
  • Created a corresponding HTML file test.dom.html to serve as the test document for the Bold extension tests.

alexvcasillas avatar Feb 07 '25 12:02 alexvcasillas

⚠️ 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

changeset-bot[bot] avatar Feb 07 '25 12:02 changeset-bot[bot]

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...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] avatar Feb 07 '25 12:02 netlify[bot]

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?

bdbch avatar Feb 07 '25 12:02 bdbch

Open in Stackblitz

@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

pkg-pr-new[bot] avatar Feb 07 '25 12:02 pkg-pr-new[bot]

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.

alexvcasillas avatar Feb 07 '25 12:02 alexvcasillas

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.

bdbch avatar May 13 '25 15:05 bdbch