feat: add support for unit testing using vitest in editor-ui (#4184)

* feat: add support for unit testing using vitest in editor-ui

* fix(editor): update tsconfig types and typeRoots

* chore(editor): update package-lock.json

packages/design-system/jest.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-	preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
-};

packages/design-system/package.json

@@ -42,7 +42,6 @@
     "@storybook/vue": "^6.5.10",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/vue": "^5.8.2",
-    "@types/jest": "^27.4.0",
     "@types/markdown-it": "^12.2.3",
     "@types/sanitize-html": "^2.6.2",
     "@vue/cli-plugin-babel": "~4.5.19",

packages/design-system/tsconfig.json

@@ -10,7 +10,7 @@
 		"allowJs": true,
 		"allowSyntheticDefaultImports": true,
 		"baseUrl": ".",
-		"types": ["webpack-env", "jest", "vitest/globals"],
+		"types": ["webpack-env", "vitest/globals"],
 		"typeRoots": ["@testing-library", "@types"],
 		"paths": {
 			"@/*": ["src/*"]

packages/editor-ui/package.json

@@ -20,6 +20,8 @@
     "lintfix": "tslint --fix -p tsconfig.json -c tslint.json && eslint . --fix",
     "format": "cd ../.. && node_modules/prettier/bin-prettier.js packages/editor-ui/**/**.ts --write",
     "serve": "cross-env VUE_APP_URL_BASE_API=http://localhost:5678/ vite --host 0.0.0.0 --port 8080 dev",
+    "test": "vitest run",
+    "test:ci": "vitest run --coverage",
     "test:dev": "vitest"
   },
   "dependencies": {
@@ -69,10 +71,11 @@
   "devDependencies": {
     "@intlify/vue-i18n-loader": "^1.1.0",
     "@n8n_io/eslint-config": "",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/vue": "^6.6.1",
     "@types/dateformat": "^3.0.0",
     "@types/express": "^4.17.6",
     "@types/file-saver": "^2.0.1",
-    "@types/jest": "^27.4.0",
     "@types/lodash.camelcase": "^4.3.6",
     "@types/lodash.get": "^4.4.6",
     "@types/lodash.set": "^4.3.6",
@@ -83,12 +86,12 @@
     "@vitejs/plugin-legacy": "^1.8.2",
     "@vue/cli-plugin-babel": "~4.5.19",
     "@vue/cli-plugin-typescript": "~4.5.19",
-    "@vue/cli-plugin-unit-jest": "~4.5.19",
     "@vue/cli-service": "~4.5.19",
     "@vue/test-utils": "^1.0.3",
     "@yfwz100/vite-plugin-vue2-i18n": "^1.0.0-2",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
+    "c8": "^7.12.0",
     "cross-env": "^7.0.2",
     "eslint": "^8.0.0",
     "eslint-plugin-import": "^2.23.4",
@@ -97,7 +100,6 @@
     "sass": "^1.54.9",
     "sass-loader": "^8.0.2",
     "string-template-parser": "^1.2.6",
-    "ts-jest": "^27.1.3",
     "tslint": "^6.1.2",
     "typescript": "~4.6.0",
     "vite": "2.9",

packages/editor-ui/src/__tests__/permissions.spec.ts

@@ -0,0 +1,47 @@
+import { parsePermissionsTable } from '@/permissions';
+import { IUser } from "@/Interface";
+
+describe('parsePermissionsTable()', () => {
+	const user: IUser = {
+		id: "1",
+		firstName: "John",
+		lastName: "Doe",
+		isDefaultUser: false,
+		isOwner: true,
+		isPending: false,
+		isPendingUser: false,
+	};
+
+	it('should return permissions object using generic permissions table', () => {
+		const permissions = parsePermissionsTable(user, []);
+
+		expect(permissions.isInstanceOwner).toBe(true);
+	});
+
+	it('should set permission based on permissions table row test function', () => {
+		const permissions = parsePermissionsTable(user, [
+			{ name: 'canRead', test: () => true },
+			{ name: 'canUpdate', test: () => false },
+		]);
+
+		expect(permissions.canRead).toBe(true);
+		expect(permissions.canUpdate).toBe(false);
+	});
+
+	it('should set permission based on previously computed permission', () => {
+		const permissions = parsePermissionsTable(user, [
+			{ name: 'canRead', test: ['isInstanceOwner'] },
+		]);
+
+		expect(permissions.canRead).toBe(true);
+	});
+
+	it('should set permission based on multiple previously computed permissions', () => {
+		const permissions = parsePermissionsTable(user, [
+			{ name: 'isResourceOwner', test: ['isInstanceOwner'] },
+			{ name: 'canRead', test: ['isInstanceOwner', 'isResourceOwner'] },
+		]);
+
+		expect(permissions.canRead).toBe(true);
+	});
+});

packages/editor-ui/src/__tests__/setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

packages/editor-ui/src/permissions.ts

@@ -32,7 +32,7 @@ export type IPermissionsTable = IPermissionsTableRow[];
  * @param user
  * @param table
  */
-const parsePermissionsTable = (user: IUser, table: IPermissionsTable): IPermissions => {
+export const parsePermissionsTable = (user: IUser, table: IPermissionsTable): IPermissions => {
 	const genericTable = [
 		{ name: UserRole.InstanceOwner, test: () => user.isOwner },
 	];

packages/editor-ui/tsconfig.json

@@ -10,11 +10,7 @@
 		"importHelpers": true,
 		"allowSyntheticDefaultImports": true,
 		"baseUrl": ".",
-		"typeRoots": [
-			"@types",
-			"element-ui/types"
-		],
-		"types": ["webpack-env", "jest"],
+		"types": ["vitest/globals"],
 		"paths": {
 			"@/*": ["src/*"]
 		},