test: add tests for ui

[AriPerkkio]

• Adds tests for UI using Playwright
• Requires fix(astro): resolve Astro's private APIs properly #238
• Requires fix(astro): don't modify state during re-renders of <WorkspacePanelWrapper /> #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]

Run & review this pull request in StackBlitz Codeflow.

[AriPerkkio]

Couldn't figure out what's the root cause here. Sometimes the content of previous file was shown. Here's picture that shows contents of example.html even though example.js is selected:

Looks like the content of example.js was there for a while but then something else changed example.html back on. Syntax highlight is changed to JS. 🤔

[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.

[Nemikolh]

Overall looks good!

[Nemikolh]

Looks really good! 👏

Only have a minor comment on ci.yaml and let's get this in! 🎉