Playwright component testing

[bedrich-schindler]

I introduced Playwright Component Testing as replacement for Jest and RTL.

Those tests must be run within `playwright` docker container with pre-installed
browsers to ensure uniform testing environment. `.env.playwright` is created
using `postinstall` script to follow zero-config setup. `.env.playwright` can
be used to tween parameters for local development if needed.

Currently, only tests for `Alert` and `Button` components are migrated to
Playwright CT as this commit is supposed to be proof-of-concept. Rest should
be migrated in later pull request.

All visual tests use prop tests concept we already have for Jest to simplify
testing and to make it DRY. `mixPropTests()` is introduced to mix those
to create combinations to be tested.

[bedrich-schindler]

@literat, this PR might be interesting for you as it shows Playwright Component Testing in action I talked about on Wednesday. As we sometimes share some concepts between React UI and Spirit, do not hesitate to add some comments to this PR.

[mbohal]

I really, really like this!

[bedrich-schindler]

I rebased it as there were conficts in package-lock.json

[bedrich-schindler]

@mbohal and @adamkudrna, ready for round 2.

[bedrich-schindler]

One more thing. I created follow up for better organization of test runners that way beyond this pull request:

#590

Part of the issue is uniform environment to prevent unexpected errors on Apple Silicon where you need to run npm ci inside Docker.

[adamkudrna]

The tests alone look good, however I have some major comments on the dev stack and the docs.

No matter that, having finally the visual tests is so cool! 👏🏻

[bedrich-schindler]

As I mentioned in comments, there is follow-up issue that tracks improvements that need to be discussed and processed on Monday's call: #590 (comment)

If there is not blocking problem, we should close this as soon as it gets and work on improvements later not to block further work as none of the comment is related to writing tests but to stack around it.

Anyway, I thank @adamkudrna for the discussions he raised. I can sound uncompromising, but I must balance between the things that are necessary and that are not to not to block further work and to keep the scope as tight as possible as there are thousands of things that might be solved in this PR.

[bedrich-schindler]

Pull request should be ready for next round @adamkudrna.

I also told @lukasbriza to check the discussions again to bring next opinion into discussion.

[mbohal]

I have written this to a comment under outdated yet unresolved discussion. I will put it here as well, just to be sure it does not disappear.

To serve the report I just run cd playwright-report and then python -m http.server 8000.
It then serves the report on port 8000.

I find this better:

• port is set inline, no need for the PW_REPORT_PORT const and non-pretty code in package.json
• better separation of concerns as playwright creates a report and then another tool serves it
• On *NIX systems Python is typically installed by default, Node.js is not.

I think we should add this method to docs. I would even consider removing the current one, but I have no strong feelings about it.

[bedrich-schindler]

I managed to make it working. I was able to remember that there is actually problem when running docker compose run. The problem is that docker compose run does not expose ports by design and to expose them, --service-ports must be used. That was reason that it was not working before. It is working now and port can be changed using COMPOSE_PLAYWRIGHT_REPORT_PORT. I use default ports 9323 as it is not easy to use read variables from multiple env files (.env + .env.playwright). So it now can be served from Docker!

[mbohal]

These links do not work outside of the context of mkdocs. We need to add src to the path.

I dislike having this text twice in the repo, but this also goes for CONTRIBUTING.md so I think it it beyond the scope of this issue -> I will raise it elsewhere.

[bedrich-schindler]

I told @mbohal that this is due to fact that this file is symlinked in the same manner as contributing.md, releasing.md and thus this is necessary. We should review this in separate issue. @mbohal should have put this onto his list.

[bedrich-schindler]

@mbohal, there was error in CONTRIBUTING.md. Instead of:

docker compose run --rm node_shell -c 'npm <command>'

there was:

docker compose run --rm node_shell bash -c 'npm <command>'

That resulted in error as there is entrypoint: bash in docker-compose.yml. I fixed that and changed docker-compose.yml to have same configuration for playwright, so there is same approach for both.

For some reason, there is 1 requested change, but Github does not show which one. Probably error in the same manner I already reported to Microsoft last week. The only option is to dismiss review to get rid of error.

[bedrich-schindler]

⚠️⚠️⚠️ Do not merge this PR until @adamkudrna release new version ⚠️⚠️⚠️

I merged TypeScript support for Playwright into this branch/pull request, squashed commits and rebased it. @lukasbriza, make all changes from this branch (not from master).

[bedrich-schindler]

@adamkudrna, when you have time, you can review this. Without your permission, we would not be able to merge it as you are codeowner.