fix(tests): use shallowMount instead of mount to only unit test one c…

…omponent Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
nextcloud-libraries · Oct 6, 2023 · 05dee3a · 05dee3a
1 parent 46b7572
commit 05dee3a
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 16 deletions.
diff --git a/lib/components/FilePicker/FileList.spec.ts b/lib/components/FilePicker/FileList.spec.ts
@@ -20,16 +20,17 @@
  *
  */
 
-import { mount } from '@vue/test-utils'
+import { mount, shallowMount } from '@vue/test-utils'
 import { beforeAll, describe, expect, it, vi } from 'vitest'
 
 import FileList from './FileList.vue'
 import { File, Folder } from '@nextcloud/files'
+import { nextTick } from 'vue'
 
 const axios = vi.hoisted(() => ({
 	get: vi.fn(() => new Promise(() => {})),
 }))
-vi.mock('axios', () => axios)
+vi.mock('@nextcloud/axios', () => ({ default: axios }))
 
 const exampleNodes = [
 	new File({
@@ -77,7 +78,7 @@ describe('FilePicker FileList', () => {
 		const consoleError = vi.spyOn(console, 'error')
 		const consoleWarning = vi.spyOn(console, 'warn')
 
-		const wrapper = mount(FileList, {
+		const wrapper = shallowMount(FileList, {
 			propsData: {
 				currentView: 'files',
 				multiselect: false,
@@ -95,7 +96,7 @@ describe('FilePicker FileList', () => {
 	})
 
 	it('header checkbox is not shown if multiselect is `false`', () => {
-		const wrapper = mount(FileList, {
+		const wrapper = shallowMount(FileList, {
 			propsData: {
 				currentView: 'files',
 				multiselect: false,
@@ -110,7 +111,7 @@ describe('FilePicker FileList', () => {
 	})
 
 	it('header checkbox is shown if multiselect is `true`', () => {
-		const wrapper = mount(FileList, {
+		const wrapper = shallowMount(FileList, {
 			propsData: {
 				currentView: 'files',
 				multiselect: true,
@@ -131,7 +132,7 @@ describe('FilePicker FileList', () => {
 
 	it('header checkbox is checked when all nodes are selected', async () => {
 		const nodes = [...exampleNodes]
-		const wrapper = mount(FileList, {
+		const wrapper = shallowMount(FileList, {
 			propsData: {
 				currentView: 'files',
 				multiselect: true,
@@ -160,8 +161,13 @@ describe('FilePicker FileList', () => {
 					selectedFiles: [],
 					path: '/',
 				},
+				stubs: {
+					FilePreview: true,
+				},
 			})
 
+			await nextTick()
+
 			const rows = wrapper.findAll('[data-testid="file-list-row"]')
 			// all nodes are shown
 			expect(rows.length).toBe(nodes.length)
@@ -186,9 +192,16 @@ describe('FilePicker FileList', () => {
 					selectedFiles: [],
 					path: '/',
 				},
+				stubs: {
+					FilePreview: true,
+				},
 			})
 
-			await wrapper.find('[data-test="file-picker_sort-name"]').trigger('click')
+			await nextTick()
+
+			wrapper.find('[data-test="file-picker_sort-name"]').trigger('click')
+
+			await nextTick()
 
 			const rows = wrapper.findAll('.file-picker__row')
 			// all nodes are shown

diff --git a/lib/components/FilePicker/FileListRow.spec.ts b/lib/components/FilePicker/FileListRow.spec.ts
@@ -21,7 +21,7 @@
  */
 
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import { File } from '@nextcloud/files'
 
 import FileListRow from './FileListRow.vue'
@@ -39,11 +39,11 @@ describe('FilePicker: FileListRow', () => {
 		vi.restoreAllMocks()
 	})
 
-	it('is mountable', () => {
+	it('is shallowMountable', () => {
 		const consoleWarn = vi.spyOn(console, 'warn')
 		const consoleError = vi.spyOn(console, 'error')
 
-		const wrapper = mount(FileListRow, {
+		const wrapper = shallowMount(FileListRow, {
 			propsData: {
 				allowPickDirectory: true,
 				selected: false,
@@ -56,14 +56,14 @@ describe('FilePicker: FileListRow', () => {
 		// No console errors
 		expect(consoleWarn).not.toBeCalled()
 		expect(consoleError).not.toBeCalled()
-		// mounted
+		// shallowMounted
 		expect(wrapper.exists()).toBe(true)
 		expect(wrapper.element.tagName.toLowerCase()).toBe('tr')
 		expect(wrapper.find('[data-testid="file-list-row"]').isEmpty()).toBe(false)
 	})
 
 	it('shows checkbox based on `showCheckbox` property', async () => {
-		const wrapper = mount(FileListRow, {
+		const wrapper = shallowMount(FileListRow, {
 			propsData: {
 				allowPickDirectory: true,
 				selected: false,
@@ -79,7 +79,7 @@ describe('FilePicker: FileListRow', () => {
 	})
 
 	it('Click checkbox triggers select', async () => {
-		const wrapper = mount(FileListRow, {
+		const wrapper = shallowMount(FileListRow, {
 			propsData: {
 				allowPickDirectory: false,
 				selected: false,
@@ -96,7 +96,7 @@ describe('FilePicker: FileListRow', () => {
 	})
 
 	it('Click element triggers select', async () => {
-		const wrapper = mount(FileListRow, {
+		const wrapper = shallowMount(FileListRow, {
 			propsData: {
 				allowPickDirectory: false,
 				selected: false,
@@ -113,7 +113,7 @@ describe('FilePicker: FileListRow', () => {
 	})
 
 	it('Click element without checkbox triggers select', async () => {
-		const wrapper = mount(FileListRow, {
+		const wrapper = shallowMount(FileListRow, {
 			propsData: {
 				allowPickDirectory: false,
 				selected: false,
@@ -130,7 +130,7 @@ describe('FilePicker: FileListRow', () => {
 	})
 
 	it('Enter triggers select', async () => {
-		const wrapper = mount(FileListRow, {
+		const wrapper = shallowMount(FileListRow, {
 			propsData: {
 				allowPickDirectory: false,
 				selected: false,

diff --git a/lib/components/FilePicker/FilePreview.vue b/lib/components/FilePicker/FilePreview.vue
@@ -46,3 +46,9 @@ watch(previewURL, () => {
 	}
 }, { immediate: true })
 </script>
+
+<script lang="ts">
+export default {
+	name: 'FilePreview',
+}
+</script>