Update some npm pkgs and make adjustments (#380)

Signed-off-by: Julien Veyssier <[email protected]>
Signed-off-by: Swikriti Tripathi <[email protected]>
Co-authored-by: Swikriti Tripathi <[email protected]>

Author: julien-nc

jest.config.js

@@ -5,6 +5,7 @@ module.exports = {
 	testMatch: ['**/tests/**/*.spec.{js,ts}'],
 	moduleNameMapper: {
 		'\\.(scss)$': '<rootDir>/tests/jest/stubs/empty.js',
+		'@nextcloud/l10n/gettext': require.resolve('@nextcloud/l10n/gettext'),
 	},
 	preset: '@vue/cli-plugin-unit-jest/presets/no-babel',
 	collectCoverage: true,

package-lock.json

@@ -34,15 +34,15 @@
 		"extends @nextcloud/browserslist-config"
 	],
 	"engines": {
-		"node": "^14.0.0",
-		"npm": "^7.0.0"
+		"node": ">= 16.0.0",
+		"npm": "^8.0.0"
 	},
 	"dependencies": {
 		"@nextcloud/auth": "^2.0.0",
 		"@nextcloud/axios": "^2.1.0",
 		"@nextcloud/dialogs": "^3.2.0",
 		"@nextcloud/initial-state": "^2.0.0",
-		"@nextcloud/l10n": "^1.4.1",
+		"@nextcloud/l10n": "^2.1.0",
 		"@nextcloud/moment": "^1.1.1",
 		"@nextcloud/router": "^2.0.0",
 		"@nextcloud/vue": "^7.0.0",
@@ -57,10 +57,10 @@
 		"@nextcloud/eslint-config": "^8.1.2",
 		"@nextcloud/stylelint-config": "^2.2.0",
 		"@nextcloud/webpack-vue-config": "^5.3.0",
-		"@vue/cli-plugin-unit-jest": "~5.0.0",
-		"@vue/test-utils": "^1.3.4",
+		"@vue/cli-plugin-unit-jest": "5.0.6",
+		"@vue/test-utils": "1.3.4",
 		"@vue/vue2-jest": "^27.0.0",
-		"eslint-webpack-plugin": "^3.2.0",
-		"stylelint-webpack-plugin": "^3.3.0"
+		"eslint-webpack-plugin": "^4.0.1",
+		"stylelint-webpack-plugin": "^4.1.1"
 	}
 }

package.json

@@ -287,7 +287,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-::v-deep .connect-button {
+:deep(.connect-button) {
 	margin-top: 10px;
 }
 </style>

src/views/Dashboard.vue

@@ -29,11 +29,13 @@ global.OC = {
 
 global.t = (app, text) => text
 
-global.navigator = {
+const writeText = jest.fn()
+
+Object.assign(global.navigator, {
 	clipboard: {
-		writeText: jest.fn(),
+	  writeText,
 	},
-}
+})
 
 const selectors = {
 	oauthInstanceInput: '#openproject-oauth-instance > .text-input-input-wrapper > input',

tests/jest/components/AdminSettings.spec.js

@@ -8,13 +8,16 @@ import * as dialogs from '@nextcloud/dialogs'
 jest.mock('@nextcloud/axios')
 jest.mock('@nextcloud/dialogs')
 
-const { location } = window
+const realLocation = global.window.location
 const localVue = createLocalVue()
 
 describe('OAuthConnectButton.vue', () => {
 	let wrapper
 	afterEach(() => {
-		window.location = location
+		Object.defineProperty(global.window, 'location', {
+			writable: true,
+			value: realLocation,
+		})
 		jest.clearAllMocks()
 	})
 	describe('when the admin config is not okay', () => {
@@ -25,8 +28,8 @@ describe('OAuthConnectButton.vue', () => {
 	})
 	describe('when the admin config is ok', () => {
 		beforeEach(() => {
-			delete window.location
-			window.location = { replace: jest.fn(), pathname: '/index.php/apps/files/' }
+			delete global.window.location
+			global.window.location = { replace: jest.fn(), pathname: '/index.php/apps/files/' }
 			wrapper = getWrapper()
 		})
 		describe('on successful retrieving of the OP OAuth URI', () => {

tests/jest/components/OAuthConnectButton.spec.js

@@ -63,9 +63,7 @@ exports[`AdminSettings.vue OpenProject OAuth values form edit mode should show t
         <div class="text-input-hint">Go to your OpenProject {htmlLink} as an Administrator and start the setup and copy the values here.</div>
       </div>
     </div>
-    <div class="form-actions"><button data-v-7a8f3349="" type="button" disabled="disabled" data-test-id="submit-op-oauth-btn" class="button-vue button-vue--icon-and-text button-vue--vue-primary"><span data-v-7a8f3349="" class="button-vue__wrapper"><span data-v-7a8f3349="" class="button-vue__icon"><span aria-hidden="true" role="img" class="material-design-icon check-bold-icon" data-v-7a8f3349=""><svg fill="currentColor" width="20" height="20" viewBox="0 0 24 24" class="material-design-icon__svg"><path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"><!----></path></svg></span></span> <span data-v-7a8f3349="" class="button-vue__text">
-					Save
-				</span></span></button></div>
+    <div class="form-actions"><button data-v-6398caea="" disabled="disabled" type="button" data-test-id="submit-op-oauth-btn" class="button-vue button-vue--icon-and-text button-vue--vue-primary"><span data-v-6398caea="" class="button-vue__wrapper"><span data-v-6398caea="" class="button-vue__icon"><span aria-hidden="true" role="img" class="material-design-icon check-bold-icon" data-v-6398caea=""><svg fill="currentColor" width="20" height="20" viewBox="0 0 24 24" class="material-design-icon__svg"><path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"><!----></path></svg></span></span><span data-v-6398caea="" class="button-vue__text">Save</span></span></button></div>
   </div>
 </div>
 `;
@@ -95,9 +93,7 @@ exports[`AdminSettings.vue OpenProject OAuth values form view mode and completed
       </div>
       <!---->
     </div>
-    <div class="form-actions"><button data-v-7a8f3349="" type="button" data-test-id="reset-op-oauth-btn" class="button-vue button-vue--icon-and-text button-vue--vue-secondary"><span data-v-7a8f3349="" class="button-vue__wrapper"><span data-v-7a8f3349="" class="button-vue__icon"><span aria-hidden="true" role="img" class="material-design-icon autorenew-icon" data-v-7a8f3349=""><svg fill="currentColor" width="20" height="20" viewBox="0 0 24 24" class="material-design-icon__svg"><path d="M12,6V9L16,5L12,1V4A8,8 0 0,0 4,12C4,13.57 4.46,15.03 5.24,16.26L6.7,14.8C6.25,13.97 6,13 6,12A6,6 0 0,1 12,6M18.76,7.74L17.3,9.2C17.74,10.04 18,11 18,12A6,6 0 0,1 12,18V15L8,19L12,23V20A8,8 0 0,0 20,12C20,10.43 19.54,8.97 18.76,7.74Z"><!----></path></svg></span></span> <span data-v-7a8f3349="" class="button-vue__text">
-					Replace OpenProject OAuth values
-				</span></span></button></div>
+    <div class="form-actions"><button data-v-6398caea="" type="button" data-test-id="reset-op-oauth-btn" class="button-vue button-vue--icon-and-text button-vue--vue-secondary"><span data-v-6398caea="" class="button-vue__wrapper"><span data-v-6398caea="" class="button-vue__icon"><span aria-hidden="true" role="img" class="material-design-icon autorenew-icon" data-v-6398caea=""><svg fill="currentColor" width="20" height="20" viewBox="0 0 24 24" class="material-design-icon__svg"><path d="M12,6V9L16,5L12,1V4A8,8 0 0,0 4,12C4,13.57 4.46,15.03 5.24,16.26L6.7,14.8C6.25,13.97 6,13 6,12A6,6 0 0,1 12,6M18.76,7.74L17.3,9.2C17.74,10.04 18,11 18,12A6,6 0 0,1 12,18V15L8,19L12,23V20A8,8 0 0,0 20,12C20,10.43 19.54,8.97 18.76,7.74Z"><!----></path></svg></span></span><span data-v-6398caea="" class="button-vue__text">Replace OpenProject OAuth values</span></span></button></div>
   </div>
 </div>
 `;
@@ -117,11 +113,7 @@ exports[`AdminSettings.vue default user configurations form should be visible wh
 </div>
 `;
 
-exports[`AdminSettings.vue server host url form edit mode cancel button should be visible when the form is in completed state with edit mode 1`] = `
-<button data-v-7a8f3349="" type="button" data-test-id="cancel-edit-server-host-btn" class="button-vue mr-2 button-vue--text-only button-vue--vue-secondary"><span data-v-7a8f3349="" class="button-vue__wrapper"><!----> <span data-v-7a8f3349="" class="button-vue__text">
-				Cancel
-			</span></span></button>
-`;
+exports[`AdminSettings.vue server host url form edit mode cancel button should be visible when the form is in completed state with edit mode 1`] = `<button data-v-6398caea="" type="button" data-test-id="cancel-edit-server-host-btn" class="mr-2 button-vue button-vue--text-only button-vue--vue-secondary"><span data-v-6398caea="" class="button-vue__wrapper"><span data-v-6398caea="" class="button-vue__text">Cancel</span></span></button>`;
 
 exports[`AdminSettings.vue server host url form edit mode readonly state should clear the readonly state when clicked on the input 1`] = `<input type="text" placeholder="https://www.my-openproject.com" class="">`;
 
@@ -280,11 +272,7 @@ exports[`AdminSettings.vue server host url form edit mode submit button should s
 </div>
 `;
 
-exports[`AdminSettings.vue server host url form view mode and completed state reset button should be visible when the form is in completed state 1`] = `
-<button data-v-7a8f3349="" type="button" data-test-id="reset-server-host-btn" class="button-vue button-vue--icon-and-text button-vue--vue-secondary"><span data-v-7a8f3349="" class="button-vue__wrapper"><span data-v-7a8f3349="" class="button-vue__icon"><span aria-hidden="true" role="img" class="material-design-icon pencil-icon" data-v-7a8f3349=""><svg fill="currentColor" width="20" height="20" viewBox="0 0 24 24" class="material-design-icon__svg"><path d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"><!----></path></svg></span></span> <span data-v-7a8f3349="" class="button-vue__text">
-				Edit server information
-			</span></span></button>
-`;
+exports[`AdminSettings.vue server host url form view mode and completed state reset button should be visible when the form is in completed state 1`] = `<button data-v-6398caea="" type="button" data-test-id="reset-server-host-btn" class="button-vue button-vue--icon-and-text button-vue--vue-secondary"><span data-v-6398caea="" class="button-vue__wrapper"><span data-v-6398caea="" class="button-vue__icon"><span aria-hidden="true" role="img" class="material-design-icon pencil-icon" data-v-6398caea=""><svg fill="currentColor" width="20" height="20" viewBox="0 0 24 24" class="material-design-icon__svg"><path d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"><!----></path></svg></span></span><span data-v-6398caea="" class="button-vue__text">Edit server information</span></span></button>`;
 
 exports[`AdminSettings.vue server host url form view mode and completed state should show field value and hide the input field 1`] = `
 <div class="openproject-server-host">
@@ -302,9 +290,7 @@ exports[`AdminSettings.vue server host url form view mode and completed state sh
     </div>
     <!---->
   </div>
-  <div class="form-actions"><button data-v-7a8f3349="" type="button" data-test-id="reset-server-host-btn" class="button-vue button-vue--icon-and-text button-vue--vue-secondary"><span data-v-7a8f3349="" class="button-vue__wrapper"><span data-v-7a8f3349="" class="button-vue__icon"><span aria-hidden="true" role="img" class="material-design-icon pencil-icon" data-v-7a8f3349=""><svg fill="currentColor" width="20" height="20" viewBox="0 0 24 24" class="material-design-icon__svg"><path d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"><!----></path></svg></span></span> <span data-v-7a8f3349="" class="button-vue__text">
-				Edit server information
-			</span></span></button>
+  <div class="form-actions"><button data-v-6398caea="" type="button" data-test-id="reset-server-host-btn" class="button-vue button-vue--icon-and-text button-vue--vue-secondary"><span data-v-6398caea="" class="button-vue__wrapper"><span data-v-6398caea="" class="button-vue__icon"><span aria-hidden="true" role="img" class="material-design-icon pencil-icon" data-v-6398caea=""><svg fill="currentColor" width="20" height="20" viewBox="0 0 24 24" class="material-design-icon__svg"><path d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"><!----></path></svg></span></span><span data-v-6398caea="" class="button-vue__text">Edit server information</span></span></button>
     <!---->
     <!---->
   </div>

tests/jest/components/__snapshots__/AdminSettings.spec.js.snap

@@ -106,9 +106,7 @@ exports[`TextInput.vue with copy button prop should render copy button if set 1`
   <div class="text-input-label">
     some label
   </div>
-  <div class="text-input-input-wrapper"><input type="text" placeholder="" class=""> <button data-v-7a8f3349="" type="button" disabled="disabled" title="Copy value" class="button-vue text-input-copy-value button-vue--icon-and-text button-vue--vue-secondary"><span data-v-7a8f3349="" class="button-vue__wrapper"><span data-v-7a8f3349="" class="button-vue__icon"><span aria-hidden="true" aria-label="" role="img" class="material-design-icon clippy-icon" data-v-7a8f3349=""><svg fill="currentColor" width="16" height="16" enable-background="new 0 0 16 16" version="1.1" viewBox="0 0 16 16" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="m13 15h-11l0.0005-10h11v3.0002l1-0.0004 0.0005-5.0001c0.000058-0.5834-0.4165-1.0002-1.0005-1.0001l-3.467 0.0005c0.0008-1.183-0.9492-2.0001-2.1325-2.0001s-2.1333 0.8171-2.1333 2.0004h-3.2c-0.5834 0-1.0662 0.4166-1.0662 0.9999l-0.0005 12c-0.0000243 0.584 0.4833 1 1.0667 1l10.933-0.0005c0.584-0.001 1-0.416 1-1v-3h-1zm-8.8005-12h1.0672c0.5833 0 1.0666-0.4162 1.0666-0.9996 0-0.5833 0.4834-0.9337 1.0667-0.9337s1.0667 0.3504 1.0667 0.9337c0 0.5834 0.5333 0.9996 1.0666 0.9996h1.2667c0.517 0 1.2 0.4166 1.2 1h-9c-0.0004-0.65 0.5988-1 1.1988-1zm-1.1995 8h2v-1h-2zm7.9998-2v-2l-4 3 3.9998 3v-2l5.0002-0.00005v-2l-4.9998-0.00005zm-8 4h4v-1h-4zm6-7h-6v1h6zm-3 2h-3v1h3z"></path></svg></span></span> <span data-v-7a8f3349="" class="button-vue__text">
-			Copy value
-		</span></span></button></div>
+  <div class="text-input-input-wrapper"><input type="text" placeholder="" class=""> <button data-v-6398caea="" disabled="disabled" type="button" title="Copy value" class="text-input-copy-value button-vue button-vue--icon-and-text button-vue--vue-secondary"><span data-v-6398caea="" class="button-vue__wrapper"><span data-v-6398caea="" class="button-vue__icon"><span aria-hidden="true" aria-label="" role="img" class="material-design-icon clippy-icon" data-v-6398caea=""><svg fill="currentColor" width="16" height="16" enable-background="new 0 0 16 16" version="1.1" viewBox="0 0 16 16" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="m13 15h-11l0.0005-10h11v3.0002l1-0.0004 0.0005-5.0001c0.000058-0.5834-0.4165-1.0002-1.0005-1.0001l-3.467 0.0005c0.0008-1.183-0.9492-2.0001-2.1325-2.0001s-2.1333 0.8171-2.1333 2.0004h-3.2c-0.5834 0-1.0662 0.4166-1.0662 0.9999l-0.0005 12c-0.0000243 0.584 0.4833 1 1.0667 1l10.933-0.0005c0.584-0.001 1-0.416 1-1v-3h-1zm-8.8005-12h1.0672c0.5833 0 1.0666-0.4162 1.0666-0.9996 0-0.5833 0.4834-0.9337 1.0667-0.9337s1.0667 0.3504 1.0667 0.9337c0 0.5834 0.5333 0.9996 1.0666 0.9996h1.2667c0.517 0 1.2 0.4166 1.2 1h-9c-0.0004-0.65 0.5988-1 1.1988-1zm-1.1995 8h2v-1h-2zm7.9998-2v-2l-4 3 3.9998 3v-2l5.0002-0.00005v-2l-4.9998-0.00005zm-8 4h4v-1h-4zm6-7h-6v1h6zm-3 2h-3v1h3z"></path></svg></span></span><span data-v-6398caea="" class="button-vue__text">Copy value</span></span></button></div>
   <!---->
 </div>
 `;

tests/jest/components/admin/__snapshots__/TextInput.spec.js.snap

@@ -487,7 +487,7 @@ function mountSearchInput(fileInfo = {}, linkedWorkPackages = [], data = {}) {
 			...data,
 		}),
 		stubs: {
-			Avatar: true,
+			NcAvatar: true,
 			WorkPackage: true,
 		},
 		propsData: {

tests/jest/components/tab/SearchInput.spec.js

@@ -37,7 +37,7 @@ Object {
 `;
 
 exports[`SearchInput.vue work packages multiselect search list should not be displayed if the search results is empty 1`] = `
-<ul class="multiselect__content" style="display: block;">
+<ul role="listbox" id="listbox-null" class="multiselect__content" style="display: block;">
   <!---->
   <li style="display: none;"><span class="multiselect__option"><span>No results</span></span></li>
   <li><span class="multiselect__option">