// Copyright 2025 The Forgejo Authors. All rights reserved. // SPDX-License-Identifier: GPL-3.0-or-later // @watch start // templates/shared/user/** // web_src/js/modules/dropdown.ts // @watch end import {expect} from '@playwright/test'; import {test} from './utils_e2e.ts'; test('JS enhanced', async ({page}) => { await page.goto('/user1'); await expect(page.locator('body')).not.toContainClass('no-js'); const nojsNotice = page.locator('body .full noscript'); await expect(nojsNotice).toBeHidden(); // Open and close by clicking summary const dropdownSummary = page.locator('details.dropdown summary'); const dropdownContent = page.locator('details.dropdown ul'); await expect(dropdownContent).toBeHidden(); await dropdownSummary.click(); await expect(dropdownContent).toBeVisible(); await dropdownSummary.click(); await expect(dropdownContent).toBeHidden(); // Close by clicking elsewhere const elsewhere = page.locator('.username'); await expect(dropdownContent).toBeHidden(); await dropdownSummary.click(); await expect(dropdownContent).toBeVisible(); await elsewhere.click(); await expect(dropdownContent).toBeHidden(); // Open and close with keypressing await dropdownSummary.focus(); await dropdownSummary.press(`Enter`); await expect(dropdownContent).toBeVisible(); await dropdownSummary.press(`Space`); await expect(dropdownContent).toBeHidden(); await dropdownSummary.press(`Space`); await expect(dropdownContent).toBeVisible(); await dropdownSummary.press(`Enter`); await expect(dropdownContent).toBeHidden(); await dropdownSummary.press(`Enter`); await expect(dropdownContent).toBeVisible(); await dropdownSummary.press(`Escape`); await expect(dropdownContent).toBeHidden(); // Open and close by opening a different dropdown const languageMenu = page.locator('.language-menu'); await dropdownSummary.click(); await expect(dropdownContent).toBeVisible(); await expect(languageMenu).toBeHidden(); await page.locator('.language.dropdown').click(); await expect(dropdownContent).toBeHidden(); await expect(languageMenu).toBeVisible(); }); test('No JS', async ({browser}) => { const context = await browser.newContext({javaScriptEnabled: false}); const nojsPage = await context.newPage(); await nojsPage.goto('/user1'); const nojsNotice = nojsPage.locator('body .full noscript'); await expect(nojsNotice).toBeVisible(); await expect(nojsPage.locator('body')).toContainClass('no-js'); // Open and close by clicking summary const dropdownSummary = nojsPage.locator('details.dropdown summary'); const dropdownContent = nojsPage.locator('details.dropdown ul'); await expect(dropdownContent).toBeHidden(); await dropdownSummary.click(); await expect(dropdownContent).toBeVisible(); await dropdownSummary.click(); await expect(dropdownContent).toBeHidden(); // Close by clicking elsewhere (by hitting ::before with increased z-index) const elsewhere = nojsPage.locator('#navbar'); await expect(dropdownContent).toBeHidden(); await dropdownSummary.click(); await expect(dropdownContent).toBeVisible(); // eslint-disable-next-line playwright/no-force-option await elsewhere.click({force: true}); await expect(dropdownContent).toBeHidden(); // Open and close with keypressing await dropdownSummary.press(`Enter`); await expect(dropdownContent).toBeVisible(); await dropdownSummary.press(`Space`); await expect(dropdownContent).toBeHidden(); await dropdownSummary.press(`Space`); await expect(dropdownContent).toBeVisible(); await dropdownSummary.press(`Enter`); await expect(dropdownContent).toBeHidden(); // Escape is not usable w/o JS enhancements await dropdownSummary.press(`Enter`); await expect(dropdownContent).toBeVisible(); await dropdownSummary.press(`Escape`); await expect(dropdownContent).toBeVisible(); });