|
@@ -40,6 +40,32 @@ test('class attribute bindings are added by object syntax', async () => {
|
|
|
expect(document.querySelector('span').classList.contains('foo')).toBeTruthy()
|
|
|
})
|
|
|
|
|
|
+test('multiple classes are added by object syntax', async () => {
|
|
|
+ document.body.innerHTML = `
|
|
|
+ <div x-data="{ isOn: false }">
|
|
|
+ <span class="foo bar" x-bind:class="{ 'foo bar': isOn }"></span>
|
|
|
+ </div>
|
|
|
+ `
|
|
|
+
|
|
|
+ Alpine.start()
|
|
|
+
|
|
|
+ expect(document.querySelector('span').classList.contains('foo')).toBeFalsy()
|
|
|
+ expect(document.querySelector('span').classList.contains('bar')).toBeFalsy()
|
|
|
+})
|
|
|
+
|
|
|
+test('multiple classes are removed by object syntax', async () => {
|
|
|
+ document.body.innerHTML = `
|
|
|
+ <div x-data="{ isOn: true }">
|
|
|
+ <span x-bind:class="{ 'foo bar': isOn }"></span>
|
|
|
+ </div>
|
|
|
+ `
|
|
|
+
|
|
|
+ Alpine.start()
|
|
|
+
|
|
|
+ expect(document.querySelector('span').classList.contains('foo')).toBeTruthy()
|
|
|
+ expect(document.querySelector('span').classList.contains('bar')).toBeTruthy()
|
|
|
+})
|
|
|
+
|
|
|
test('class attribute bindings are added by nested object syntax', async () => {
|
|
|
document.body.innerHTML = `
|
|
|
<div x-data="{ nested: { isOn: true } }">
|