Correctly apply server CSS styles

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

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

@@ -26,12 +26,29 @@ import { mount } from 'cypress-vue-unit-test'
 import AppSidebar from '../../../../src/components/AppSidebar/AppSidebar.vue'
 // import ActionButton from '../../../../src/components/ActionButton/ActionButton.vue'
 
+// Server CSS styles
+import server from '../../../../styleguide/assets/server.css'
+import icons from '../../../../styleguide/assets/icons.css'
+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]
+
 		mount(AppSidebar, {
-			attachTo: document.body,
 			propsData: {
 				title: 'Sidebar title.',
 				subtitle: 'subtitle',
@@ -40,9 +57,10 @@ describe('AppSidebar.vue', () => {
 			slots: {
 				default: ['<div />'],
 			},
+			style,
+			cssFiles,
 		})
-		cy.contains('Sidebar title.')
 
-		cy.matchImageSnapshot()
+		cy.get('.app-sidebar').matchImageSnapshot()
 	})
 })