Add tests for binding value correctness

[justinfagnani]

Some frameworks seem to sometimes modify values when they're set on the DOM for some reasons.

For example, Vue seems to convert null to 0 if the property was previously a number. This means that an element can't reliably use null and numbers together for the same property. See vuejs/core#14209

Each framework that messes with values like this probably has its own set of edge cases, so we don't want to add a super-specific test like "sets a property to null when it was previously a number", and then one for each other edge case we find, but we have one test that bundles together all the edge cases that we find and runs them past each framework. At least until we get test weighting and can weight edge cases as lower than say, being able to set properties at all.

[trusktr]

This is a subset of

• New test: control over setting attributes, JS properties, events, and boolean attributes #2352

where the idea is to test that frameworks allow us 100% control of values we pass to DOM.

[trusktr]

Would love to get @mrginglymus's new Playwright test setup in, to avoid having to mess with the flaky and inflexible Karma setup. That will make adding any of these new tests, and adding new frameworks, much easier.

[filimon-danopoulos-stratsys]

@trusktr My spontaneous reaction is that this is something slightly different than testing that a framework supports control over the prop/attr/bool. In this case Vue allows for .prop so it should pass those tests. This is more about respecting values as they change.

E.g.

el.value = 'test'; 
el.value = 0; 
el.value = null; 
console.log(el.value) // 0

// different order 
el.value = 0; 
el.value = 'test';
el.value = null; 
console.log(el.value) // ''

// my favorite
el.value = true; 
el.value = '';
console.log(el.value) // true

---

@justinfagnani The offending logic in Vue is:

if (value === '' || value == null) {
    const type = typeof el[key]
    if (type === 'boolean') {
      value = !!value || value === ''
    } else if (value == null && type === 'string') {
      value = ''
    } else if (type === 'number') {
      value = 0
    }
  }

Expanding that gives:

typeof	nullish	''
'boolean'	false	true
'string'	''	''
'number'	0	0

I'm not sure how one would formulate a test for this that does not become about edge cases maybe something like "should accept nullish values in property assignment for string/number/boolean typed properties"?. A very simple example is https://jsfiddle.net/filimondanopoulosstratsys/t4je3dfr/4/