test: add tests for ui

[AriPerkkio]

• Adds tests for UI using Playwright
• Requires https://github.com/stackblitz/tutorialkit/pull/238
• Requires https://github.com/stackblitz/tutorialkit/pull/240

Structure

Test cases are located in test directory. Each test file has its own chapter, that contains lessons for test cases:

For example Navigation tests:

├── src/content/tutorial
│   └── tests
│       └──── navigation
│           ├── page-one
│           ├── page-three
│           └── page-two
└── test
    └── navigation.test.ts

Or File Tree tests:

├── src/content/tutorial
│   └── tests
│       └── file-tree
│           └── lesson-and-solution
└── test
    └── file-tree.test.ts

[stackblitz[bot]]

Run & review this pull request in StackBlitz Codeflow.

[AriPerkkio]

@Nemikolh this is now ready for final review and is no longer blocked by #238.

As this contains couple of fix commits as well, it might be good to merge this without squashing so that the fixes will show up in release notes properly.

[Nemikolh]

@AriPerkkio I think I can't push to main directly and I do not have access to other merge options.

Note that this would be contrary to our conventions and they've been used to get more details about a commit by looking at the PR number associated with a commit.

In the early days of TutorialKit it was possible but we then decided to always go through PRs.

Do you think you could submit a separate PR that contains all the fixes? Or multiple PRs if you prefer.

[AriPerkkio]

Oh I see, other merge options are completely disabled. It would be good to have squashing enabled by default, but allow rebase when needed.

I'll split this PR and move to fixes into separate PRs. 👍

[AriPerkkio]

Alright, good to go now. Other PRs are in main and this one is up-to-date.