Merge pull request #4954 from nextcloud-libraries/fix/4941/NcAppSetti…

…ngsDialog--respect-show-navigation-prop

fix(NcAppSettingsDialog): respect showNavigation prop

src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue

@@ -143,7 +143,7 @@ export default {
 	<NcDialog v-if="open"
 		v-bind="dialogProperties"
 		@update:open="handleCloseModal">
-		<template #navigation="{ isCollapsed }">
+		<template v-if="hasNavigation" #navigation="{ isCollapsed }">
 			<ul v-if="!isCollapsed"
 				:aria-label="settingsNavigationAriaLabel"
 				class="navigation-list"

tests/unit/components/NcAppNavigation/NcAppNavigation.spec.js

@@ -24,12 +24,7 @@ import { mount } from '@vue/test-utils'
 import { emit } from '@nextcloud/event-bus'
 import { nextTick } from 'vue'
 import NcAppNavigation from '../../../../src/components/NcAppNavigation/NcAppNavigation.vue'
-
-const resizeWindowWidth = async (width) => {
-	jest.spyOn(document.documentElement, 'clientWidth', 'get').mockReturnValue(width)
-	window.dispatchEvent(new window.Event('resize'))
-	await nextTick()
-}
+import { resizeWindowWidth } from '../../testing-utils.ts'
 
 const NAVIGATION__SELECTOR = 'nav'
 const TOGGLE_BUTTON__SELECTOR = 'button[aria-controls="app-navigation-vue"]'

tests/unit/components/NcAppSettingsDialog/NcAppSettingsDialog.spec.ts

@@ -23,6 +23,7 @@
 import { mount } from '@vue/test-utils'
 import NcAppSettingsDialog from '../../../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue'
 import { defineComponent, inject, nextTick, onMounted } from 'vue'
+import { resizeWindowWidth } from '../../testing-utils'
 
 /**
  * Mocked AppSettingsSection that just registers it self
@@ -37,13 +38,18 @@ const MockSection = defineComponent({
 })
 
 describe('NcAppSettingsDialog: Sections registration', () => {
+	beforeAll(async () => {
+		await resizeWindowWidth(1024)
+	})
+
 	it('injects register function to children', async () => {
 		const wrapper = mount(NcAppSettingsDialog, {
 			slots: {
 				default: MockSection,
 			},
 			propsData: {
 				open: true,
+				showNavigation: true,
 			},
 		})
 
@@ -58,6 +64,7 @@ describe('NcAppSettingsDialog: Sections registration', () => {
 		const wrapper = mount<Vue & { registerSection: any }>(NcAppSettingsDialog, {
 			propsData: {
 				open: true,
+				showNavigation: true,
 			},
 		})
 
@@ -72,6 +79,7 @@ describe('NcAppSettingsDialog: Sections registration', () => {
 		const wrapper = mount<Vue & { registerSection: any }>(NcAppSettingsDialog, {
 			propsData: {
 				open: true,
+				showNavigation: true,
 			},
 		})
 
@@ -96,6 +104,7 @@ describe('NcAppSettingsDialog: Sections registration', () => {
 		const wrapper = mount<Vue & { registerSection: any }>(NcAppSettingsDialog, {
 			propsData: {
 				open: true,
+				showNavigation: true,
 			},
 		})
 
@@ -115,6 +124,7 @@ describe('NcAppSettingsDialog: Sections registration', () => {
 		const wrapper = mount<Vue & { registerSection: any, unregisterSection: any }>(NcAppSettingsDialog, {
 			propsData: {
 				open: true,
+				showNavigation: true,
 			},
 		})
 

tests/unit/composables/useIsMobile.spec.js

@@ -1,12 +1,7 @@
 import { isRef, nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { useIsMobile } from '../../../src/composables/useIsMobile/index.js'
-
-const resizeWindowWidth = async (width) => {
-	jest.spyOn(document.documentElement, 'clientWidth', 'get').mockReturnValue(width)
-	window.dispatchEvent(new window.Event('resize'))
-	await nextTick()
-}
+import { resizeWindowWidth } from '../testing-utils.ts'
 
 describe('useIsMobile', () => {
 	it('should return ref', () => {

tests/unit/testing-utils.ts

@@ -0,0 +1,12 @@
+import { nextTick } from 'vue'
+
+/**
+ * Resize the window to a given width and wait for re-render
+ *
+ * @param {number} width - The width of the window
+ */
+export async function resizeWindowWidth(width) {
+	jest.spyOn(document.documentElement, 'clientWidth', 'get').mockReturnValue(width)
+	window.dispatchEvent(new window.Event('resize'))
+	await nextTick()
+}