Merge pull request #5054 from nextcloud/fix/print_css

fix(css): Fix print view in viewer and single-file share

.github/workflows/cypress.yml

@@ -170,7 +170,9 @@ jobs:
         if: failure()
         with:
           name: Upload screenshots
-          path: apps/${{ env.APP_NAME }}/cypress/screenshots/
+          path: |
+            apps/${{ env.APP_NAME }}/cypress/screenshots/
+            apps/${{ env.APP_NAME }}/cypress/snapshots/
           retention-days: 5
 
       - name: Upload nextcloud logs

.gitignore

@@ -4,6 +4,8 @@ node_modules/
 vendor/
 img/twemoji/
 cypress/screenshots/
+cypress/snapshots/actual
+cypress/snapshots/diff
 cypress/videos/
 cypress/downloads/
 .php-cs-fixer.cache

cypress.config.js

@@ -1,5 +1,6 @@
 const { defineConfig } = require('cypress')
 const cypressSplit = require('cypress-split')
+const getCompareSnapshotsPlugin = require('cypress-visual-regression/dist/plugin.js')
 
 module.exports = defineConfig({
 	e2e: {
@@ -14,9 +15,18 @@ module.exports = defineConfig({
 	projectId: 'hx9gqy',
 	viewportWidth: 1280,
 	viewportHeight: 900,
+	screenshotsFolder: './cypress/snapshots/actual',
+	trashAssetsBeforeRuns: true,
+	env: {
+		failSilently: false,
+		type: 'actual',
+		SNAPSHOT_BASE_DIRECTORY: './cypress/snapshots/base',
+		SNAPSHOT_DIFF_DIRECTORY: './cypress/snapshots/diff',
+	},
 	e2e: {
 		setupNodeEvents(on, config) {
 			cypressSplit(on, config)
+			getCompareSnapshotsPlugin(on, config)
 
 			const browserify = require('@cypress/browserify-preprocessor')
 			const webpack = require('@cypress/webpack-preprocessor')
@@ -38,5 +48,5 @@ module.exports = defineConfig({
 		// do not retry in `cypress open`
 		openMode: 0,
 	},
-	"numTestsKeptInMemory": 5,
+	'numTestsKeptInMemory': 5,
 })

cypress/e2e/print.spec.js

@@ -0,0 +1,66 @@
+/**
+ *
+ * @copyright Copyright (c) 2023 Jonas <[email protected]>
+ *
+ * @author Jonas <[email protected]>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { initUserAndFiles, randUser } from '../utils/index.js'
+const user = randUser()
+
+describe('Open print.md and compare print view', function() {
+	before(function() {
+		initUserAndFiles(user, 'print.md')
+	})
+	beforeEach(function() {
+		cy.login(user)
+		cy.visit('/apps/files')
+	})
+
+	it('Renders print view in viewer', function() {
+		cy.openFile('print.md')
+		cy.setCssMedia('print')
+
+		cy.getEditor().should('be.visible')
+		cy.getContent()
+			.get('h1:not(.hidden-visually)').should('contain', 'Print test')
+			.should('be.visible')
+
+		cy.compareSnapshot('print view in viewer', { capture: 'fullPage' })
+		cy.setCssMedia('screen')
+	})
+
+	it('Renders print view in single-file share', function() {
+		cy.shareFile('/print.md', { edit: true })
+			.then((token) => {
+				cy.logout()
+				cy.visit(`/s/${token}`)
+				cy.setCssMedia('print')
+			})
+			.then(() => {
+				cy.getEditor().should('be.visible')
+				cy.getContent()
+					.get('h1:not(.hidden-visually)').should('contain', 'Print test')
+					.should('be.visible')
+
+				cy.compareSnapshot('print view in single-file share', { capture: 'fullPage' })
+				cy.setCssMedia('screen')
+			})
+	})
+})

cypress/fixtures/print.md

@@ -0,0 +1,86 @@
+# Print test
+
+---
+
+>  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent augue  turpis, viverra molestie pellentesque a, hendrerit nec turpis. Fusce  fermentum felis sit amet consectetur posuere. Nullam eleifend nibh ut  auctor varius. Vivamus pharetra efficitur libero, nec cursus dui  faucibus non. Ut nec dapibus ligula. Duis tincidunt ex sem, nec  convallis nisi ultrices suscipit. Sed sed sollicitudin lorem. Mauris  congue tincidunt elementum. In sit amet sapien dictum, congue sapien  sed, iaculis diam. Ut at pulvinar urna, a interdum velit. Aenean blandit  magna vitae felis elementum dictum eget in neque. Suspendisse vulputate  urna eu enim rhoncus sollicitudin. Nullam nec bibendum tortor. 
+
+- first
+- second
+- third
+- fourth
+- firth
+- fifth
+- fifth
+- nineth
+
+Suspendisse a ullamcorper ex. Nullam id odio in ligula bibendum  vehicula. Mauris in porttitor risus, ac consequat purus. Morbi consequat  odio at lobortis venenatis. Aenean blandit justo et purus dignissim  euismod. Class aptent taciti sociosqu ad litora torquent per conubia  nostra, per inceptos himenaeos. Donec volutpat fringilla justo nec  fringilla. Nulla a leo vel arcu fringilla auctor. Quisque aliquam leo  velit, sit amet faucibus nisl tincidunt a. Ut eget porttitor metus. Sed  erat tortor, mollis at arcu at, posuere interdum massa. Suspendisse  vestibulum massa et diam ultrices pulvinar. Donec sagittis dui sed  vehicula pellentesque. Etiam eu interdum mauris. 
+
+- first
+- second
+- third
+- fourth
+- firth
+- fifth
+- fifth
+- nineth
+
+ Praesent sed tincidunt nunc, vitae volutpat enim. Cras felis justo,  porta pretium semper ut, bibendum non odio. Quisque nunc risus, faucibus  at ipsum quis, finibus tempus nunc. Maecenas faucibus vehicula est non  vehicula. Aenean eu tincidunt sapien, sed posuere enim. Donec id urna  mi. Quisque eget massa posuere sem lacinia ultricies. 
+
+- first
+- second
+- third
+- fourth
+- firth
+- fifth
+- fifth
+- nineth
+
+ Praesent eget nisi porta, efficitur nisl at, iaculis tortor. Curabitur  risus neque, auctor vitae est eu, sagittis aliquam magna. Fusce eu  finibus sapien, vitae pellentesque justo. Nam vitae lectus interdum,  venenatis magna sed, hendrerit dolor. Mauris dapibus, arcu fermentum  tempor ultricies, sapien nisl tempor ligula, a mollis est lectus vitae  augue. Phasellus nec libero ac ante viverra dignissim quis sed velit.  Curabitur nec odio iaculis, hendrerit purus quis, gravida nibh. Fusce  risus dui, rutrum quis blandit at, laoreet ut est. Maecenas iaculis,  purus a pulvinar lobortis, quam mauris pulvinar lectus, porttitor  sagittis nisi lorem at dolor. Duis eleifend elit felis, ut blandit purus  gravida quis. Maecenas ac mattis sem, ut egestas turpis. 
+
+- first
+- second
+- third
+- fourth
+- firth
+- fifth
+- fifth
+- nineth
+
+ Pellentesque diam ante, placerat non ligula in, commodo viverra metus.  Suspendisse ornare libero ac nunc fringilla, vel finibus ante tempor.  Nunc et nunc efficitur, imperdiet orci sed, suscipit dolor. Donec  eleifend, metus quis fermentum imperdiet, urna mi porta mi, sed lacinia  purus sapien et purus. Sed id imperdiet sapien. Suspendisse ante enim,  venenatis ut ultrices at, tristique nec felis. Etiam consectetur arcu  nec malesuada hendrerit.
+
+- first
+- second
+- third
+- fourth
+- firth
+- fifth
+- fifth
+- nineth
+
+ Morbi dignissim enim fringilla, lacinia odio venenatis, luctus diam.  Nulla porttitor lacus velit, sit amet ultrices arcu dictum a. Integer  ultricies turpis sed ornare pharetra. Etiam consectetur est ac ornare  accumsan. Nulla facilisi. Class aptent taciti sociosqu ad litora  torquent per conubia nostra, per inceptos himenaeos. Vivamus interdum  dolor neque, id iaculis nisi efficitur a. Curabitur eu erat enim. 
+
+ Mauris mattis lacinia sollicitudin. Aenean in justo id orci viverra  dapibus in a nisi. Nulla porttitor lorem at augue commodo, eget feugiat  justo bibendum. Cras elit neque, accumsan vitae ullamcorper at, aliquam  non enim. Aliquam sagittis nunc sem, quis dictum nulla laoreet euismod.  Quisque suscipit lorem non aliquam volutpat. Nam vel odio felis. Vivamus  vestibulum quam vitae nisi sodales, eu fermentum arcu tristique. Proin  pulvinar quam quis laoreet viverra. Sed vitae sagittis mauris. Cras  finibus est at dui pharetra, vel ultrices tortor imperdiet. 
+
+- first
+- second
+- third
+- fourth
+- firth
+- fifth
+- fifth
+- nineth
+
+ Morbi fringilla tellus nec mi congue ornare. Mauris maximus et ipsum vel  scelerisque. Sed vel placerat massa. Quisque sagittis turpis ultrices  eros cursus pellentesque. Cras et dolor sit amet lectus ullamcorper  ullamcorper ac et dolor. Aenean in convallis justo. Maecenas velit  felis, maximus vel posuere nec, molestie eget metus. Etiam interdum  tellus erat, sit amet ultrices lacus hendrerit pellentesque. Suspendisse  potenti. Integer ornare dignissim nulla eget viverra. 
+
+ Duis ac lectus ultricies, feugiat ante nec, posuere justo. Vivamus  mauris elit, fringilla id lectus a, venenatis dictum nisi. Maecenas  tristique, metus elementum pulvinar tempus, purus nibh laoreet nunc,  ultrices finibus est urna vitae elit. Cras in dui molestie, accumsan  magna sed, maximus lacus. Suspendisse id libero at tortor congue  vehicula nec eu dui. Nam purus nunc, tempus at hendrerit vulputate,  rhoncus vitae lacus. Pellentesque mattis, augue et vehicula interdum, mi  elit pharetra sapien, at consequat arcu tortor in dolor. Fusce neque  nisl, pharetra et sapien a, ultrices mollis felis. Suspendisse accumsan  lacus mauris, nec suscipit nisl tincidunt at. Phasellus in viverra  libero, condimentum vulputate lacus. 
+
+- first
+- second
+- third
+- fourth
+- firth
+- fifth
+- fifth
+- nineth
+
+ Suspendisse lacinia nulla scelerisque nisl egestas, ac eleifend ipsum  lobortis. Vivamus ornare ultricies vestibulum. Interdum et malesuada  fames ac ante ipsum primis in faucibus. Suspendisse rhoncus rhoncus  risus quis iaculis. Aliquam condimentum enim non pellentesque auctor.  Fusce blandit vulputate tincidunt. In vehicula tortor eget metus congue  feugiat. Suspendisse nulla nisi, feugiat in nibh eu, placerat semper  odio. Maecenas in tincidunt velit, eget egestas ex. Sed ac imperdiet  ante, eget placerat enim. Sed eu dapibus mauris. Morbi eros nisi, porta  at ornare in, congue at tortor. Morbi porttitor dapibus velit sed  ultricies. Etiam vestibulum dolor nulla, id vehicula massa sodales eget.  Maecenas eu vulputate nulla, eu aliquet nunc. 

cypress/support/commands.js

@@ -23,10 +23,13 @@
 import axios from '@nextcloud/axios'
 import { addCommands } from '@nextcloud/cypress'
 import 'cypress-if'
+import compareSnapshotCommand from 'cypress-visual-regression/dist/command.js'
 
 // eslint-disable-next-line no-unused-vars,n/no-extraneous-import
 import regeneratorRuntime from 'regenerator-runtime'
 
+compareSnapshotCommand()
+
 const url = Cypress.config('baseUrl').replace(/\/index.php\/?$/g, '')
 Cypress.env('baseUrl', url)
 
@@ -468,6 +471,16 @@ Cypress.Commands.add('createDescription', (folder) => {
 	cy.wait('@addDescription')
 })
 
+Cypress.Commands.add('setCssMedia', (media) => {
+	cy.log(`Setting CSS media to ${media}`)
+	Cypress.automation('remote:debugger:protocol', {
+		command: 'Emulation.setEmulatedMedia',
+		params: {
+			media,
+		},
+	})
+})
+
 Cypress.on(
 	'uncaught:exception',
 	err => !err.message.includes('ResizeObserver loop limit exceeded'),