Unclear reason for difference between testing components with properties VS attributes

[venikx]

Let's say I have the following web-component that I want to test.

// wc-a.js
class ComponentA extends LitElement {
  @property({type: Boolean}) readonly: boolean;

  render() {
    return html `<div>
      <span>I am a span</span>
      <wc-button .type=${this.readonly ? 'disabled' : 'big' }/>
    </div>`
  }
}

The wc-button has it's own set of tests, but since there's some branching logic in this component I want to test if the correct string is passed to wc-button. The default value for the property "type" is "default", but it could also be "disabled" and "big".

My test looks as follows:

import { html, fixture, expect } from '@open-wc/testing'
import { ComponentA } from './ComponentA'

describe('ComponentA', () => {
  describe('given the component is in readonly mode', () => {
    new ComponentA()

    it('disables the button', async () => {
      const wcA: ComponentA = await fixture(
        html`<wc-a .readonly=${true}></wc-a>`,
      )

      const wcButton = wcA.shadowRoot.querySelector('wc-button')

      expect(wcButton).to.have.property('type').equal('disabled')
     // the propery type is "normal" (because the wc-button component's 
     // "type" property has a default value of "normal". => never got changed
    })
  })
})

However if I change the .readonly property to a readonly (effectively making it an attribute. And then do expect(wcButton).to.have.attr('type').equal('disabled') it passes the test.

I tried adding await elementUpdated(wcA) and await elementUpdated(wcB) in case I needed to wait for the props to be changed (as I remember something similar needed to happen when using enzyme testing library with React). But without success. Anyone has any ideas why?

[venikx]

Wow, as soon as I posted this here, I rubber ducked it myself.

Apparantly if you give a static value like .type="disabled" it will not work, but .type=${"disabled"} works. Lol.

[bennypowers]

there's a few things to be aware of here:

1. in lit-html templates, <wc-a readonly="${true}"> will evaluate to <wc-a readonly="true"> and <wc-a readonly="${false}"> will evaluate to <wc-a readonly="false"> this is likely not what you want. Probably you want the attribute to be present when true and absent when false. For that, use this template syntax:

html`
  <wc-a ?readonly="${bool}"></wc-a>
`; 

The ? prefix on the attribute name signals that its a boolean attribute.

2. if you want it to be the case that setting the property also sets (or unsets) the attribute, use

@property({ type: Boolean, reflect: true }) disabled = false;

the reflect flag makes lit-element reflect property assignments to the corresponding attribute. You can also control the name of the attribute that is set/queried:

@property({ type: String, attribute: 'camel-case' }) camelCase

[venikx]

Interesting! I didn't know this, I'll mark yours as the answer as it's more complete.