Fix tests

packages/alpinejs/src/utils/bind.js

@@ -135,11 +135,11 @@ function checkedAttrLooseCompare(valueA, valueB) {
 }
 
 export function safeParseBoolean(rawValue) {
-    if ([1, '1', 'true', true].includes(rawValue)) {
+    if ([1, '1', 'true', 'on', 'yes', true].includes(rawValue)) {
         return true
     }
 
-    if ([0, '0', 'false', false].includes(rawValue)) {
+    if ([0, '0', 'false', 'off', 'no', false].includes(rawValue)) {
         return false
     }
 

tests/cypress/integration/directives/x-bind-style.spec.js

@@ -40,7 +40,7 @@ test('style attribute object binding with CSS variable',
         </div>
     `,
     ({ get }) => {
-        get('div').should(haveAttribute('style', '--MyCSS-Variable:0.25;'))
+        get('div').should(haveAttribute('style', '--MyCSS-Variable: 0.25;'))
     }
 )
 
@@ -62,7 +62,7 @@ test('CSS custom properties are set',
         </div>
     `,
     ({ get }) => {
-        get('span').should(haveAttribute('style', 'color: var(--custom-prop); --custom-prop:#f00;'))
+        get('span').should(haveAttribute('style', 'color: var(--custom-prop); --custom-prop: #f00;'))
     }
 )
 
@@ -73,6 +73,6 @@ test('existing CSS custom properties are preserved',
         </div>
     `,
     ({ get }) => {
-        get('span').should(haveAttribute('style', 'color: var(--custom-prop-b); --custom-prop-a: red; --custom-prop-b:var(--custom-prop-a);'))
+        get('span').should(haveAttribute('style', 'color: var(--custom-prop-b); --custom-prop-a: red; --custom-prop-b: var(--custom-prop-a);'))
     }
 )

tests/cypress/integration/directives/x-model.spec.js

@@ -101,6 +101,9 @@ test('x-model casts value to boolean if boolean modifier is present',
     html`
     <div x-data="{ foo: null, bar: null, baz: [] }">
         <input type="text" x-model.boolean="foo"></input>
+        <input type="checkbox" x-model.boolean="foo"></input>
+        <input type="radio" name="foo" x-model.boolean="foo" value="true"></input>
+        <input type="radio" name="foo" x-model.boolean="foo" value="false"></input>
         <select x-model.boolean="bar">
             <option value="true">yes</option>
             <option value="false">no</option>
@@ -110,20 +113,24 @@ test('x-model casts value to boolean if boolean modifier is present',
     ({ get }) => {
         get('input[type=text]').type('1')
         get('div').should(haveData('foo', true))
-
         get('input[type=text]').clear().type('0')
         get('div').should(haveData('foo', false))
 
-        get('input[type=text]').clear().type('true')
+        get('input[type=checkbox]').check()
         get('div').should(haveData('foo', true))
+        get('input[type=checkbox]').uncheck()
+        get('div').should(haveData('foo', false))
 
-        get('input[type=text]').clear().type('false')
+        get('input[type=radio][value="true"]').should(notBeChecked())
+        get('input[type=radio][value="false"]').should(beChecked())
+        get('input[type=radio][value="true"]').check()
+        get('div').should(haveData('foo', true))
+        get('input[type=radio][value="false"]').check()
         get('div').should(haveData('foo', false))
 
-        get('select').select('no')
+        get('select').select('false')
         get('div').should(haveData('bar', false))
-
-        get('select').select('yes')
+        get('select').select('true')
         get('div').should(haveData('bar', true))
     }
 )
@@ -138,7 +145,7 @@ test('x-model with boolean modifier returns: null if empty, original value if ca
         get('input').clear()
         get('div').should(haveData('foo', null))
         get('input').clear().type('bar')
-        get('div').should(haveData('foo', 'bar'))
+        get('div').should(haveData('foo', true))
         get('input').clear().type('1')
         get('div').should(haveData('foo', true))
         get('input').clear().type('1').clear()
@@ -146,7 +153,7 @@ test('x-model with boolean modifier returns: null if empty, original value if ca
         get('input').clear().type('0')
         get('div').should(haveData('foo', false))
         get('input').clear().type('bar')
-        get('div').should(haveData('foo', 'bar'))
+        get('div').should(haveData('foo', true))
         get('input').clear().type('0').clear()
         get('div').should(haveData('foo', null))
     }

tests/cypress/integration/plugins/morph.spec.js

@@ -494,7 +494,7 @@ test('can morph @event handlers', [
     }
 );
 
-test.only('can morph menu',
+test('can morph menu',
     [html`
         <main x-data>
             <article x-menu>