Migrate cypress config to use to vite

cypress.config.ts

@@ -1,25 +1,21 @@
-// Making sure we're forcing the development mode
-process.env.NODE_ENV = 'development'
-
 import { defineConfig } from 'cypress'
-import webpackConfig from '@nextcloud/webpack-vue-config'
-import webpackRules from '@nextcloud/webpack-vue-config/rules'
+import { createAppConfig } from '@nextcloud/vite-config'
 
-webpackRules.RULE_TS = {
-	test: /\.ts$/,
-	use: [{
-		loader: 'ts-loader',
-		options: {
-			// skip typechecking for speed
-			transpileOnly: true,
+const viteConfig = await createAppConfig({}, {
+	inlineCSS: true,
+	nodePolyfills: true,
+	emptyOutputDirectory: false,
+	replace: {
+		__TRANSLATIONS__: '[]',
+	},
+	config: {
+		optimizeDeps: {
+			entries: ['cypress/**/*'],
 		},
-	}],
-}
-webpackConfig.module.rules = Object.values(webpackRules)
+	},
+})({ mode: 'development', command: 'serve' })
 
-// Cypress handle its own output
-delete webpackConfig.output
-webpackConfig.resolve.extensions = ['.ts', '.tsx', '.js', '.jsx', '.cjs', '.vue']
+viteConfig.build!.rollupOptions = undefined
 
 export default defineConfig({
 	projectId: 'v24ts6',
@@ -30,8 +26,8 @@ export default defineConfig({
 	component: {
 		devServer: {
 			framework: 'vue',
-			bundler: 'webpack',
-			webpackConfig,
+			bundler: 'vite',
+			viteConfig,
 		},
 	},
 })

cypress/components/ConflictPicker.cy.ts

@@ -1,28 +1,15 @@
-/* eslint-disable no-unused-expressions */
-// dist file might not be built when running eslint only
-// eslint-disable-next-line import/no-unresolved,n/no-missing-import
-import type { ConflictResolutionResult } from '../../lib'
-
 import { File as NcFile } from '@nextcloud/files'
-import { openConflictPicker } from '../../dist/index.mjs'
+import ConflictPicker from '../../lib/components/ConflictPicker.vue'
 
-describe('ConflictPicker rendering', () => {
+describe('ConflictPicker rendering', { testIsolation: true }, () => {
 	let image: File
 
 	before(() => {
-		cy.fixture('image.jpg', 'binary').then((content) => {
-			content = Uint8Array.from(content, x => x.charCodeAt(0))
+		cy.fixture('image.jpg', null).then((content: Buffer) => {
 			image = new File([content], 'image.jpg', { type: 'image/jpeg' })
 		})
 	})
 
-	afterEach(() => {
-		// Make sure we clear the body
-		cy.window().then((win) => {
-			win.document.body.innerHTML = '<div data-cy-root></div>'
-		})
-	})
-
 	it('Renders default ConflictPicker', () => {
 		const oldImage = new NcFile({
 			id: 1,
@@ -33,8 +20,12 @@ describe('ConflictPicker rendering', () => {
 			mtime: new Date('2021-01-01T00:00:00.000Z'),
 		})
 
-		openConflictPicker('Pictures', [image], [oldImage]).catch(() => {
-			// Ignore error
+		cy.mount(ConflictPicker, {
+			propsData: {
+				dirname: 'Pictures',
+				content: [oldImage],
+				conflicts: [image],
+			},
 		})
 
 		cy.get('[data-cy-conflict-picker]').should('exist')
@@ -58,20 +49,12 @@ describe('ConflictPicker resolving', () => {
 
 	before(() => {
 		images = []
-		cy.fixture('image.jpg', 'binary').then((content) => {
-			content = Uint8Array.from(content, x => x.charCodeAt(0))
+		cy.fixture('image.jpg', null).then((content) => {
 			images.push(new File([content], 'image1.jpg', { type: 'image/jpeg' }))
 			images.push(new File([content], 'image2.jpg', { type: 'image/jpeg' }))
 		})
 	})
 
-	afterEach(() => {
-		// Make sure we clear the body
-		cy.window().then((win) => {
-			win.document.body.innerHTML = '<div data-cy-root></div>'
-		})
-	})
-
 	it('Pick all incoming files', () => {
 		const old1 = new NcFile({
 			id: 1,
@@ -90,19 +73,31 @@ describe('ConflictPicker resolving', () => {
 			mtime: new Date('2021-01-01T00:00:00.000Z'),
 		})
 
-		const promise = openConflictPicker('Pictures', images, [old1, old2])
+		const onSubmit = cy.spy().as('onSubmitSpy')
+		const onCancel = cy.spy().as('onCancelSpy')
+		cy.mount(ConflictPicker, {
+			propsData: {
+				dirname: 'Pictures',
+				content: [old1, old2],
+				conflicts: images,
+			},
+			listeners: {
+				submit: onSubmit,
+				cancel: onCancel,
+			}
+		})
 
 		cy.get('[data-cy-conflict-picker-form]').should('be.visible')
 		cy.get('[data-cy-conflict-picker-fieldset]').should('have.length', 3)
 		cy.get('[data-cy-conflict-picker-input-incoming="all"] input').check({ force: true })
 		cy.get('[data-cy-conflict-picker-submit]').click()
 
-		promise.then((results: ConflictResolutionResult) => {
+		cy.get('@onSubmitSpy').should('have.been.calledOnce').then((onSubmit) => {
+			const results = (onSubmit as unknown as sinon.SinonSpy).firstCall.args[0]
 			expect(results.selected).to.deep.equal(images)
 			expect(results.renamed).to.have.length(0)
-
-			cy.get('[data-cy-conflict-picker]').should('not.exist')
 		})
+		cy.get('@onCancelSpy').should('not.have.been.called')
 	})
 
 	it('Pick all existing files', () => {
@@ -123,19 +118,31 @@ describe('ConflictPicker resolving', () => {
 			mtime: new Date('2021-01-01T00:00:00.000Z'),
 		})
 
-		const promise = openConflictPicker('Pictures', images, [old1, old2])
+		const onSubmit = cy.spy().as('onSubmitSpy')
+		const onCancel = cy.spy().as('onCancelSpy')
+		cy.mount(ConflictPicker, {
+			propsData: {
+				dirname: 'Pictures',
+				content: [old1, old2],
+				conflicts: images,
+			},
+			listeners: {
+				submit: onSubmit,
+				cancel: onCancel,
+			}
+		})
 
 		cy.get('[data-cy-conflict-picker-form]').should('be.visible')
 		cy.get('[data-cy-conflict-picker-fieldset]').should('have.length', 3)
 		cy.get('[data-cy-conflict-picker-input-existing="all"] input').check({ force: true })
 		cy.get('[data-cy-conflict-picker-submit]').click()
 
-		promise.then((results: ConflictResolutionResult) => {
+		cy.get('@onSubmitSpy').should('have.been.calledOnce').then((onSubmit) => {
+			const results = (onSubmit as unknown as sinon.SinonSpy).firstCall.args[0]
 			expect(results.selected).to.have.length(0)
 			expect(results.renamed).to.have.length(0)
-
-			cy.get('[data-cy-conflict-picker]').should('not.exist')
 		})
+		cy.get('@onCancelSpy').should('not.have.been.called')
 	})
 
 	it('Pick all existing files', () => {
@@ -156,7 +163,19 @@ describe('ConflictPicker resolving', () => {
 			mtime: new Date('2021-01-01T00:00:00.000Z'),
 		})
 
-		const promise = openConflictPicker('Pictures', images, [old1, old2])
+		const onSubmit = cy.spy().as('onSubmitSpy')
+		const onCancel = cy.spy().as('onCancelSpy')
+		cy.mount(ConflictPicker, {
+			propsData: {
+				dirname: 'Pictures',
+				content: [old1, old2],
+				conflicts: images,
+			},
+			listeners: {
+				submit: onSubmit,
+				cancel: onCancel,
+			}
+		})
 
 		cy.get('[data-cy-conflict-picker-form]').should('be.visible')
 		cy.get('[data-cy-conflict-picker-fieldset]').should('have.length', 3)
@@ -165,12 +184,12 @@ describe('ConflictPicker resolving', () => {
 		cy.get('[data-cy-conflict-picker-submit]').click()
 
 		// We only return the files to handle
-		promise.then((results: ConflictResolutionResult) => {
+		cy.get('@onSubmitSpy').should('have.been.calledOnce').then((onSubmit) => {
+			const results = (onSubmit as unknown as sinon.SinonSpy).firstCall.args[0]
 			expect(results.selected).to.deep.equal([images[0]])
 			expect(results.renamed).to.have.length(0)
-
-			cy.get('[data-cy-conflict-picker]').should('not.exist')
 		})
+		cy.get('@onCancelSpy').should('not.have.been.called')
 	})
 
 	it('Pick both versions files', () => {
@@ -191,22 +210,34 @@ describe('ConflictPicker resolving', () => {
 			mtime: new Date('2021-01-01T00:00:00.000Z'),
 		})
 
-		const promise = openConflictPicker('Pictures', images, [old1, old2])
+		const onSubmit = cy.spy().as('onSubmitSpy')
+		const onCancel = cy.spy().as('onCancelSpy')
+		cy.mount(ConflictPicker, {
+			propsData: {
+				dirname: 'Pictures',
+				content: [old1, old2],
+				conflicts: images,
+			},
+			listeners: {
+				submit: onSubmit,
+				cancel: onCancel,
+			}
+		})
 
 		cy.get('[data-cy-conflict-picker-form]').should('be.visible')
 		cy.get('[data-cy-conflict-picker-fieldset]').should('have.length', 3)
 		cy.get('[data-cy-conflict-picker-input-incoming="all"] input').check({ force: true })
 		cy.get('[data-cy-conflict-picker-input-existing="all"] input').check({ force: true })
 		cy.get('[data-cy-conflict-picker-submit]').click()
 
-		promise.then((results: ConflictResolutionResult) => {
+		cy.get('@onSubmitSpy').should('have.been.calledOnce').then((onSubmit) => {
+			const results = (onSubmit as unknown as sinon.SinonSpy).firstCall.args[0]
 			expect(results.selected).to.have.length(0)
 			expect(results.renamed).to.have.length(2)
-			expect(results.renamed[0].name).to.equal('image1 (1).jpg')
-			expect(results.renamed[1].name).to.equal('image2 (1).jpg')
-
-			cy.get('[data-cy-conflict-picker]').should('not.exist')
+			expect((results.renamed[0] as File).name).to.equal('image1 (1).jpg')
+			expect((results.renamed[1] as File).name).to.equal('image2 (1).jpg')
 		})
+		cy.get('@onCancelSpy').should('not.have.been.called')
 	})
 
 	it('Skip all conflicts', () => {
@@ -227,17 +258,29 @@ describe('ConflictPicker resolving', () => {
 			mtime: new Date('2021-01-01T00:00:00.000Z'),
 		})
 
-		const promise = openConflictPicker('Pictures', images, [old1, old2])
+		const onSubmit = cy.spy().as('onSubmitSpy')
+		const onCancel = cy.spy().as('onCancelSpy')
+		cy.mount(ConflictPicker, {
+			propsData: {
+				dirname: 'Pictures',
+				content: [old1, old2],
+				conflicts: images,
+			},
+			listeners: {
+				submit: onSubmit,
+				cancel: onCancel,
+			}
+		})
 
 		cy.get('[data-cy-conflict-picker-form]').should('be.visible')
 		cy.get('[data-cy-conflict-picker-fieldset]').should('have.length', 3)
 		cy.get('[data-cy-conflict-picker-skip]').click()
 
-		promise.then((results: ConflictResolutionResult) => {
+		cy.get('@onSubmitSpy').should('have.been.calledOnce').then((onSubmit) => {
+			const results = (onSubmit as unknown as sinon.SinonSpy).firstCall.args[0]
 			expect(results.selected).to.have.length(0)
 			expect(results.renamed).to.have.length(0)
-
-			cy.get('[data-cy-conflict-picker]').should('not.exist')
 		})
+		cy.get('@onCancelSpy').should('not.have.been.called')
 	})
 })

cypress/components/UploadPicker.cy.ts

@@ -2,7 +2,7 @@
 // dist file might not be built when running eslint only
 // eslint-disable-next-line import/no-unresolved,n/no-missing-import
 import { Folder, Permission, addNewFileMenuEntry, type Entry } from '@nextcloud/files'
-import { UploadPicker, getUploader } from '../../dist/index.mjs'
+import { UploadPicker, getUploader } from '../../lib/index.ts'
 import { generateRemoteUrl } from '@nextcloud/router'
 
 describe('UploadPicker rendering', () => {

cypress/tsconfig.json

@@ -5,6 +5,7 @@
 	],
 	"include": ["./**/*.ts"],
 	"compilerOptions": {
-		"types": ["cypress"]
+		"types": ["cypress"],
+		"rootDir": "..",
 	}
 }

lib/components/UploadPicker.vue

@@ -15,8 +15,6 @@
 			</template>
 			{{ buttonName }}
 		</NcButton>
-
-		<!-- New file menu -->
 		<NcActions v-else
 			:menu-name="buttonName"
 			:menu-title="addLabel"

lib/uploader.ts

@@ -1,4 +1,6 @@
-import { CanceledError, type AxiosError, type AxiosResponse } from 'axios'
+import type { AxiosError, AxiosResponse } from 'axios'
+
+import { CanceledError } from 'axios'
 import { encodePath } from '@nextcloud/paths'
 import { Folder, Permission } from '@nextcloud/files'
 import { generateRemoteUrl } from '@nextcloud/router'
@@ -194,7 +196,7 @@ export class Uploader {
 
 				// Let's initialize a chunk upload
 				const tempUrl = await initChunkWorkspace(encodedDestinationFile)
-				const chunksQueue: Array<Promise<any>> = []
+				const chunksQueue: Array<Promise<void>> = []
 
 				// Generate chunks array
 				for (let chunk = 0; chunk < upload.chunks; chunk++) {
@@ -207,7 +209,7 @@ export class Uploader {
 					// Init request queue
 					const request = () => {
 						return uploadData(
-							`${tempUrl}/${chunk+1}`,
+							`${tempUrl}/${chunk + 1}`,
 							blob,
 							upload.signal,
 							() => this.updateStats(),