Skip to content

test: Add version-tester manual test utility #876

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
eKoopmans merged 5 commits into from
Jan 11, 2026
Merged

test: Add version-tester manual test utility #876

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1358135
Add draft version tester
eKoopmans Jul 11, 2025
979a692
Move version-tester and update modals and versions
eKoopmans Jan 7, 2026
2362189
Add local option
eKoopmans Jan 7, 2026
3074f58
Move version-tester dependencies into the JS
eKoopmans Jan 11, 2026
b8e1222
Remove unsafe json parsing
eKoopmans Jan 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ <h2 class="d2l-heading-3">Manual testing</h2>
<li><a href="../test/manual/launcher.html">html2pdf.js Launcher</a></li>
<li><a href="../test/manual/pagebreaks.html">Pagebreaks</a></li>
<li><a href="../test/manual/template.html">Template</a></li>
<li><a href="../test/manual/version-tester/">Version Tester</a></li>
</ul>

<h2 class="d2l-heading-3">Test harness demos (requires local serving with `npm start`)</h2>
Expand Down
134 changes: 134 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,14 @@
"@brightspace-ui/testing": "^1.31.2",
"@web/dev-server": "^0.4.6",
"babel-loader": "^10.0.0",
"bootstrap": "^5.3.8",
"core-js": "^3.16.0",
"json5": "^2.2.3",
"lit": "^3.3.1",
"pdfjs-dist": "^5.3.93",
"rimraf": "^6.0.1",
"sinon": "^21.0.0",
"vue": "^2.7.16",
"webpack": "^5.101.0",
"webpack-bundle-analyzer": "^4.4.2",
"webpack-cli": "^6.0.1"
Expand Down
3 changes: 3 additions & 0 deletions test/manual/version-tester/html2pdf.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import html2pdf from '../../../src/index.js';

window.html2pdf = html2pdf;
150 changes: 150 additions & 0 deletions test/manual/version-tester/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<style>
html, body {
height: 100%;
}
#main:not(.ready) {
display: none;
}
#iframe {
display: block;
position: relative;
width: 100%;
height: 50vh;
border: 1px solid #ced4da;
}
#canvas-target {
border: 1px solid #ced4da;
}
.large {
height: 50vh;
}
.min-300px {
min-width: 300px;
}
.min-120px {
min-width: 120px;
}
.dropdown-toggle {
flex-grow: 0 !important;
}
.dropdown-item {
cursor: pointer;
}
</style>
</head>

<body>
<main id="main" class="container-fluid" :class="{ ready: isReady }">
<h1>html2pdf.js Version Tester</h1>

<div class="row">
<div class="col-12 col-lg-6">
<p>Use this utility to test behaviour in different versions of html2pdf.js, html2canvas, and jsPDF:</p>

<ol>
<li>Select desired version of html2pdf.js, and whether to load it with bundled dependencies.</li>
<li>If using the unbundled version, select versions of html2canvas and jsPDF (e.g. by providing CDN URLs).</li>
<li>Paste the HTML to be tested and render it in the iframe using the "Load in iframe" button</li>
<li>Test the result </li>
</ol>
</div>

<div class="col-12 col-lg-6">
<div class="mb-3">
<custom-input id="h2p-version" label="html2pdf.js Version" rootclass="mb-0">
<h2p-select id="h2p-version"></h2p-select>
<div class="input-group-text">
<input class="form-check-input mt-0" type="checkbox" id="h2p-bundle" v-model="isBundle" @change="$root.h2pUpdateVersion">
<label class="form-check-label" for="h2p-bundle">&nbsp;Bundle</label>
</div>
</custom-input>

<custom-input id="h2p-source" label="html2pdf.js Source" placeholder="CDN URL" v-model="html2pdfSrc" :readonly="!isCustom"></custom-input>
</div>

<custom-input id="h2c-source" label="html2canvas Source" placeholder="CDN URL" v-model="html2canvasSrc"></custom-input>
<custom-input id="jspdf-source" label="jsPDF Source" placeholder="CDN URL" v-model="jspdfSrc" v-if="!isBundle"></custom-input>
</div>

<div class="col-12 col-lg-6 mb-3">
<custom-input id="iframe-html" label="HTML" placeholder="<!DOCTYPE html>" v-model="iframeHtml" inputtype="textarea" inputclass="font-monospace large"></custom-input>

<button type="button" class="btn btn-primary w-100" @click="loadHtml">
<div class="row align-items-center">
<!-- <div class="col-auto">1.</div> -->
<div class="col">Load HTML and<br />scripts into iframe</div>
<div class="col-auto d-none d-lg-block">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>
</div>
</div>
</button>
</div>

<div class="col-12 col-lg-6">
<iframe id="iframe" class="large mb-3"></iframe>

<!-- <div class="row align-items-center mt-1 gx-2">
<div class="col-sm-3"></div>
<div class="col">
<div class="input-group">
<label class="input-group-text" for="selector">Element to capture (querySelector)</label>
<input type="text" class="form-control font-monospace" id="selector" v-model="selector"></textarea>
</div>
</div>
</div> -->

<custom-input id="selector" label="Target element (querySelector)" placeholder="CDN URL" v-model="selector" inputclass="font-monospace"></custom-input>

<div class="row align-items-center gx-2 gy-2 mb-2">
<div class="col">
<button-with-dropdown @click="makePdf({ isDefault: true })">
<template v-slot:label>Generate<br />PDF</template>
<li><a class="dropdown-item" @click="h2pShowModal">With custom settings...</a></li>
</button-with-dropdown>
</div>

<div class="col">
<button-with-dropdown @click="makeCanvas({ isDefault: true })">
<template v-slot:label>Render with<br />html2canvas</template>
<li><a class="dropdown-item" @click="h2cShowModal">With custom settings...</a></li>
</button-with-dropdown>
</div>

<div class="col-auto">
<button type="button" class="btn btn-secondary w-100" @click="customJsShowModal">Run custom<br />JS...</button>
</div>
</div>
</div>
</div>

<!-- Modals -->
<custom-modal id="customJsModal" title="Run Custom JS">
<p>Instructions:</p>
<p>Right-click on iframe -> Inspect -> Run custom JS in console</p>
</custom-modal>

<custom-modal id="h2pModal" title="html2pdf Custom Settings">
<p>Not yet implemented</p>
<template v-slot:buttons><button type="button" class="btn btn-primary" @click="makePdf">Run</button></template>
</custom-modal>

<custom-modal id="h2cModal" title="html2canvas Custom Settings">
<p>Not yet implemented</p>
<template v-slot:buttons><button type="button" class="btn btn-primary" @click="makeCanvas">Run</button></template>
</custom-modal>

<custom-modal id="canvasModal" title="html2canvas Result" modalclass="modal-xl">
<div id="canvas-target"></div>
<template v-slot:buttons><button type="button" class="btn btn-primary" @click="saveCanvas">Save to PNG</button></template>
</custom-modal>
</main>

<script src="./index.js" type="module"></script>
</body>
</html>
Loading