fix(cypress): component testing with pinia

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

apps/files/src/views/Navigation.cy.ts

@@ -2,28 +2,33 @@ import * as InitialState from '@nextcloud/initial-state'
 import * as L10n from '@nextcloud/l10n'
 import FolderSvg from '@mdi/svg/svg/folder.svg'
 import ShareSvg from '@mdi/svg/svg/share-variant.svg'
+import { createTestingPinia } from '@pinia/testing'
 
 import NavigationService from '../services/Navigation.ts'
 import NavigationView from './Navigation.vue'
 import router from '../router/router.js'
 
 describe('Navigation renders', () => {
-	const Navigation = new NavigationService()
+	const Navigation = new NavigationService() as NavigationService
 
 	before(() => {
 		cy.stub(InitialState, 'loadState')
 			.returns({
-				used: 1024 * 1024 * 1024,
+				used: 1000 * 1000 * 1000,
 				quota: -1,
 			})
-
 	})
 
 	it('renders', () => {
 		cy.mount(NavigationView, {
 			propsData: {
 				Navigation,
 			},
+			global: {
+				plugins: [createTestingPinia({
+					createSpy: cy.spy,
+				})],
+			},
 		})
 
 		cy.get('[data-cy-files-navigation]').should('be.visible')
@@ -33,13 +38,13 @@ describe('Navigation renders', () => {
 })
 
 describe('Navigation API', () => {
-	const Navigation = new NavigationService()
+	const Navigation = new NavigationService() as NavigationService
 
 	it('Check API entries rendering', () => {
 		Navigation.register({
 			id: 'files',
 			name: 'Files',
-			getFiles: () => [],
+			getContents: () => Promise.resolve(),
 			icon: FolderSvg,
 			order: 1,
 		})
@@ -48,6 +53,11 @@ describe('Navigation API', () => {
 			propsData: {
 				Navigation,
 			},
+			global: {
+				plugins: [createTestingPinia({
+					createSpy: cy.spy,
+				})],
+			},
 			router,
 		})
 
@@ -61,7 +71,7 @@ describe('Navigation API', () => {
 		Navigation.register({
 			id: 'sharing',
 			name: 'Sharing',
-			getFiles: () => [],
+			getContents: () => Promise.resolve(),
 			icon: ShareSvg,
 			order: 2,
 		})
@@ -70,6 +80,11 @@ describe('Navigation API', () => {
 			propsData: {
 				Navigation,
 			},
+			global: {
+				plugins: [createTestingPinia({
+					createSpy: cy.spy,
+				})],
+			},
 			router,
 		})
 
@@ -83,7 +98,7 @@ describe('Navigation API', () => {
 		Navigation.register({
 			id: 'sharingin',
 			name: 'Shared with me',
-			getFiles: () => [],
+			getContents: () => Promise.resolve(),
 			parent: 'sharing',
 			icon: ShareSvg,
 			order: 1,
@@ -93,6 +108,11 @@ describe('Navigation API', () => {
 			propsData: {
 				Navigation,
 			},
+			global: {
+				plugins: [createTestingPinia({
+					createSpy: cy.spy,
+				})],
+			},
 			router,
 		})
 
@@ -120,7 +140,7 @@ describe('Navigation API', () => {
 			Navigation.register({
 				id: 'files',
 				name: 'Files',
-				getFiles: () => [],
+				getContents: () => Promise.resolve(),
 				icon: FolderSvg,
 				order: 1,
 			})
@@ -151,6 +171,11 @@ describe('Quota rendering', () => {
 			propsData: {
 				Navigation,
 			},
+			global: {
+				plugins: [createTestingPinia({
+					createSpy: cy.spy,
+				})],
+			},
 		})
 
 		cy.get('[data-cy-files-navigation-settings-quota]').should('not.exist')
@@ -160,14 +185,19 @@ describe('Quota rendering', () => {
 		cy.stub(InitialState, 'loadState')
 			.as('loadStateStats')
 			.returns({
-				used: 1024 * 1024 * 1024,
+				used: 1000 * 1000 * 1000,
 				quota: -1,
 			})
 
 		cy.mount(NavigationView, {
 			propsData: {
 				Navigation,
 			},
+			global: {
+				plugins: [createTestingPinia({
+					createSpy: cy.spy,
+				})],
+			},
 		})
 
 		cy.get('[data-cy-files-navigation-settings-quota]').should('be.visible')
@@ -179,15 +209,20 @@ describe('Quota rendering', () => {
 		cy.stub(InitialState, 'loadState')
 			.as('loadStateStats')
 			.returns({
-				used: 1024 * 1024 * 1024,
-				quota: 5 * 1024 * 1024 * 1024,
+				used: 1000 * 1000 * 1000,
+				quota: 5 * 1000 * 1000 * 1000,
 				relative: 20, // percent
 			})
 
 		cy.mount(NavigationView, {
 			propsData: {
 				Navigation,
 			},
+			global: {
+				plugins: [createTestingPinia({
+					createSpy: cy.spy,
+				})],
+			},
 		})
 
 		cy.get('[data-cy-files-navigation-settings-quota]').should('be.visible')
@@ -200,15 +235,20 @@ describe('Quota rendering', () => {
 		cy.stub(InitialState, 'loadState')
 			.as('loadStateStats')
 			.returns({
-				used: 5 * 1024 * 1024 * 1024,
-				quota: 1024 * 1024 * 1024,
+				used: 5 * 1000 * 1000 * 1000,
+				quota: 1000 * 1000 * 1000,
 				relative: 500, // percent
 			})
 
 		cy.mount(NavigationView, {
 			propsData: {
 				Navigation,
 			},
+			global: {
+				plugins: [createTestingPinia({
+					createSpy: cy.spy,
+				})],
+			},
 		})
 
 		cy.get('[data-cy-files-navigation-settings-quota]').should('be.visible')

package.json

@@ -123,6 +123,7 @@
     "@nextcloud/eslint-config": "^8.2.1",
     "@nextcloud/stylelint-config": "^2.1.2",
     "@nextcloud/webpack-vue-config": "^5.5.0",
+    "@pinia/testing": "^0.0.15",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/user-event": "^14.4.3",
     "@testing-library/vue": "^5.8.3",