Add initial typescript config and use it for eslint,vitest,playwright (#31186)

This enables eslint to use the typescript parser and resolver which
brings some benefits that eslint rules now have type information
available and a tsconfig.json is required for the upcoming typescript
migration as well. Notable changes done:

- Add typescript parser and resolver
- Move the vue-specific config into the root file
- Enable `vue-scoped-css/enforce-style-type` rule, there was only one
violation and I added a inline disable there.
- Fix new lint errors that were detected because of the parser change
- Update `i/no-unresolved` to remove now-unnecessary workaround for the
resolver
- Disable `i/no-named-as-default` as it seems to raise bogus issues in
the webpack config
- Change vitest config to typescript
- Change playwright config to typescript
- Add `eslint-plugin-playwright` and fix issues
- Add `tsc` linting to `make lint-js`

4 files changed, 13 insertions, 13 deletions

diff --git a/tests/e2e/README.md b/tests/e2e/README.md
index e5fd1ca6c0..db083793d8 100644
--- a/tests/e2e/README.md
+++ b/tests/e2e/README.md
@@ -65,7 +65,7 @@ TEST_MSSQL_HOST=localhost:1433 TEST_MSSQL_DBNAME=gitea_test TEST_MSSQL_USERNAME=
 
 ## Running individual tests
 
-Example command to run `example.test.e2e.js` test file:
+Example command to run `example.test.e2e.ts` test file:
 
 _Note: unlike integration tests, this filtering is at the file level, not function_
 
diff --git a/tests/e2e/e2e_test.go b/tests/e2e/e2e_test.go
index 60528a1a78..d6d27e66be 100644
--- a/tests/e2e/e2e_test.go
+++ b/tests/e2e/e2e_test.go
@@ -73,10 +73,10 @@ func TestMain(m *testing.M) {
 	os.Exit(exitVal)
 }
 
-// TestE2e should be the only test e2e necessary. It will collect all "*.test.e2e.js" files in this directory and build a test for each.
+// TestE2e should be the only test e2e necessary. It will collect all "*.test.e2e.ts" files in this directory and build a test for each.
 func TestE2e(t *testing.T) {
 	// Find the paths of all e2e test files in test directory.
-	searchGlob := filepath.Join(filepath.Dir(setting.AppPath), "tests", "e2e", "*.test.e2e.js")
+	searchGlob := filepath.Join(filepath.Dir(setting.AppPath), "tests", "e2e", "*.test.e2e.ts")
 	paths, err := filepath.Glob(searchGlob)
 	if err != nil {
 		t.Fatal(err)
diff --git a/tests/e2e/example.test.e2e.js b/tests/e2e/example.test.e2e.ts
index 57c69a2917..32813b3934 100644
--- a/tests/e2e/example.test.e2e.js
+++ b/tests/e2e/example.test.e2e.ts
@@ -1,19 +1,18 @@
-// @ts-check
 import {test, expect} from '@playwright/test';
-import {login_user, save_visual, load_logged_in_context} from './utils_e2e.js';
+import {login_user, save_visual, load_logged_in_context} from './utils_e2e.ts';
 
 test.beforeAll(async ({browser}, workerInfo) => {
   await login_user(browser, workerInfo, 'user2');
 });
 
-test('Load Homepage', async ({page}) => {
+test('homepage', async ({page}) => {
   const response = await page.goto('/');
   await expect(response?.status()).toBe(200); // Status OK
   await expect(page).toHaveTitle(/^Gitea: Git with a cup of tea\s*$/);
   await expect(page.locator('.logo')).toHaveAttribute('src', '/assets/img/logo.svg');
 });
 
-test('Test Register Form', async ({page}, workerInfo) => {
+test('register', async ({page}, workerInfo) => {
   const response = await page.goto('/user/sign_up');
   await expect(response?.status()).toBe(200); // Status OK
   await page.type('input[name=user_name]', `e2e-test-${workerInfo.workerIndex}`);
@@ -29,7 +28,7 @@ test('Test Register Form', async ({page}, workerInfo) => {
   save_visual(page);
 });
 
-test('Test Login Form', async ({page}, workerInfo) => {
+test('login', async ({page}, workerInfo) => {
   const response = await page.goto('/user/login');
   await expect(response?.status()).toBe(200); // Status OK
 
@@ -37,14 +36,14 @@ test('Test Login Form', async ({page}, workerInfo) => {
   await page.type('input[name=password]', `password`);
   await page.click('form button.ui.primary.button:visible');
 
-  await page.waitForLoadState('networkidle');
+  await page.waitForLoadState('networkidle'); // eslint-disable-line playwright/no-networkidle
 
   await expect(page.url()).toBe(`${workerInfo.project.use.baseURL}/`);
 
   save_visual(page);
 });
 
-test('Test Logged In User', async ({browser}, workerInfo) => {
+test('logged in user', async ({browser}, workerInfo) => {
   const context = await load_logged_in_context(browser, workerInfo, 'user2');
   const page = await context.newPage();
 
diff --git a/tests/e2e/utils_e2e.js b/tests/e2e/utils_e2e.ts
index d60c78b16e..5678c9c9d0 100644
--- a/tests/e2e/utils_e2e.js
+++ b/tests/e2e/utils_e2e.ts
@@ -1,4 +1,5 @@
 import {expect} from '@playwright/test';
+import {env} from 'node:process';
 
 const ARTIFACTS_PATH = `tests/e2e/test-artifacts`;
 const LOGIN_PASSWORD = 'password';
@@ -20,7 +21,7 @@ export async function login_user(browser, workerInfo, user) {
   await page.type('input[name=password]', LOGIN_PASSWORD);
   await page.click('form button.ui.primary.button:visible');
 
-  await page.waitForLoadState('networkidle');
+  await page.waitForLoadState('networkidle'); // eslint-disable-line playwright/no-networkidle
 
   await expect(page.url(), {message: `Failed to login user ${user}`}).toBe(`${workerInfo.project.use.baseURL}/`);
 
@@ -44,8 +45,8 @@ export async function load_logged_in_context(browser, workerInfo, user) {
 
 export async function save_visual(page) {
   // Optionally include visual testing
-  if (process.env.VISUAL_TEST) {
-    await page.waitForLoadState('networkidle');
+  if (env.VISUAL_TEST) {
+    await page.waitForLoadState('networkidle'); // eslint-disable-line playwright/no-networkidle
     // Mock page/version string
     await page.locator('footer div.ui.left').evaluate((node) => node.innerHTML = 'MOCK');
     await expect(page).toHaveScreenshot({