fix(cypress): component testing with pinia

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
2026-05-28 04:32:30 -04:00 · 2023-04-05 08:41:56 +02:00 · 2023-04-05 08:41:56 +02:00 · d432e0c7b2
commit d432e0c7b2
parent f060e5a72f
3 changed files with 114 additions and 13 deletions
--- 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')
--- 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,
--- 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",