From d80640fa5d6858bd5ccd1d77123b54770bf16994 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 3 Apr 2026 19:20:44 +0200 Subject: [PATCH] Add e2e reaction test, improve accessibility, enable parallel testing (#37081) Add a new e2e test for toggling issue reactions via the reaction picker dropdown. Add `aria-label` attributes to improve reaction accessibility: - Add `aria-label="Reaction"` to the reaction picker dropdown - Add `role="group"` with `aria-label="Reactions"` to the reactions container, giving it a semantic identity for screen readers - Include the reaction key in each reaction button's `aria-label` (e.g. `+1: user1, user2`) so screen readers announce which reaction a button represents E2e test improvements: - Simplify `randomString` to use `Math.random` instead of `node:crypto` - Replace `generatePassword` with a static password, remove unused `clickDropdownItem` - Enable `fullyParallel: true` and `workers: '50%'` in Playwright config - Run both chromium and firefox in all environments (not just CI) - Parallelize `login` and `apiCreateRepo` setup where possible - Use dedicated test user in `user-settings` test for concurrency safety Co-authored-by: Claude (Opus 4.6) --- Makefile | 2 +- options/locale/locale_en-US.json | 1 + playwright.config.ts | 6 ++-- .../repo/issue/view_content/add_reaction.tmpl | 2 +- .../repo/issue/view_content/reactions.tmpl | 4 +-- tests/e2e/codeeditor.test.ts | 7 ++--- tests/e2e/events.test.ts | 13 ++++---- tests/e2e/milestone.test.ts | 7 ++--- tests/e2e/org.test.ts | 4 +-- tests/e2e/reactions.test.ts | 30 +++++++++++++++++++ tests/e2e/readme.test.ts | 4 +-- tests/e2e/register.test.ts | 4 +-- tests/e2e/repo.test.ts | 4 +-- tests/e2e/user-settings.test.ts | 28 ++++++++++------- tests/e2e/utils.ts | 28 ++++++++--------- 15 files changed, 89 insertions(+), 55 deletions(-) create mode 100644 tests/e2e/reactions.test.ts diff --git a/Makefile b/Makefile index 8b0adf1906..8c73dc350d 100644 --- a/Makefile +++ b/Makefile @@ -525,7 +525,7 @@ test-mssql-migration: migrations.mssql.test migrations.individual.mssql.test .PHONY: playwright playwright: deps-frontend @# on GitHub Actions VMs, playwright's system deps are pre-installed - @pnpm exec playwright install $(if $(GITHUB_ACTIONS),,--with-deps) chromium $(if $(CI),firefox) $(PLAYWRIGHT_FLAGS) + @pnpm exec playwright install $(if $(GITHUB_ACTIONS),,--with-deps) chromium firefox $(PLAYWRIGHT_FLAGS) .PHONY: test-e2e test-e2e: playwright $(EXECUTABLE_E2E) diff --git a/options/locale/locale_en-US.json b/options/locale/locale_en-US.json index e796064ce3..f4cdc37717 100644 --- a/options/locale/locale_en-US.json +++ b/options/locale/locale_en-US.json @@ -1043,6 +1043,7 @@ "repo.forks": "Forks", "repo.stars": "Stars", "repo.reactions_more": "and %d more", + "repo.reactions": "Reactions", "repo.unit_disabled": "The site administrator has disabled this repository section.", "repo.language_other": "Other", "repo.adopt_search": "Enter username to search for unadopted repositories… (leave blank to find all)", diff --git a/playwright.config.ts b/playwright.config.ts index 9904e76f94..9dc8a7c1b5 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -5,6 +5,8 @@ const timeoutFactor = Number(env.GITEA_TEST_E2E_TIMEOUT_FACTOR) || 1; const timeout = 5000 * timeoutFactor; export default defineConfig({ + workers: '50%', + fullyParallel: true, testDir: './tests/e2e/', outputDir: './tests/e2e-output/', testMatch: /.*\.test\.ts/, @@ -28,11 +30,11 @@ export default defineConfig({ permissions: ['clipboard-read', 'clipboard-write'], }, }, - ...env.CI ? [{ + { name: 'firefox', use: { ...devices['Desktop Firefox'], }, - }] : [], + }, ], }); diff --git a/templates/repo/issue/view_content/add_reaction.tmpl b/templates/repo/issue/view_content/add_reaction.tmpl index 2f5764d964..9b8d0344c9 100644 --- a/templates/repo/issue/view_content/add_reaction.tmpl +++ b/templates/repo/issue/view_content/add_reaction.tmpl @@ -1,5 +1,5 @@ {{if ctx.RootData.IsSigned}} -
+
{{svg "octicon-smiley"}}
{{range $value := AllowedReactions}} diff --git a/templates/repo/issue/view_content/reactions.tmpl b/templates/repo/issue/view_content/reactions.tmpl index 286d93a9b1..0ed6faf702 100644 --- a/templates/repo/issue/view_content/reactions.tmpl +++ b/templates/repo/issue/view_content/reactions.tmpl @@ -1,10 +1,10 @@ -
+
{{range $key, $value := .Reactions}} {{$hasReacted := $value.HasUser ctx.RootData.SignedUserID}} {{ReactionToEmoji $key}} diff --git a/tests/e2e/codeeditor.test.ts b/tests/e2e/codeeditor.test.ts index 2b28670b0e..c6184adccc 100644 --- a/tests/e2e/codeeditor.test.ts +++ b/tests/e2e/codeeditor.test.ts @@ -1,12 +1,11 @@ import {env} from 'node:process'; import {expect, test} from '@playwright/test'; -import {login, apiCreateRepo, apiDeleteRepo} from './utils.ts'; +import {login, apiCreateRepo, apiDeleteRepo, randomString} from './utils.ts'; test('codeeditor textarea updates correctly', async ({page, request}) => { - const repoName = `e2e-codeeditor-${Date.now()}`; - await apiCreateRepo(request, {name: repoName}); + const repoName = `e2e-codeeditor-${randomString(8)}`; + await Promise.all([apiCreateRepo(request, {name: repoName}), login(page)]); try { - await login(page); await page.goto(`/${env.GITEA_TEST_E2E_USER}/${repoName}/_new/main`); await page.getByPlaceholder('Name your file…').fill('test.js'); await expect(page.locator('.editor-loading')).toBeHidden(); diff --git a/tests/e2e/events.test.ts b/tests/e2e/events.test.ts index 4cd46815c3..abf05b27e7 100644 --- a/tests/e2e/events.test.ts +++ b/tests/e2e/events.test.ts @@ -1,13 +1,12 @@ import {test, expect} from '@playwright/test'; -import {loginUser, baseUrl, apiUserHeaders, apiCreateUser, apiDeleteUser, apiCreateRepo, apiCreateIssue, apiStartStopwatch, timeoutFactor} from './utils.ts'; +import {loginUser, baseUrl, apiUserHeaders, apiCreateUser, apiDeleteUser, apiCreateRepo, apiCreateIssue, apiStartStopwatch, timeoutFactor, randomString} from './utils.ts'; // These tests rely on a short EVENT_SOURCE_UPDATE_TIME in the e2e server config. test.describe('events', () => { test('notification count', async ({page, request}) => { - const id = `ev-notif-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`; - const owner = `${id}-owner`; - const commenter = `${id}-commenter`; - const repoName = id; + const owner = `ev-notif-owner-${randomString(8)}`; + const commenter = `ev-notif-commenter-${randomString(8)}`; + const repoName = `ev-notif-${randomString(8)}`; await Promise.all([apiCreateUser(request, owner), apiCreateUser(request, commenter)]); @@ -30,7 +29,7 @@ test.describe('events', () => { }); test('stopwatch', async ({page, request}) => { - const name = `ev-sw-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`; + const name = `ev-sw-${randomString(8)}`; const headers = apiUserHeaders(name); await apiCreateUser(request, name); @@ -52,7 +51,7 @@ test.describe('events', () => { }); test('logout propagation', async ({browser, request}) => { - const name = `ev-logout-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`; + const name = `ev-logout-${randomString(8)}`; await apiCreateUser(request, name); diff --git a/tests/e2e/milestone.test.ts b/tests/e2e/milestone.test.ts index d63aee0cf2..b8b456563e 100644 --- a/tests/e2e/milestone.test.ts +++ b/tests/e2e/milestone.test.ts @@ -1,11 +1,10 @@ import {env} from 'node:process'; import {test, expect} from '@playwright/test'; -import {login, apiCreateRepo, apiDeleteRepo} from './utils.ts'; +import {login, apiCreateRepo, apiDeleteRepo, randomString} from './utils.ts'; test('create a milestone', async ({page}) => { - const repoName = `e2e-milestone-${Date.now()}`; - await login(page); - await apiCreateRepo(page.request, {name: repoName}); + const repoName = `e2e-milestone-${randomString(8)}`; + await Promise.all([login(page), apiCreateRepo(page.request, {name: repoName})]); await page.goto(`/${env.GITEA_TEST_E2E_USER}/${repoName}/milestones/new`); await page.getByPlaceholder('Title').fill('Test Milestone'); await page.getByRole('button', {name: 'Create Milestone'}).click(); diff --git a/tests/e2e/org.test.ts b/tests/e2e/org.test.ts index b4d4fc2e7d..a3d09081b8 100644 --- a/tests/e2e/org.test.ts +++ b/tests/e2e/org.test.ts @@ -1,8 +1,8 @@ import {test, expect} from '@playwright/test'; -import {login, apiDeleteOrg} from './utils.ts'; +import {login, apiDeleteOrg, randomString} from './utils.ts'; test('create an organization', async ({page}) => { - const orgName = `e2e-org-${Date.now()}`; + const orgName = `e2e-org-${randomString(8)}`; await login(page); await page.goto('/org/create'); await page.getByLabel('Organization Name').fill(orgName); diff --git a/tests/e2e/reactions.test.ts b/tests/e2e/reactions.test.ts new file mode 100644 index 0000000000..92eed2a4e5 --- /dev/null +++ b/tests/e2e/reactions.test.ts @@ -0,0 +1,30 @@ +import {env} from 'node:process'; +import {expect, test} from '@playwright/test'; +import {login, apiCreateRepo, apiCreateIssue, apiDeleteRepo, randomString} from './utils.ts'; + +test('toggle issue reactions', async ({page, request}) => { + const repoName = `e2e-reactions-${randomString(8)}`; + const owner = env.GITEA_TEST_E2E_USER; + await apiCreateRepo(request, {name: repoName}); + await Promise.all([ + apiCreateIssue(request, owner, repoName, {title: 'Reaction test'}), + login(page), + ]); + try { + await page.goto(`/${owner}/${repoName}/issues/1`); + + const issueComment = page.locator('.timeline-item.comment.first'); + + const reactionPicker = issueComment.locator('.select-reaction'); + await reactionPicker.click(); + await reactionPicker.getByLabel('+1').click(); + + const reactions = issueComment.getByRole('group', {name: 'Reactions'}); + await expect(reactions.getByRole('button', {name: /^\+1:/})).toContainText('1'); + + await reactions.getByRole('button', {name: /^\+1:/}).click(); + await expect(reactions.getByRole('button', {name: /^\+1:/})).toHaveCount(0); + } finally { + await apiDeleteRepo(request, owner, repoName); + } +}); diff --git a/tests/e2e/readme.test.ts b/tests/e2e/readme.test.ts index 94755a254f..9767e092d3 100644 --- a/tests/e2e/readme.test.ts +++ b/tests/e2e/readme.test.ts @@ -1,9 +1,9 @@ import {env} from 'node:process'; import {test, expect} from '@playwright/test'; -import {apiCreateRepo, apiDeleteRepo} from './utils.ts'; +import {apiCreateRepo, apiDeleteRepo, randomString} from './utils.ts'; test('repo readme', async ({page}) => { - const repoName = `e2e-readme-${Date.now()}`; + const repoName = `e2e-readme-${randomString(8)}`; await apiCreateRepo(page.request, {name: repoName}); await page.goto(`/${env.GITEA_TEST_E2E_USER}/${repoName}`); await expect(page.locator('#readme')).toContainText(repoName); diff --git a/tests/e2e/register.test.ts b/tests/e2e/register.test.ts index 5c70541747..32e0e4ca9c 100644 --- a/tests/e2e/register.test.ts +++ b/tests/e2e/register.test.ts @@ -1,6 +1,6 @@ import {env} from 'node:process'; import {test, expect} from '@playwright/test'; -import {login, logout, apiDeleteUser} from './utils.ts'; +import {login, logout, apiDeleteUser, randomString} from './utils.ts'; test.beforeEach(async ({page}) => { await page.goto('/user/sign_up'); @@ -32,7 +32,7 @@ test('register with mismatched passwords shows error', async ({page}) => { }); test('register then login', async ({page}) => { - const username = `e2e-register-${Date.now()}`; + const username = `e2e-register-${randomString(8)}`; const email = `${username}@${env.GITEA_TEST_E2E_DOMAIN}`; const password = 'password123!'; diff --git a/tests/e2e/repo.test.ts b/tests/e2e/repo.test.ts index cca59d612d..981d22739d 100644 --- a/tests/e2e/repo.test.ts +++ b/tests/e2e/repo.test.ts @@ -1,9 +1,9 @@ import {env} from 'node:process'; import {test} from '@playwright/test'; -import {login, apiDeleteRepo} from './utils.ts'; +import {login, apiDeleteRepo, randomString} from './utils.ts'; test('create a repository', async ({page}) => { - const repoName = `e2e-repo-${Date.now()}`; + const repoName = `e2e-repo-${randomString(8)}`; await login(page); await page.goto('/repo/create'); await page.locator('input[name="repo_name"]').fill(repoName); diff --git a/tests/e2e/user-settings.test.ts b/tests/e2e/user-settings.test.ts index ee1c6c98eb..412c89886a 100644 --- a/tests/e2e/user-settings.test.ts +++ b/tests/e2e/user-settings.test.ts @@ -1,14 +1,20 @@ import {test, expect} from '@playwright/test'; -import {login} from './utils.ts'; +import {loginUser, apiCreateUser, apiDeleteUser, randomString} from './utils.ts'; -test('update profile biography', async ({page}) => { - const bio = `e2e-bio-${Date.now()}`; - await login(page); - await page.goto('/user/settings'); - await page.getByLabel('Biography').fill(bio); - await page.getByRole('button', {name: 'Update Profile'}).click(); - await expect(page.getByLabel('Biography')).toHaveValue(bio); - await page.getByLabel('Biography').fill(''); - await page.getByRole('button', {name: 'Update Profile'}).click(); - await expect(page.getByLabel('Biography')).toHaveValue(''); +test('update profile biography', async ({page, request}) => { + const username = `e2e-settings-${randomString(8)}`; + const bio = `e2e-bio-${randomString(8)}`; + await apiCreateUser(request, username); + try { + await loginUser(page, username); + await page.goto('/user/settings'); + await page.getByLabel('Biography').fill(bio); + await page.getByRole('button', {name: 'Update Profile'}).click(); + await expect(page.getByLabel('Biography')).toHaveValue(bio); + await page.getByLabel('Biography').fill(''); + await page.getByRole('button', {name: 'Update Profile'}).click(); + await expect(page.getByLabel('Biography')).toHaveValue(''); + } finally { + await apiDeleteUser(request, username); + } }); diff --git a/tests/e2e/utils.ts b/tests/e2e/utils.ts index 2a255aff33..442a40d8e5 100644 --- a/tests/e2e/utils.ts +++ b/tests/e2e/utils.ts @@ -1,7 +1,16 @@ -import {randomBytes} from 'node:crypto'; import {env} from 'node:process'; import {expect} from '@playwright/test'; -import type {APIRequestContext, Locator, Page} from '@playwright/test'; +import type {APIRequestContext, Page} from '@playwright/test'; + +/** Generate a random alphanumeric string. */ +export function randomString(length: number): string { + const chars = 'abcdefghijklmnopqrstuvwxyz0123456789'; + let result = ''; + for (let index = 0; index < length; index++) { + result += chars.charAt(Math.floor(Math.random() * chars.length)); + } + return result; +} export const timeoutFactor = Number(env.GITEA_TEST_E2E_TIMEOUT_FACTOR) || 1; @@ -63,14 +72,8 @@ export async function apiDeleteOrg(requestContext: APIRequestContext, name: stri }), 'apiDeleteOrg'); } -/** Generate a random password that satisfies the complexity requirements. */ -function generatePassword() { - const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; - return `${Array.from(randomBytes(12), (b) => chars[b % chars.length]).join('')}!aA1`; -} - -/** Random password shared by all test users — used for both API user creation and browser login. */ -const testUserPassword = generatePassword(); +/** Password shared by all test users — used for both API user creation and browser login. */ +const testUserPassword = 'e2e-password!aA1'; export function apiUserHeaders(username: string) { return apiAuthHeader(username, testUserPassword); @@ -89,11 +92,6 @@ export async function apiDeleteUser(requestContext: APIRequestContext, username: }), 'apiDeleteUser'); } -export async function clickDropdownItem(page: Page, trigger: Locator, itemText: string) { - await trigger.click(); - await page.getByText(itemText).click(); -} - export async function loginUser(page: Page, username: string) { return login(page, username, testUserPassword); }