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

sylvainpolletvillard · web-flow · commit 655e7a887ea1 · 2021-02-13T19:24:14.000+08:00
* Boolean prop casting should use default value

* add a test case for setting false on a default true boolean property
diff --git a/src/utils.js b/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 --git a/test/fixtures/attributes.html b/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 --git a/test/test.js b/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)
 })
 

Original file line number	Diff line number	Diff line change
`@@ -46,10 +46,10 @@ export function convertAttributeValue (value, name, { type } = {}) {`
`46`	`46`	`if (value === 'true' \|\| value === 'false') {`
`47`	`47`	`return value === 'true'`
`48`	`48`	`}`
`49`		`- if (value === '' \|\| value === name) {`
	`49`	`+ if (value === '' \|\| value === name \|\| value != null) {`
`50`	`50`	`return true`
`51`	`51`	`}`
`52`		`- return value != null`
	`52`	`+ return value`
`53`	`53`	`} else if (isNumber(type)) {`
`54`	`54`	`const parsed = parseFloat(value, 10)`
`55`	`55`	`return isNaN(parsed) ? value : parsed`