Skip to content

Commit 6af6332

Browse files
kevinansfieldkevinansfield
committed
Added basic node renderer tests
ref https://linear.app/ghost/issue/PROD-1784 - added basic output regression tests for all node renderers - added test utilities to facilitate testing node renderers without a full Lexical environment - added e2e coverage exclude for koenig service folder as everything is integration/unit tested and covering all branches via e2e tests too doesn't add any value
1 parent 4183cc1 commit 6af6332

30 files changed

+2801
-2
lines changed

‎ghost/core/.c8rc.e2e.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"core/server/data/migrations/**",
2222
"core/server/data/schema/schema.js",
2323
"!core/server/data/migrations/utils.js",
24-
"core/server/web/api/testmode/**"
24+
"core/server/web/api/testmode/**",
25+
"core/server/services/koenig/**"
2526
]
2627
}

‎ghost/core/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -224,6 +224,7 @@
224224
"devDependencies": {
225225
"@actions/core": "1.11.1",
226226
"@playwright/test": "1.52.0",
227+
"@prettier/sync": "0.5.5",
227228
"@tryghost/express-test": "0.14.1",
228229
"@tryghost/webhook-mock-receiver": "0.2.17",
229230
"@types/bookshelf": "1.2.9",
@@ -242,6 +243,7 @@
242243
"expect": "29.7.0",
243244
"find-root": "1.1.0",
244245
"form-data": "4.0.2",
246+
"html-minifier": "4.0.0",
245247
"html-validate": "8.29.0",
246248
"inquirer": "8.2.6",
247249
"jwk-to-pem": "2.0.7",

‎ghost/core/test/unit/server/services/koenig/node-renderers/audio-renderer.test.js

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
const assert = require('assert/strict');
2+
const {callRenderer, html, assertPrettifiesTo} = require('../test-utils');
3+
4+
describe('koenig/services/node-renderers/audio-renderer', function () {
5+
function getTestData(overrides = {}) {
6+
return {
7+
src: '/content/audio/2022/11/koenig-lexical.mp3',
8+
title: 'Test Audio',
9+
duration: 60,
10+
mimeType: 'audio/mp3',
11+
thumbnailSrc: '/content/images/2022/11/koenig-audio-lexical.jpg',
12+
...overrides
13+
};
14+
}
15+
16+
function renderForWeb(data, options) {
17+
return callRenderer('audio', data, options);
18+
}
19+
20+
function renderForEmail(data, options) {
21+
return callRenderer('audio', data, {...options, target: 'email'});
22+
}
23+
24+
describe('web', function () {
25+
it('matches snapshot for default test data', function () {
26+
const result = renderForWeb(getTestData());
27+
28+
assert.ok(result.html);
29+
30+
assertPrettifiesTo(result.html, html`
31+
<div class="kg-card kg-audio-card">
32+
<img src="/content/images/2022/11/koenig-audio-lexical.jpg" alt="audio-thumbnail" class="kg-audio-thumbnail">
33+
<div class="kg-audio-thumbnail placeholder kg-audio-hide">
34+
<svg width="24" height="24" fill="none">
35+
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 15.33a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm-2.25.75a2.25 2.25 0 1 1 4.5 0 2.25 2.25 0 0 1-4.5 0ZM15 13.83a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm-2.25.75a2.25 2.25 0 1 1 4.5 0 2.25 2.25 0 0 1-4.5 0Z"></path>
36+
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.486 6.81A2.25 2.25 0 0 1 17.25 9v5.579a.75.75 0 0 1-1.5 0v-5.58a.75.75 0 0 0-.932-.727.755.755 0 0 1-.059.013l-4.465.744a.75.75 0 0 0-.544.72v6.33a.75.75 0 0 1-1.5 0v-6.33a2.25 2.25 0 0 1 1.763-2.194l4.473-.746Z"></path>
37+
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 1.5a.75.75 0 0 0-.75.75v19.5a.75.75 0 0 0 .75.75h18a.75.75 0 0 0 .75-.75V5.133a.75.75 0 0 0-.225-.535l-.002-.002-3-2.883A.75.75 0 0 0 18 1.5H3ZM1.409.659A2.25 2.25 0 0 1 3 0h15a2.25 2.25 0 0 1 1.568.637l.003.002 3 2.883a2.25 2.25 0 0 1 .679 1.61V21.75A2.25 2.25 0 0 1 21 24H3a2.25 2.25 0 0 1-2.25-2.25V2.25c0-.597.237-1.169.659-1.591Z"></path>
38+
</svg>
39+
</div>
40+
<div class="kg-audio-player-container">
41+
<audio src="/content/audio/2022/11/koenig-lexical.mp3" preload="metadata"></audio>
42+
<div class="kg-audio-title">Test Audio</div>
43+
<div class="kg-audio-player">
44+
<button class="kg-audio-play-icon" aria-label="Play audio">
45+
<svg viewBox="0 0 24 24">
46+
<path d="M23.14 10.608 2.253.164A1.559 1.559 0 0 0 0 1.557v20.887a1.558 1.558 0 0 0 2.253 1.392L23.14 13.393a1.557 1.557 0 0 0 0-2.785Z"></path>
47+
</svg>
48+
</button>
49+
<button class="kg-audio-pause-icon kg-audio-hide" aria-label="Pause audio">
50+
<svg viewBox="0 0 24 24">
51+
<rect x="3" y="1" width="7" height="22" rx="1.5" ry="1.5"></rect>
52+
<rect x="14" y="1" width="7" height="22" rx="1.5" ry="1.5"></rect>
53+
</svg>
54+
</button>
55+
<span class="kg-audio-current-time">0:00</span>
56+
<div class="kg-audio-time">/<span class="kg-audio-duration">60</span></div>
57+
<input type="range" class="kg-audio-seek-slider" max="100" value="0">
58+
<button class="kg-audio-playback-rate" aria-label="Adjust playback speed">1×</button>
59+
<button class="kg-audio-unmute-icon" aria-label="Unmute">
60+
<svg viewBox="0 0 24 24">
61+
<path d="M15.189 2.021a9.728 9.728 0 0 0-7.924 4.85.249.249 0 0 1-.221.133H5.25a3 3 0 0 0-3 3v2a3 3 0 0 0 3 3h1.794a.249.249 0 0 1 .221.133 9.73 9.73 0 0 0 7.924 4.85h.06a1 1 0 0 0 1-1V3.02a1 1 0 0 0-1.06-.998Z"></path>
62+
</svg>
63+
</button>
64+
<button class="kg-audio-mute-icon kg-audio-hide" aria-label="Mute">
65+
<svg viewBox="0 0 24 24">
66+
<path d="M16.177 4.3a.248.248 0 0 0 .073-.176v-1.1a1 1 0 0 0-1.061-1 9.728 9.728 0 0 0-7.924 4.85.249.249 0 0 1-.221.133H5.25a3 3 0 0 0-3 3v2a3 3 0 0 0 3 3h.114a.251.251 0 0 0 .177-.073ZM23.707 1.706A1 1 0 0 0 22.293.292l-22 22a1 1 0 0 0 0 1.414l.009.009a1 1 0 0 0 1.405-.009l6.63-6.631A.251.251 0 0 1 8.515 17a.245.245 0 0 1 .177.075 10.081 10.081 0 0 0 6.5 2.92 1 1 0 0 0 1.061-1V9.266a.247.247 0 0 1 .073-.176Z"></path>
67+
</svg>
68+
</button>
69+
<input type="range" class="kg-audio-volume-slider" max="100" value="100">
70+
</div>
71+
</div>
72+
</div>
73+
`);
74+
});
75+
76+
it('renders nothing with a missing src', function () {
77+
const result = renderForWeb(getTestData({src: ''}));
78+
assert.equal(result.html, '');
79+
});
80+
});
81+
82+
describe('email', function () {
83+
it('matches snapshot for default test data', function () {
84+
const result = renderForEmail(getTestData());
85+
86+
assert.ok(result.html);
87+
88+
assertPrettifiesTo(result.html, html`
89+
<table cellspacing="0" cellpadding="0" border="0" class="kg-audio-card">
90+
<tbody>
91+
<tr>
92+
<td>
93+
<table cellspacing="0" cellpadding="0" border="0" width="100%">
94+
<tbody>
95+
<tr>
96+
<td width="60">
97+
<a href="https://test.com/post/" style="display: block; width: 60px; height: 60px; padding-top: 4px; padding-right: 16px; padding-bottom: 4px; padding-left: 4px; border-radius: 2px;">
98+
<img src="/content/images/2022/11/koenig-audio-lexical.jpg" class="kg-audio-thumbnail" style="width: 60px; height: 60px; object-fit: cover; border: 0; border-radius: 2px;">
99+
</a>
100+
</td>
101+
<td style="position: relative; vertical-align: center" valign="middle">
102+
<a href="https://test.com/post/" style="position: absolute; display: block; top: 0; right: 0; bottom: 0; left: 0;"></a>
103+
<table cellspacing="0" cellpadding="0" border="0" width="100%">
104+
<tbody>
105+
<tr>
106+
<td>
107+
<a href="https://test.com/post/" class="kg-audio-title">Test Audio</a>
108+
</td>
109+
</tr>
110+
<tr>
111+
<td>
112+
<table cellspacing="0" cellpadding="0" border="0" width="100%">
113+
<tbody>
114+
<tr>
115+
<td width="24" style="vertical-align: middle" valign="middle">
116+
<a href="https://test.com/post/" class="kg-audio-play-button"></a>
117+
</td>
118+
<td style="vertical-align: middle" valign="middle">
119+
<a href="https://test.com/post/" class="kg-audio-duration">1:00<span class="kg-audio-link">• Click to play audio</span></a>
120+
</td>
121+
</tr>
122+
</tbody>
123+
</table>
124+
</td>
125+
</tr>
126+
</tbody>
127+
</table>
128+
</td>
129+
</tr>
130+
</tbody>
131+
</table>
132+
</td>
133+
</tr>
134+
</tbody>
135+
</table>
136+
`);
137+
});
138+
139+
it('renders nothing with a missing src', function () {
140+
const result = renderForEmail(getTestData({src: ''}));
141+
assert.equal(result.html, '');
142+
});
143+
});
144+
});

0 commit comments

Comments
 (0)