path: root/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.spec.js

import Vuex from 'vuex'
import { createLocalVue, shallowMount } from '@vue/test-utils'
import { cloneDeep } from 'lodash'
import storeConfig from '../../../../../store/storeConfig'
import { imagePath, generateRemoteUrl } from '@nextcloud/router'
import { loadState } from '@nextcloud/initial-state'
import PlayCircleOutline from 'vue-material-design-icons/PlayCircleOutline'

import FilePreview from './FilePreview'

jest.mock('@nextcloud/initial-state', () => ({
	loadState: jest.fn(),
}))

describe('FilePreview.vue', () => {
	let store
	let localVue
	let testStoreConfig
	let propsData
	let imageMock
	let getUserIdMock
	let oldPixelRatio

	beforeEach(() => {
		localVue = createLocalVue()
		localVue.use(Vuex)

		oldPixelRatio = window.devicePixelRatio

		testStoreConfig = cloneDeep(storeConfig)
		getUserIdMock = jest.fn().mockReturnValue('current-user-id')
		testStoreConfig.modules.actorStore.getters.getUserId = () => getUserIdMock
		store = new Vuex.Store(testStoreConfig)

		imageMock = {
			onload: jest.fn(),
			onerror: jest.fn(),
			src: null,
		}
		jest.spyOn(global, 'Image')
			.mockImplementation(() => {
				return imageMock
			})

		propsData = {
			id: '123',
			name: 'test.jpg',
			path: 'path/to/test.jpg',
			size: 128,
			mimetype: 'image/jpeg',
			previewAvailable: 'yes',
		}
	})

	afterEach(() => {
		jest.clearAllMocks()
		window.devicePixelRatio = oldPixelRatio
	})

	function parseRelativeUrl(url) {
		return new URL('https://localhost' + url)
	}

	describe('file preview rendering', () => {
		test('renders file preview', async() => {
			const wrapper = shallowMount(FilePreview, {
				localVue,
				store,
				propsData,
			})

			await imageMock.onload()

			expect(wrapper.element.tagName).toBe('A')
			const imageUrl = parseRelativeUrl(wrapper.find('img').attributes('src'))
			expect(imageUrl.pathname).toBe('/nc-webroot/core/preview')
			expect(imageUrl.searchParams.get('fileId')).toBe('123')
			expect(imageUrl.searchParams.get('x')).toBe('-1')
			expect(imageUrl.searchParams.get('y')).toBe('384')
			expect(imageUrl.searchParams.get('a')).toBe('1')

			expect(wrapper.find('.loading').exists()).toBe(false)
		})

		test('renders file preview for guests', async() => {
			propsData.link = 'https://localhost/nc-webroot/s/xtokenx'
			getUserIdMock.mockClear().mockReturnValue(null)

			const wrapper = shallowMount(FilePreview, {
				localVue,
				store,
				propsData,
			})

			await imageMock.onload()

			expect(wrapper.element.tagName).toBe('A')
			const imageUrl = parseRelativeUrl(wrapper.find('img').attributes('src'))
			expect(imageUrl.pathname).toBe('/nc-webroot/apps/files_sharing/publicpreview/xtokenx')
			expect(imageUrl.searchParams.has('fileId')).toBe(false)
			expect(imageUrl.searchParams.get('x')).toBe('-1')
			expect(imageUrl.searchParams.get('y')).toBe('384')
			expect(imageUrl.searchParams.get('a')).toBe('1')

			expect(wrapper.find('.loading').exists()).toBe(false)
		})

		test('calculates preview size based on window pixel ratio', async() => {
			window.devicePixelRatio = 1.5

			const wrapper = shallowMount(FilePreview, {
				localVue,
				store,
				propsData,
			})

			await imageMock.onload()

			expect(wrapper.element.tagName).toBe('A')
			const imageUrl = parseRelativeUrl(wrapper.find('img').attributes('src'))
			expect(imageUrl.searchParams.get('y')).toBe('576')
		})

		test('renders small previews when requested', async() => {
			propsData.smallPreview = true

			const wrapper = shallowMount(FilePreview, {
				localVue,
				store,
				propsData,
			})

			await imageMock.onload()

			expect(wrapper.element.tagName).toBe('A')
			const imageUrl = parseRelativeUrl(wrapper.find('img').attributes('src'))
			expect(imageUrl.searchParams.get('y')).toBe('32')
		})

		describe('uploading', () => {
			let uploadProgressMock

			beforeEach(() => {
				uploadProgressMock = jest.fn()
				testStoreConfig.modules.fileUploadStore.getters.uploadProgress = () => uploadProgressMock
				store = new Vuex.Store(testStoreConfig)
			})

			test('renders progress bar while uploading', async() => {
				propsData.id = 'temp-123'
				propsData.index = 'index-1'
				propsData.uploadId = 1000
				propsData.localUrl = 'blob:XYZ'

				uploadProgressMock.mockReturnValue(85)

				const wrapper = shallowMount(FilePreview, {
					localVue,
					store,
					propsData,
				})

				await imageMock.onload()

				expect(wrapper.element.tagName).toBe('DIV')
				expect(wrapper.find('img').attributes('src')).toBe('blob:XYZ')

				const progressEl = wrapper.findComponent({ name: 'ProgressBar' })
				expect(progressEl.exists()).toBe(true)
				expect(progressEl.props('value')).toBe(85)

				expect(uploadProgressMock).toHaveBeenCalledWith(1000, 'index-1')
			})
		})

		test('renders spinner while loading', () => {
			const wrapper = shallowMount(FilePreview, {
				localVue,
				store,
				propsData,
			})

			expect(wrapper.element.tagName).toBe('A')
			expect(wrapper.find('img').exists()).toBe(false)
			expect(wrapper.find('.loading').exists()).toBe(true)
		})

		test('renders default mime icon on load error', async() => {
			const wrapper = shallowMount(FilePreview, {
				localVue,
				store,
				propsData,
			})

			await imageMock.onerror()

			expect(wrapper.element.tagName).toBe('A')
			const imageUrl = wrapper.find('img').attributes('src')
			expect(imageUrl).toBe(imagePath('core', 'filetypes/file'))
		})

		test('renders generic mime type icon for unknown mime types', async() => {
			propsData.previewAvailable = 'no'
			OC.MimeType.getIconUrl.mockReturnValueOnce(imagePath('core', 'image/jpeg'))

			const wrapper = shallowMount(FilePreview, {
				localVue,
				store,
				propsData,
			})

			await imageMock.onload()

			expect(wrapper.element.tagName).toBe('A')
			const imageUrl = wrapper.find('img').attributes('src')
			expect(imageUrl).toBe(imagePath('core', 'image/jpeg'))

			expect(OC.MimeType.getIconUrl).toHaveBeenCalledWith('image/jpeg')
		})

		describe('gif rendering', () => {
			beforeEach(() => {
				propsData.mimetype = 'image/gif'
				propsData.name = 'test %20.gif'
				propsData.path = 'path/to/test %20.gif'

				loadState.mockImplementation((app, key) => {
					if (app === 'core' && key === 'capabilities') {
						return {
							spreed: {
								config: {
									previews: {
										'max-gif-size': 1024,
									},
								},
							},
						}
					}
					return null
				})
			})
			test('directly renders small GIF files', async() => {
				propsData.size = 128

				const wrapper = shallowMount(FilePreview, {
					localVue,
					store,
					propsData,
				})

				await imageMock.onload()

				expect(wrapper.element.tagName).toBe('A')
				expect(wrapper.find('img').attributes('src'))
					.toBe(generateRemoteUrl('dav/files/current-user-id') + '/path/to/test%20%2520.gif')
			})

			test('directly renders small GIF files (absolute path)', async() => {
				propsData.size = 128
				propsData.path = '/path/to/test %20.gif'

				const wrapper = shallowMount(FilePreview, {
					localVue,
					store,
					propsData,
				})

				await imageMock.onload()

				expect(wrapper.element.tagName).toBe('A')
				expect(wrapper.find('img').attributes('src'))
					.toBe(generateRemoteUrl('dav/files/current-user-id') + '/path/to/test%20%2520.gif')
			})

			test('directly renders small GIF files for guests', async() => {
				propsData.size = 128
				propsData.link = 'https://localhost/nc-webroot/s/xtokenx'
				getUserIdMock.mockClear().mockReturnValue(null)

				const wrapper = shallowMount(FilePreview, {
					localVue,
					store,
					propsData,
				})

				await imageMock.onload()

				expect(wrapper.element.tagName).toBe('A')
				expect(wrapper.find('img').attributes('src'))
					.toBe(propsData.link + '/download/test%20%2520.gif')
			})

			test('renders static preview for big GIF files', async() => {
				// bigger than max from capability
				propsData.size = 2048

				const wrapper = shallowMount(FilePreview, {
					localVue,
					store,
					propsData,
				})

				await imageMock.onload()

				expect(wrapper.element.tagName).toBe('A')
				const imageUrl = parseRelativeUrl(wrapper.find('img').attributes('src'))
				expect(imageUrl.pathname).toBe('/nc-webroot/core/preview')
				expect(imageUrl.searchParams.get('fileId')).toBe('123')
				expect(imageUrl.searchParams.get('x')).toBe('-1')
				expect(imageUrl.searchParams.get('y')).toBe('384')
			})
		})

		describe('triggering viewer', () => {
			let oldViewer
			let oldFiles
			let getSidebarStatusMock

			beforeEach(() => {
				oldViewer = OCA.Viewer
				oldFiles = OCA.Files

				OCA.Files = {
					Sidebar: {
						state: {
						},
					},
				}

				getSidebarStatusMock = jest.fn().mockReturnValue(true)
				testStoreConfig.modules.sidebarStore.getters.getSidebarStatus = getSidebarStatusMock
				store = new Vuex.Store(testStoreConfig)
			})
			afterEach(() => {
				if (oldViewer) {
					OCA.Viewer = oldViewer
				} else {
					delete OCA.Viewer
				}

				if (oldFiles) {
					OCA.Files = oldFiles
				} else {
					delete OCA.Files
				}
			})

			test('opens viewer when clicking if viewer available', async() => {
				OCA.Viewer = {
					open: jest.fn(),
					availableHandlers: [{
						mimes: ['image/png', 'image/jpeg'],
					}],
				}

				const wrapper = shallowMount(FilePreview, {
					localVue,
					store,
					propsData,
				})

				await imageMock.onload()

				await wrapper.find('a').trigger('click')

				expect(OCA.Viewer.open).toHaveBeenCalledWith({
					list: [{
						basename: 'test.jpg',
						fileid: 123,
						filename: '/path/to/test.jpg',
						hasPreview: true,
						mime: 'image/jpeg',
					}],
					path: '/path/to/test.jpg',
				})

				expect(OCA.Files.Sidebar.state.file).toBe('/path/to/test.jpg')
			})

			test('does not open viewer when clicking if no mime handler available', async() => {
				OCA.Viewer = {
					open: jest.fn(),
					availableHandlers: [{
						mimes: ['image/png'],
					}],
				}

				const wrapper = shallowMount(FilePreview, {
					localVue,
					store,
					propsData,
				})

				await imageMock.onload()

				await wrapper.find('a').trigger('click')

				expect(OCA.Viewer.open).not.toHaveBeenCalled()
			})

			test('does not open viewer when clicking if viewer is not available', async() => {
				delete OCA.Viewer
				const wrapper = shallowMount(FilePreview, {
					localVue,
					store,
					propsData,
				})

				await imageMock.onload()

				// no error
				await wrapper.find('a').trigger('click')
			})

			describe('play icon for video', () => {
				beforeEach(() => {
					propsData.mimetype = 'video/mp4'
					propsData.name = 'test.mp4'
					propsData.path = 'path/to/test.mp4'

					// viewer needs to be available
					OCA.Viewer = {
						open: jest.fn(),
						availableHandlers: [{
							mimes: ['video/mp4', 'image/jpeg', 'image/png', 'image/gif'],
						}],
					}
				})

				async function testPlayButtonVisible(visible) {
					const wrapper = shallowMount(FilePreview, {
						localVue,
						store,
						propsData,
					})

					await imageMock.onload()

					const buttonEl = wrapper.findComponent(PlayCircleOutline)
					expect(buttonEl.exists()).toBe(visible)
				}

				test('renders play icon for video previews', async() => {
					await testPlayButtonVisible(true)
				})

				test('does not render play icon for direct renders', async() => {
					// gif is directly rendered
					propsData.mimetype = 'image/gif'
					propsData.name = 'test.gif'
					propsData.path = 'path/to/test.gif'

					await testPlayButtonVisible(false)
				})

				test('render play icon gif previews with big size', async() => {
					// gif is directly rendered
					propsData.mimetype = 'image/gif'
					propsData.name = 'test.gif'
					propsData.path = 'path/to/test.gif'
					propsData.size = 10000000 // bigger than default max

					await testPlayButtonVisible(true)
				})

				test('does not render play icon for small previews', async() => {
					propsData.smallPreview = true
					await testPlayButtonVisible(false)
				})

				test('does not render play icon for failed videos', async() => {
					const wrapper = shallowMount(FilePreview, {
						localVue,
						store,
						propsData,
					})

					await imageMock.onerror()

					const buttonEl = wrapper.findComponent(PlayCircleOutline)
					expect(buttonEl.exists()).toBe(false)
				})

				test('does not render play icon if viewer not available', async() => {
					delete OCA.Viewer
					await testPlayButtonVisible(false)
				})

				test('does not render play icon for non-videos', async() => {
					// viewer supported, but not a video
					propsData.mimetype = 'image/png'
					propsData.name = 'test.png'
					propsData.path = 'path/to/test.png'
					await testPlayButtonVisible(false)
				})
			})
		})
	})

	describe('in upload editor', () => {
		beforeEach(() => {
			propsData.isUploadEditor = true
		})
		test('emits event when clicking remove button when inside upload editor', async() => {
			const wrapper = shallowMount(FilePreview, {
				localVue,
				store,
				propsData,
			})

			await imageMock.onload()

			expect(wrapper.element.tagName).toBe('DIV')
			await wrapper.find('button').trigger('click')

			expect(wrapper.emitted()['remove-file']).toStrictEqual([['123']])
		})
	})
})