htmx/test/attributes/hx-select-oob.js at 152ebf4727f94d158e82710e010deea632c96d19 · bigskysoftware/htmx · GitHub

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
describe('hx-select-oob attribute', function() {
  beforeEach(function() {
    this.server = makeServer()
    clearWorkArea()
  })
  afterEach(function() {
    this.server.restore()
    clearWorkArea()
  })

  it('basic hx-select-oob works', function() {
    this.server.respondWith('GET', '/test', "<div id='d1'>foo</div><div id='d2'>bar</div>")
    var div = make('<div hx-get="/test" hx-select="#d1" hx-select-oob="#d2"></div>')
    make('<div id="d2"></div>')
    div.click()
    this.server.respond()
    div.innerHTML.should.equal('<div id="d1">foo</div>')
    var div2 = byId('d2')
    div2.innerHTML.should.equal('bar')
  })

  it('multiple hx-select-oobs works', function() {
    this.server.respondWith('GET', '/test', "<div id='d1'>foo</div><div id='d2'>bar</div><div id='d3'>bar</div>")
    var div = make('<div hx-get="/test" hx-select="#d1" hx-select-oob="#d2, #d3"></div>')
    make('<div id="d2"></div>')
    make('<div id="d3"></div>')
    div.click()
    this.server.respond()
    div.innerHTML.should.equal('<div id="d1">foo</div>')

    var div2 = byId('d2')
    div2.innerHTML.should.equal('bar')

    var div3 = byId('d2')
    div3.innerHTML.should.equal('bar')
  })

  it('basic hx-select-oob ignores bad selector', function() {
    this.server.respondWith('GET', '/test', "<div id='d1'>foo</div><div id='d2'>bar</div>")
    var div = make('<div hx-get="/test" hx-select="#d1" hx-select-oob="#bad"></div>')
    make('<div id="d2"></div>')
    div.click()
    this.server.respond()
    div.innerHTML.should.equal('<div id="d1">foo</div>')
    var div2 = byId('d2')
    div2.innerHTML.should.equal('')
  })

  it('hx-select-oob works with advanced swap style like strip:false and target:', function() {
    this.server.respondWith('GET', '/test', "<div id='d1'>foo</div><div id='d2'>bar</div>")
    var div = make('<div id="d0" hx-get="/test" hx-select="#d1" hx-select-oob="#d2:afterend strip:false target:#d0"></div>')
    div.click()
    this.server.respond()
    div.innerHTML.should.equal('<div id="d1">foo</div>')
    var div2 = byId('d2')
    div2.innerHTML.should.equal('bar')
  })

  it('hx-select-oob works with basic targeting selector', function() {
    this.server.respondWith('GET', '/test', "<div id='d1'>foo</div><div id='d2'>bar</div>")
    var div = make('<div hx-get="/test" hx-select="#d1" hx-select-oob="#d2:outerHTML:#d3"></div>')
    make('<div class="foo" id="d3"></div>')
    div.click()
    this.server.respond()
    div.innerHTML.should.equal('<div id="d1">foo</div>')
    var div2 = byId('d2')
    div2.innerHTML.should.equal('bar')
  })

  it('basic hx-select-oob works with just an id without #', function() {
    this.server.respondWith('GET', '/test', "<div id='d1'>foo</div><div id='d2'>bar</div>")
    var div = make('<div hx-get="/test" hx-select="#d1" hx-select-oob="d2"></div>')
    make('<div id="d2"></div>')
    div.click()
    this.server.respond()
    div.innerHTML.should.equal('<div id="d1">foo</div>')
    var div2 = byId('d2')
    div2.innerHTML.should.equal('bar')
  })

  it('basic hx-select-oob works with just a non id selector', function() {
    this.server.respondWith('GET', '/test', "<div id='d1'>foo</div><span><div id='d2'>bar</div></span>")
    var div = make('<div hx-get="/test" hx-select="#d1" hx-select-oob="span div"></div>')
    make('<div id="d2"></div>')
    div.click()
    this.server.respond()
    div.innerHTML.should.equal('<div id="d1">foo</div>')
    var div2 = byId('d2')
    div2.innerHTML.should.equal('bar')
  })
})