| Server IP : 199.250.214.225 / Your IP : 18.222.21.139 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() {}
}
jest.spyOn(window, 'setTimeout').mockImplementation((callback) => {
callback()
})
const mockConsoleWarn = jest.spyOn(console, 'warn').mockImplementation(() => {})
beforeEach(() => {
jest.clearAllMocks()
})
test('error in x-data eval contains element, expression and original error', async () => {
document.body.innerHTML = `
<div x-data="{ foo: 'bar' ">
<span x-bind:foo="foo.bar"></span>
</div>
`
await expect(Alpine.start()).rejects.toThrow()
expect(mockConsoleWarn).toHaveBeenCalledWith(
`Alpine Error: "SyntaxError: Unexpected token ')'"\n\nExpression: "{ foo: 'bar' "\nElement:`,
document.querySelector('[x-data]'),
)
})
test('error in x-init eval contains element, expression and original error', async () => {
document.body.innerHTML = `
<div x-data x-init="foo.bar = 'baz'">
</div>
`
await Alpine.start()
expect(mockConsoleWarn).toHaveBeenCalledWith(
`Alpine Error: "ReferenceError: foo is not defined"\n\nExpression: "foo.bar = 'baz'"\nElement:`,
document.querySelector('[x-data]'),
)
})
test('error in x-spread eval contains element, expression and original error', async () => {
document.body.innerHTML = `
<div x-data x-spread="foo.bar">
</div>
`
// swallow the rendering error
await expect(Alpine.start()).rejects.toThrow()
expect(mockConsoleWarn).toHaveBeenCalledWith(
`Alpine Error: "ReferenceError: foo is not defined"\n\nExpression: "foo.bar"\nElement:`,
document.querySelector('[x-data]'),
)
})
test('error in x-bind eval contains element, expression and original error', async () => {
document.body.innerHTML = `
<div x-data="{ foo: null }">
<span x-bind:foo="foo.bar"></span>
</div>
`
await Alpine.start()
expect(mockConsoleWarn).toHaveBeenCalledWith(
`Alpine Error: "TypeError: Cannot read property 'bar' of null"\n\nExpression: "foo.bar"\nElement:`,
document.querySelector('[x-bind:foo]'),
)
})
test('error in x-model eval contains element, expression and original error', async () => {
document.body.innerHTML = `
<div x-data="{ foo: null }">
<input x-model="foo.bar">
</div>
`
await Alpine.start()
expect(mockConsoleWarn).toHaveBeenCalledWith(
`Alpine Error: "TypeError: Cannot read property 'bar' of null"\n\nExpression: "foo.bar"\nElement:`,
document.querySelector('[x-model]',)
)
})
test('error in x-for eval contains element, expression and original error', async () => {
document.body.innerHTML = `
<div x-data="{}">
<template x-for="element in foo">
<span x-text="element"></span>
</template>
</div>
`
await expect(Alpine.start()).rejects.toThrow()
expect(mockConsoleWarn).toHaveBeenCalledWith(
`Alpine Error: "ReferenceError: foo is not defined"\n\nExpression: "foo"\nElement:`,
document.querySelector('[x-for]',)
)
})
test('error in x-on eval contains element, expression and original error', async () => {
document.body.innerHTML = `
<div
x-data="{hello: null}"
x-on:click="hello.world"
></div>
`
await Alpine.start()
document.querySelector('div').click()
await wait(() => {
expect(mockConsoleWarn).toHaveBeenCalledWith(
`Alpine Error: "TypeError: Cannot read property 'world' of null"\n\nExpression: "hello.world"\nElement:`,
document.querySelector('[x-data]',)
)
})
})