Testing useFileDialog with Cypress

[mvazquezma]

Hello everyone,
I'm trying to do a cypress test using the useFileDialog, but I can't access to the input type=file under the hood on this useFileDialog.
Someone have some answer to fix this? or dd some test with it?
Thx to all.

[ZbigiMan]

I have the same problem.

[huiliangShen]

const { files, open, reset, onChange } = useFileDialog()
because useFileDialog not append the input type='file' to html, it's only run in memory🤣🤣🤣

vueuse/packages/core/useFileDialog/index.ts

Lines 59 to 105 in b6d8f1e

	const files = ref<FileList | null>(null)
	const { on: onChange, trigger } = createEventHook()
	let input: HTMLInputElement | undefined
	if (document) {
	input = document.createElement('input')
	input.type = 'file'
	input.onchange = (event: Event) => {
	const result = event.target as HTMLInputElement
	files.value = result.files
	trigger(files.value)
	}
	}
	const reset = () => {
	files.value = null
	if (input) {
	input.value = ''
	trigger(null)
	}
	}
	const open = (localOptions?: Partial<UseFileDialogOptions>) => {
	if (!input)
	return
	const _options = {
	...DEFAULT_OPTIONS,
	...options,
	...localOptions,
	}
	input.multiple = _options.multiple!
	input.accept = _options.accept!
	// webkitdirectory key is not stabled, maybe replaced in the future.
	input.webkitdirectory = _options.directory!
	if (hasOwn(_options, 'capture'))
	input.capture = _options.capture!
	if (_options.reset)
	reset()
	input.click()
	}
	return {
	files: readonly(files),
	open,
	reset,
	onChange,
	}

[ZbigiMan]

@mvazquezma I have found some solutions.
The Cypress tests are essential for my client, so I had to figure out something. I replaced the vueuse useFileDialog with my simplified version, which renders an invisible input file field that Cypress can test (using the force).
My code:
useFileDialog.ts

import { Ref, VNode, h, ref, render } from 'vue'

interface UseFileDialogOptions {
    multiple?: boolean
    accept?: string
    reset?: boolean
    directory?: boolean
    customOptions?: {
        [key: string]: unknown
    }
}

const DEFAULT_OPTIONS: UseFileDialogOptions = {
    multiple: true,
    accept: '*',
    reset: false,
    directory: false,
    customOptions: {},
}

export interface UseFileDialogReturn {
    files: Ref<FileList | null>
    open: () => void
    reset: () => void
}

export function useFileDialog(
    options: UseFileDialogOptions
): UseFileDialogReturn {
    options = { ...DEFAULT_OPTIONS, ...options }

    const files = ref<FileList | null>(null)
    const fileInput = ref<VNode | null>(null)

    function open() {
        fileInput.value = h('input', {
            type: 'file',
            multiple: options.multiple,
            accept: options.accept,
            directory: options.directory,
            style: 'width:0; height: 0;',
            onChange: handleOnChange,
            ...options.customOptions,
        })

        if (options.reset) {
            reset()
        }
        render(fileInput.value, document.body)
        fileInput.value.el?.click()
    }

    function handleOnChange(event: Event) {
        const result = event.target as HTMLInputElement
        files.value = result.files
    }

    function reset() {
        files.value = null
        fileInput.value = null
        render(fileInput.value, document.body)
    }

    return {
        files,
        open,
        reset,
    }
}

In the customOptions, we can add the selector attribute for the Cypress:

const { open, files, reset } = useFileDialog({
    multiple: false,
    accept: '.jpg',
    customOptions: {
        'data-cy': 'my-file-upload-field',
    },
})

And finally, we can write the Cypress test:

    cy.get('[data-cy="my-upload-trigger"]').click()
    cy.get('[data-cy="my-upload-trigger"]').click()

    cy.get('[data-cy="my-file-upload-field"]').selectFile(
        'cypress/fixtures/images/test-image.jpg',
        {
            force: true,
        }
    )

For some strange reason, we must click the upload trigger button twice in the test. The Cypress selectFile method is designed for classic native HTML input field, so testing the invisible input field, which is appended to the document by clicking the trigger, is a king of an anti-pattern, but it works :)

@huiliangShen, if you consider adding support for Cypress tests, I can create a merge request with my solution.

[huiliangShen]

The past few days, I'm trying to use Cypress to test useFileDialog hook (I never use Cpyress.js before), but my test case stopped by browser policy. I don't know if there are other ways to test it! Is it necessary to test useFileDialog?
If you want to try to submit your solution, I have some question:

1. If we create multi instance on the page, will there be multiple <input type="file">?
2. Do we need to remove it <input type="file"> at the right time?
3. Can it be use document.body.append or other fn to replace render? because I think use render is not good idea.

It's all my personal opinions and may not necessarily be applicable! 😂😂😂

[ZbigiMan]

HI @huiliangShen :) I'm sorry for not getting back to you sooner. I was terribly busy. In my solution, I've used the Vue render function:

import { Ref, VNode, h, ref, render } from 'vue'

// Render input
 render(fileInput.value, document.body)

// Reset (remove input)
  fileInput.value = null
  render(fileInput.value, document.body)

As I wrote, I had to add Cypress tests to the finished app with the useFileDialog, which was used in multiple places, and my solution was to replace the vueuse function with the custom method.

@huiliangShen If you think it could be a better solution, do you know how to solve the problem with Cypress tests? I have the impression you need to be more focused on solving the problem.