sand4rt / playwright-ct-web Goto Github PK

Hi,

I was trying the experimental playwright with your web components implementation, but I got some errors regarding decorators

Error: [path]: Support for the experimental syntax 'decorators' isn't currently enabled ([position]):

> [line] | @customElement(

Add @babel/plugin-proposal-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-proposal-decorators) to the 'plugins' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-decorators) to the 'plugins' section to enable parsing.

Is there a way to specify a babel plugin in the configuration? Or should this modules do it by default?

With the issue #5 (PR #6) we can use any attribute, including data-attribute:

  mount(Button, {
    attributes: {
      'data-this-is-a-data-attribute': true,
    },
  });

But to facilitate, we could have also a dataAttribute parameter:

  mount(Button, {
    dataAttributes: {
      thisIsADataAttribute: true,
    },
  });

To achieve this we could have a simple function like this:

function __pwUpdateDataAttributes(webComponent, dataAttributes = {}) {
  Object.assign(webComponent.dataset, dataAttributes)
}

Would love to use this to unit test my lit components.

I first tried it on my own project by initializing this
npm init playwright-sand4rt@latest -- --ct

I create the example Button.ts and Button.test.ts,
first error was:
Error: Unsupported decorator location: field
Solved this by adding accessor

  @property({ type: String })
  -title!: string;
  +accessor title!: string;

It compiled, but next was this error:

Error: TypeError: Cannot read properties of undefined (reading 'toUpperCase')
at __pwResolveComponent (http://localhost:3100/assets/index-8c01864d.js:199:46)

I then downloaded playwright-ct-web to test the ct-web-lit exampled.
This ran correctly inside the monorepo
I tried moving the ct-web-lit outside the monorep,
replaced this line:

-"@sand4rt/experimental-ct-web": "workspace:*",
+"@sand4rt/experimental-ct-web": "^1.41.0",

To have a standalone working version, this failed due to this error:

I also created a clean vite-lit repo, installed your testing lib:
npm init playwright-sand4rt@latest -- --ct
Copied the button example and test of the readme, got almost the same error:

I would really like this to work, to unit test my lit components in playwright.

Could you shed some light why your ct-web-lit is working in the monorepo, but I can't get any test to work with the initialize

The tests projects are created with Vite however Vite is not required

@sand4rt just a question, as the plugin is loaded in ct-web, how can one opt-out of Vite?

Originally posted by @davidenke in #1 (comment)

As mentioned in #1, Vite should not be required for running tests. Maintaining a separate build stack in addition to the existing one, or in case of a bundler less config, this shouldn't be necessary imho. Maybe it should become a peer dep, which is only used once found installed?

Hi,

I was trying the experimental playwright with your web components implementation, but I got some errors for the latest version of playwright (1.33.0)

Error: Package subpath './lib/mount' is not defined by "exports" in [path]/node_modules/@playwright/test/package.json

Was able to "run" the tests for version 1.32.1 (the run is on quotes because of #8)

I am currently searching for and experimenting with alternatives to @web/test-runner and @open-oc/testing for testing custom components and also stumbled over playwright-ct and your library. For simple use cases it seems to work well, but I have created some tests already with @web/test-runner, which I fail to rewrite using mount.

For example one of the problems is, that mount seems to only work for creating single component instances:

const component = await mount(Button, {
  props: {
    title: 'Submit',
  },
});

This only works for the very simplest of use-cases. A more real-world usage (especially in the example of testing a custom button component) would be something like this, where not only the component itself, but maybe some wrapper element or children are necessary to construct a realistic test case:

const el = await fixture(html`
  <form>
    <my-button type="submit">Submit</my-button>
  </form>
`);

I was wondering if it was possible to make mount more powerful and provide something similar to the fixtures helper from https://www.npmjs.com/package/@open-wc/testing-helpers#user-content-test-a-custom-element-with-properties? Even better if one could (optionally) provide a template using lit-html to write better readable test cases.

I'm just trying out your library and have found that its not possible to set attributes on components, some of our components don't map properties to attributes so can't be tested.
I've created a very small patch to fix this if you are interested in pulling it in.

Is there a reason for why the props passed to "mount" is limited to JsonPrimitive?

@sand4rt
my project is using @playwright/test:1.23.2 across the whole project, wonder if it works compatibly. If not, what is the version required? thanks

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:

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.

Hi,

after upgrading to v1.33, I get an error when trying to run tests:

Error: Cannot find module '@playwright/experimental-ct-core/lib/mount'
Require stack:
- C:\Git\es-web-components\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@sand4rt\experimental-ct-web\index.js

I've updated Playwright as well to v1.33 - is there anything else I need to update/do?