Add ui tests

[fcollonval]

Add playwright to test the examples

• Remaining examples:
  • settings
  • state
  • toolbar-button
  • widget
• Tests on CI

This uncovers a bug in style packaging.
This is using playwright test runner (no galata).

There are nice examples of playwright code for:

• capturing log console message (hello-world, settings,...),
• capturing alert message (settings,...),
• emulate drag and drop (move a panel in the main area to create a split panel) (kernel-output & log-messages).
• get select current value (state)
• wait for a request (state)

log console and alert dialogs are not capture when generating videos from tests. So it seems unappropriate to replace existing preview with those videos although they will allow to be up to date.

What do you think @jtpio @echarles?

[jtpio]

Thanks for starting this!

This is using playwright test runner (no galata).

This could be useful to lay the foundations for a potential rework in Galata discussed in jupyterlab/galata#67

So it seems unappropriate to replace existing preview with those videos although they will allow to be up to date.

Some time a while ago it was also discussed whether to check the screencasts in the repositories because of their size. Probably this will be a similar issue with videos?

[fcollonval]

Probably this will be a similar issue with videos?

Yes. What I had in mind was to create a manual workflow (or one triggered by new JLab release) that would have open a PR to update those videos/screenshots only once in a while (with maybe a conversion to GIF and cutting the first few seconds corresponding to the logo animation for the videos).

[fcollonval]

The failure is on Mac and not related to this.

[jtpio]

Probably this could fix #45?

Or do we still want to have examples of setting up unit tests in this repo?

[jtpio]

Looks good, thanks!

[jtpio]

Also we might want to make the ui-tests more discoverable, for example by linking to the folder from the example README.md?

So folks interesting in this could learn how to set them up. This could be in the hello world example, or in a dedicated testing example.

[fcollonval]

I would rather create a dedicated example to talk about testing (addressing ui-tests and jest tests). But I want to work on galata to stabilize its usage with playwright before doing so.

I'll merge this one and open a PR to add a section about the tests in the README.