Merge pull request #5286 from nextcloud-libraries/fix/app-nav-spacer

cypress/component/NcAppNavigationSpacer.cy.ts

@@ -0,0 +1,26 @@
+import NcAppNavigation from '../../src/components/NcAppNavigation/NcAppNavigation.vue'
+import NcAppNavigationItem from '../../src/components/NcAppNavigationItem/NcAppNavigationItem.vue'
+import NcAppNavigationSpacer from '../../src/components/NcAppNavigationSpacer/NcAppNavigationSpacer.vue'
+
+describe('NcAppNavigationSpacer', () => {
+	it('works', () => {
+		cy.mount({
+			render: (h) => h(NcAppNavigation, {
+				scopedSlots: {
+					list: () => [
+						h(NcAppNavigationItem, { props: { name: 'First' } }),
+						h(NcAppNavigationSpacer),
+						h(NcAppNavigationItem, { props: { name: 'Second' } }),
+					],
+				},
+			}),
+		})
+
+		cy.contains('li', 'First').should('exist').then(($first) => {
+			cy.contains('li', 'Second').should('exist').then(($second) => {
+				// Check that the second element is at least 22px below the first one (thats our spacer)
+				expect($second.offset()!.top - 22).gte($first.offset()!.top + $first.height()!)
+			})
+		})
+	})
+})

package.json

@@ -130,7 +130,7 @@
     "@vue/vue2-jest": "^29.0.0",
     "babel-jest": "^29.0.1",
     "babel-loader-exclude-node-modules-except": "^1.2.1",
-    "cypress": "^13.1.0",
+    "cypress": "^13.6.5",
     "cypress-visual-regression": "^5.0.0",
     "eslint-plugin-cypress": "^2.11.1",
     "file-loader": "^6.2.0",

src/components/NcAppNavigationSpacer/NcAppNavigationSpacer.vue

@@ -32,7 +32,6 @@ export default {
 <style scoped>
 	.app-navigation-spacer {
 		flex-shrink: 0;
-		order: 1;
 		height: 22px;
 	}