1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
describe('hx-preload attribute', function() {
let extBackup;
before(async () => {
extBackup = backupExtensions();
clearExtensions();
let script = document.createElement('script');
script.src = '../src/ext/hx-preload.js';
await new Promise(resolve => {
script.onload = resolve;
document.head.appendChild(script);
});
})
after(() => {
restoreExtensions(extBackup);
})
beforeEach(() => {
setupTest(this.currentTest)
})
afterEach(() => {
cleanupTest(this.currentTest)
})
it('preloads on specified event', async function () {
mockResponse('GET', '/test', 'Preloaded')
let btn = createProcessedHTML('<button hx-get="/test" hx-preload="mouseenter">Click</button>');
btn.dispatchEvent(new Event('mouseenter'))
await htmx.timeout(20)
assert.isDefined(btn._htmx.preload)
})
it('does not preload POST requests', async function () {
mockResponse('POST', '/test', 'Posted')
let btn = createProcessedHTML('<button hx-post="/test" hx-preload="mouseenter">Click</button>');
btn.dispatchEvent(new Event('mouseenter'))
await htmx.timeout(20)
assert.isUndefined(btn._htmx.preload)
})
it('uses default 5s timeout', async function () {
mockResponse('GET', '/test', 'Response')
let btn = createProcessedHTML('<button hx-get="/test" hx-preload="mouseenter">Click</button>');
btn.dispatchEvent(new Event('mouseenter'))
await htmx.timeout(20)
assert.isTrue(btn._htmx.preload.expiresAt > Date.now() + 4000)
})
it('respects custom timeout', async function () {
mockResponse('GET', '/test', 'Response')
let btn = createProcessedHTML('<button hx-get="/test" hx-preload="mouseenter timeout:100ms">Click</button>');
btn.dispatchEvent(new Event('mouseenter'))
await htmx.timeout(20)
assert.isTrue(btn._htmx.preload.expiresAt < Date.now() + 200)
})
it('skips duplicate preload events', async function () {
mockResponse('GET', '/test', 'Response')
let btn = createProcessedHTML('<button hx-get="/test" hx-preload="mouseenter">Click</button>');
btn.dispatchEvent(new Event('mouseenter'))
await htmx.timeout(10)
let firstPreload = btn._htmx.preload
btn.dispatchEvent(new Event('mouseenter'))
assert.equal(btn._htmx.preload, firstPreload)
})
it('works with different event types', async function () {
mockResponse('GET', '/test', 'Response')
let btn = createProcessedHTML('<button hx-get="/test" hx-preload="focus">Click</button>');
btn.dispatchEvent(new Event('focus'))
await htmx.timeout(20)
assert.isDefined(btn._htmx.preload)
})
it('works with multiple event types', async function () {
mockResponse('GET', '/test', 'Response')
let btn = createProcessedHTML('<button hx-get="/test" hx-preload="focus, foo">Click</button>');
btn.dispatchEvent(new Event('foo'))
await htmx.timeout(20)
assert.isDefined(btn._htmx.preload)
})
it('builds URL with form params', async function () {
mockResponse('GET', '/test?name=test', 'Response')
let form = createProcessedHTML('<form><input name="name" value="test"><button hx-get="/test" hx-preload="mouseenter">Click</button></form>');
let btn = form.querySelector('button')
btn.dispatchEvent(new Event('mouseenter'))
await htmx.timeout(20)
assert.equal(btn._htmx.preload.action, '/test?name=test')
})
})
|
