Merge pull request #8027 from BacLuc/print-fix-empty-pages

print: fix empty pages at start and end

Author: carlobeltrame

e2e/cypress.config.js

@@ -1,6 +1,7 @@
 const { defineConfig } = require('cypress')
 const { moveDownloads } = require('./tasks/moveDownloads')
 const { deleteDownloads } = require('./tasks/deleteDownloads')
+const { getPdfProperties } = require('./tasks/getPdfProperties')
 
 module.exports = defineConfig({
   video: false,
@@ -15,6 +16,7 @@ module.exports = defineConfig({
     setupNodeEvents(on, config) {
       on('task', {
         deleteDownloads: () => deleteDownloads(config),
+        getPdfProperties: async (path) => getPdfProperties(path),
         moveDownloads: (destSubDir) => moveDownloads(config, destSubDir),
       })
       const cypressTerminalReportOptions = {

e2e/package-lock.json

@@ -23,6 +23,7 @@
     "eslint-plugin-cypress": "4.3.0",
     "eslint-plugin-prettier": "5.5.4",
     "globals": "16.3.0",
+    "pdfjs-dist": "5.4.54",
     "prettier": "3.6.2"
   },
   "overrides": {

e2e/package.json

@@ -14,9 +14,11 @@ describe('Client print test', () => {
     cy.get('button:contains("PDF herunterladen (Layout #2)")').click()
 
     const downloadsFolder = Cypress.config('downloadsFolder')
-    cy.readFile(path.join(downloadsFolder, 'Pfila-2023.pdf'), {
+    const filePath = path.join(downloadsFolder, 'Pfila-2023.pdf')
+    cy.readFile(filePath, {
       timeout: 30000,
     })
+    cy.getPdfProperties(filePath).its('numPages').should('eq', 18)
     cy.moveDownloads()
   })
 })

e2e/specs/clientPrint.cy.js

@@ -66,20 +66,52 @@ describe('Nuxt print test', () => {
     })
   })
 
-  it('downloads PDF', () => {
-    cy.task('deleteDownloads')
-    cy.login('[email protected]')
+  describe('downloads PDF', () => {
+    beforeEach(() => {
+      cy.task('deleteDownloads')
+      cy.login('[email protected]')
+
+      cy.visit('/camps')
+      cy.get('a:contains("GRGR")').click()
+    })
+
+    afterEach(() => {
+      cy.moveDownloads()
+    })
+
+    it('for whole camp', () => {
+      cy.get('a:contains("Admin")').click()
+      cy.get('a:contains("Drucken")').click()
+      cy.get('button:contains("PDF herunterladen (Layout #1)")').click()
 
-    cy.visit('/camps')
-    cy.get('a:contains("GRGR")').click()
-    cy.get('a:contains("Admin")').click()
-    cy.get('a:contains("Drucken")').click()
-    cy.get('button:contains("PDF herunterladen (Layout #1)")').click()
+      const downloadsFolder = Cypress.config('downloadsFolder')
+      const pdfPath = path.join(downloadsFolder, 'Pfila-2023.pdf')
+      cy.readFile(pdfPath, {
+        timeout: 30000,
+      })
+      cy.getPdfProperties(pdfPath).its('numPages').should('eq', 25)
+    })
+
+    it('for picasso', () => {
+      if (Cypress.browser.name === 'firefox') {
+        console.log(
+          "This test doesn't test browser specific behaviour. Firefox makes problems, thus we dont test this with firefox."
+        )
+        return
+      }
+
+      cy.get('a:contains("Programm")').click()
+      cy.get('[data-testid="campprogram-menu"]').click()
+      cy.get('[role="menuitem"] :contains("PDF herunterladen (Layout #1)")')
+        .should('be.visible')
+        .click()
 
-    const downloadsFolder = Cypress.config('downloadsFolder')
-    cy.readFile(path.join(downloadsFolder, 'Pfila-2023.pdf'), {
-      timeout: 30000,
+      const downloadsFolder = Cypress.config('downloadsFolder')
+      const pdfPath = path.join(downloadsFolder, 'Pfila-2023-Hauptlager.pdf')
+      cy.readFile(pdfPath, {
+        timeout: 30000,
+      })
+      cy.getPdfProperties(pdfPath).its('numPages').should('eq', 1)
     })
-    cy.moveDownloads()
   })
 })

e2e/specs/nuxtPrint.cy.js

@@ -40,6 +40,10 @@ Cypress.Commands.add('moveDownloads', () => {
   cy.task('moveDownloads', `${Cypress.spec.name}/${Cypress.currentTest.title}`)
 })
 
+Cypress.Commands.add('getPdfProperties', (path) => {
+  return cy.task('getPdfProperties', path)
+})
+
 Cypress.Commands.add('expectCacheHit', (uri) => {
   cy.request(Cypress.env('API_ROOT_URL_CACHED') + uri + '.jsonhal').then((response) => {
     const headers = response.headers

e2e/support/commands.js

@@ -0,0 +1,14 @@
+const pdfjsLib = require('pdfjs-dist/legacy/build/pdf.mjs')
+const { readFileSync } = require('node:fs')
+
+async function getPdfProperties(path) {
+  const data = new Uint8Array(readFileSync(path))
+
+  const loadDocument = pdfjsLib.getDocument({ data: data })
+  const pdfDocument = await loadDocument.promise
+  return {
+    numPages: pdfDocument.numPages,
+  }
+}
+
+module.exports = { getPdfProperties }

e2e/tasks/getPdfProperties.js

@@ -44,7 +44,7 @@ Show all activity schedule entries of a single period.
       />
       <v-menu offset-y>
         <template #activator="{ on, attrs }">
-          <v-btn icon v-bind="attrs" v-on="on">
+          <v-btn icon v-bind="attrs" v-on="on" data-testid="campprogram-menu">
             <v-badge
               v-if="!$vuetify.breakpoint.smAndUp && filteredPropertiesCount > 0"
               overlap

frontend/src/views/camp/CampProgram.vue

@@ -76,3 +76,15 @@ useHead(header)
   padding: 0;
 }
 </style>
+
+<!--
+Here we need to hack away 2 divs which nuxt generates,
+so these styles must be global.
+-->
+<!-- eslint-disable-next-line vue-scoped-css/enforce-style-type -->
+<style lang="scss">
+body > div > div.container > div:not(:has(*)),
+body > div#teleports {
+  display: none;
+}
+</style>