| Server IP : 199.250.214.225 / Your IP : 3.139.86.131 Web Server : Apache System : Linux vps64074.inmotionhosting.com 3.10.0-1160.105.1.vz7.214.3 #1 SMP Tue Jan 9 19:45:01 MSK 2024 x86_64 User : nicngo5 ( 1001) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : OFF Directory : /home/nicngo5/funds.upgrade.nicn.gov.ng/funds-upgraded/node_modules/alpinejs/test/ |
Upload File : |
import Alpine from 'alpinejs'
import { wait } from '@testing-library/dom'
global.MutationObserver = class {
observe() {}
}
test('x-if', async () => {
document.body.innerHTML = `
<div x-data="{ show: false }">
<button x-on:click="show = ! show"></button>
<template x-if="show">
<p></p>
</template>
</div>
`
Alpine.start()
expect(document.querySelector('p')).toBeFalsy()
document.querySelector('button').click()
await wait(() => { expect(document.querySelector('p')).toBeTruthy() })
})
test('elements inside x-if are still reactive', async () => {
document.body.innerHTML = `
<div x-data="{ show: false, foo: 'bar' }">
<h1 x-on:click="show = ! show"></h1>
<template x-if="show">
<h2 @click="foo = 'baz'"></h2>
</template>
<span x-text="foo"></span>
</div>
`
Alpine.start()
expect(document.querySelector('h2')).toBeFalsy()
expect(document.querySelector('span').textContent).toEqual('bar')
document.querySelector('h1').click()
await wait(() => {
expect(document.querySelector('h2')).toBeTruthy()
})
document.querySelector('h2').click()
await wait(() => {
expect(document.querySelector('span').textContent).toEqual('baz')
})
})
test('x-if works inside a loop', async () => {
document.body.innerHTML = `
<div x-data="{ foos: [{bar: 'baz'}, {bar: 'bop'}]}">
<template x-for="foo in foos">
<div>
<template x-if="foo.bar === 'baz'">
<div>
<span x-text="foo.bar"></span>
</div>
</template>
</div>
</template>
</div>
`
Alpine.start()
expect(document.querySelectorAll('span').length).toEqual(1)
expect(document.querySelector('span').textContent).toEqual('baz')
})
test('event listeners are attached once', async () => {
document.body.innerHTML = `
<div x-data="{ count: 0 }">
<span x-text="count"></span>
<template x-if="true">
<button @click="count += 1">Click me</button>
</template>
</div>
`
Alpine.start()
expect(document.querySelector('span').textContent).toEqual('0')
document.querySelector('button').click()
await wait(() => {
expect(document.querySelector('span').textContent).toEqual('1')
})
})