refactor: Migrate visual regression tests to Playwright

Signed-off-by: Ferdinand Thiessen <[email protected]>
nextcloud-libraries · Jul 17, 2024 · cca921d · cca921d
1 parent a097c54
commit cca921d
Show file tree

Hide file tree

Showing 188 changed files with 191 additions and 184 deletions.
diff --git a/.github/workflows/server-styling-update.yml b/.github/workflows/server-styling-update.yml
@@ -21,6 +21,7 @@ jobs:
           curl https://nextcloud.github.io/server/apps/theming/css/default.css | sed 's|/apps/theming/img|./img|g' > default.css
           # Fix icons and img css import
           curl https://nextcloud.github.io/server/core/css/server.css | sed 's|../../dist/icons.css|./icons.css|g' | sed 's|../img|./img|g' > server.css
+          curl https://nextcloud.github.io/server/core/css/apps.css | sed 's|../img|./img|g' > apps.css
           curl https://nextcloud.github.io/server/dist/icons.css --output icons.css
 
       - name: Create Pull Request

diff --git a/...avigationItem.cy.ts/NcAppNavigationItem-primary-on-active-entry-menu-active.png b/...avigationItem.cy.ts/NcAppNavigationItem-primary-on-active-entry-menu-active.png
diff --git a/...ts/base/AppNavigationItem.cy.ts/NcAppNavigationItem-primary-on-active-entry.png b/...ts/base/AppNavigationItem.cy.ts/NcAppNavigationItem-primary-on-active-entry.png
diff --git a/...avigationItem.cy.ts/NcAppNavigationItem-primary-on-active-route-menu-active.png b/...avigationItem.cy.ts/NcAppNavigationItem-primary-on-active-route-menu-active.png
diff --git a/...ts/base/AppNavigationItem.cy.ts/NcAppNavigationItem-primary-on-active-route.png b/...ts/base/AppNavigationItem.cy.ts/NcAppNavigationItem-primary-on-active-route.png
diff --git a/.../base/AppNavigationItem.cy.ts/NcAppNavigationItem-tertiary-non-active-entry.png b/.../base/AppNavigationItem.cy.ts/NcAppNavigationItem-tertiary-non-active-entry.png
diff --git a/.../base/AppNavigationItem.cy.ts/NcAppNavigationItem-tertiary-non-active-route.png b/.../base/AppNavigationItem.cy.ts/NcAppNavigationItem-tertiary-non-active-route.png
diff --git a/...ull-starred_false-compact_true-header_image-secondary_button-editable_false.png b/...ull-starred_false-compact_true-header_image-secondary_button-editable_false.png
diff --git a/...null-starred_false-compact_true-header_image-secondary_button-editable_true.png b/...null-starred_false-compact_true-header_image-secondary_button-editable_true.png
diff --git a/..._null-starred_false-compact_true-header_image-secondary_none-editable_false.png b/..._null-starred_false-compact_true-header_image-secondary_none-editable_false.png
diff --git a/...e_null-starred_false-compact_true-header_image-secondary_none-editable_true.png b/...e_null-starred_false-compact_true-header_image-secondary_none-editable_true.png
diff --git a/...null-starred_false-compact_true-header_none-secondary_button-editable_false.png b/...null-starred_false-compact_true-header_none-secondary_button-editable_false.png
diff --git a/..._null-starred_false-compact_true-header_none-secondary_button-editable_true.png b/..._null-starred_false-compact_true-header_none-secondary_button-editable_true.png
diff --git a/...e_null-starred_false-compact_true-header_none-secondary_none-editable_false.png b/...e_null-starred_false-compact_true-header_none-secondary_none-editable_false.png
diff --git a/...me_null-starred_false-compact_true-header_none-secondary_none-editable_true.png b/...me_null-starred_false-compact_true-header_none-secondary_none-editable_true.png
diff --git a/...null-starred_null-compact_true-header_image-secondary_button-editable_false.png b/...null-starred_null-compact_true-header_image-secondary_button-editable_false.png
diff --git a/..._null-starred_null-compact_true-header_image-secondary_button-editable_true.png b/..._null-starred_null-compact_true-header_image-secondary_button-editable_true.png
diff --git a/...e_null-starred_null-compact_true-header_image-secondary_none-editable_false.png b/...e_null-starred_null-compact_true-header_image-secondary_none-editable_false.png
diff --git a/...me_null-starred_null-compact_true-header_image-secondary_none-editable_true.png b/...me_null-starred_null-compact_true-header_image-secondary_none-editable_true.png
diff --git a/..._null-starred_null-compact_true-header_none-secondary_button-editable_false.png b/..._null-starred_null-compact_true-header_none-secondary_button-editable_false.png
diff --git a/...e_null-starred_null-compact_true-header_none-secondary_button-editable_true.png b/...e_null-starred_null-compact_true-header_none-secondary_button-editable_true.png
diff --git a/...me_null-starred_null-compact_true-header_none-secondary_none-editable_false.png b/...me_null-starred_null-compact_true-header_none-secondary_none-editable_false.png
diff --git a/...ame_null-starred_null-compact_true-header_none-secondary_none-editable_true.png b/...ame_null-starred_null-compact_true-header_none-secondary_none-editable_true.png
diff --git a/...null-starred_true-compact_true-header_image-secondary_button-editable_false.png b/...null-starred_true-compact_true-header_image-secondary_button-editable_false.png
diff --git a/..._null-starred_true-compact_true-header_image-secondary_button-editable_true.png b/..._null-starred_true-compact_true-header_image-secondary_button-editable_true.png
diff --git a/...e_null-starred_true-compact_true-header_image-secondary_none-editable_false.png b/...e_null-starred_true-compact_true-header_image-secondary_none-editable_false.png
diff --git a/...me_null-starred_true-compact_true-header_image-secondary_none-editable_true.png b/...me_null-starred_true-compact_true-header_image-secondary_none-editable_true.png
diff --git a/..._null-starred_true-compact_true-header_none-secondary_button-editable_false.png b/..._null-starred_true-compact_true-header_none-secondary_button-editable_false.png
diff --git a/...e_null-starred_true-compact_true-header_none-secondary_button-editable_true.png b/...e_null-starred_true-compact_true-header_none-secondary_button-editable_true.png
diff --git a/...me_null-starred_true-compact_true-header_none-secondary_none-editable_false.png b/...me_null-starred_true-compact_true-header_none-secondary_none-editable_false.png
diff --git a/...ame_null-starred_true-compact_true-header_none-secondary_none-editable_true.png b/...ame_null-starred_true-compact_true-header_none-secondary_none-editable_true.png
diff --git a/...rue-starred_false-compact_true-header_image-secondary_button-editable_false.png b/...rue-starred_false-compact_true-header_image-secondary_button-editable_false.png
diff --git a/...true-starred_false-compact_true-header_image-secondary_button-editable_true.png b/...true-starred_false-compact_true-header_image-secondary_button-editable_true.png
diff --git a/..._true-starred_false-compact_true-header_image-secondary_none-editable_false.png b/..._true-starred_false-compact_true-header_image-secondary_none-editable_false.png
diff --git a/...e_true-starred_false-compact_true-header_image-secondary_none-editable_true.png b/...e_true-starred_false-compact_true-header_image-secondary_none-editable_true.png
diff --git a/...true-starred_false-compact_true-header_none-secondary_button-editable_false.png b/...true-starred_false-compact_true-header_none-secondary_button-editable_false.png
diff --git a/..._true-starred_false-compact_true-header_none-secondary_button-editable_true.png b/..._true-starred_false-compact_true-header_none-secondary_button-editable_true.png
diff --git a/...e_true-starred_false-compact_true-header_none-secondary_none-editable_false.png b/...e_true-starred_false-compact_true-header_none-secondary_none-editable_false.png
diff --git a/...me_true-starred_false-compact_true-header_none-secondary_none-editable_true.png b/...me_true-starred_false-compact_true-header_none-secondary_none-editable_true.png
diff --git a/...true-starred_null-compact_true-header_image-secondary_button-editable_false.png b/...true-starred_null-compact_true-header_image-secondary_button-editable_false.png
diff --git a/..._true-starred_null-compact_true-header_image-secondary_button-editable_true.png b/..._true-starred_null-compact_true-header_image-secondary_button-editable_true.png
diff --git a/...e_true-starred_null-compact_true-header_image-secondary_none-editable_false.png b/...e_true-starred_null-compact_true-header_image-secondary_none-editable_false.png
diff --git a/...me_true-starred_null-compact_true-header_image-secondary_none-editable_true.png b/...me_true-starred_null-compact_true-header_image-secondary_none-editable_true.png
diff --git a/..._true-starred_null-compact_true-header_none-secondary_button-editable_false.png b/..._true-starred_null-compact_true-header_none-secondary_button-editable_false.png
diff --git a/...e_true-starred_null-compact_true-header_none-secondary_button-editable_true.png b/...e_true-starred_null-compact_true-header_none-secondary_button-editable_true.png
diff --git a/...me_true-starred_null-compact_true-header_none-secondary_none-editable_false.png b/...me_true-starred_null-compact_true-header_none-secondary_none-editable_false.png
diff --git a/...ame_true-starred_null-compact_true-header_none-secondary_none-editable_true.png b/...ame_true-starred_null-compact_true-header_none-secondary_none-editable_true.png
diff --git a/...true-starred_true-compact_true-header_image-secondary_button-editable_false.png b/...true-starred_true-compact_true-header_image-secondary_button-editable_false.png
diff --git a/..._true-starred_true-compact_true-header_image-secondary_button-editable_true.png b/..._true-starred_true-compact_true-header_image-secondary_button-editable_true.png
diff --git a/...e_true-starred_true-compact_true-header_image-secondary_none-editable_false.png b/...e_true-starred_true-compact_true-header_image-secondary_none-editable_false.png
diff --git a/...me_true-starred_true-compact_true-header_image-secondary_none-editable_true.png b/...me_true-starred_true-compact_true-header_image-secondary_none-editable_true.png
diff --git a/..._true-starred_true-compact_true-header_none-secondary_button-editable_false.png b/..._true-starred_true-compact_true-header_none-secondary_button-editable_false.png
diff --git a/...e_true-starred_true-compact_true-header_none-secondary_button-editable_true.png b/...e_true-starred_true-compact_true-header_none-secondary_button-editable_true.png
diff --git a/...me_true-starred_true-compact_true-header_none-secondary_none-editable_false.png b/...me_true-starred_true-compact_true-header_none-secondary_none-editable_false.png
diff --git a/...ame_true-starred_true-compact_true-header_none-secondary_none-editable_true.png b/...ame_true-starred_true-compact_true-header_none-secondary_none-editable_true.png
diff --git a/...ll-starred_false-compact_false-header_image-secondary_button-editable_false.png b/...ll-starred_false-compact_false-header_image-secondary_button-editable_false.png
diff --git a/...ull-starred_false-compact_false-header_image-secondary_button-editable_true.png b/...ull-starred_false-compact_false-header_image-secondary_button-editable_true.png
diff --git a/...null-starred_false-compact_false-header_image-secondary_none-editable_false.png b/...null-starred_false-compact_false-header_image-secondary_none-editable_false.png
diff --git a/..._null-starred_false-compact_false-header_image-secondary_none-editable_true.png b/..._null-starred_false-compact_false-header_image-secondary_none-editable_true.png
diff --git a/...ull-starred_false-compact_false-header_none-secondary_button-editable_false.png b/...ull-starred_false-compact_false-header_none-secondary_button-editable_false.png
diff --git a/...null-starred_false-compact_false-header_none-secondary_button-editable_true.png b/...null-starred_false-compact_false-header_none-secondary_button-editable_true.png
diff --git a/..._null-starred_false-compact_false-header_none-secondary_none-editable_false.png b/..._null-starred_false-compact_false-header_none-secondary_none-editable_false.png
diff --git a/...e_null-starred_false-compact_false-header_none-secondary_none-editable_true.png b/...e_null-starred_false-compact_false-header_none-secondary_none-editable_true.png
diff --git a/...ull-starred_null-compact_false-header_image-secondary_button-editable_false.png b/...ull-starred_null-compact_false-header_image-secondary_button-editable_false.png
diff --git a/...null-starred_null-compact_false-header_image-secondary_button-editable_true.png b/...null-starred_null-compact_false-header_image-secondary_button-editable_true.png
diff --git a/..._null-starred_null-compact_false-header_image-secondary_none-editable_false.png b/..._null-starred_null-compact_false-header_image-secondary_none-editable_false.png
diff --git a/...e_null-starred_null-compact_false-header_image-secondary_none-editable_true.png b/...e_null-starred_null-compact_false-header_image-secondary_none-editable_true.png
diff --git a/...null-starred_null-compact_false-header_none-secondary_button-editable_false.png b/...null-starred_null-compact_false-header_none-secondary_button-editable_false.png
diff --git a/..._null-starred_null-compact_false-header_none-secondary_button-editable_true.png b/..._null-starred_null-compact_false-header_none-secondary_button-editable_true.png
diff --git a/...e_null-starred_null-compact_false-header_none-secondary_none-editable_false.png b/...e_null-starred_null-compact_false-header_none-secondary_none-editable_false.png
diff --git a/...me_null-starred_null-compact_false-header_none-secondary_none-editable_true.png b/...me_null-starred_null-compact_false-header_none-secondary_none-editable_true.png
diff --git a/...ull-starred_true-compact_false-header_image-secondary_button-editable_false.png b/...ull-starred_true-compact_false-header_image-secondary_button-editable_false.png
diff --git a/...null-starred_true-compact_false-header_image-secondary_button-editable_true.png b/...null-starred_true-compact_false-header_image-secondary_button-editable_true.png
diff --git a/..._null-starred_true-compact_false-header_image-secondary_none-editable_false.png b/..._null-starred_true-compact_false-header_image-secondary_none-editable_false.png
diff --git a/...e_null-starred_true-compact_false-header_image-secondary_none-editable_true.png b/...e_null-starred_true-compact_false-header_image-secondary_none-editable_true.png
diff --git a/...null-starred_true-compact_false-header_none-secondary_button-editable_false.png b/...null-starred_true-compact_false-header_none-secondary_button-editable_false.png
diff --git a/..._null-starred_true-compact_false-header_none-secondary_button-editable_true.png b/..._null-starred_true-compact_false-header_none-secondary_button-editable_true.png
diff --git a/...e_null-starred_true-compact_false-header_none-secondary_none-editable_false.png b/...e_null-starred_true-compact_false-header_none-secondary_none-editable_false.png
diff --git a/...me_null-starred_true-compact_false-header_none-secondary_none-editable_true.png b/...me_null-starred_true-compact_false-header_none-secondary_none-editable_true.png
diff --git a/...ue-starred_false-compact_false-header_image-secondary_button-editable_false.png b/...ue-starred_false-compact_false-header_image-secondary_button-editable_false.png
diff --git a/...rue-starred_false-compact_false-header_image-secondary_button-editable_true.png b/...rue-starred_false-compact_false-header_image-secondary_button-editable_true.png
diff --git a/...true-starred_false-compact_false-header_image-secondary_none-editable_false.png b/...true-starred_false-compact_false-header_image-secondary_none-editable_false.png
diff --git a/..._true-starred_false-compact_false-header_image-secondary_none-editable_true.png b/..._true-starred_false-compact_false-header_image-secondary_none-editable_true.png
diff --git a/...rue-starred_false-compact_false-header_none-secondary_button-editable_false.png b/...rue-starred_false-compact_false-header_none-secondary_button-editable_false.png
diff --git a/...true-starred_false-compact_false-header_none-secondary_button-editable_true.png b/...true-starred_false-compact_false-header_none-secondary_button-editable_true.png
diff --git a/..._true-starred_false-compact_false-header_none-secondary_none-editable_false.png b/..._true-starred_false-compact_false-header_none-secondary_none-editable_false.png
diff --git a/...e_true-starred_false-compact_false-header_none-secondary_none-editable_true.png b/...e_true-starred_false-compact_false-header_none-secondary_none-editable_true.png
diff --git a/...rue-starred_null-compact_false-header_image-secondary_button-editable_false.png b/...rue-starred_null-compact_false-header_image-secondary_button-editable_false.png
diff --git a/...true-starred_null-compact_false-header_image-secondary_button-editable_true.png b/...true-starred_null-compact_false-header_image-secondary_button-editable_true.png
diff --git a/..._true-starred_null-compact_false-header_image-secondary_none-editable_false.png b/..._true-starred_null-compact_false-header_image-secondary_none-editable_false.png
diff --git a/...e_true-starred_null-compact_false-header_image-secondary_none-editable_true.png b/...e_true-starred_null-compact_false-header_image-secondary_none-editable_true.png
diff --git a/...true-starred_null-compact_false-header_none-secondary_button-editable_false.png b/...true-starred_null-compact_false-header_none-secondary_button-editable_false.png
diff --git a/..._true-starred_null-compact_false-header_none-secondary_button-editable_true.png b/..._true-starred_null-compact_false-header_none-secondary_button-editable_true.png
diff --git a/...e_true-starred_null-compact_false-header_none-secondary_none-editable_false.png b/...e_true-starred_null-compact_false-header_none-secondary_none-editable_false.png
diff --git a/...me_true-starred_null-compact_false-header_none-secondary_none-editable_true.png b/...me_true-starred_null-compact_false-header_none-secondary_none-editable_true.png
diff --git a/...rue-starred_true-compact_false-header_image-secondary_button-editable_false.png b/...rue-starred_true-compact_false-header_image-secondary_button-editable_false.png
diff --git a/...true-starred_true-compact_false-header_image-secondary_button-editable_true.png b/...true-starred_true-compact_false-header_image-secondary_button-editable_true.png
diff --git a/..._true-starred_true-compact_false-header_image-secondary_none-editable_false.png b/..._true-starred_true-compact_false-header_image-secondary_none-editable_false.png
diff --git a/...e_true-starred_true-compact_false-header_image-secondary_none-editable_true.png b/...e_true-starred_true-compact_false-header_image-secondary_none-editable_true.png
diff --git a/...true-starred_true-compact_false-header_none-secondary_button-editable_false.png b/...true-starred_true-compact_false-header_none-secondary_button-editable_false.png
diff --git a/..._true-starred_true-compact_false-header_none-secondary_button-editable_true.png b/..._true-starred_true-compact_false-header_none-secondary_button-editable_true.png
diff --git a/...e_true-starred_true-compact_false-header_none-secondary_none-editable_false.png b/...e_true-starred_true-compact_false-header_none-secondary_none-editable_false.png
diff --git a/...me_true-starred_true-compact_false-header_none-secondary_none-editable_true.png b/...me_true-starred_true-compact_false-header_none-secondary_none-editable_true.png
diff --git a/cypress/visual/AppNavigationItem.cy.ts b/cypress/visual/AppNavigationItem.cy.ts
diff --git a/cypress/visual/NcAppSidebar/NcAppSidebar-compact.cy.js b/cypress/visual/NcAppSidebar/NcAppSidebar-compact.cy.js
diff --git a/cypress/visual/NcAppSidebar/NcAppSidebar.cy.js b/cypress/visual/NcAppSidebar/NcAppSidebar.cy.js
diff --git a/cypress/visual/NcAppSidebar/NcAppSidebarMixin.js b/cypress/visual/NcAppSidebar/NcAppSidebarMixin.js
diff --git a/cypress/visual/NcAppSidebar/style.css b/cypress/visual/NcAppSidebar/style.css
diff --git a/tests/component/components/NcAppNavigationItem/AppNavigation.story.vue b/tests/component/components/NcAppNavigationItem/AppNavigation.story.vue
@@ -0,0 +1,25 @@
+<template>
+	<NcContent app-name="testing">
+		<NcAppNavigation aria-label="In-app navigation">
+			<template #list>
+				<NcAppNavigationItem name="Home" to="/" :editable="true" />
+				<NcAppNavigationItem name="Foo" to="/foo" :editable="true" />
+				<NcAppNavigationItem name="Back" active :editable="true" />
+				<NcAppNavigationItem name="Bar" :editable="true" />
+			</template>
+		</NcAppNavigation>
+		<NcAppContent />
+	</NcContent>
+</template>
+
+<script setup lang="ts">
+/*!
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import NcAppContent from '../../../../src/components/NcAppContent/NcAppContent.vue'
+import NcAppNavigation from '../../../../src/components/NcAppNavigation/NcAppNavigation.vue'
+import NcAppNavigationItem from '../../../../src/components/NcAppNavigationItem/NcAppNavigationItem.vue'
+import NcContent from '../../../../src/components/NcContent/NcContent.vue'
+</script>
diff --git a/tests/component/components/NcAppNavigationItem/visual.spec.ts b/tests/component/components/NcAppNavigationItem/visual.spec.ts
@@ -0,0 +1,78 @@
+/**
+ * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import type { HooksConfig } from '../../setup/index'
+import { expect, test } from '@playwright/experimental-ct-vue'
+
+import AppNavigation from './AppNavigation.story.vue'
+
+// A little bit hacky but we test a wrapper element so we need to use the real NcContent and NcAppNavigation
+test.beforeEach(async ({ mount, page }) => {
+	const handle = await page.locator('#content').elementHandle()
+	expect(handle).not.toBeNull()
+	await handle!.evaluate((node) => { node.innerHTML = ''; node.id = 'root' })
+
+	await mount<HooksConfig>(AppNavigation, {
+		hooksConfig: {
+			routes: [
+				{ path: '/', component: AppNavigation },
+				{ path: '/foo', component: AppNavigation },
+			]
+		}
+	})
+})
+
+test('has primary styling on active route', { tag: '@visual' }, async ({ page }) => {
+	const navigation = page.getByRole('navigation', { name: 'In-app navigation'})
+
+	await expect(navigation).toBeVisible()
+	await expect(navigation.getByRole('listitem', { name: 'Home' })).toHaveScreenshot()
+})
+
+test('has primary button styling on active route with editing=true', { tag: '@visual' }, async ({ page }) => {
+	const navigation = page.getByRole('navigation', { name: 'In-app navigation'})
+	const item = navigation.getByRole('listitem', { name: 'Home' })
+
+	await expect(navigation).toBeVisible()
+	await expect(item).toBeVisible()
+
+	await item.getByRole('button', { name: 'Edit item' }).click()
+	await expect(item.getByRole('textbox')).toBeVisible()
+
+	await expect(item).toHaveScreenshot()
+})
+
+test('has tertiary styling on non active route', { tag: '@visual' }, async ({ page }) => {
+	const navigation = page.getByRole('navigation', { name: 'In-app navigation'})
+
+	await expect(navigation).toBeVisible()
+	await expect(navigation.getByRole('listitem', { name: 'Foo'})).toHaveScreenshot()
+})
+
+test('has primary styling on active entry', { tag: '@visual' }, async ({ page }) => {
+	const navigation = page.getByRole('navigation', { name: 'In-app navigation'})
+
+	await expect(navigation).toBeVisible()
+	await expect(navigation.getByRole('listitem', { name: 'Back' })).toHaveScreenshot()
+})
+
+test('has primary button styling on active entry with editing=true', { tag: '@visual' }, async ({ page }) => {
+	const navigation = page.getByRole('navigation', { name: 'In-app navigation'})
+	const item = navigation.getByRole('listitem', { name: 'Back' })
+
+	await expect(navigation).toBeVisible()
+	await expect(item).toBeVisible()
+
+	await item.getByRole('button', { name: 'Edit item' }).click()
+	await expect(item.getByRole('textbox')).toBeVisible()
+
+	await expect(item).toHaveScreenshot()
+})
+
+test('has tertiary styling on non active entry', { tag: '@visual' }, async ({ page }) => {
+	const navigation = page.getByRole('navigation', { name: 'In-app navigation'})
+
+	await expect(navigation).toBeVisible()
+	await expect(navigation.getByRole('listitem', { name: 'Bar' })).toHaveScreenshot()
+})
diff --git a/tests/component/components/NcAppSidebar/AppSidebar.story.vue b/tests/component/components/NcAppSidebar/AppSidebar.story.vue
@@ -0,0 +1,50 @@
+<template>
+	<NcContent app-name="testing">
+		<NcAppContent>
+			App content
+		</NcAppContent>
+		<NcAppSidebar :compact="compact"
+			name="Very long title that will certainly overflow the sidebar width"
+			:subname="subname ? 'Very long subtitle what will certainly overflow the sidebar width' : ''"
+			:name-editable="nameEditable"
+			>
+			<template v-if="header" #header>
+				<div style="background-color: gold; height: 100%; width: 100%"></div>
+			</template>
+			<template v-if="secondaryActions" #secondary-actions>
+				<NcActionButton>
+					<template #icon>
+						<IconDelete :size="20" />
+					</template>
+					Action1
+				</NcActionButton>
+				<NcActionButton>
+					Action2
+				</NcActionButton>
+			</template>
+			<div>Sidebar content</div>
+		</NcAppSidebar>
+	</NcContent>
+</template>
+
+<script setup lang="ts">
+/*!
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import NcAppContent from '../../../../src/components/NcAppContent/NcAppContent.vue'
+import NcAppSidebar from '../../../../src/components/NcAppSidebar/NcAppSidebar.vue'
+import NcActionButton from '../../../../src/components/NcActionButton/NcActionButton.vue'
+import NcContent from '../../../../src/components/NcContent/NcContent.vue'
+
+import IconDelete from 'vue-material-design-icons/Delete.vue'
+
+defineProps<{
+	compact: boolean
+	subname: boolean
+	nameEditable: boolean
+	header: boolean
+	secondaryActions: boolean
+}>()
+</script>
diff --git a/tests/component/components/NcAppSidebar/visual.spec.ts b/tests/component/components/NcAppSidebar/visual.spec.ts
@@ -0,0 +1,37 @@
+/**
+ * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import { expect, test } from '@playwright/experimental-ct-vue'
+
+import AppSidebar from './AppSidebar.story.vue'
+
+// A little bit hacky but we test a wrapper element so we need to use the real NcContent and NcAppNavigation
+test.beforeEach(async ({ mount, page }) => {
+	const handle = await page.locator('#content').elementHandle()
+	expect(handle).not.toBeNull()
+	await handle!.evaluate((node) => { node.innerHTML = ''; node.id = 'root' })
+})
+
+new Array(2**5)
+	.fill('')
+	.map((_, index) => ({
+		compact: Boolean(index&16),
+		subname: Boolean(index&8),
+		nameEditable: Boolean(index&4),
+		header: Boolean(index&2),
+		secondaryActions: Boolean(index&1),
+	}))
+	.forEach((props, index) => {
+		test(
+			`Sidebar header${props.compact ? ': compact ' : (index > 0 ? ': ' : '')}${props.subname ? 'subname ' : ''}${props.nameEditable ? 'editable ' : ''}${props.header ? 'header ' : ''}${props.secondaryActions ? 'actions' : ''}`,
+			{ tag: '@visual' },
+			async ({ mount },
+		) => {
+			const component = await mount(AppSidebar, {
+				props,
+			})
+			await expect(component).toBeVisible()
+			await expect(component.locator('header')).toHaveScreenshot({ caret: 'hide' })
+		})
+	})
diff --git a/...s-primary-button-styling-on-active-entry-with-editing-true-1-chromium-linux.png b/...s-primary-button-styling-on-active-entry-with-editing-true-1-chromium-linux.png
diff --git a/...as-primary-button-styling-on-active-entry-with-editing-true-1-firefox-linux.png b/...as-primary-button-styling-on-active-entry-with-editing-true-1-firefox-linux.png
diff --git a/...s-primary-button-styling-on-active-route-with-editing-true-1-chromium-linux.png b/...s-primary-button-styling-on-active-route-with-editing-true-1-chromium-linux.png
diff --git a/...as-primary-button-styling-on-active-route-with-editing-true-1-firefox-linux.png b/...as-primary-button-styling-on-active-route-with-editing-true-1-firefox-linux.png
diff --git a/...sual.spec.ts-snapshots/has-primary-styling-on-active-entry-1-chromium-linux.png b/...sual.spec.ts-snapshots/has-primary-styling-on-active-entry-1-chromium-linux.png
diff --git a/...isual.spec.ts-snapshots/has-primary-styling-on-active-entry-1-firefox-linux.png b/...isual.spec.ts-snapshots/has-primary-styling-on-active-entry-1-firefox-linux.png
diff --git a/...sual.spec.ts-snapshots/has-primary-styling-on-active-route-1-chromium-linux.png b/...sual.spec.ts-snapshots/has-primary-styling-on-active-route-1-chromium-linux.png
diff --git a/...isual.spec.ts-snapshots/has-primary-styling-on-active-route-1-firefox-linux.png b/...isual.spec.ts-snapshots/has-primary-styling-on-active-route-1-firefox-linux.png
diff --git a/...spec.ts-snapshots/has-tertiary-styling-on-non-active-entry-1-chromium-linux.png b/...spec.ts-snapshots/has-tertiary-styling-on-non-active-entry-1-chromium-linux.png
diff --git a/....spec.ts-snapshots/has-tertiary-styling-on-non-active-entry-1-firefox-linux.png b/....spec.ts-snapshots/has-tertiary-styling-on-non-active-entry-1-firefox-linux.png
diff --git a/...spec.ts-snapshots/has-tertiary-styling-on-non-active-route-1-chromium-linux.png b/...spec.ts-snapshots/has-tertiary-styling-on-non-active-route-1-chromium-linux.png
diff --git a/....spec.ts-snapshots/has-tertiary-styling-on-non-active-route-1-firefox-linux.png b/....spec.ts-snapshots/has-tertiary-styling-on-non-active-route-1-firefox-linux.png
diff --git a/...nents/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-1-chromium-linux.png b/...nents/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-1-chromium-linux.png
diff --git a/...onents/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-1-firefox-linux.png b/...onents/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-1-firefox-linux.png
diff --git a/...AppSidebar/visual.spec.ts-snapshots/Sidebar-header-actions-1-chromium-linux.png b/...AppSidebar/visual.spec.ts-snapshots/Sidebar-header-actions-1-chromium-linux.png
diff --git a/...cAppSidebar/visual.spec.ts-snapshots/Sidebar-header-actions-1-firefox-linux.png b/...cAppSidebar/visual.spec.ts-snapshots/Sidebar-header-actions-1-firefox-linux.png
diff --git a/...AppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-1-chromium-linux.png b/...AppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-1-chromium-linux.png
diff --git a/...cAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-1-firefox-linux.png b/...cAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-1-firefox-linux.png
diff --git a/...ar/visual.spec.ts-snapshots/Sidebar-header-compact-actions-1-chromium-linux.png b/...ar/visual.spec.ts-snapshots/Sidebar-header-compact-actions-1-chromium-linux.png
diff --git a/...bar/visual.spec.ts-snapshots/Sidebar-header-compact-actions-1-firefox-linux.png b/...bar/visual.spec.ts-snapshots/Sidebar-header-compact-actions-1-firefox-linux.png
diff --git a/...r/visual.spec.ts-snapshots/Sidebar-header-compact-editable-1-chromium-linux.png b/...r/visual.spec.ts-snapshots/Sidebar-header-compact-editable-1-chromium-linux.png
diff --git a/...ar/visual.spec.ts-snapshots/Sidebar-header-compact-editable-1-firefox-linux.png b/...ar/visual.spec.ts-snapshots/Sidebar-header-compact-editable-1-firefox-linux.png
diff --git a/....spec.ts-snapshots/Sidebar-header-compact-editable-actions-1-chromium-linux.png b/....spec.ts-snapshots/Sidebar-header-compact-editable-actions-1-chromium-linux.png
diff --git a/...l.spec.ts-snapshots/Sidebar-header-compact-editable-actions-1-firefox-linux.png b/...l.spec.ts-snapshots/Sidebar-header-compact-editable-actions-1-firefox-linux.png
diff --git a/...l.spec.ts-snapshots/Sidebar-header-compact-editable-header-1-chromium-linux.png b/...l.spec.ts-snapshots/Sidebar-header-compact-editable-header-1-chromium-linux.png
diff --git a/...al.spec.ts-snapshots/Sidebar-header-compact-editable-header-1-firefox-linux.png b/...al.spec.ts-snapshots/Sidebar-header-compact-editable-header-1-firefox-linux.png
diff --git a/...s-snapshots/Sidebar-header-compact-editable-header-actions-1-chromium-linux.png b/...s-snapshots/Sidebar-header-compact-editable-header-actions-1-chromium-linux.png
diff --git a/...ts-snapshots/Sidebar-header-compact-editable-header-actions-1-firefox-linux.png b/...ts-snapshots/Sidebar-header-compact-editable-header-actions-1-firefox-linux.png
diff --git a/...bar/visual.spec.ts-snapshots/Sidebar-header-compact-header-1-chromium-linux.png b/...bar/visual.spec.ts-snapshots/Sidebar-header-compact-header-1-chromium-linux.png
diff --git a/...ebar/visual.spec.ts-snapshots/Sidebar-header-compact-header-1-firefox-linux.png b/...ebar/visual.spec.ts-snapshots/Sidebar-header-compact-header-1-firefox-linux.png
diff --git a/...al.spec.ts-snapshots/Sidebar-header-compact-header-actions-1-chromium-linux.png b/...al.spec.ts-snapshots/Sidebar-header-compact-header-actions-1-chromium-linux.png
diff --git a/...ual.spec.ts-snapshots/Sidebar-header-compact-header-actions-1-firefox-linux.png b/...ual.spec.ts-snapshots/Sidebar-header-compact-header-actions-1-firefox-linux.png
diff --git a/...ar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-1-chromium-linux.png b/...ar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-1-chromium-linux.png
diff --git a/...bar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-1-firefox-linux.png b/...bar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-1-firefox-linux.png
diff --git a/...l.spec.ts-snapshots/Sidebar-header-compact-subname-actions-1-chromium-linux.png b/...l.spec.ts-snapshots/Sidebar-header-compact-subname-actions-1-chromium-linux.png
diff --git a/...al.spec.ts-snapshots/Sidebar-header-compact-subname-actions-1-firefox-linux.png b/...al.spec.ts-snapshots/Sidebar-header-compact-subname-actions-1-firefox-linux.png
diff --git a/....spec.ts-snapshots/Sidebar-header-compact-subname-editable-1-chromium-linux.png b/....spec.ts-snapshots/Sidebar-header-compact-subname-editable-1-chromium-linux.png
diff --git a/...l.spec.ts-snapshots/Sidebar-header-compact-subname-editable-1-firefox-linux.png b/...l.spec.ts-snapshots/Sidebar-header-compact-subname-editable-1-firefox-linux.png
diff --git a/...-snapshots/Sidebar-header-compact-subname-editable-actions-1-chromium-linux.png b/...-snapshots/Sidebar-header-compact-subname-editable-actions-1-chromium-linux.png
diff --git a/...s-snapshots/Sidebar-header-compact-subname-editable-actions-1-firefox-linux.png b/...s-snapshots/Sidebar-header-compact-subname-editable-actions-1-firefox-linux.png
diff --git a/...s-snapshots/Sidebar-header-compact-subname-editable-header-1-chromium-linux.png b/...s-snapshots/Sidebar-header-compact-subname-editable-header-1-chromium-linux.png
diff --git a/...ts-snapshots/Sidebar-header-compact-subname-editable-header-1-firefox-linux.png b/...ts-snapshots/Sidebar-header-compact-subname-editable-header-1-firefox-linux.png
diff --git a/...ots/Sidebar-header-compact-subname-editable-header-actions-1-chromium-linux.png b/...ots/Sidebar-header-compact-subname-editable-header-actions-1-chromium-linux.png
diff --git a/...hots/Sidebar-header-compact-subname-editable-header-actions-1-firefox-linux.png b/...hots/Sidebar-header-compact-subname-editable-header-actions-1-firefox-linux.png
diff --git a/...al.spec.ts-snapshots/Sidebar-header-compact-subname-header-1-chromium-linux.png b/...al.spec.ts-snapshots/Sidebar-header-compact-subname-header-1-chromium-linux.png
diff --git a/...ual.spec.ts-snapshots/Sidebar-header-compact-subname-header-1-firefox-linux.png b/...ual.spec.ts-snapshots/Sidebar-header-compact-subname-header-1-firefox-linux.png
diff --git a/...ts-snapshots/Sidebar-header-compact-subname-header-actions-1-chromium-linux.png b/...ts-snapshots/Sidebar-header-compact-subname-header-actions-1-chromium-linux.png
diff --git a/....ts-snapshots/Sidebar-header-compact-subname-header-actions-1-firefox-linux.png b/....ts-snapshots/Sidebar-header-compact-subname-header-actions-1-firefox-linux.png
diff --git a/...ppSidebar/visual.spec.ts-snapshots/Sidebar-header-editable-1-chromium-linux.png b/...ppSidebar/visual.spec.ts-snapshots/Sidebar-header-editable-1-chromium-linux.png
diff --git a/...AppSidebar/visual.spec.ts-snapshots/Sidebar-header-editable-1-firefox-linux.png b/...AppSidebar/visual.spec.ts-snapshots/Sidebar-header-editable-1-firefox-linux.png
diff --git a/...r/visual.spec.ts-snapshots/Sidebar-header-editable-actions-1-chromium-linux.png b/...r/visual.spec.ts-snapshots/Sidebar-header-editable-actions-1-chromium-linux.png
diff --git a/...ar/visual.spec.ts-snapshots/Sidebar-header-editable-actions-1-firefox-linux.png b/...ar/visual.spec.ts-snapshots/Sidebar-header-editable-actions-1-firefox-linux.png
diff --git a/...ar/visual.spec.ts-snapshots/Sidebar-header-editable-header-1-chromium-linux.png b/...ar/visual.spec.ts-snapshots/Sidebar-header-editable-header-1-chromium-linux.png
diff --git a/...bar/visual.spec.ts-snapshots/Sidebar-header-editable-header-1-firefox-linux.png b/...bar/visual.spec.ts-snapshots/Sidebar-header-editable-header-1-firefox-linux.png
diff --git a/...l.spec.ts-snapshots/Sidebar-header-editable-header-actions-1-chromium-linux.png b/...l.spec.ts-snapshots/Sidebar-header-editable-header-actions-1-chromium-linux.png
diff --git a/...al.spec.ts-snapshots/Sidebar-header-editable-header-actions-1-firefox-linux.png b/...al.spec.ts-snapshots/Sidebar-header-editable-header-actions-1-firefox-linux.png
diff --git a/...cAppSidebar/visual.spec.ts-snapshots/Sidebar-header-header-1-chromium-linux.png b/...cAppSidebar/visual.spec.ts-snapshots/Sidebar-header-header-1-chromium-linux.png
diff --git a/...NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-header-1-firefox-linux.png b/...NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-header-1-firefox-linux.png
diff --git a/...bar/visual.spec.ts-snapshots/Sidebar-header-header-actions-1-chromium-linux.png b/...bar/visual.spec.ts-snapshots/Sidebar-header-header-actions-1-chromium-linux.png
diff --git a/...ebar/visual.spec.ts-snapshots/Sidebar-header-header-actions-1-firefox-linux.png b/...ebar/visual.spec.ts-snapshots/Sidebar-header-header-actions-1-firefox-linux.png
diff --git a/...AppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-1-chromium-linux.png b/...AppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-1-chromium-linux.png
diff --git a/...cAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-1-firefox-linux.png b/...cAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-1-firefox-linux.png
diff --git a/...ar/visual.spec.ts-snapshots/Sidebar-header-subname-actions-1-chromium-linux.png b/...ar/visual.spec.ts-snapshots/Sidebar-header-subname-actions-1-chromium-linux.png
diff --git a/...bar/visual.spec.ts-snapshots/Sidebar-header-subname-actions-1-firefox-linux.png b/...bar/visual.spec.ts-snapshots/Sidebar-header-subname-actions-1-firefox-linux.png
diff --git a/...r/visual.spec.ts-snapshots/Sidebar-header-subname-editable-1-chromium-linux.png b/...r/visual.spec.ts-snapshots/Sidebar-header-subname-editable-1-chromium-linux.png
diff --git a/...ar/visual.spec.ts-snapshots/Sidebar-header-subname-editable-1-firefox-linux.png b/...ar/visual.spec.ts-snapshots/Sidebar-header-subname-editable-1-firefox-linux.png
diff --git a/....spec.ts-snapshots/Sidebar-header-subname-editable-actions-1-chromium-linux.png b/....spec.ts-snapshots/Sidebar-header-subname-editable-actions-1-chromium-linux.png
diff --git a/...l.spec.ts-snapshots/Sidebar-header-subname-editable-actions-1-firefox-linux.png b/...l.spec.ts-snapshots/Sidebar-header-subname-editable-actions-1-firefox-linux.png
diff --git a/...l.spec.ts-snapshots/Sidebar-header-subname-editable-header-1-chromium-linux.png b/...l.spec.ts-snapshots/Sidebar-header-subname-editable-header-1-chromium-linux.png
diff --git a/...al.spec.ts-snapshots/Sidebar-header-subname-editable-header-1-firefox-linux.png b/...al.spec.ts-snapshots/Sidebar-header-subname-editable-header-1-firefox-linux.png
diff --git a/...s-snapshots/Sidebar-header-subname-editable-header-actions-1-chromium-linux.png b/...s-snapshots/Sidebar-header-subname-editable-header-actions-1-chromium-linux.png
diff --git a/...ts-snapshots/Sidebar-header-subname-editable-header-actions-1-firefox-linux.png b/...ts-snapshots/Sidebar-header-subname-editable-header-actions-1-firefox-linux.png
diff --git a/...bar/visual.spec.ts-snapshots/Sidebar-header-subname-header-1-chromium-linux.png b/...bar/visual.spec.ts-snapshots/Sidebar-header-subname-header-1-chromium-linux.png
diff --git a/...ebar/visual.spec.ts-snapshots/Sidebar-header-subname-header-1-firefox-linux.png b/...ebar/visual.spec.ts-snapshots/Sidebar-header-subname-header-1-firefox-linux.png
diff --git a/...al.spec.ts-snapshots/Sidebar-header-subname-header-actions-1-chromium-linux.png b/...al.spec.ts-snapshots/Sidebar-header-subname-header-actions-1-chromium-linux.png
diff --git a/...ual.spec.ts-snapshots/Sidebar-header-subname-header-actions-1-firefox-linux.png b/...ual.spec.ts-snapshots/Sidebar-header-subname-header-actions-1-firefox-linux.png