fix(cypress): component testing with pinia

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

3 files changed, 114 insertions, 13 deletions

diff --git a/apps/files/src/views/Navigation.cy.ts b/apps/files/src/views/Navigation.cy.ts
index d2fe2b31feb..3d5307e6800 100644
--- a/apps/files/src/views/Navigation.cy.ts
+++ b/apps/files/src/views/Navigation.cy.ts
@@ -2,21 +2,21 @@ 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', () => {
@@ -24,6 +24,11 @@ describe('Navigation renders', () => {
 			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,7 +185,7 @@ describe('Quota rendering', () => {
 		cy.stub(InitialState, 'loadState')
 			.as('loadStateStats')
 			.returns({
-				used: 1024 * 1024 * 1024,
+				used: 1000 * 1000 * 1000,
 				quota: -1,
 			})
 
@@ -168,6 +193,11 @@ describe('Quota rendering', () => {
 			propsData: {
 				Navigation,
 			},
+			global: {
+				plugins: [createTestingPinia({
+					createSpy: cy.spy,
+				})],
+			},
 		})
 
 		cy.get('[data-cy-files-navigation-settings-quota]').should('be.visible')
@@ -179,8 +209,8 @@ 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
 			})
 
@@ -188,6 +218,11 @@ describe('Quota rendering', () => {
 			propsData: {
 				Navigation,
 			},
+			global: {
+				plugins: [createTestingPinia({
+					createSpy: cy.spy,
+				})],
+			},
 		})
 
 		cy.get('[data-cy-files-navigation-settings-quota]').should('be.visible')
@@ -200,8 +235,8 @@ 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
 			})
 
@@ -209,6 +244,11 @@ describe('Quota rendering', () => {
 			propsData: {
 				Navigation,
 			},
+			global: {
+				plugins: [createTestingPinia({
+					createSpy: cy.spy,
+				})],
+			},
 		})
 
 		cy.get('[data-cy-files-navigation-settings-quota]').should('be.visible')
diff --git a/package-lock.json b/package-lock.json
index 4a10272cf82..956b727035a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -98,6 +98,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",
@@ -4705,6 +4706,47 @@
         "node": ">=10"
       }
     },
+    "node_modules/@pinia/testing": {
+      "version": "0.0.15",
+      "resolved": "https://registry.npmjs.org/@pinia/testing/-/testing-0.0.15.tgz",
+      "integrity": "sha512-Ykz5sPUVDphDMssA27+ExPSzxqfn7Y3jax77KA0AChDB6ODu31CnXIwoiUG+U5WA6ey7gzHkZh8wlnAtzVnB8g==",
+      "dev": true,
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "pinia": ">=2.0.31"
+      }
+    },
+    "node_modules/@pinia/testing/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "dev": true,
@@ -28599,6 +28641,24 @@
         "rimraf": "^3.0.2"
       }
     },
+    "@pinia/testing": {
+      "version": "0.0.15",
+      "resolved": "https://registry.npmjs.org/@pinia/testing/-/testing-0.0.15.tgz",
+      "integrity": "sha512-Ykz5sPUVDphDMssA27+ExPSzxqfn7Y3jax77KA0AChDB6ODu31CnXIwoiUG+U5WA6ey7gzHkZh8wlnAtzVnB8g==",
+      "dev": true,
+      "requires": {
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.11",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+          "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+          "dev": true,
+          "requires": {}
+        }
+      }
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "dev": true,
diff --git a/package.json b/package.json
index 2feb218a387..e33e6ecd061 100644
--- a/package.json
+++ b/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",