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
|
describe('__atributeValue() unit tests', function() {
it(':append modifier appends to inherited value', function () {
const container = createDisconnectedHTML(
'<div hx-include:inherited=".parent">' +
' <button hx-include:append=".child">Test</button>' +
'</div>'
);
const button = container.querySelector('button');
const result = htmx.__attributeValue(button, 'hx-include');
assert.equal(result, '.parent,.child');
});
it(':append modifier works without inherited value', function () {
const button = createDisconnectedHTML('<button hx-include:append=".child">Test</button>');
const result = htmx.__attributeValue(button, 'hx-include');
assert.equal(result, '.child');
});
it(':append modifier works with multiple inheritance levels', function () {
const container = createDisconnectedHTML(
'<div hx-vals:inherited=\'{"a":1}\'>' +
' <div>' +
' <button hx-vals:append=\'{"b":2}\'>Test</button>' +
' </div>' +
'</div>'
);
const button = container.querySelector('button');
const result = htmx.__attributeValue(button, 'hx-vals');
assert.equal(result, '"a":1,"b":2');
});
it(':inherited still works normally', function () {
const container = createDisconnectedHTML(
'<div hx-include:inherited=".parent">' +
' <button>Test</button>' +
'</div>'
);
const button = container.querySelector('button');
const result = htmx.__attributeValue(button, 'hx-include');
assert.equal(result, '.parent');
});
it('direct attribute takes precedence over :append', function () {
const container = createDisconnectedHTML(
'<div hx-include:inherited=".parent">' +
' <button hx-include=".direct" hx-include:append=".child">Test</button>' +
'</div>'
);
const button = container.querySelector('button');
const result = htmx.__attributeValue(button, 'hx-include');
assert.equal(result, '.direct');
});
it(':inherited:append modifier works', function () {
const container = createDisconnectedHTML(
'<div hx-include:inherited=".grandparent">' +
' <div hx-include:inherited:append=".parent">' +
' <button hx-include:append=".child">Test</button>' +
' </div>' +
'</div>'
);
const button = container.querySelector('button');
const result = htmx.__attributeValue(button, 'hx-include');
assert.equal(result, '.grandparent,.parent,.child');
});
it(':inherited:append can be inherited by descendants', function () {
const container = createDisconnectedHTML(
'<div hx-include:inherited:append=".parent">' +
' <button>Test</button>' +
'</div>'
);
const button = container.querySelector('button');
const result = htmx.__attributeValue(button, 'hx-include');
assert.equal(result, '.parent');
});
});
|
