Add E2E Test of the live preview feature by Playwright

[yuiseki]

Description

Resolve: #132
Blocked by: #129

• Added minimal E2E testing by Playwright to prevent breaking the Live Preview feature
• At this point, I am only testing that there is no error output to the browser console at all
• In addition, I made sure to test for 3 patterns: maplibre, mapbox and geolonia
• And I also made this test run on GitHub Actions
  • Dependencies of Playwright is too big, so I decide to use actions/cache in GitHub Actions
    • Using cache make 10x faster when not using cache!
• Right now, the live preview with mapbox is broken in the latest main branch, so the test is failing as intended!
  • Once the following pull request is merged, the test should pass
  • Various fixes to the live preview #129
• Various fixes to the live preview #129 has merged
  • So the test of this pull request sould be passed

IMPORTANT NOTE

• Testing live preview with mapbox on local dev env has required to set the environment variable named MAPBOX_ACCESS_TOKEN
• Also testing on the GitHub Actions has required to add the Environment secrets on the repository settings
• I am not authorized to manipulate the Secret of this repository, so I need someone who is authorized to do so.

Type of Pull Request

• Others (Adding more tests)

Verify the followings

• Code is up-to-date with the main branch
• No build errors after npm run build
• No lint errors after npm run lint
• No errors on using charites help globally
• Make sure all the exsiting features working well
• Have you added at least one unit test if you are going to add new feature?
• Have you updated documentation?

Refer to CONTRIBUTING.MD for more details.

Screenshots

[keichan34]

Thanks! This is a good idea. I'll try to find someone with access to the repository secrets (I don't either... maybe @miya0001 ?) I'll have to check about whose (what?) Mapbox account we should use to create the Mapbox key as well...

[keichan34]

@yuiseki I've added the mapbox token as secrets.MAPBOX_ACCESS_TOKEN

[yuiseki]

Currently I change the status of this pull request to draft because fix and check mapbox secret.
I will soon re-request review, please wait!

[smellman]

@yuiseki You need merge main branch.

[yuiseki]

• I've merge current main branch into this branch
• I've made changes to use secrets.MAPBOX_ACCESS_TOKEN . Thanks @keichan34 !
• I've made change to use actions/cache in GitHub Action for speed up this test
• Finally, The test that had been added by this pull request have passed
• I've updated the description of this pull request

This pull request is ready for review 🙏

[yuiseki]

I'm wondering why I need to chmod 777 dist/cli.js before running dist/cli.js.
If I don't do this, I get a permission error.
It's might be a bug, but I believe that should be clearly describe and fix in another issue/pull request.

[keichan34]

TypeScript won't set execute permissions. I believe npm will set execute permissions to the files in the "bin" section when running npm package (or maybe npm install?). Here we can do chmod +x dist/cli.js or run it via node like node dist/cli.js. I don't think it's a big problem.

[keichan34]

Looks good. Thanks!

[keichan34]

TypeScript won't set execute permissions. I believe npm will set execute permissions to the files in the "bin" section when running npm package (or maybe npm install?). Here we can do chmod +x dist/cli.js or run it via node like node dist/cli.js. I don't think it's a big problem.

[naogify]

@yuiseki
Thank you! I confirmed that npm run test:e2e works correctly.