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

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

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>

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)
 })