-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
:class fails when the evaluated value is undefined #825
Comments
@bbugh We could default to an empty string in the case of Up to @calebporzio on what he prefers. |
Yeah, I think defaulting to an empty string if undefined is the right move to make the .split work and not throw a fit. |
Closing this - I'd welcome a PR |
I am attempting to PR this since it seems to be an easy fix, but for the life of me I cannot write a test that fails with the test.only('undefined class binding is ignored', async () => {
document.body.innerHTML = `
<div x-data="{ errorClass: (hasError) => { if (hasError) { return 'red' } } }">
<span id="error" x-bind:class="errorClass(true)">should be red</span>
<span id="empty" x-bind:class="errorClass(false)">should be empty</span>
</div>
`
// // Without the fix, this should throw error about slice here, but doesn't
Alpine.start()
// // Also does not throw
// expect(() => { Alpine.start() }).toThrow()
// Also does not throw
// expect(Alpine.start).toThrow()
// Also does not throw
// expect(() => {
// Alpine.start()
// expect(document.querySelector('#error').classList.value).toEqual('red')
// expect(document.querySelector('#empty').classList.value).toEqual('')
// }).toThrow()
// This test technically fails, but not in the expected way with an Error
expect(document.querySelector('#error').classList.value).toEqual('red')
expect(document.querySelector('#empty').classList.value).toEqual('')
}) I confirmed that this reproduces the error in CodeSandbox (shows up in the main window browser console, not the codesandbox console): https://codesandbox.io/s/bold-bird-qklky?file=/index.html:185-463 Is the test configuration set up some how not to catch errors? It seems like there could be other secretly failing tests if this is the case. |
What you need is something like test('undefined class binding resolves to empty string', async () => {
document.body.innerHTML = `
<div x-data="{ errorClass: (hasError) => { if (hasError) { return 'red' } } }">
<span id="error" x-bind:class="errorClass(true)">should be red</span>
<span id="empty" x-bind:class="errorClass(false)">should be empty</span>
</div>
`
// Test that Alpine.start resolves correctly (If an error is thrown, the promise will be rejected)
await expect(Alpine.start()).resolves.toBeUndefined() //<-- because start doesn't return anything
expect(document.querySelector('#error').classList.value).toEqual('red')
expect(document.querySelector('#empty').classList.value).toEqual('')
}) |
@SimoTod thanks! Unfortunately, that also does not result in an error, but it should, based on the reproduction in the code sandbox.
|
Yeah, I wrote "something like" because it wasn't the final implementation since I was typing from mobile, and I didn't test it. 😄 You also need to take into account that errors are deferred in Alpine (see https://github.com/alpinejs/alpine/blob/master/src/index.js#L95). |
Ah ha! I did not see the I made #847 for this. |
Working on some validation code, sometimes the result of the
errorClass()
doesn't require a value, e.g.is-valid
andis-invalid
should only be shown when the field is dirty. It's possible to return an empty string, but it would be nice if alpine handled theundefined
value rather than raising asplit
error.It appears that the issue is here, which does not check if the value is present:
alpine/src/utils.js
Lines 180 to 182 in 999356a
When
value
is not an object or array, I believe this code is called inhandleAttributeBindingDirective
:alpine/src/directives/bind.js
Lines 64 to 66 in dd43c48
I'm not sure what the repercussions of changing this are. It seems like the right thing to do is to fix
I would submit a PR but this section of the code seems to be untested, and I'm not sure of the implications to change it. It seems like the right thing to do is change
convertClassStringToArray
to handle the non-split
able value and return an empty array or undefined, not sure which.The text was updated successfully, but these errors were encountered: