[Vue Rewrite] Add Jest for Unit tests

.eslintrc.js

@@ -7,6 +7,9 @@ module.exports = {
 		},
 		ecmaVersion: 2020,
 	},
+	env: {
+		jest: true,
+	},
 	extends: [
 		'eslint:recommended',
 		'plugin:vue/base',

.gitignore

@@ -9,6 +9,7 @@ js/
 *.clover
 .phpunit.result.cache
 site/
+coverage
 
 # python
 PKG-INFO

.stylelintignore

@@ -1 +1,2 @@
-vendor/
+vendor/
+coverage/

CHANGELOG.md

@@ -3,10 +3,11 @@ All notable changes to this project will be documented in this file.
 The format is mostly based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), older entries don't fully match.
 
 # Unreleased
-## [19.x.x]
+## [20.x.x]
 ### Changed
 - Vue Rewrite
   - Add Typescript 
+  - Add Jest for Unit Tests
 
 ## [18.x.x]
 ### Changed

babel.config.js

@@ -2,5 +2,5 @@ module.exports = {
 	plugins: [
 		'@babel/plugin-syntax-dynamic-import',
 	],
-	presets: ['@babel/preset-env'],
+	presets: ['@babel/preset-env', '@babel/preset-typescript'],
 }

package.json

@@ -10,7 +10,8 @@
     "lint": "eslint --ext .js,.vue src",
     "lint:fix": "eslint --ext .js,.vue src --fix",
     "stylelint": "stylelint **/*.css **/*.scss **/*.vue",
-    "stylelint:fix": "stylelint **/*.css **/*.scss **/*.vue --fix"
+    "stylelint:fix": "stylelint **/*.css **/*.scss **/*.vue --fix",
+    "test": "jest --verbose"
   },
   "repository": {
     "type": "git",
@@ -39,10 +40,10 @@
   "private": true,
   "homepage": "https://github.com/nextcloud/news",
   "dependencies": {
-    "@nextcloud/axios": "^1.10.0",
+    "@nextcloud/axios": "^1.11.0",
     "@nextcloud/dialogs": "^3.1.2",
     "@nextcloud/router": "^2.0.0",
-    "@nextcloud/vue": "^5.3.1",
+    "@nextcloud/vue": "^7.0.1",
     "vue": "^2.6.14",
     "vue-router": "^3.5.3",
     "vuex": "^3.6.2"
@@ -51,18 +52,21 @@
     "@babel/core": "^7.11.1",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.11.0",
+    "@babel/preset-typescript": "^7.18.6",
     "@nextcloud/babel-config": "^1.0.0",
     "@nextcloud/browserslist-config": "^2.2.0",
     "@nextcloud/eslint-config": "^8.0.0",
     "@nextcloud/eslint-plugin": "^2.0.0",
     "@nextcloud/stylelint-config": "^2.1.2",
     "@nextcloud/webpack-vue-config": "^5.1.0",
+    "@types/jest": "^29.1.1",
     "@types/webpack-env": "^1.17.0",
     "@typescript-eslint/eslint-plugin": "^5.27.1",
     "@typescript-eslint/parser": "^5.27.1",
-    "@vue/eslint-config-standard": "^7.0.0",
-    "@vue/eslint-config-typescript": "^10.0.0",
-    "css-loader": "^6.7.1",
+    "@vue/eslint-config-standard": "^8.0.1",
+    "@vue/eslint-config-typescript": "^11.0.2",
+    "@vue/test-utils": "^1.3.0",
+    "babel-core": "^7.0.0-0",
     "eslint": "^8.6.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-import-resolver-webpack": "^0.12.2",
@@ -71,37 +75,62 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-standard": "^4.0.1",
-    "eslint-plugin-vue": "^8.7.1",
+    "eslint-plugin-vue": "^9.5.1",
     "eslint-webpack-plugin": "^3.1.1",
-    "file-loader": "^6.0.0",
-    "jasmine-core": "^3.5.0",
-    "jquery": "^3.5.1",
-    "jshint": "^2.11.1",
-    "karma": "^6.4.0",
-    "karma-chrome-launcher": "^3.1.0",
-    "karma-coverage": "^2.0.2",
-    "karma-firefox-launcher": "^1.3.0",
-    "karma-jasmine": "^2.0.1",
-    "linkifyjs": "^3.0.5",
-    "minimatch": "^3.0.4",
-    "natives": "^1.1.6",
-    "node-polyfill-webpack-plugin": "^1.1.4",
-    "node-sass": "^7.0.1",
-    "postcss": "^8.4.14",
-    "postcss-html": "^1.4.1",
-    "sass-loader": "^12.6.0",
-    "style-loader": "^3.3.1",
+    "jest": "^29.1.1",
+    "jest-environment-jsdom": "^29.1.1",
+    "jest-serializer-vue": "^2.0.2",
     "stylelint": "^14.8.4",
-    "stylelint-config-recommended-scss": "^5.0.2",
+    "stylelint-config-recommended-scss": "^7.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
     "stylelint-webpack-plugin": "^2.1.0",
-    "ts-loader": "^9.3.0",
+    "ts-jest": "^29.0.3",
+    "ts-loader": "^9.4.1",
     "typescript": "^4.7.2",
-    "url-loader": "^4.1.0",
     "vue-eslint-parser": "^9.0.2",
+    "vue-jest": "^3.0.7",
     "vue-loader": "^15.9.8",
     "vue-template-compiler": "^2.6.14",
     "webpack": "^5.72.1",
     "webpack-cli": "^4.9.2"
+  },
+  "jest": {
+    "preset": "ts-jest",
+    "moduleFileExtensions": [
+      "js",
+      "vue",
+      "ts"
+    ],
+    "moduleNameMapper": {
+      "^@/(.*)$": "<rootDir>/src/$1",
+      "^Components/(.*)$": "<rootDir>/src/components/$1"
+    },
+    "testEnvironment": "jsdom",
+    "transform": {
+      ".*\\.(vue)$": "vue-jest",
+      "^.+\\.ts?$": "ts-jest"
+    },
+    "transformIgnorePatterns": [
+      "/node_modules/(?!(@nextcloud)|(vue-material-design-icons))"
+    ],
+    "snapshotSerializers": [
+      "jest-serializer-vue"
+    ],
+    "setupFilesAfterEnv": [
+      "./tests/javascript/unit/setup.ts"
+    ],
+    "coverageDirectory": "./coverage/",
+    "collectCoverage": false,
+    "collectCoverageFrom": [
+      "<rootDir>/src/**/*.{js,vue,ts}",
+      "!**/node_modules/**"
+    ],
+    "coverageReporters": [
+      "json",
+      "text",
+      "html",
+      "lcov",
+      "clover"
+    ]
   }
 }

src/App.vue

@@ -1,24 +1,24 @@
 <template>
-	<Content app-name="news">
+	<NcContent app-name="news">
 		<Sidebar />
-		<AppContent>
+		<NcAppContent>
 			<router-view />
-		</AppContent>
-	</Content>
+		</NcAppContent>
+	</NcContent>
 </template>
 
 <script lang="ts">
 
 import Vue from 'vue'
-import Content from '@nextcloud/vue/dist/Components/Content'
-import AppContent from '@nextcloud/vue/dist/Components/AppContent'
+import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
+import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import Sidebar from './components/Sidebar.vue'
 
 export default Vue.extend({
 	components: {
-		Content,
+		NcContent,
 		Sidebar,
-		AppContent,
+		NcAppContent,
 	},
 	created() {
 		this.$store.dispatch('loadFolder')

src/components/AddFeed.vue

@@ -1,5 +1,5 @@
 <template>
-	<Modal @close="$emit('close')">
+	<NcModal @close="$emit('close')">
 		<div id="new-feed" news-add-feed="Navigation.feed">
 			<form ng-submit="Navigation.createFeed(Navigation.feed)"
 				ng-init="Navigation.feed.autoDiscover=true"
@@ -25,11 +25,11 @@
 					</p>
 
 					<!-- select a folder -->
-					<CheckboxRadioSwitch :checked.sync="createNewFolder" type="switch">
+					<NcCheckboxRadioSwitch :checked.sync="createNewFolder" type="switch">
 						{{ t("news", "New folder") }}?
-					</CheckboxRadioSwitch>
+					</NcCheckboxRadioSwitch>
 
-					<Multiselect v-if="!createNewFolder"
+					<NcMultiselect v-if="!createNewFolder && folders"
 						v-model="folder"
 						:options="folders"
 						track-by="id"
@@ -58,9 +58,9 @@
 
 					<!-- basic auth -->
 
-					<CheckboxRadioSwitch :checked.sync="withBasicAuth" type="switch">
+					<NcCheckboxRadioSwitch :checked.sync="withBasicAuth" type="switch">
 						{{ t("news", "Credentials") }}?
-					</CheckboxRadioSwitch>
+					</NcCheckboxRadioSwitch>
 
 					<div v-if="withBasicAuth" class="add-feed-basicauth">
 						<p class="warning">
@@ -69,7 +69,7 @@
 									"news",
 									"HTTP Basic Auth credentials must be stored unencrypted! Everyone with access to the server or database will be able to access them!"
 								)
-							}}>
+							}}
 						</p>
 						<input type="text"
 							ng-model="Navigation.feed.user"
@@ -84,11 +84,11 @@
 							autocomplete="new-password">
 					</div>
 
-					<CheckboxRadioSwitch :checked.sync="autoDiscover" type="switch">
+					<NcCheckboxRadioSwitch :checked.sync="autoDiscover" type="switch">
 						{{ t("news", "Auto discover Feed") }}?
-					</CheckboxRadioSwitch>
+					</NcCheckboxRadioSwitch>
 
-					<Button :wide="true"
+					<NcButton :wide="true"
 						type="primary"
 						ng-disabled="Navigation.feedUrlExists(Navigation.feed.url) ||
 													(
@@ -97,20 +97,20 @@
 													)"
 						@click="addFeed()">
 						{{ t("news", "Subscribe") }}
-					</Button>
+					</NcButton>
 				</fieldset>
 			</form>
 		</div>
-	</Modal>
+	</NcModal>
 </template>
 
 <script lang="ts">
 
 import Vue from 'vue'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
-import Button from '@nextcloud/vue/dist/Components/Button'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 import { Folder } from '../types/Folder.vue'
 import { Feed } from '../types/Feed.vue'
 
@@ -126,10 +126,10 @@ type AddFeedState = {
 
 export default Vue.extend({
 	components: {
-		Modal,
-		CheckboxRadioSwitch,
-		Button,
-		Multiselect,
+		NcModal,
+		NcCheckboxRadioSwitch,
+		NcButton,
+		NcMultiselect,
 	},
 	props: {
 		feed: {
@@ -146,7 +146,7 @@ export default Vue.extend({
 		}
 	},
 	computed: {
-		folders() {
+		folders(): Folder[] {
 			return this.$store.state.folders
 		},
 	},

src/components/Explore.vue

@@ -22,9 +22,9 @@
 						<img :src="entry.image">
 					</div>
 				</div>
-				<Button @click="subscribe(entry.feed)">
+				<NcButton @click="subscribe(entry.feed)">
 					{{ t("news", "Subscribe to") }} {{ entry.title }}
-				</Button>
+				</NcButton>
 			</div>
 		</div>
 	</div>
@@ -33,16 +33,16 @@
 <script lang="ts">
 
 import Vue from 'vue'
-import Button from '@nextcloud/vue/dist/Components/Button'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import axios from '@nextcloud/axios'
 import AddFeed from './AddFeed.vue'
-import { generateUrl } from '@nextcloud/router'
+import * as router from '@nextcloud/router'
 import { ExploreSite } from '../types/ExploreSite.vue'
 import { Feed } from '../types/Feed.vue'
 
 const ExploreComponent = Vue.extend({
 	components: {
-		Button,
+		NcButton,
 		AddFeed,
 	},
 	data: () => {
@@ -56,15 +56,15 @@ const ExploreComponent = Vue.extend({
 			showAddFeed,
 		}
 	},
-	created() {
-		this.sites()
+	async created() {
+		await this.sites()
 	},
 
 	methods: {
 		async sites() {
-			const settings = await axios.get(generateUrl('/apps/news/settings'))
+			const settings = await axios.get(router.generateUrl('/apps/news/settings'))
 
-			const exploreUrl = settings.data.settings.exploreUrl + 'feeds.en.json'
+			const exploreUrl = settings.data.settings?.exploreUrl + 'feeds.en.json'
 			const explore = await axios.get(exploreUrl)
 
 			Object.keys(explore.data).forEach((key) =>