Move from jest to vitest for better integration with vite

Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>

Author: susnux

package.json

@@ -19,8 +19,8 @@
 		"l10n:extract": "node build/extract-l10n.js",
 		"lint": "eslint --ext .js,.vue src",
 		"lint:fix": "eslint --ext .js,.vue src --fix",
-		"test": "jest --verbose",
-		"test:coverage": "jest --verbose --coverage --no-cache",
+		"test": "vitest run",
+		"test:coverage": "vitest run --coverage",
 		"stylelint": "stylelint src/**/*.vue src/**/*.scss src/**/*.css",
 		"stylelint:fix": "stylelint src/**/*.vue src/**/*.scss src/**/*.css --fix",
 		"styleguide": "vue-styleguidist server",
@@ -92,20 +92,21 @@
 		"@vitejs/plugin-vue2": "^2.0.1",
 		"@vitest/coverage-c8": "^0.25.3",
 		"@vue/compiler-sfc": "^2.7.14",
-		"babel-loader": "^8.2.5",
+		"@vue/test-utils": "^1.3.3",
 		"browserslist-to-esbuild": "^1.2.0",
 		"css-loader": "~6.7.1",
 		"cypress": "^9.7.0",
 		"cypress-visual-regression": "^1.5.0",
 		"eslint-plugin-cypress": "^2.11.1",
 		"gettext-extractor": "^3.6.0",
 		"gettext-parser": "^6.0.0",
-		"glob": "^8.0.3",
+		"jsdom": "^20.0.3",
 		"rollup-plugin-inject-process-env": "^1.3.1",
 		"rollup-plugin-node-externals": "^5.0.2",
 		"sanitize-filename": "^1.6.3",
 		"sass": "^1.56.1",
 		"vite": "^3.2.4",
+		"vitest": "^0.25.3",
 		"vue-eslint-parser": "^9.1.0"
 	},
 	"browserslist": [

tests/.eslintrc.js

@@ -1,9 +1,9 @@
 module.exports = {
 	env: {
-		jest: true,
-		"cypress/globals": true
+		'jest/gobals': false,
+		'cypress/globals': true,
 	},
 	extends: [
-		"plugin:cypress/recommended"
+		'plugin:cypress/recommended',
 	],
 }

tests/OC.js

@@ -15,7 +15,7 @@ export default {
 	Util: {
 		naturalSortCompare(a, b) {
 			return 0
-		}
+		},
 	},
 
 	coreApps: [

tests/setup.js

@@ -20,11 +20,7 @@
  *
  */
 
+import { vi } from 'vitest'
 import OC from './OC.js'
-// eslint-disable-next-line node/no-unpublished-import
-import 'regenerator-runtime/runtime'
 
-global.OC = OC
-
-global.TRANSLATIONS = []
-global.SCOPE_VERSION = 1
+vi.stubGlobal('OC', OC)

tests/unit/components/NcActions/NcActions.spec.js

@@ -3,7 +3,7 @@
  *
  * @author Raimund Schlüßler <raimund.schluessler@mailbox.org>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as
@@ -21,6 +21,7 @@
  */
 
 import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
 
 import NcActions from '../../../../src/components/NcActions/NcActions.vue'
 import NcActionButton from '../../../../src/components/NcActionButton/NcActionButton.vue'

tests/unit/components/NcAppNavigation/NcAppNavigation.spec.js

@@ -3,7 +3,7 @@
  *
  * @author Azul <azul@riseup.net>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as
@@ -22,6 +22,8 @@
 
 import { mount } from '@vue/test-utils'
 import { emit } from '@nextcloud/event-bus'
+import { describe, expect, it } from 'vitest'
+
 import NcAppNavigation from '../../../../src/components/NcAppNavigation/NcAppNavigation.vue'
 
 describe('NcAppNavigation.vue', () => {
@@ -36,14 +38,14 @@ describe('NcAppNavigation.vue', () => {
 	describe('toggle via event bus', () => {
 		it('toggle to turn it off', () => {
 			const wrapper = mount(NcAppNavigation)
-			emit('toggle-navigation', {open: undefined})
+			emit('toggle-navigation', { open: undefined })
 			expect(wrapper.vm.$data.open).toBe(false)
 		})
 
 		it('toggle with open: false keeps it closed', () => {
 			const wrapper = mount(NcAppNavigation)
-			emit('toggle-navigation', {open: false})
-			emit('toggle-navigation', {open: false})
+			emit('toggle-navigation', { open: false })
+			emit('toggle-navigation', { open: false })
 			expect(wrapper.vm.$data.open).toBe(false)
 		})
 

tests/unit/components/NcAppSidebar/NcAppSidebarTabs.spec.js

@@ -4,7 +4,7 @@
  *
  * @author Raimund Schlüßler <raimund.schluessler@mailbox.org>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as
@@ -22,35 +22,34 @@
  */
 
 import { mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import Vue from 'vue'
 import NcAppSidebarTabs from '../../../../src/components/NcAppSidebar/NcAppSidebarTabs.vue'
 import NcAppSidebarTab from '../../../../src/components/NcAppSidebarTab/NcAppSidebarTab.vue'
 import NcActionButton from '../../../../src/components/NcActionButton/NcActionButton.vue'
 
-let onWarning
-let consoleDebug
-
-let wrapper
-
 const initialConsole = { ...console }
 
 describe('NcAppSidebarTabs.vue', () => {
 	'use strict'
-	beforeEach(() => {
-		onWarning = jest.fn()
-		consoleDebug = jest.fn()
-		Vue.config.warnHandler = onWarning
-		global.console = { ...console, debug: consoleDebug }
+
+	beforeEach((ctx) => {
+		ctx.onWarning = vi.fn()
+		ctx.consoleDebug = vi.fn()
+		Vue.config.warnHandler = ctx.onWarning
+		global.console = { ...console, debug: ctx.consoleDebug }
 	})
+
 	afterEach(() => {
 		Vue.config.warnHandler = () => null
 		global.console = initialConsole
 	})
+
 	describe('when using the component without tabs', () => {
 		describe('with only one div', () => {
-			beforeEach(() => {
-				wrapper = mount(NcAppSidebarTabs, {
+			beforeEach((ctx) => {
+				ctx.wrapper = mount(NcAppSidebarTabs, {
 					propsData: {
 						title: 'Sidebar title.',
 					},
@@ -59,17 +58,22 @@ describe('NcAppSidebarTabs.vue', () => {
 					},
 				})
 			})
-			it('Issues no warning nor logs to console.', () => {
+
+			it('does not display the nav element', ({wrapper}) => {
+				expect(wrapper.find('nav').exists()).toBe(false)
+			})
+			it('Issues no warning nor logs to console.', ({ consoleDebug, onWarning }) => {
 				expect(onWarning).toHaveBeenCalledTimes(0)
 				expect(consoleDebug).toHaveBeenCalledTimes(0)
 			})
-			it('does not display the nav element', () => {
+			it('does not display the nav element', ({ wrapper }) => {
 				expect(wrapper.find('nav').exists()).toBe(false)
 			})
 		})
+
 		describe('with div and secondary action', () => {
-			beforeEach(() => {
-				wrapper = mount(NcAppSidebarTabs, {
+			beforeEach((ctx) => {
+				ctx.wrapper = mount(NcAppSidebarTabs, {
 					propsData: {
 						title: 'Sidebar title.',
 					},
@@ -83,19 +87,16 @@ describe('NcAppSidebarTabs.vue', () => {
 					},
 				})
 			})
-			it('Issues no warning.', () => {
+			it('Issues no warning.', ({ onWarning }) => {
 				expect(onWarning).toHaveBeenCalledTimes(0)
 			})
 		})
-
-		it('does not display the nav element', () => {
-			expect(wrapper.find('nav').exists()).toBe(false)
-		})
 	})
+
 	describe('when only children of type AppSidebarTab is used', () => {
 		describe('when 3 children of type AppSidebarTab are used', () => {
-			beforeEach(() => {
-				wrapper = mount(NcAppSidebarTabs, {
+			beforeEach((ctx) => {
+				ctx.wrapper = mount(NcAppSidebarTabs, {
 					slots: {
 						default: [
 							'<nc-app-sidebar-tab id="first" icon="icon-details" name="Tab1">Tab1</nc-app-sidebar-tab>',
@@ -109,67 +110,69 @@ describe('NcAppSidebarTabs.vue', () => {
 					},
 				})
 			})
-			it('Issues no warning.', () => {
+
+			it('Issues no warning.', ({ onWarning }) => {
 				expect(onWarning).toHaveBeenCalledTimes(0)
 			})
-			it('display the nav element', () => {
+			it('display the nav element', ({ wrapper }) => {
 				expect(wrapper.find('nav').exists()).toBe(true)
 			})
-			it('display all the 3 elements in li', () => {
+			it('display all the 3 elements in li', ({ wrapper }) => {
 				const liList = wrapper.findAll('nav>ul>li')
 				expect(liList.length).toEqual(3)
 			})
-			it('emit "update:active" event with the selected tab id when clicking on a tab', () => {
+			it('emit "update:active" event with the selected tab id when clicking on a tab', ({ wrapper }) => {
 				const lastLink = wrapper.find('nav>ul>li:last-of-type>a')
 				lastLink.trigger('click')
 				expect(wrapper.emitted('update:active')[0]).toEqual(['last'])
 			})
-			it('emit "update:active" event with the first tab id when keydown pageup is pressed', () => {
+			it('emit "update:active" event with the first tab id when keydown pageup is pressed', ({ wrapper }) => {
 				const lastLink = wrapper.find('nav>ul>li:last-of-type>a')
-				lastLink.trigger('keydown.pageup')
+				lastLink.trigger('keydown', { keyCode: 33 })
 				expect(wrapper.emitted('update:active')[0]).toEqual(['first'])
 			})
-			it('emit "update:active" event with the last tab id when keydown pagedown is pressed', () => {
+			it('emit "update:active" event with the last tab id when keydown pagedown is pressed', ({ wrapper }) => {
 				const lastLink = wrapper.find('nav>ul>li:last-of-type>a')
-				lastLink.trigger('keydown.pagedown')
+				lastLink.trigger('keydown', { keyCode: 34 })
 				expect(wrapper.emitted('update:active')[0]).toEqual(['last'])
 			})
 			describe('when we select the first element', () => {
-				beforeEach(() => {
-					wrapper.setData({ activeTab: 'first' })
+				beforeEach((ctx) => {
+					ctx.wrapper.setData({ activeTab: 'first' })
 				})
-				it('does not emit "update:active" event when keydown left is pressed', () => {
+				it('does not emit "update:active" event when keydown left is pressed', ({ wrapper }) => {
 					expect(wrapper.emitted('update:active')).toBeFalsy()
 					const firstLink = wrapper.find('nav>ul>li>a')
 					firstLink.trigger('keydown.left')
 					expect(wrapper.emitted('update:active')).toBeFalsy()
 				})
-				it('emit "update:active" event with the next tab id when keydown right is pressed', () => {
+				it('emit "update:active" event with the next tab id when keydown right is pressed', ({ wrapper }) => {
 					const firstLink = wrapper.find('nav>ul>li>a')
 					firstLink.trigger('keydown.right')
 					expect(wrapper.emitted('update:active')[0]).toEqual(['second'])
 				})
 			})
 			describe('when we select the last element', () => {
-				beforeEach(() => {
-					wrapper.setData({ activeTab: 'last' })
+				beforeEach((ctx) => {
+					ctx.wrapper.setData({ activeTab: 'last' })
 				})
-				it('emit "update:active" event with the previous tab id when keydown left is pressed', () => {
+				it('emit "update:active" event with the previous tab id when keydown left is pressed', ({ wrapper }) => {
 					const lastLink = wrapper.find('nav>ul>li:last-of-type>a')
 					lastLink.trigger('keydown.left')
 					expect(wrapper.emitted('update:active')[0]).toEqual(['second'])
 				})
-				it('does not emit "update:active" event when keydown right is pressed', () => {
+				it('does not emit "update:active" event when keydown right is pressed', ({ wrapper }) => {
 					expect(wrapper.emitted('update:active')).toBeFalsy()
 					const lastLink = wrapper.find('nav>ul>li:last-of-type>a')
 					lastLink.trigger('keydown.right')
 					expect(wrapper.emitted('update:active')).toBeFalsy()
 				})
 			})
 		})
+	
 		describe('when they is only 1 child of type AppSidebarTab are used', () => {
-			beforeEach(() => {
-				wrapper = mount(NcAppSidebarTabs, {
+			beforeEach((ctx) => {
+				ctx.wrapper = mount(NcAppSidebarTabs, {
 					slots: {
 						default: [
 							'<nc-app-sidebar-tab id="1" icon="icon-details" name="Tab1">Tab1</nc-app-sidebar-tab>',
@@ -181,16 +184,16 @@ describe('NcAppSidebarTabs.vue', () => {
 					},
 				})
 			})
-			it('Issues no warning.', () => {
+			it('Issues no warning.', ({ onWarning }) => {
 				expect(onWarning).toHaveBeenCalledTimes(0)
 			})
-			it('does not display the nav element', () => {
+			it('does not display the nav element', ({ wrapper }) => {
 				expect(wrapper.find('nav').exists()).toBe(false)
 			})
 		})
 	})
 	describe('when tabs and other elements are mixed', () => {
-		it('Issues a warning and logs to console .', () => {
+		it('Issues a warning and logs to console .', ({ consoleDebug, onWarning }) => {
 			mount(NcAppSidebarTabs, {
 				slots: {
 					default: [

tests/unit/components/NcHighlight/NcHighlight.spec.js

@@ -3,7 +3,7 @@
  *
  * @author Raimund Schlüßler <raimund.schluessler@mailbox.org>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as
@@ -21,6 +21,8 @@
  */
 
 import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
 import NcHighlight from '../../../../src/components/NcHighlight/NcHighlight.vue'
 
 describe('NcHighlight.vue', () => {

tests/unit/components/NcMultiselect/NcMultiselect.spec.js

@@ -3,7 +3,7 @@
  *
  * @author Raimund Schlüßler <raimund.schluessler@mailbox.org>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as
@@ -21,13 +21,15 @@
  */
 
 import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+
 import NcMultiselect from '../../../../src/components/NcMultiselect/NcMultiselect.vue'
 
 describe('NcMultiselect.vue', () => {
 	'use strict'
 
 	it('Test that the input function is only called once on select', () => {
-		const onInput = jest.fn()
+		const onInput = vi.fn()
 		const wrapper = mount(NcMultiselect, {
 			propsData: {
 				label: 'name',
@@ -39,7 +41,7 @@ describe('NcMultiselect.vue', () => {
 			},
 			listeners: {
 				input: onInput
-			}
+			},
 		})
 		wrapper.trigger('click')
 		wrapper.find('li.multiselect__element .multiselect__option').trigger('click')