sand4rt / playwright-ct-web

Playwright Web component testing.
https://www.npmjs.com/package/@sand4rt/experimental-ct-web
MIT License
40 stars 3 forks source link

Object literal may only specify known properties, and 'title' does not exist in type 'ComponentProps<Button>' #27

Closed raoufswe closed 1 year ago

raoufswe commented 1 year ago

not really sure if this is a typing issue or I'm missing something but when all properties of a web component are marked as optional such as the following:

import { LitElement, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';

@customElement('button-component')
export class Button extends LitElement {
  @property({ type: String })
  /// here *
  title?: string;

  render() {
    return html`<button>${this.title}</button>`;
  }
}

and your test looks like the following:

import { test, expect } from '@sand4rt/experimental-ct-web';
import { Button } from './components/Button';

test('render props', async ({ mount }) => {
  await mount(Button, {
    props: {
      title 'Raouf',
    },
  });
});

typescript will throw the following error:

Screenshot 2023-09-21 at 15 02 21

we've faced this issue in most of our components at https://github.com/justeattakeaway/pie and our workaround is to use type assertion or wrap the props with Partial such as here but unfortunately this wouldn't work as we have a component that marks all of its properties as optional and you will get the following by doing so as nothing is in common between both types.

Screenshot 2023-09-21 at 15 18 37
sand4rt commented 1 year ago

Hey @raoufswe, thanks for creating the issue. I think there is something wrong with the types on my end. Will let you know when this is fixed.

It is probably related to line 46: https://github.com/sand4rt/playwright-ct-web/blob/master/playwright-ct-web/index.d.ts

raoufswe commented 1 year ago

thank you @sand4rt. in case it helps, I have used this workaround on my end for now please let me know if you need any more details or help 💯

sand4rt commented 1 year ago

Hey @raoufswe, this should be fixed when you upgrade to the latest version. An example/starting point can be found here: https://github.com/justeattakeaway/pie/pull/660/files

raoufswe commented 1 year ago

thank you @sand4rt for your swift action, we will upgrade to the latest version 💯

sand4rt commented 1 year ago

Closing as per above, please feel free to open a new issue if this does not fix the type error.