htmx-extensions/src/class-tools/test/ext/class-tools.js at 28ab422199d60114410b6fe67431e70ea5cceb4f · bigskysoftware/htmx-extensions · 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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
describe('class-tools extension', function() {
  beforeEach(function() {
    this.server = makeServer()
    clearWorkArea()
  })
  afterEach(function() {
    this.server.restore()
    clearWorkArea()
  })

  it('adds classes properly', function(done) {
    var div = make('<div hx-ext="class-tools" classes="add c1">Click Me!</div>')
    should.equal(div.classList.length, 0)
    setTimeout(function() {
      should.equal(div.classList.contains('c1'), true)
      done()
    }, 100)
  })

  it('removes classes properly', function(done) {
    var div = make('<div class="foo bar" hx-ext="class-tools" classes="remove bar">Click Me!</div>')
    should.equal(div.classList.contains('foo'), true)
    should.equal(div.classList.contains('bar'), true)
    setTimeout(function() {
      should.equal(div.classList.contains('foo'), true)
      should.equal(div.classList.contains('bar'), false)
      done()
    }, 100)
  })

  it('adds classes properly w/ data-* prefix', function(done) {
    var div = make('<div hx-ext="class-tools" data-classes="add c1">Click Me!</div>')
    should.equal(div.classList.length, 0)
    setTimeout(function() {
      should.equal(div.classList.contains('c1'), true)
      done()
    }, 100)
  })

  it('adds classes to parent properly', function(done) {
    var div = make('<div>Click Me!<div hx-ext="class-tools" apply-parent-classes="add c1"></div></div>')
    should.equal(div.classList.length, 0)
    setTimeout(function() {
      should.equal(div.classList.contains('c1'), true)
      done()
    }, 100)
  })

  it('removes classes from parent properly', function(done) {
    var div = make('<div class="foo bar">Click Me!<div hx-ext="class-tools" apply-parent-classes="remove bar"></div></div>')
    should.equal(div.classList.contains('foo'), true)
    should.equal(div.classList.contains('bar'), true)
    setTimeout(function() {
      should.equal(div.classList.contains('foo'), true)
      should.equal(div.classList.contains('bar'), false)
      done()
    }, 100)
  })

  it('cleans up child with apply-parent-classes properly', function(done) {
    var div = make('<div class="foo bar">Click Me!<div id="d2" hx-ext="class-tools" apply-parent-classes="remove bar"></div></div>')
    setTimeout(function() {
      should.not.exist(byId('d2'))
      done()
    }, 100)
  })

  it('extension can be on parent', function(done) {
    var div = make('<div hx-ext="class-tools"><div id="d1" classes="add c1">Click Me!</div></div>')
    should.equal(div.classList.length, 0)
    setTimeout(function() {
      should.equal(div.classList.contains('c1'), false)
      should.equal(byId('d1').classList.contains('c1'), true)
      done()
    }, 100)
  })

  it('does not add classes if event is not triggered', function(done) {
    var div = make('<div hx-ext="class-tools"><div classes="add foo"  classes-event-trigger="my-custom-event">Test</div></div>')
    should.equal(div.classList.contains('foo'), false)
    setTimeout(function() {
      should.equal(div.classList.contains('foo'), false)
      done()
    }, 100)
  })

  it('toggles classes properly on custom event trigger, class set', function(done) {
    var div = make(`
      <div hx-ext="class-tools">
        <div classes="toggle foo:!" classes-event-trigger="my-custom-event">Test</div>
        <button hx-on-click="htmx.trigger('body', 'my-custom-event')">toggle</button>
      </div>
    `)
    var toggleDiv = div.querySelector('[classes]')
    should.equal(toggleDiv.classList.contains('foo'), false)
    var button = div.querySelector('button')
    button.click()
    setTimeout(function() {
      should.equal(toggleDiv.classList.contains('foo'), true)
      done()
    }, 100)
  })

  it('toggles classes properly on custom event trigger, class unset', function(done) {
    var div = make(`
      <div hx-ext="class-tools">
        <div class="foo" classes="toggle foo:!" classes-event-trigger="my-custom-event">Test</div>
        <button hx-on-click="htmx.trigger('body', 'my-custom-event')">toggle</button>
      </div>
    `)
    var toggleDiv = div.querySelector('[classes]')
    should.equal(toggleDiv.classList.contains('foo'), true)
    var button = div.querySelector('button')
    button.click()
    setTimeout(function() {
      should.equal(toggleDiv.classList.contains('foo'), false)
      done()
    }, 100)
  })

  it('toggles classes properly on multiple elements with custom event', function(done) {
    var container = make(`
      <div hx-ext="class-tools">
        <div id="div1" classes="toggle foo:!" classes-event-trigger="my-custom-event">Test 1</div>
        <div id="div2" classes="toggle bar:!" classes-event-trigger="my-custom-event">Test 2</div>
        <button hx-on-click="htmx.trigger('body', 'my-custom-event')">Toggle Classes</button>
      </div>
    `)
    var div1 = container.querySelector('#div1')
    var div2 = container.querySelector('#div2')
    should.equal(div1.classList.contains('foo'), false)
    should.equal(div2.classList.contains('bar'), false)
    var button = container.querySelector('button')
    button.click()
    setTimeout(function() {
      should.equal(div1.classList.contains('foo'), true)
      should.equal(div2.classList.contains('bar'), true)
      done()
    }, 100)
  })

  it('toggles multiple classes properly on custom event trigger', function(done) {
    var div = make(`
      <div hx-ext="class-tools">
        <div classes="toggle foo:!, toggle bar:!" classes-event-trigger="my-custom-event">Test</div>
        <button hx-on-click="htmx.trigger('body', 'my-custom-event')">toggle</button>
      </div>
    `)
    var toggleDiv = div.querySelector('[classes]')
    should.equal(toggleDiv.classList.contains('foo'), false)
    should.equal(toggleDiv.classList.contains('bar'), false)
    var button = div.querySelector('button')
    button.click()
    setTimeout(function() {
      should.equal(toggleDiv.classList.contains('foo'), true)
      should.equal(toggleDiv.classList.contains('bar'), true)
      done()
    }, 100)
  })

  // add
})