import Alpine from 'alpinejs' import { wait } from '@testing-library/dom' global.MutationObserver = class { observe() {} } test('attribute bindings are set on initialize', async () => { document.body.innerHTML = `
` Alpine.start() expect(document.querySelector('span').getAttribute('foo')).toEqual('bar') }) test('class attribute bindings are merged by string syntax', async () => { document.body.innerHTML = `
` Alpine.start() expect(document.querySelector('span').classList.contains('foo')).toBeTruthy() expect(document.querySelector('span').classList.contains('bar')).toBeFalsy() document.querySelector('button').click() await wait(() => { expect(document.querySelector('span').classList.contains('foo')).toBeTruthy() expect(document.querySelector('span').classList.contains('bar')).toBeTruthy() }) document.querySelector('button').click() await wait(() => { expect(document.querySelector('span').classList.contains('foo')).toBeTruthy() expect(document.querySelector('span').classList.contains('bar')).toBeFalsy() }) }) test('class attribute bindings are merged by array syntax', async () => { document.body.innerHTML = `
` Alpine.start() expect(document.querySelector('span').classList.contains('foo')).toBeTruthy() expect(document.querySelector('span').classList.contains('bar')).toBeTruthy() expect(document.querySelector('span').classList.contains('baz')).toBeFalsy() document.querySelector('button').click() await wait(() => { expect(document.querySelector('span').classList.contains('foo')).toBeTruthy() expect(document.querySelector('span').classList.contains('bar')).toBeTruthy() expect(document.querySelector('span').classList.contains('baz')).toBeTruthy() }) document.querySelector('button').click() await wait(() => { expect(document.querySelector('span').classList.contains('foo')).toBeTruthy() expect(document.querySelector('span').classList.contains('bar')).toBeTruthy() expect(document.querySelector('span').classList.contains('baz')).toBeFalsy() }) }) test('class attribute bindings are removed by object syntax', async () => { document.body.innerHTML = `
` Alpine.start() expect(document.querySelector('span').classList.contains('foo')).toBeFalsy() }) test('class attribute bindings are added by object syntax', async () => { document.body.innerHTML = `
` Alpine.start() expect(document.querySelector('span').classList.contains('foo')).toBeTruthy() }) test('multiple classes are added by object syntax', async () => { document.body.innerHTML = `
` 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 = `
` 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 = `
` Alpine.start() expect(document.querySelector('span').classList.contains('foo')).toBeTruthy() }) test('class attribute bindings are removed by array syntax', async () => { document.body.innerHTML = `
` Alpine.start() expect(document.querySelector('span').classList.contains('foo')).toBeFalsy() }) test('class attribute bindings are added by array syntax', async () => { document.body.innerHTML = `
` Alpine.start() expect(document.querySelector('span').classList.contains('foo')).toBeTruthy }) test('class attribute bindings are synced by string syntax', async () => { document.body.innerHTML = `
` Alpine.start() expect(document.querySelector('span').classList.contains('bar')).toBeTruthy expect(document.querySelector('span').classList.contains('baz')).toBeTruthy }) test('boolean attributes set to false are removed from element', async () => { document.body.innerHTML = `
` Alpine.start() expect(document.querySelectorAll('input')[0].disabled).toBeFalsy() expect(document.querySelectorAll('input')[1].checked).toBeFalsy() expect(document.querySelectorAll('input')[2].required).toBeFalsy() expect(document.querySelectorAll('input')[3].readOnly).toBeFalsy() expect(document.querySelectorAll('input')[4].hidden).toBeFalsy() }) test('boolean attributes set to true are added to element', async () => { document.body.innerHTML = `
` Alpine.start() expect(document.querySelectorAll('input')[0].disabled).toBeTruthy() expect(document.querySelectorAll('input')[1].checked).toBeTruthy() expect(document.querySelectorAll('input')[2].required).toBeTruthy() expect(document.querySelectorAll('input')[3].readOnly).toBeTruthy() }) test('binding supports short syntax', async () => { document.body.innerHTML = `
` Alpine.start() expect(document.querySelector('span').classList.contains('bar')).toBeTruthy() })