Add jest test for Multiselect component

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

.gitignore

@@ -18,3 +18,6 @@ yarn-error.log*
 .marginalia
 
 CHANGELOG.md
+
+# Unit test / coverage reports
+coverage

package.json

@@ -18,6 +18,7 @@
 		"build": "NODE_ENV=production webpack --progress --hide-modules --config webpack.prod.js",
 		"lint": "eslint --ext .js,.vue src",
 		"lint:fix": "eslint --ext .js,.vue src --fix",
+		"test": "jest --verbose",
 		"stylelint": "stylelint src/**/*.vue src/**/*.scss src/**/*.css",
 		"stylelint:fix": "stylelint src/**/*.vue src/**/*.scss src/**/*.css --fix",
 		"styleguide": "vue-styleguidist server",
@@ -53,7 +54,10 @@
 		"@babel/core": "^7.3.3",
 		"@babel/preset-env": "^7.3.1",
 		"@nextcloud/browserslist-config": "^1.0.0",
+		"@vue/test-utils": "^1.0.0-beta.31",
+		"babel-core": "^7.0.0-bridge.0",
 		"babel-eslint": "^10.0.1",
+		"babel-jest": "^25.1.0",
 		"babel-loader": "^8.0.5",
 		"css-loader": "^3.0.0",
 		"eslint": "^5.14.1",
@@ -67,6 +71,10 @@
 		"eslint-plugin-vue": "^6.0.1",
 		"file-loader": "^5.0.2",
 		"iconfont-plugin-webpack": "^1.1.4",
+		"jest": "^25.1.0",
+		"jest-environment-jsdom-sixteen": "^1.0.0",
+		"jest-serializer-vue": "^2.0.2",
+		"jest-transform-stub": "^2.0.0",
 		"node-sass": "^4.11.0",
 		"prettier-eslint": "^9.0.0",
 		"raw-loader": "^4.0.0",
@@ -77,6 +85,7 @@
 		"stylelint-scss": "^3.5.4",
 		"stylelint-webpack-plugin": "^0.10.5",
 		"url-loader": "^3.0.0",
+		"vue-jest": "^3.0.5",
 		"vue-loader": "^15.6.4",
 		"vue-styleguidist": "^3.14.5",
 		"vue-template-compiler": "^2.6.7",
@@ -85,6 +94,46 @@
 		"webpack-merge": "^4.2.1",
 		"webpack-node-externals": "^1.7.2"
 	},
+	"jest": {
+		"moduleFileExtensions": [
+			"js",
+			"vue"
+		],
+		"moduleNameMapper": {
+			"^@/(.*)$": "<rootDir>/src/$1",
+			"^Assets/(.*)$": "<rootDir>/src/assets/$1",
+			"^Components/(.*)$": "<rootDir>/src/components/$1",
+			"^Directives/(.*)$": "<rootDir>/src/directives/$1",
+			"^Mixins/(.*)$": "<rootDir>/src/mixins/$1",
+			"^Utils/(.*)$": "<rootDir>/src/utils/$1",
+			"^Fonts/(.*)$": "<rootDir>/src/fonts/$1"
+		},
+		"testEnvironment": "jest-environment-jsdom-sixteen",
+		"transform": {
+			"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
+			".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
+			".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
+		},
+		"snapshotSerializers": [
+			"<rootDir>/node_modules/jest-serializer-vue"
+		],
+		"setupFilesAfterEnv": [
+			"./tests/setup.js"
+		],
+		"coverageDirectory": "./coverage/",
+		"collectCoverage": false,
+		"collectCoverageFrom": [
+			"<rootDir>/src/**/*.{js,vue}",
+			"!**/node_modules/**"
+		],
+		"coverageReporters": [
+			"json",
+			"text",
+			"html",
+			"lcov",
+			"clover"
+		]
+	},
 	"browserslist": [
 		"extends @nextcloud/browserslist-config"
 	]

tests/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+	env: {
+		jest: true
+	}
+}

tests/setup.js

@@ -0,0 +1,38 @@
+/**
+ * @copyright Copyright (c) 2020 Raimund Schlüßler <raimund.schluessler@mailbox.org>
+ *
+ * @author Raimund Schlüßler <raimund.schluessler@mailbox.org>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { config } from '@vue/test-utils'
+
+// Mock nextcloud translate functions
+config.mocks.$t = function(app, string) {
+	return string
+}
+config.mocks.t = config.mocks.$t
+global.t = config.mocks.$t
+
+config.mocks.$n = function(app, singular, plural, count) {
+	return singular
+}
+config.mocks.n = config.mocks.$n
+global.n = config.mocks.$n
+
+global.SCOPE_VERSION = 1

tests/unit/components/Multiselect/Multiselect.spec.js

@@ -0,0 +1,48 @@
+/**
+ * @copyright Copyright (c) 2020 Raimund Schlüßler <raimund.schluessler@mailbox.org>
+ *
+ * @author Raimund Schlüßler <raimund.schluessler@mailbox.org>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { mount } from '@vue/test-utils'
+import Multiselect from 'Components/Multiselect/Multiselect.vue'
+
+describe('Multiselect.vue', () => {
+	'use strict'
+
+	it('Test that the input function is only called once on select', () => {
+		const onInput = jest.fn()
+		const wrapper = mount(Multiselect, {
+			propsData: {
+				label: 'name',
+				multiple: false,
+				options: [
+					{ name: 'a', key: 'a'},
+					{ name: 'b', key: 'b'}
+				]
+			},
+			listeners: {
+				input: onInput
+			}
+		})
+		wrapper.trigger('click')
+		wrapper.find('li.multiselect__element .multiselect__option').trigger('click')
+		expect(onInput).toHaveBeenCalledTimes(1)
+	})
+})