fix: Boolean prop casting should use default value (#58)

* Boolean prop casting should use default value

* add a test case for setting false on a default true boolean property

Author: sylvainpolletvillard

Diff for: src/utils.js

@@ -46,10 +46,10 @@ export function convertAttributeValue (value, name, { type } = {}) {
     if (value === 'true' || value === 'false') {
       return value === 'true'
     }
-    if (value === '' || value === name) {
+    if (value === '' || value === name || value != null) {
       return true
     }
-    return value != null
+    return value
   } else if (isNumber(type)) {
     const parsed = parseFloat(value, 10)
     return isNaN(parsed) ? value : parsed

Diff for: test/fixtures/attributes.html

@@ -11,6 +11,14 @@
     bar: {
       type: Boolean
     },
+    baz: {
+      type: Boolean,
+      default: true
+    },
+    qux: {
+      type: Boolean,
+      default: true
+    },
     someNumber: {
       type: Number
     }
@@ -20,4 +28,4 @@
 window.el = document.querySelector('my-element')
 </script>
 
-<my-element foo="foo" bar="true" some-number="123"></my-element>
+<my-element foo="foo" bar="true" qux="false" some-number="123"></my-element>

Diff for: test/test.js

@@ -1,3 +1,4 @@
+/* global test expect el els */
 const launchPage = require('./setup')
 
 test('properties', async () => {
@@ -16,9 +17,9 @@ test('properties', async () => {
     el.foo = 234
     el.someProp = 'lol'
   })
-  const newFoo = await page.evaluate(()  => el.vueComponent.foo)
+  const newFoo = await page.evaluate(() => el.vueComponent.foo)
   expect(newFoo).toBe(234)
-  const newBar = await page.evaluate(()  => el.vueComponent.someProp)
+  const newBar = await page.evaluate(() => el.vueComponent.someProp)
   expect(newBar).toBe('lol')
 })
 
@@ -33,6 +34,14 @@ test('attributes', async () => {
   const bar = await page.evaluate(() => el.bar)
   expect(bar).toBe(true)
 
+  // absence of boolean with default: true
+  const baz = await page.evaluate(() => el.baz)
+  expect(baz).toBe(true)
+
+  // boolean="false" with default: true
+  const qux = await page.evaluate(() => el.qux)
+  expect(qux).toBe(false)
+
   // some-number="123"
   const someNumber = await page.evaluate(() => el.someNumber)
   expect(someNumber).toBe(123)
@@ -41,12 +50,16 @@ test('attributes', async () => {
   await page.evaluate(() => {
     el.setAttribute('foo', 'foo')
     el.setAttribute('bar', 'false')
+    el.setAttribute('baz', 'false')
+    el.setAttribute('qux', '')
     el.setAttribute('some-number', '234')
   })
 
   // boolean="boolean"
   expect(await page.evaluate(() => el.foo)).toBe(true)
   expect(await page.evaluate(() => el.bar)).toBe(false)
+  expect(await page.evaluate(() => el.baz)).toBe(false)
+  expect(await page.evaluate(() => el.qux)).toBe(true)
   expect(await page.evaluate(() => el.someNumber)).toBe(234)
 })