chore(deps): update dependency vitest to v0.22.1 (#2276)

Reviewed-on: vikunja/frontend#2276
Co-authored-by: renovate <renovatebot@kolaente.de>
Co-committed-by: renovate <renovatebot@kolaente.de>

README.md

@@ -4,7 +4,7 @@
 
 [![Build Status](https://drone.kolaente.de/api/badges/vikunja/frontend/status.svg)](https://drone.kolaente.de/vikunja/frontend)
 [![License: AGPL v3](https://img.shields.io/badge/License-AGPL%20v3-blue.svg)](LICENSE)
-[![Download](https://img.shields.io/badge/download-v0.18.2-brightgreen.svg)](https://dl.vikunja.io)
+[![Download](https://img.shields.io/badge/download-v0.19.1-brightgreen.svg)](https://dl.vikunja.io)
 [![Translation](https://badges.crowdin.net/vikunja/localized.svg)](https://crowdin.com/project/vikunja)
 
 This is the web frontend for Vikunja, written in Vue.js.

cliff.toml

@@ -0,0 +1,59 @@
+[changelog]
+body = """
+{% if version %}\
+    ## [{{ version | trim_start_matches(pat="v") }}] - {{ timestamp | date(format="%Y-%m-%d") }}
+{% else %}\
+    ## [unreleased]
+{% endif %}\
+
+
+{% for group, commits in commits | group_by(attribute="group") %}
+    ### {{ group | upper_first }}
+    {% for commit in commits
+    | filter(attribute="scope")
+    | sort(attribute="scope") %}
+        * *({{commit.scope}})* {{ commit.message | upper_first }}
+        {%- if commit.breaking %}
+        {% raw %}  {% endraw %}- **BREAKING**: {{commit.breaking_description}}
+        {%- endif -%}
+    {%- endfor -%}
+    {%- for commit in commits %}
+        {%- if commit.scope -%}
+        {% else -%}
+            * {{ commit.message | upper_first }} ([{{ commit.id | truncate(length=7, end="") }}]({{ commit.id }}))
+            {% if commit.breaking -%}
+            {% raw %}  {% endraw %}- **BREAKING**: {{commit.breaking_description}}
+            {% endif -%}
+        {% endif -%}
+    {% endfor -%}
+    {% raw %}\n{% endraw %}\
+{% endfor %}\n
+
+"""
+#{% for group, commits in commits | group_by(attribute="group") %}
+#    ### {{ group | upper_first }}
+#    {% for commit in commits %}\
+#        - {% if commit.breaking %}[**breaking**] {% endif %}{{ commit.message | upper_first }} ([{{ commit.id | truncate(length=7, end="") }}]({{ commit.id }}))
+#    {% endfor %}\
+#{% endfor %}\n
+# remove the leading and trailing whitespace from the template
+trim = true
+
+[git]
+conventional_commits = true
+filter_unconventional = false
+commit_parsers = [
+    { message = ".*(deps).*", group = "Dependencies"},
+    { message = "^feat", group = "Features"},
+    { message = "^fix", group = "Bug Fixes"},
+    { message = "^doc", group = "Documentation"},
+    { message = "^perf", group = "Performance"},
+    { message = "^refactor", group = "Refactor"},
+    { message = "^style", group = "Styling"},
+    { message = "^test", group = "Testing"},
+    { message = "^chore\\(release\\): prepare for", skip = true},
+    { message = "^chore", group = "Miscellaneous Tasks"},
+    { body = ".*security", group = "Security"},
+    { message = ".*", group = "Other", default_scope = "other"}, # Everything that's not a conventional commit goes into the "Other" category
+]
+

cypress/e2e/list/prepareLists.ts

@@ -3,14 +3,19 @@ import {UserFactory} from '../../factories/user'
 import {NamespaceFactory} from '../../factories/namespace'
 import {TaskFactory} from '../../factories/task'
 
+export function createLists() {
+	UserFactory.create(1)
+	NamespaceFactory.create(1)
+	const lists = ListFactory.create(1, {
+		title: 'First List'
+	})
+	TaskFactory.truncate()
+	return lists
+}
+
 export function prepareLists(setLists = () => {}) {
 	beforeEach(() => {
-		UserFactory.create(1)
-		NamespaceFactory.create(1)
-		const lists = ListFactory.create(1, {
-			title: 'First List'
-		})
+		const lists = createLists()
 		setLists(lists)
-		TaskFactory.truncate()
 	})
 }

cypress/e2e/user/logout.spec.ts

@@ -1,16 +1,44 @@
 import '../../support/authenticateUser'
+import {createLists} from '../list/prepareLists'
+
+function logout() {
+	cy.get('.navbar .user .username')
+		.click()
+	cy.get('.navbar .user .dropdown-menu .dropdown-item')
+		.contains('Logout')
+		.click()
+}
 
 describe('Log out', () => {
 	it('Logs the user out', () => {
 		cy.visit('/')
 
-		cy.get('.navbar .user .username')
-			.click()
-		cy.get('.navbar .user .dropdown-menu .dropdown-item')
-			.contains('Logout')
-			.click()
+		expect(localStorage.getItem('token')).to.not.eq(null)
+
+		logout()
 
 		cy.url()
 			.should('contain', '/login')
+			.then(() => {
+				expect(localStorage.getItem('token')).to.eq(null)
+			})
+	})
+	
+	it.skip('Should clear the list history after logging the user out', () => {
+		const lists = createLists()
+		cy.visit(`/lists/${lists[0].id}`)
+			.then(() => {
+				expect(localStorage.getItem('listHistory')).to.not.eq(null)
+			})
+
+		logout()
+
+		cy.wait(1000) // This makes re-loading of the list and associated entities (and the resulting error) visible
+		
+		cy.url()
+			.should('contain', '/login')
+			.then(() => {
+				expect(localStorage.getItem('listHistory')).to.eq(null)
+			})
 	})
 })

package.json

@@ -20,12 +20,12 @@
   "dependencies": {
     "@github/hotkey": "2.0.1",
     "@kyvg/vue3-notification": "2.3.6",
-    "@sentry/tracing": "7.8.0",
-    "@sentry/vue": "7.8.0",
+    "@sentry/tracing": "7.11.1",
+    "@sentry/vue": "7.11.1",
     "@types/is-touch-device": "1.0.0",
     "@types/sortablejs": "1.13.0",
-    "@vueuse/core": "9.0.2",
-    "@vueuse/router": "9.0.2",
+    "@vueuse/core": "9.1.0",
+    "@vueuse/router": "9.1.0",
     "blurhash": "1.1.5",
     "bulma-css-variables": "0.9.33",
     "camel-case": "4.1.2",
@@ -48,53 +48,53 @@
     "vue-advanced-cropper": "2.8.3",
     "vue-drag-resize": "2.0.3",
     "vue-flatpickr-component": "9.0.6",
-    "vue-i18n": "9.2.0-beta.40",
+    "vue-i18n": "9.2.2",
     "vue-router": "4.1.3",
     "vuex": "4.0.2",
-    "workbox-precaching": "6.5.3",
+    "workbox-precaching": "6.5.4",
     "zhyswan-vuedraggable": "4.1.3"
   },
   "devDependencies": {
     "@4tw/cypress-drag-drop": "2.2.1",
-    "@cypress/vite-dev-server": "3.0.0",
-    "@cypress/vue": "4.0.0",
-    "@faker-js/faker": "7.3.0",
+    "@cypress/vite-dev-server": "3.1.1",
+    "@cypress/vue": "4.1.0",
+    "@faker-js/faker": "7.4.0",
     "@fortawesome/fontawesome-svg-core": "6.1.2",
     "@fortawesome/free-regular-svg-icons": "6.1.2",
     "@fortawesome/free-solid-svg-icons": "6.1.2",
     "@fortawesome/vue-fontawesome": "3.0.1",
     "@types/flexsearch": "0.7.3",
-    "@typescript-eslint/eslint-plugin": "5.31.0",
-    "@typescript-eslint/parser": "5.31.0",
-    "@vitejs/plugin-legacy": "2.0.0",
-    "@vitejs/plugin-vue": "3.0.1",
+    "@typescript-eslint/eslint-plugin": "5.33.1",
+    "@typescript-eslint/parser": "5.33.1",
+    "@vitejs/plugin-legacy": "2.0.1",
+    "@vitejs/plugin-vue": "3.0.3",
     "@vue/eslint-config-typescript": "11.0.0",
     "@vue/test-utils": "2.0.2",
     "@vue/tsconfig": "0.1.3",
     "autoprefixer": "10.4.8",
     "axios": "0.27.2",
     "browserslist": "4.21.3",
-    "caniuse-lite": "1.0.30001373",
-    "cypress": "10.3.1",
-    "esbuild": "0.14.51",
-    "eslint": "8.20.0",
+    "caniuse-lite": "1.0.30001376",
+    "cypress": "10.6.0",
+    "esbuild": "0.15.5",
+    "eslint": "8.22.0",
     "eslint-plugin-vue": "9.3.0",
     "express": "4.18.1",
     "happy-dom": "6.0.4",
-    "netlify-cli": "10.13.0",
-    "postcss": "8.4.14",
-    "postcss-preset-env": "7.7.2",
-    "rollup": "2.77.2",
+    "netlify-cli": "10.17.4",
+    "postcss": "8.4.16",
+    "postcss-preset-env": "7.8.0",
+    "rollup": "2.78.0",
     "rollup-plugin-visualizer": "5.7.1",
-    "sass": "1.54.0",
+    "sass": "1.54.4",
     "typescript": "4.7.4",
-    "vite": "3.0.4",
+    "vite": "3.0.8",
     "vite-plugin-pwa": "0.12.3",
     "vite-svg-loader": "3.4.0",
-    "vitest": "0.20.2",
-    "vue-tsc": "0.39.4",
+    "vitest": "0.22.1",
+    "vue-tsc": "0.40.1",
     "wait-on": "6.0.1",
-    "workbox-cli": "6.5.3"
+    "workbox-cli": "6.5.4"
   },
   "postcss": {
     "plugins": {

src/components/base/BaseButton.vue

@@ -7,7 +7,7 @@
 		:disabled="disabled || undefined"
 		ref="button"
 	>
-		<slot />
+		<slot/>
 	</component>
 </template>
 
@@ -16,7 +16,7 @@ import {defineComponent} from 'vue'
 
 // see https://v3.vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script
 export default defineComponent({
-  inheritAttrs: false,
+	inheritAttrs: false,
 })
 </script>
 
@@ -30,11 +30,11 @@ export default defineComponent({
 
 // NOTE: Do NOT use buttons with @click to push routes. => Use router-links instead!
 
-import { ref, watchEffect, computed, useAttrs, PropType } from 'vue'
+import {ref, watchEffect, computed, useAttrs, PropType} from 'vue'
 
-const BASE_BUTTON_TYPES_MAP =  Object.freeze({
-  button: 'button',
-  submit: 'submit',
+const BASE_BUTTON_TYPES_MAP = Object.freeze({
+	button: 'button',
+	submit: 'submit',
 })
 
 type BaseButtonTypes = keyof typeof BASE_BUTTON_TYPES_MAP
@@ -52,6 +52,7 @@ const props = defineProps({
 
 
 const componentNodeName = ref<Node['nodeName']>('button')
+
 interface ElementBindings {
 	type?: string;
 	rel?: string;
@@ -92,6 +93,7 @@ watchEffect(() => {
 const isButton = computed(() => componentNodeName.value === 'button')
 
 const button = ref()
+
 function focus() {
 	button.value.focus()
 }
@@ -123,7 +125,7 @@ defineExpose({
 	user-select: none;
 	pointer-events: auto; // disable possible resets
 
-	&:focus {
+	&:focus, &.is-focused {
 		outline: transparent;
 	}
 

src/components/home/navigation.vue

@@ -243,7 +243,7 @@ function updateActiveLists(namespace: NamespaceModel, activeLists: ListModel[])
 const listUpdating = ref<{ [id: NamespaceModel['id']]: boolean }>({})
 
 async function saveListPosition(e: SortableEvent) {
-	if (!e.newIndex) return
+	if (!e.newIndex && e.newIndex !== 0) return
 
 	const namespaceId = parseInt(e.to.dataset.namespaceId as string)
 	const newNamespaceIndex = parseInt(e.to.dataset.namespaceIndex as string)

src/components/list/partials/filters.vue

@@ -499,6 +499,14 @@ export default defineComponent({
 			if (typeof this.filters[filterName] === 'undefined' || this.filters[filterName] === '') {
 				return
 			}
+			
+			// Don't load things if we already have something loaded.
+			// This is not the most ideal solution because it prevents a re-population when filters are changed 
+			// from the outside. It is still fine because we're not changing them from the outside, other than 
+			// loading them initially.
+			if(this[kind].length > 0) {
+				return
+			}
 
 			this[kind] = await this[`${servicePrefix}Service`].getAll({}, {s: this.filters[filterName]})
 		},
@@ -532,6 +540,7 @@ export default defineComponent({
 
 			if (query === '') {
 				this.clear(kind)
+				return
 			}
 
 			const response = await this[`${kind}Service`].getAll({}, {s: query})
@@ -558,7 +567,7 @@ export default defineComponent({
 
 			let ids = []
 			this[kind].forEach(u => {
-				ids.push(u.id)
+				ids.push(kind === 'users' ? u.username : u.id)
 			})
 
 			this.filters[filterName] = ids.join(',')

src/components/tasks/edit-task.vue

@@ -93,12 +93,9 @@ import {success} from '@/message'
 const {t} = useI18n({useScope: 'global'})
 const router = useRouter()
 
-const props = defineProps({
-	task: {
-		type: TaskModel,
-		required: true,
-	},
-})
+const props = defineProps<{
+	task?: TaskModel | null,
+}>()
 
 const taskService = shallowReactive(new TaskService())
 

src/components/tasks/partials/repeatAfter.vue

@@ -82,7 +82,7 @@ const props = defineProps({
 	},
 })
 
-const {t} = useI18n()
+const {t} = useI18n({useScope: 'global'})
 
 const emit = defineEmits(['update:modelValue', 'change'])
 

src/helpers/parseDateOrNull.ts

@@ -1,13 +1,14 @@
 /**
  * Make date objects from timestamps
-*/
+ */
 export function parseDateOrNull(date) {
 	if (date instanceof Date) {
 		return date
 	}
 
-	if (date && !date.startsWith('0001')) {
+	if ((typeof date === 'string' || date instanceof String) && !date.startsWith('0001')) {
 		return new Date(date)
 	}
+
 	return null
 }

src/store/modules/auth.ts

@@ -287,6 +287,7 @@ export default {
 		},
 		logout(ctx) {
 			removeToken()
+			window.localStorage.clear() // Clear all settings and history we might have saved in local storage.
 			ctx.dispatch('checkAuth')
 		},
 	},

src/styles/custom-properties/colors.scss

@@ -245,6 +245,7 @@
   --border: var(--grey-200);
   --input-disabled-background-color: var(--grey-100);
   --input-disabled-border-color: var(--grey-300);
+  --progress-value-background-color: var(--grey-500);
   // END Overrides of Bulma defaults
 
 
@@ -286,12 +287,15 @@
       // Elements that rely on Bulma defaults in light mode but
       // need to be overriden in dark mode
       --input-placeholder-color: hsla(var(--grey-900-hsl), 0.6);
-      --tag-color: var(--grey-800);
+      --tag-color: var(--grey-300);
       --table-row-hover-background-color: var(--grey-100);
       --dropdown-item-hover-background-color: var(--grey-100);
       --dropdown-item-hover-color: var(--text);
+      --pre-background: var(--grey-200);
       --button-text-hover-background-color: var(--grey-200);
       --button-hover-color: var(--grey-600);
+      --button-active-color: var(--grey-600);
+      --button-focus-color: var(--grey-600);
 
       // Custom color variables we need to override
       --card-border-color: hsla(var(--grey-100-hsl), 0.3);

src/styles/theme/theme.scss

@@ -52,11 +52,6 @@ h6 {
 	margin: 0 0.5rem 0 0;
 	flex: 3 1 auto;
 
-	&::-moz-progress-bar,
-	&::-webkit-progress-value {
-	  background: var(--grey-500);
-	}
-
 	@media screen and (max-width: $tablet) {
 		margin: 0.5rem 0 0 0;
 		order: 1;

src/sw.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 /* eslint-disable no-undef */
 
-const workboxVersion = 'v6.5.3'
+const workboxVersion = 'v6.5.4'
 importScripts( `/workbox-${workboxVersion}/workbox-sw.js`)
 workbox.setConfig({
 	modulePathPrefix: `/workbox-${workboxVersion}`,

src/views/list/ListList.vue

@@ -288,19 +288,9 @@ export default defineComponent({
 			this.$store.commit(HAS_TASKS, true)
 		},
 		editTask(id) {
-			// Find the selected task and set it to the current object
-			let theTask = this.getTaskById(id) // Somehow this does not work if we directly assign this to this.taskEditTask
-			this.taskEditTask = theTask
+			this.taskEditTask = {...this.tasks.find(t => t.id === parseInt(id))}
 			this.isTaskEdit = true
 		},
-		getTaskById(id) {
-			for (const t in this.tasks) {
-				if (this.tasks[t].id === parseInt(id)) {
-					return this.tasks[t]
-				}
-			}
-			return {} // FIXME: This should probably throw something to make it clear to the user noting was found
-		},
 		updateTasks(updatedTask) {
 			for (const t in this.tasks) {
 				if (this.tasks[t].id === updatedTask.id) {

src/views/namespaces/settings/edit.vue

@@ -71,7 +71,7 @@ import NamespaceModel from '@/models/namespace'
 import {useI18n} from 'vue-i18n'
 import {useTitle} from '@/composables/useTitle'
 
-const {t} = useI18n()
+const {t} = useI18n({useScope: 'global'})
 const store = useStore()
 
 const namespaceService = ref(new NamespaceService())

src/views/user/OpenIdAuth.vue

@@ -25,7 +25,7 @@ import {getErrorText} from '@/message'
 import Message from '@/components/misc/message.vue'
 import {clearLastVisited, getLastVisited} from '@/helpers/saveLastVisited'
 
-const {t} = useI18n()
+const {t} = useI18n({useScope: 'global'})
 
 const router = useRouter()
 const route = useRoute()