Merge pull request #5821 from nextcloud/enh/vitest

Use vitest instead of jest

package.json

@@ -24,10 +24,10 @@
     "lint:fix": "tsc && eslint --ext .js,.vue src cypress --fix",
     "stylelint": "stylelint src/**/*.vue src/**/*.scss src/**/*.css css/*.scss",
     "stylelint:fix": "stylelint src/**/*.vue src/**/*.scss src/**/*.css css/*.scss --fix",
-    "test": "NODE_ENV=test jest",
+    "test": "NODE_ENV=test vitest",
     "test:cypress": "cd cypress && ./runLocal.sh run",
     "test:cypress:open": "cd cypress && ./runLocal.sh open",
-    "test:coverage": "NODE_ENV=test jest --coverage"
+    "test:coverage": "NODE_ENV=test vitest --coverage"
   },
   "browserslist": [
     "extends @nextcloud/browserslist-config"
@@ -126,73 +126,26 @@
     "@nextcloud/vite-config": "^1.4.2",
     "@types/markdown-it": "^13.0.9",
     "@vitejs/plugin-vue2": "^2.3.1",
+    "@vitest/coverage-v8": "^2.1.2",
     "@vue/test-utils": "^1.3.0 <2",
     "@vue/tsconfig": "^0.5.1",
-    "@vue/vue2-jest": "^29.2.6",
     "@vueuse/core": "^11.1.0",
     "cypress": "^13.6.4",
     "cypress-split": "^1.24.0",
     "cypress-visual-regression": "^5.2.2",
     "cypress-vite": "^1.5.0",
     "eslint-plugin-cypress": "^3.6.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-serializer-vue": "^3.1.0",
     "prosemirror-test-builder": "^1.1.1",
     "raw-loader": "^4.0.2",
     "rollup-plugin-webpack-stats": "^1.1.0",
-    "ts-jest": "^29.2.5",
     "typescript": "^5.6.3",
     "vite": "^5.4.8",
     "vite-plugin-commonjs": "^0.10.3",
+    "vitest": "^2.1.2",
     "vue-demi": "^0.14.10",
     "vue-template-compiler": "^2.7.16"
   },
-  "jest": {
-    "verbose": true,
-    "testEnvironment": "jest-environment-jsdom",
-    "moduleFileExtensions": [
-      "js",
-      "ts",
-      "vue",
-      "md",
-      "html"
-    ],
-    "moduleNameMapper": {
-      "^@/(.*)$": "<rootDir>/src/$1",
-      "^.+\\.(css|less|scss)$": "identity-obj-proxy",
-      "^.+\\.svg(\\?raw)?$": "<rootDir>/src/tests/__mocks__/svg.js",
-      "^.+\\.s?css(\\?raw)?$": "<rootDir>/src/tests/__mocks__/css.js"
-    },
-    "testPathIgnorePatterns": [
-      "<rootDir>/src/tests/fixtures/",
-      "<rootDir>/build",
-      "<rootDir>/cypress"
-    ],
-    "transform": {
-      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
-      "^.+\\.mjs$": "<rootDir>/node_modules/babel-jest",
-      ".*\\.(vue)$": "<rootDir>/node_modules/@vue/vue2-jest",
-      "^.+\\.(html|xml|md)$": "<rootDir>/jest-raw-loader.cjs",
-      "\\.ts$": [
-        "ts-jest",
-        {
-          "useESM": true,
-          "tsconfig": {
-            "verbatimModuleSyntax": false
-          }
-        }
-      ]
-    },
-    "snapshotSerializers": [
-      "<rootDir>/node_modules/jest-serializer-vue"
-    ],
-    "setupFilesAfterEnv": [
-      "<rootDir>/src/tests/setup.mjs"
-    ],
-    "transformIgnorePatterns": []
-  },
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "^4.24.0"
   }

renovate.json

@@ -69,14 +69,6 @@
         "lowlight"
       ]
     },
-    {
-      "groupName": "jest",
-      "matchPackageNames": [
-        "jest",
-        "@vue/vue2-jest",
-        "jest-environment-jsdom"
-      ]
-    },
     {
       "groupName": "tiptap",
       "matchPackagePrefixes": [

src/components/Menu/keys.js

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+const t = window.t
 const isMac = (navigator.userAgent.includes('Mac'))
 
 const MODIFIERS = {

src/global.d.ts

@@ -0,0 +1,20 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+/// <reference types="@nextcloud/typings" />
+
+declare global {
+	interface Window {
+		// Nextcloud Globals
+		t: typeof import('@nextcloud/l10n').t
+		n: typeof import('@nextcloud/l10n').n
+		OCA: Record<string, any>
+		OCP: Nextcloud.v29.OCP
+	}
+
+	const appVersion: string
+}
+
+export {}

src/nodes/Paragraph.d.ts

@@ -0,0 +1,9 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { Node } from '@tiptap/core'
+
+declare const Paragraph: Node
+export default Paragraph

src/nodes/Paragraph.js

@@ -9,7 +9,7 @@ import previewOptions from '../plugins/previewOptions.js'
 const Paragraph = TiptapParagraph.extend({
 
 	parseHTML() {
-		return this.parent().map(rule => Object.assign(rule, { preserveWhitespace: 'full' }))
+		return this.parent?.()?.map(rule => Object.assign(rule, { preserveWhitespace: 'full' }))
 	},
 
 	addKeyboardShortcuts() {

src/tests/extensions/Markdown.spec.js

@@ -15,7 +15,7 @@ import { Italic, Strong, Underline, Link } from './../../marks/index.js'
 import TiptapImage from '@tiptap/extension-image'
 import { getExtensionField } from '@tiptap/core'
 import { __serializeForClipboard as serializeForClipboard } from '@tiptap/pm/view'
-import { createCustomEditor } from '../helpers.js'
+import createCustomEditor from '../testHelpers/createCustomEditor.ts'
 
 describe('Markdown extension unit', () => {
 	it('has a config', () => {
@@ -28,9 +28,7 @@ describe('Markdown extension unit', () => {
 	})
 
 	it('makes toMarkdown available in prose mirror schema', () => {
-		const editor = createCustomEditor({
-			extensions: [Markdown, Underline],
-		})
+		const editor = createCustomEditor('', [Markdown, Underline])
 		const serializer = createMarkdownSerializer(editor.schema)
 		const underline = serializer.serializer.marks.underline
 		expect(underline).toEqual(Underline.config.toMarkdown)
@@ -41,109 +39,106 @@ describe('Markdown extension unit', () => {
 
 describe('Markdown extension integrated in the editor', () => {
 	it('serializes marks according to their spec', () => {
-		const editor = createCustomEditor({
-			content: '<p><u>Test</u></p>',
-			extensions: [Markdown, Underline],
-		})
+		const editor = createCustomEditor('<p><u>Test</u></p>', [Markdown, Underline])
 		const serializer = createMarkdownSerializer(editor.schema)
 		expect(serializer.serialize(editor.state.doc)).toBe('__Test__')
 	})
 
 	it('serializes nodes according to their spec', () => {
-		const editor = createCustomEditor({
-			content: '<p><ul class="contains-task-list"><li><input type="checkbox">Hello</li></ul></p>',
-			extensions: [Markdown, TaskList, TaskItem],
-		})
+		const editor = createCustomEditor(
+			'<p><ul class="contains-task-list"><li><input type="checkbox">Hello</li></ul></p>',
+			[Markdown, TaskList, TaskItem],
+		)
 		const serializer = createMarkdownSerializer(editor.schema)
 		expect(serializer.serialize(editor.state.doc)).toBe('\n- [ ] Hello')
 	})
 
 	it('serializes images with the default prosemirror way', () => {
-		const editor = createCustomEditor({
-			content: '<p><img alt="Hello" src="test"></p>',
-			extensions: [Markdown, TiptapImage.configure({ inline: true })],
-		})
+		const editor = createCustomEditor(
+			'<p><img alt="Hello" src="test"></p>',
+			[Markdown, TiptapImage.configure({ inline: true })],
+		)
 		const serializer = createMarkdownSerializer(editor.schema)
 		expect(serializer.serialize(editor.state.doc)).toBe('![Hello](test)')
 	})
 
 	it('serializes block images with the default prosemirror way', () => {
-		const editor = createCustomEditor({
-			content: '<figure><img alt="Hello" src="test"></figure><p>hello</p>',
-			extensions: [Markdown, Image, ImageInline],
-		})
+		const editor = createCustomEditor(
+			'<figure><img alt="Hello" src="test"></figure><p>hello</p>',
+			[Markdown, Image, ImageInline],
+		)
 		const serializer = createMarkdownSerializer(editor.schema)
 		expect(serializer.serialize(editor.state.doc)).toBe('![Hello](test)\n\nhello')
 	})
 
 	it('serializes inline images with the default prosemirror way', () => {
-		const editor = createCustomEditor({
-			content: '<p>inline image <img alt="Hello" src="test"> inside text</p>',
-			extensions: [Markdown, Image, ImageInline],
-		})
+		const editor = createCustomEditor(
+			'<p>inline image <img alt="Hello" src="test"> inside text</p>',
+			[Markdown, Image, ImageInline],
+		)
 		const serializer = createMarkdownSerializer(editor.schema)
 		expect(serializer.serialize(editor.state.doc)).toBe('inline image ![Hello](test) inside text')
 	})
 
 	it('copies task lists to plaintext like markdown', () => {
-		const editor = createCustomEditor({
-			content: '<p><ul class="contains-task-list"><li><input type="checkbox">Hello</li></ul></p>',
-			extensions: [Markdown, TaskList, TaskItem],
-		})
+		const editor = createCustomEditor(
+			'<p><ul class="contains-task-list"><li><input type="checkbox">Hello</li></ul></p>',
+			[Markdown, TaskList, TaskItem],
+		)
 		const text = copyEditorContent(editor)
 		expect(text).toBe('\n- [ ] Hello')
 	})
 
 	it('copies code block content to plaintext according to their spec', () => {
-		const editor = createCustomEditor({
-			content: '<pre><code>Hello</code></pre>',
-			extensions: [Markdown, CodeBlock],
-		})
+		const editor = createCustomEditor(
+			'<pre><code>Hello</code></pre>',
+			[Markdown, CodeBlock],
+		)
 		const text = copyEditorContent(editor)
 		expect(text).toBe('Hello')
 	})
 
 	it('copies nested task list nodes to markdown like syntax', () => {
-		const editor = createCustomEditor({
-			content: '<blockquote><p><ul class="contains-task-list"><li><input type="checkbox">Hello</li></ul></blockquote>',
-			extensions: [Markdown, Blockquote, TaskList, TaskItem],
-		})
+		const editor = createCustomEditor(
+			'<blockquote><p><ul class="contains-task-list"><li><input type="checkbox">Hello</li></ul></blockquote>',
+			[Markdown, Blockquote, TaskList, TaskItem],
+		)
 		const text = copyEditorContent(editor)
 		expect(text).toBe('\n- [ ] Hello')
 	})
 
 	it('copies address from blockquote to markdown', () => {
-		const editor = createCustomEditor({
-			content: '<blockquote><p>Hermannsreute 44A</p></blockquote>',
-			extensions: [Markdown, Blockquote],
-		})
+		const editor = createCustomEditor(
+			'<blockquote><p>Hermannsreute 44A</p></blockquote>',
+			[Markdown, Blockquote],
+		)
 		const text = copyEditorContent(editor)
 		expect(text).toBe('Hermannsreute 44A')
 	})
 
 	it('copy version number without escape character', () => {
-		const editor = createCustomEditor({
-			content: '<p>Hello</p><p>28.0.4</p>',
-			extensions: [Markdown],
-		})
+		const editor = createCustomEditor(
+			'<p>Hello</p><p>28.0.4</p>',
+			[Markdown],
+		)
 		const text = copyEditorContent(editor)
 		expect(text).toBe('Hello\n\n28.0.4')
 	})
 
 	it('strips bold, italic, and other marks from paragraph', () => {
-		const editor = createCustomEditor({
-			content: '<p><strong>Hello</strong></p><p><span style="text-decoration: underline;">lonely </span><em>world</em></p>',
-			extensions: [Markdown, Italic, Strong, Underline],
-		})
+		const editor = createCustomEditor(
+			'<p><strong>Hello</strong></p><p><span style="text-decoration: underline;">lonely </span><em>world</em></p>',
+			[Markdown, Italic, Strong, Underline],
+		)
 		const text = copyEditorContent(editor)
 		expect(text).toBe('Hello\n\nlonely world')
 	})
 
 	it('strips href and link formatting from email address', () => {
-		const editor = createCustomEditor({
-			content: '<p>Hello</p><p><a href="mailto:example@example.com">example@example.com</a></p>',
-			extensions: [Markdown, Link],
-		})
+		const editor = createCustomEditor(
+			'<p>Hello</p><p><a href="mailto:example@example.com">example@example.com</a></p>',
+			[Markdown, Link],
+		)
 		const text = copyEditorContent(editor)
 		expect(text).toBe('Hello\n\nexample@example.com')
 	})