Add visual regression test for AppSidebar

Signed-off-by: Raimund Schlüßler <[email protected]>

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

tests/visual/components/AppSidebar/AppSidebar.spec.js

@@ -24,7 +24,7 @@ import { mount } from 'cypress-vue-unit-test'
 
 // import Vue from 'vue'
 import AppSidebar from '../../../../src/components/AppSidebar/AppSidebar.vue'
-// import ActionButton from '../../../../src/components/ActionButton/ActionButton.vue'
+import ActionButton from '../../../../src/components/ActionButton/ActionButton.vue'
 
 // Server CSS styles
 import server from '../../../../styleguide/assets/server.css'
@@ -34,33 +34,67 @@ import variables from '../../../../styleguide/assets/variables.css'
 describe('AppSidebar.vue', () => {
 	'use strict'
 
-	it('Renders.', () => {
-		/**
-		 * We need this custom style because we run the AppSidebar component without a Content component,
-		 * which applies this rule:
-		 * https://github.com/nextcloud/nextcloud-vue/blob/master/src/components/Content/Content.vue#L73-L75
-		 */
-		const style = `
-			* {
-				box-sizing: border-box;
-			}
-		`
-		// Load the server CSS styles
-		const cssFiles = [server, icons, variables]
+	/**
+	 * We need this custom style because we run the AppSidebar component without a Content component,
+	 * which applies this rule:
+	 * https://github.com/nextcloud/nextcloud-vue/blob/master/src/components/Content/Content.vue#L73-L75
+	 */
+	const style = `
+		* {
+			box-sizing: border-box;
+		}
+	`
+	// Load the server CSS styles
+	const cssFiles = [server, icons, variables]
 
-		mount(AppSidebar, {
-			propsData: {
-				title: 'Sidebar title.',
-				subtitle: 'subtitle',
-				starred: true,
-			},
-			slots: {
-				default: ['<div />'],
-			},
-			style,
-			cssFiles,
-		})
+	// Possible props and actions
+	const starred = [null, false, true]
+	const compact = [false, true]
+	const header = ['', '<div style="background: no-repeat center/contain var(--icon-folder-000); height: 100%;" />']
+	const secondary = ['', '<ActionButton icon="icon-delete">Action1</ActionButton><ActionButton icon="icon-delete">Action2</ActionButton>']
+
+	const components = {
+		ActionButton,
+	}
+	// extend Vue with global components
+	const extensions = {
+		components,
+	}
+
+	starred.forEach(star => {
+		compact.forEach(comp => {
+			header.forEach(head => {
+				secondary.forEach(second => {
+					const fileName = `AppSidebar.vue
+						 - starred_${star === null ? 'null' : star ? 'true' : 'false'}
+						 - compact_${comp ? 'true' : 'false'}
+						 - header_${head ? 'image' : 'none'}
+						 - secondary_${second ? 'button' : 'none'}
+					`
 
-		cy.get('.app-sidebar').matchImageSnapshot()
+					const defaultOptions = {
+						propsData: {
+							title: 'Sidebar title.',
+							subtitle: 'subtitle',
+							starred: star,
+							compact: comp,
+						},
+						slots: {
+							default: ['<div />'],
+							header: head,
+							'secondary-actions': second,
+						},
+						style,
+						cssFiles,
+						extensions,
+					}
+
+					it('Renders ' + fileName, () => {
+						mount(AppSidebar, defaultOptions)
+						cy.get('.app-sidebar').matchImageSnapshot(fileName)
+					})
+				})
+			})
+		})
 	})
 })