test(snapshots): use pdf as snapshot

.github/workflows/ci.yml

@@ -14,7 +14,8 @@ jobs:
     - uses: actions/checkout@v3
     - run: npm ci
     - run: npx playwright install firefox
-    - run: npm run test-prepare-pdfs
+    - run: npm run test:generate-snapshot-screenshots
+    - run: npm run test:generate-pdfs
     - run: npm test
     - uses: actions/upload-artifact@v3
       if: always()

.github/workflows/update-snapshots.yml

@@ -11,13 +11,13 @@ jobs:
           token: ${{ secrets.GH_TOKEN }}
       - run: npm ci
       - run: npx playwright install firefox
-      - run: npm run test-prepare-pdfs
-      - run: npm test -- --update-snapshots
+      - run: npm run test:generate-pdfs
+      - run: rm -rf test/snapshot && mv test/output test/snapshot
       - name: Commit
         run: |
           git config --global user.name 'Decktape bot'
           git config --global user.email 'decktape-bot@users.noreply.github.com'
           git pull
           git add .
-          git commit -m "test(screenshots): update snapshots"
+          git commit -m "test(snapshots): update snapshot pdfs"
           git push

.gitignore

@@ -14,5 +14,9 @@
 !README.adoc
 !test/
 test/output/
+
+# Snapshot screenshots are regenerated based on the snapshot pdf
+test/e2e.spec.ts-snapshots
+
 !playwright.config.ts
 !.github/

package.json

@@ -12,7 +12,8 @@
   },
   "scripts": {
     "start": "node decktape.js",
-    "test-prepare-pdfs": "node test/run-decktape.js",
+    "test:generate-pdfs": "node test/run-decktape.js",
+    "test:generate-snapshot-screenshots": "SNAPSHOT=true playwright test --update-snapshots",
     "test": "playwright test"
   },
   "repository": {

playwright.config.ts

@@ -49,6 +49,7 @@ const config: PlaywrightTestConfig = {
   webServer: {
     command: `node test/run-server.js ${port}`,
     port,
+    reuseExistingServer: true,
   },
 };
 

test/e2e.spec.ts

@@ -6,7 +6,10 @@ test.describe("e2e", () => {
 
   inputDirectories.forEach((input) => {
     test(`should have no visual regression for ${input}`, async ({ page }) => {
-      await page.goto(`/show-pdf.html?file=${input}`);
+      const dir = process.env.SNAPSHOT === 'true' ? 'snapshot' : 'output';
+      const url = `/show-pdf.html?file=${encodeURIComponent(`${dir}/${input}.pdf`)}`;
+      console.log(url);
+      await page.goto(url);
       await page.waitForFunction(() => typeof deck === "object");
       const theCanvas = page.locator("#the-canvas");
       const numberOfPages = await page.evaluate(async () => deck.numPages);

test/show-pdf.html

@@ -11,7 +11,7 @@
 		<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@3.1.81/build/pdf.min.js"></script>
 		<script type="module">
             const params = new URLSearchParams(window.location.search);
-			const pdf = await pdfjsLib.getDocument(`./output/${params.get('file')}.pdf`).promise;
+			const pdf = await pdfjsLib.getDocument(params.get('file')).promise;
 			let currentPage = 1;
 			await renderPage();