Unable to test an updated attribute

[Mauro Bertoli]

Hi, I have a custom element defined as (I'm using Typescript, simplified version)

@customElement('md-paragraph')
export class Paragraph extends LitElement {

  @property({ type: String, attribute: true, reflect: true })
  value = '';

  render(): TemplateResult {
    return html`<div>${this.value}<slot></slot></div>`;
  }
}

and this test (I'm using Typescript, simplified version)

it('can update', async () => {
        const el = await fixture('<md-paragraph value="value 1"></md-paragraph>');

        expect(el.getAttribute('value')).to.equal('value 1'); // <= OK
        expect((el as any).value).to.eq('value 1'); // <= FAIL, expected undefined to equal 'value 1'

        (el as any).value = 'value 2';
        await elementUpdated(el);
        expect(el).dom.to.equal('<md-paragraph value="value 2"></md-paragraph>'); // FAIL; expected '<md-paragraph value="value 1">\n</md-paragraph>\n' to equal '<md-paragraph value="value 2">\n</md-paragraph>\n'
      });

Expected behavior

I will expect:

• to have el.value = "value 1"
• after the update, to have DOM as

Actual Behavior

• el.value is undefined
• the DOM doesn't update

Additional context

Latest available from open-wc template

[...]
"lit-element": "^2.5.1",
"lit-html": "^1.4.1",
[...]
"@open-wc/testing": "^2.5.33",
"@web/test-runner": "^0.13.16",

[Mauro Bertoli]

repo with the issue: open-wc-testing-issue

[Westbrook Johnson]

This is due to the same issues outlined in #2275 (comment)

[Mauro Bertoli]

close, as solution is the same as 2275