test(files-list): add FilesList rendering regression spec

Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>

Author: vitormattos

src/tests/views/FilesList/FilesList.spec.ts

@@ -0,0 +1,196 @@
+/**
+ * SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+
+import FilesList from '../../../views/FilesList/FilesList.vue'
+import { useFilesStore } from '../../../store/files.js'
+import { useUserConfigStore } from '../../../store/userconfig.js'
+
+vi.mock('@nextcloud/l10n', () => ({
+	t: vi.fn((_app: string, text: string) => text),
+}))
+
+vi.mock('@nextcloud/logger', () => ({
+	getLogger: vi.fn(() => ({
+		error: vi.fn(),
+		warn: vi.fn(),
+		info: vi.fn(),
+		debug: vi.fn(),
+	})),
+	getLoggerBuilder: vi.fn(() => ({
+		setApp: vi.fn().mockReturnThis(),
+		detectUser: vi.fn().mockReturnThis(),
+		build: vi.fn(() => ({
+			error: vi.fn(),
+			warn: vi.fn(),
+			info: vi.fn(),
+			debug: vi.fn(),
+		})),
+	})),
+}))
+
+vi.mock('@nextcloud/axios', () => ({
+	default: {
+		get: vi.fn(),
+		post: vi.fn(),
+		delete: vi.fn(),
+		patch: vi.fn(),
+	},
+}))
+
+vi.mock('@nextcloud/router', () => ({
+	generateOcsUrl: vi.fn((path: string) => `/ocs/v2.php${path}`),
+}))
+
+vi.mock('@nextcloud/auth', () => ({
+	getCurrentUser: vi.fn(() => ({
+		uid: 'testuser',
+		displayName: 'Test User',
+	})),
+}))
+
+vi.mock('@nextcloud/event-bus', () => ({
+	emit: vi.fn(),
+	subscribe: vi.fn(),
+}))
+
+vi.mock('@nextcloud/initial-state', () => ({
+	loadState: vi.fn((_app: string, _key: string, defaultValue: unknown) => defaultValue),
+}))
+
+vi.mock('@nextcloud/moment', () => ({
+	default: vi.fn(() => ({
+		format: () => 'date',
+		fromNow: () => '2 days ago',
+	})),
+}))
+
+vi.mock('@nextcloud/vue/components/NcAppContent', () => ({
+	default: { name: 'NcAppContent', template: '<div><slot /></div>' },
+}))
+vi.mock('@nextcloud/vue/components/NcBreadcrumb', () => ({
+	default: { name: 'NcBreadcrumb', template: '<div><slot name="icon" /></div>' },
+}))
+vi.mock('@nextcloud/vue/components/NcBreadcrumbs', () => ({
+	default: { name: 'NcBreadcrumbs', template: '<div><slot /><slot name="actions" /></div>' },
+}))
+vi.mock('@nextcloud/vue/components/NcButton', () => ({
+	default: { name: 'NcButton', template: '<button><slot name="icon" /></button>' },
+}))
+vi.mock('@nextcloud/vue/components/NcEmptyContent', () => ({
+	default: { name: 'NcEmptyContent', template: '<section><slot name="action" /><slot name="icon" /></section>' },
+}))
+vi.mock('@nextcloud/vue/components/NcIconSvgWrapper', () => ({
+	default: {
+		name: 'NcIconSvgWrapper',
+		props: ['path', 'svg', 'size'],
+		template: '<i class="nc-icon" :data-path="path" :data-svg="svg" />',
+	},
+}))
+vi.mock('@nextcloud/vue/components/NcLoadingIcon', () => ({
+	default: { name: 'NcLoadingIcon', template: '<span class="loading" />' },
+}))
+
+vi.mock('../../../views/FilesList/FilesListVirtual.vue', () => ({
+	default: {
+		name: 'FilesListVirtual',
+		props: ['nodes', 'loading'],
+		template: '<div class="virtual-list"><slot name="empty" /></div>',
+	},
+}))
+
+vi.mock('../../../components/Request/RequestPicker.vue', () => ({
+	default: {
+		name: 'RequestPicker',
+		template: '<div class="request-picker-stub" />',
+	},
+}))
+
+const routeMock = {
+	query: {},
+}
+
+describe('FilesList.vue rendering rules', () => {
+	beforeEach(() => {
+		setActivePinia(createPinia())
+		vi.clearAllMocks()
+	})
+
+	function mountComponent() {
+		return mount(FilesList, {
+			global: {
+				mocks: {
+					$route: routeMock,
+				},
+				stubs: {
+					ListViewIcon: {
+						template: '<i class="list-view-icon" />',
+					},
+				},
+			},
+		})
+	}
+
+	it('exposes mdi icons from setup for template bindings', async () => {
+		const filesStore = useFilesStore()
+		vi.spyOn(filesStore, 'getAllFiles').mockResolvedValue({})
+
+		const wrapper = mountComponent()
+		await flushPromises()
+
+		expect(wrapper.vm.mdiFolder).toBeTruthy()
+		expect(wrapper.vm.mdiViewGrid).toBeTruthy()
+	})
+
+	it('shows empty-state request action when user can request sign', async () => {
+		const filesStore = useFilesStore()
+		const userConfigStore = useUserConfigStore()
+
+		filesStore.canRequestSign = true
+		filesStore.files = {}
+		filesStore.ordered = []
+		userConfigStore.files_list_grid_view = false
+		vi.spyOn(filesStore, 'getAllFiles').mockResolvedValue({})
+
+		const wrapper = mountComponent()
+		await flushPromises()
+
+		const pickers = wrapper.findAll('.request-picker-stub')
+		expect(pickers).toHaveLength(2)
+	})
+
+	it('hides empty-state request action when user cannot request sign', async () => {
+		const filesStore = useFilesStore()
+		const userConfigStore = useUserConfigStore()
+
+		filesStore.canRequestSign = false
+		filesStore.files = {}
+		filesStore.ordered = []
+		userConfigStore.files_list_grid_view = false
+		vi.spyOn(filesStore, 'getAllFiles').mockResolvedValue({})
+
+		const wrapper = mountComponent()
+		await flushPromises()
+
+		const pickers = wrapper.findAll('.request-picker-stub')
+		expect(pickers).toHaveLength(1)
+	})
+
+	it('renders grid toggle icon path when in list mode', async () => {
+		const filesStore = useFilesStore()
+		const userConfigStore = useUserConfigStore()
+		vi.spyOn(filesStore, 'getAllFiles').mockResolvedValue({})
+		userConfigStore.files_list_grid_view = false
+
+		const wrapper = mountComponent()
+		await flushPromises()
+
+		const iconWithPath = wrapper.findAll('.nc-icon').find((node) => !!node.attributes('data-path'))
+		expect(iconWithPath?.attributes('data-path')).toBe(wrapper.vm.mdiViewGrid)
+	})
+})