Skip to content

Commit e8c0837

Browse files
eKoopmanseKoopmans
authored
feat: Use native Promises and improve automated tests (#758)
1 parent 62c518a commit e8c0837

34 files changed

+14270
-6626
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
11
name: CI
22
on: pull_request
33
jobs:
4-
vdiff:
5-
name: Visual diff tests
4+
unit:
5+
name: Unit tests
66
timeout-minutes: 10
77
runs-on: ubuntu-latest
88
steps:
9-
- name: Create GH Token
10-
uses: actions/create-github-app-token@v1
11-
id: gh-token
12-
with:
13-
app-id: ${{ vars.GH_TOKEN_APP_ID }}
14-
private-key: ${{ secrets.GH_TOKEN_APP_PRIVATE_KEY }}
159
- name: Checkout
1610
uses: actions/checkout@v4
1711
with:
@@ -23,7 +17,24 @@ jobs:
2317
cache: npm
2418
- name: Install dependencies
2519
run: npm ci
20+
- name: Unit tests
21+
run: npm run test:unit
22+
23+
vdiff:
24+
name: Visual diff tests
25+
timeout-minutes: 10
26+
runs-on: ubuntu-latest
27+
steps:
28+
- name: Checkout
29+
uses: actions/checkout@v4
30+
- name: Setup Node
31+
uses: actions/setup-node@v4
32+
with:
33+
node-version-file: .nvmrc
34+
cache: npm
35+
- name: Install dependencies
36+
run: npm ci
2637
- name: vdiff Tests
2738
uses: BrightspaceUI/actions/vdiff@main
2839
with:
29-
github-token: ${{ steps.gh-token.outputs.token }}
40+
github-token: ${{ secrets.GITHUB_TOKEN }}

‎.nvmrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
16
1+
22

‎.vdiff.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"browsers": [
3+
{
4+
"name": "Chromium",
5+
"version": 139
6+
}
7+
],
8+
"system": {
9+
"platform": "linux",
10+
"release": "6.11.0-1018-azure",
11+
"arch": "x64"
12+
}
13+
}

‎README.md‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22

33
html2pdf.js converts any webpage or element into a printable PDF entirely client-side using [html2canvas](https://github.com/niklasvh/html2canvas) and [jsPDF](https://github.com/MrRio/jsPDF).
44

5-
> :warning: There have been several issues reported in v0.10. They are being investigated but in the meantime you may wish to remain on v0.9.3 ("^0.9.3" in npm, or [use cdnjs for HTML script tags](https://cdnjs.com/libraries/html2pdf.js/0.9.3)).
6-
75
## Table of contents
86

97
- [Getting started](#getting-started)
@@ -231,19 +229,21 @@ The Worker object returned by `html2pdf()` has a built-in progress-tracking mech
231229

232230
## Dependencies
233231

234-
html2pdf.js depends on the external packages [html2canvas](https://github.com/niklasvh/html2canvas), [jsPDF](https://github.com/MrRio/jsPDF), and [es6-promise](https://github.com/stefanpenner/es6-promise). These dependencies are automatically loaded when using NPM or the bundled package.
232+
html2pdf.js depends on the external packages [html2canvas](https://github.com/niklasvh/html2canvas) and [jsPDF](https://github.com/MrRio/jsPDF). These dependencies are automatically loaded when using NPM or the bundled package.
235233

236234
If using the unbundled `dist/html2pdf.min.js` (or its un-minified version), you must also include each dependency. Order is important, otherwise html2canvas will be overridden by jsPDF's own internal implementation:
237235

238236
```html
239-
<script src="es6-promise.auto.min.js"></script>
240237
<script src="jspdf.min.js"></script>
241238
<script src="html2canvas.min.js"></script>
242239
<script src="html2pdf.min.js"></script>
243240
```
244241

245242
## Contributing
246243

244+
> [!TIP]
245+
> Working on html2pdf.js locally? Use `npm start` to host local demos on http://localhost:8000.
246+
247247
### Issues
248248

249249
When submitting an issue, please provide reproducible code that highlights the issue, preferably by creating a fork of [this template jsFiddle](https://jsfiddle.net/u6o6ne41/) (which has html2pdf.js already loaded). Remember that html2pdf.js uses [html2canvas](https://github.com/niklasvh/html2canvas) and [jsPDF](https://github.com/MrRio/jsPDF) as dependencies, so it's a good idea to check each of those repositories' issue trackers to see if your problem has already been addressed.
@@ -269,7 +269,6 @@ When submitting an issue, please provide reproducible code that highlights the i
269269
- Related project: [Feature: New renderer](https://github.com/eKoopmans/html2pdf.js/projects/4)
270270

271271
5. **Promise clashes:** html2pdf.js relies on specific Promise behaviour, and can fail when used with custom Promise libraries.
272-
- In the next release, Promises will be sandboxed in html2pdf.js to remove this issue.
273272
- Related project: [Bugfix: Sandboxed promises](https://github.com/eKoopmans/html2pdf.js/projects/11)
274273

275274
6. **Maximum size:** HTML5 canvases have a [maximum height/width](https://stackoverflow.com/a/11585939/4080966). Anything larger will fail to render.
@@ -279,7 +278,7 @@ When submitting an issue, please provide reproducible code that highlights the i
279278

280279
### Tests
281280

282-
html2pdf.js is currently sorely lacking in unit tests. Any contributions or suggestions of automated (or manual) tests are welcome. This is high on the to-do list for this project.
281+
html2pdf.js performs automatic vdiff (visual difference) comparisons on PDFs generated from a collection of sample HTML files. Contributions of additional test cases are more than welcome - see `test/vdiff/html2pdf.vdiff.js` and `test/reference/*.html` for examples. Some changes may require adding more options to the test harness, `test/util/test-harness.js`.
283282

284283
### Pull requests
285284

‎demo/all-tags.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta charset="UTF-8">
6+
<link rel="stylesheet" href="/node_modules/@brightspace-ui/core/components/demo/styles.css" type="text/css">
7+
<script type="module">
8+
import '@brightspace-ui/core/components/demo/demo-page.js';
9+
import '../test/util/test-harness.js';
10+
</script>
11+
</head>
12+
13+
<body unresolved>
14+
<d2l-demo-page page-title="html2pdf.js - All tags">
15+
<h2>All tags: default</h2>
16+
<d2l-demo-snippet>
17+
<template>
18+
<test-harness
19+
controls
20+
file="all-tags"
21+
></test-harness>
22+
</template>
23+
</d2l-demo-snippet>
24+
25+
<h2>All tags: #canvas selector</h2>
26+
<d2l-demo-snippet>
27+
<template>
28+
<test-harness
29+
controls
30+
file="all-tags"
31+
selector="#canvas"
32+
></test-harness>
33+
</template>
34+
</d2l-demo-snippet>
35+
</d2l-demo-page>
36+
</body>
37+
</html>

‎demo/blank.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta charset="UTF-8">
6+
<link rel="stylesheet" href="/node_modules/@brightspace-ui/core/components/demo/styles.css" type="text/css">
7+
<script type="module">
8+
import '@brightspace-ui/core/components/demo/demo-page.js';
9+
import '../test/util/test-harness.js';
10+
</script>
11+
</head>
12+
13+
<body unresolved>
14+
<d2l-demo-page page-title="html2pdf.js - Blank">
15+
<h2>Blank page: default</h2>
16+
<d2l-demo-snippet>
17+
<template>
18+
<test-harness
19+
controls
20+
file="blank"
21+
></test-harness>
22+
</template>
23+
</d2l-demo-snippet>
24+
</d2l-demo-page>
25+
</body>
26+
</html>

‎demo/css-selectors.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta charset="UTF-8">
6+
<link rel="stylesheet" href="/node_modules/@brightspace-ui/core/components/demo/styles.css" type="text/css">
7+
<script type="module">
8+
import '@brightspace-ui/core/components/demo/demo-page.js';
9+
import '../test/util/test-harness.js';
10+
</script>
11+
</head>
12+
13+
<body unresolved>
14+
<d2l-demo-page page-title="html2pdf.js - CSS selectors">
15+
<h2>CSS selectors: default</h2>
16+
<d2l-demo-snippet>
17+
<template>
18+
<test-harness
19+
controls
20+
file="css-selectors"
21+
></test-harness>
22+
</template>
23+
</d2l-demo-snippet>
24+
25+
<h2>CSS selectors: #main selector</h2>
26+
<d2l-demo-snippet>
27+
<template>
28+
<test-harness
29+
controls
30+
file="css-selectors"
31+
selector="#main"
32+
></test-harness>
33+
</template>
34+
</d2l-demo-snippet>
35+
</d2l-demo-page>
36+
</body>
37+
</html>

‎demo/index.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<link rel="stylesheet" href="/node_modules/@brightspace-ui/core/components/demo/styles.css" type="text/css">
5+
<script type="module">
6+
import '@brightspace-ui/core/components/colors/colors.js';
7+
import '@brightspace-ui/core/components/typography/typography.js';
8+
</script>
9+
<title>html2pdf.js Demos</title>
10+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
11+
<meta charset="UTF-8">
12+
<style>
13+
body {
14+
padding: 0 30px;
15+
}
16+
</style>
17+
</head>
18+
<body class="d2l-typography">
19+
<h1 class="d2l-heading-2">html2pdf.js Demos</h1>
20+
21+
<h2 class="d2l-heading-3">Manual testing</h2>
22+
<ul>
23+
<li><a href="../test/manual/launcher.html">html2pdf.js Launcher</a></li>
24+
<li><a href="../test/manual/pagebreaks.html">Pagebreaks</a></li>
25+
<li><a href="../test/manual/template.html">Template</a></li>
26+
</ul>
27+
28+
<h2 class="d2l-heading-3">Test harness demos (requires local serving with `npm start`)</h2>
29+
<ul>
30+
<li><a href="./all-tags.html">All tags</a></li>
31+
<li><a href="./blank.html">Blank</a></li>
32+
<li><a href="./css-selectors.html">CSS selectors</a></li>
33+
<li><a href="./lorem-ipsum.html">Lorem ipsum</a></li>
34+
<li><a href="./pagebreaks.html">Pagebreaks</a></li>
35+
</ul>
36+
</body>

‎demo/lorem-ipsum.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta charset="UTF-8">
6+
<link rel="stylesheet" href="/node_modules/@brightspace-ui/core/components/demo/styles.css" type="text/css">
7+
<script type="module">
8+
import '@brightspace-ui/core/components/demo/demo-page.js';
9+
import '../test/util/test-harness.js';
10+
</script>
11+
</head>
12+
13+
<body unresolved>
14+
<d2l-demo-page page-title="html2pdf.js - Lorem ipsum">
15+
<h2>Lorem ipsum: default</h2>
16+
<d2l-demo-snippet>
17+
<template>
18+
<test-harness
19+
controls
20+
file="lorem-ipsum"
21+
></test-harness>
22+
</template>
23+
</d2l-demo-snippet>
24+
25+
<h2>Lorem ipsum: legacy command</h2>
26+
<d2l-demo-snippet>
27+
<template>
28+
<test-harness
29+
command="legacy"
30+
controls
31+
file="lorem-ipsum"
32+
></test-harness>
33+
</template>
34+
</d2l-demo-snippet>
35+
36+
<h2>Lorem ipsum: margin</h2>
37+
<d2l-demo-snippet>
38+
<template>
39+
<test-harness
40+
controls
41+
file="lorem-ipsum"
42+
settings="margin"
43+
></test-harness>
44+
</template>
45+
</d2l-demo-snippet>
46+
</d2l-demo-page>
47+
</body>
48+
</html>

‎demo/pagebreaks.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta charset="UTF-8">
6+
<link rel="stylesheet" href="/node_modules/@brightspace-ui/core/components/demo/styles.css" type="text/css">
7+
<script type="module">
8+
import '@brightspace-ui/core/components/demo/demo-page.js';
9+
import '../test/util/test-harness.js';
10+
</script>
11+
</head>
12+
13+
<body unresolved>
14+
<d2l-demo-page page-title="html2pdf.js - Pagebreaks">
15+
<h2>Pagebreaks: legacy</h2>
16+
<d2l-demo-snippet>
17+
<template>
18+
<test-harness
19+
controls
20+
file="pagebreaks"
21+
settings="pagebreakLegacy"
22+
></test-harness>
23+
</template>
24+
</d2l-demo-snippet>
25+
26+
<h2>Pagebreaks: CSS</h2>
27+
<d2l-demo-snippet>
28+
<template>
29+
<test-harness
30+
controls
31+
file="pagebreaks"
32+
settings="pagebreakCss"
33+
></test-harness>
34+
</template>
35+
</d2l-demo-snippet>
36+
37+
<h2>Pagebreaks: avoid-all</h2>
38+
<d2l-demo-snippet>
39+
<template>
40+
<test-harness
41+
controls
42+
file="pagebreaks"
43+
settings="pagebreakAvoidAll"
44+
></test-harness>
45+
</template>
46+
</d2l-demo-snippet>
47+
48+
<h2>Pagebreaks: specify</h2>
49+
<d2l-demo-snippet>
50+
<template>
51+
<test-harness
52+
controls
53+
file="pagebreaks"
54+
settings="pagebreakSpecify"
55+
></test-harness>
56+
</template>
57+
</d2l-demo-snippet>
58+
</d2l-demo-page>
59+
</body>
60+
</html>

0 commit comments

Comments
 (0)