test: issue sidebar testing using playwright (#4319)

Conclusion of https://codeberg.org/forgejo/forgejo/issues/3499

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/4319
Co-authored-by: Otto Richter <git@otto.splvs.net>
Co-committed-by: Otto Richter <git@otto.splvs.net>

tests/e2e/README.md

@@ -19,6 +19,32 @@ make clean frontend
 npx playwright install-deps
 ```
 
+## Interactive testing
+
+You can make use of Playwright's integrated UI mode to run individual tests,
+get feedback and visually trace what your browser is doing.
+
+To do so, launch the debugserver using:
+
+```
+make test-e2e-debugserver
+```
+
+Then launch the Playwright UI:
+
+```
+npx playwright test --ui
+```
+
+You can also run individual tests while the debugserver using:
+
+```
+npx playwright test actions.test.e2e.js:9
+```
+
+First, specify the complete test filename,
+and after the colon you can put the linenumber where the test is defined.
+
 
 ## Run all tests via local act_runner
 ```

tests/e2e/issue-sidebar.test.e2e.js

@@ -0,0 +1,86 @@
+// @ts-check
+import {test, expect} from '@playwright/test';
+import {login_user, load_logged_in_context} from './utils_e2e.js';
+
+test.beforeAll(async ({browser}, workerInfo) => {
+  await login_user(browser, workerInfo, 'user2');
+});
+
+async function login({browser}, workerInfo) {
+  const context = await load_logged_in_context(browser, workerInfo, 'user2');
+  return await context.newPage();
+}
+
+// belongs to test: Pull: Toggle WIP
+const prTitle = 'pull5';
+
+async function click_toggle_wip({page}) {
+  await page.locator('.toggle-wip>a').click();
+  await page.waitForLoadState('networkidle');
+}
+
+async function check_wip({page}, is) {
+  const elemTitle = '#issue-title-display';
+  const stateLabel = '.issue-state-label';
+  await expect(page.locator(elemTitle)).toContainText(prTitle);
+  await expect(page.locator(elemTitle)).toContainText('#5');
+  if (is) {
+    await expect(page.locator(elemTitle)).toContainText('WIP');
+    await expect(page.locator(stateLabel)).toContainText('Draft');
+  } else {
+    await expect(page.locator(elemTitle)).not.toContainText('WIP');
+    await expect(page.locator(stateLabel)).toContainText('Open');
+  }
+}
+
+test('Pull: Toggle WIP', async ({browser}, workerInfo) => {
+  test.skip(workerInfo.project.name === 'Mobile Safari', 'Unable to get tests working on Safari Mobile, see https://codeberg.org/forgejo/forgejo/pulls/3445#issuecomment-1789636');
+  const page = await login({browser}, workerInfo);
+  const response = await page.goto('/user2/repo1/pulls/5');
+  await expect(response?.status()).toBe(200); // Status OK
+  // initial state
+  await check_wip({page}, false);
+  // toggle to WIP
+  await click_toggle_wip({page});
+  await check_wip({page}, true);
+  // remove WIP
+  await click_toggle_wip({page});
+  await check_wip({page}, false);
+
+  // manually edit title to another prefix
+  await page.locator('#issue-title-edit-show').click();
+  await page.locator('#issue-title-editor input').fill(`[WIP] ${prTitle}`);
+  await page.getByText('Save').click();
+  await page.waitForLoadState('networkidle');
+  await check_wip({page}, true);
+  // remove again
+  await click_toggle_wip({page});
+  await check_wip({page}, false);
+});
+
+test('Issue: Labels', async ({browser}, workerInfo) => {
+  test.skip(workerInfo.project.name === 'Mobile Safari', 'Unable to get tests working on Safari Mobile, see https://codeberg.org/forgejo/forgejo/pulls/3445#issuecomment-1789636');
+  const page = await login({browser}, workerInfo);
+  // select label list in sidebar only
+  const labelList = page.locator('.issue-content-right .labels-list a');
+  const response = await page.goto('/user2/repo1/issues/1');
+  await expect(response?.status()).toBe(200);
+  // preconditions
+  await expect(labelList.filter({hasText: 'label1'})).toBeVisible();
+  await expect(labelList.filter({hasText: 'label2'})).not.toBeVisible();
+  // add label2
+  await page.locator('.select-label').click();
+  // label search could be tested this way:
+  // await page.locator('.select-label input').fill('label2');
+  await page.locator('.select-label .item').filter({hasText: 'label2'}).click();
+  await page.locator('.select-label').click();
+  await page.waitForLoadState('networkidle');
+  await expect(labelList.filter({hasText: 'label2'})).toBeVisible();
+  // test removing label again
+  await page.locator('.select-label').click();
+  await page.locator('.select-label .item').filter({hasText: 'label2'}).click();
+  await page.locator('.select-label').click();
+  await page.waitForLoadState('networkidle');
+  await expect(labelList.filter({hasText: 'label2'})).not.toBeVisible();
+  await expect(labelList.filter({hasText: 'label1'})).toBeVisible();
+});