mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2026-02-03 20:51:07 -05:00
3cafb7fa6c
It has always been largely used for showcasing UI elements but that name didn't work too well for it. Testing: Some of existing tests depend on these pages, making it redundant to create extra tests. Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/11019 Reviewed-by: Michael Kriese <michael.kriese@gmx.de> Reviewed-by: Gusted <gusted@noreply.codeberg.org>
88 lines
3.4 KiB
TypeScript
88 lines
3.4 KiB
TypeScript
// Copyright 2025 The Forgejo Authors. All rights reserved.
|
|
// SPDX-License-Identifier: GPL-3.0-or-later
|
|
|
|
// @watch start
|
|
// web_src/css/modules/switch.css
|
|
// web_src/css/modules/button.css
|
|
// web_src/css/modules/dropdown.css
|
|
// @watch end
|
|
|
|
import {expect} from '@playwright/test';
|
|
import {test} from './utils_e2e.ts';
|
|
|
|
test.use({user: 'user2'});
|
|
|
|
test('Buttons and other controls have consistent height', async ({page}) => {
|
|
await page.goto('/user1');
|
|
|
|
// The height of dropdown opener and the button should be matching, even in mobile browsers with coarse pointer
|
|
let buttonHeight = (await page.locator('#profile-avatar-card .actions .primary-action').boundingBox()).height;
|
|
const openerHeight = (await page.locator('#profile-avatar-card .actions .dropdown').boundingBox()).height;
|
|
expect(openerHeight).toBe(buttonHeight);
|
|
|
|
await page.goto('/notifications');
|
|
|
|
// The height should also be consistent with the button on the previous page
|
|
const switchHeight = (await page.locator('.switch').boundingBox()).height;
|
|
expect(buttonHeight).toBe(switchHeight);
|
|
|
|
buttonHeight = (await page.locator('.button-row .button[href="/notifications/subscriptions"]').boundingBox()).height;
|
|
expect(buttonHeight).toBe(switchHeight);
|
|
|
|
const purgeButtonHeight = (await page.locator('form[action="/notifications/purge"]').boundingBox()).height;
|
|
expect(buttonHeight).toBe(purgeButtonHeight);
|
|
});
|
|
|
|
test('Button visuals', async ({browser}) => {
|
|
async function getButtonProperties(page, selector) {
|
|
return await page.locator(selector).evaluate((el) => {
|
|
// In Firefox getComputedStyle is undefined if returned from evaluate
|
|
const s = getComputedStyle(el);
|
|
return {
|
|
backgroundColor: s.backgroundColor,
|
|
fontWeight: s.fontWeight,
|
|
opacity: s.opacity,
|
|
pointerEvents: s.pointerEvents,
|
|
};
|
|
});
|
|
}
|
|
|
|
const context = await browser.newContext({javaScriptEnabled: false});
|
|
const page = await context.newPage();
|
|
const response = await page.goto('/-/demo/buttons');
|
|
expect(response?.status()).toBe(200);
|
|
|
|
const transparent = 'rgba(0, 0, 0, 0)';
|
|
|
|
const primary = await getButtonProperties(page, 'button.primary:not(.disabled)');
|
|
const secondary = await getButtonProperties(page, 'button.secondary:not(.disabled)');
|
|
const danger = await getButtonProperties(page, 'button.danger:not(.disabled)');
|
|
|
|
for (const item of [primary, secondary, danger]) {
|
|
// Evaluate that all buttons have background-color specified
|
|
expect(item.backgroundColor).not.toBe(transparent);
|
|
// Evaluate font weights
|
|
expect(item.fontWeight).toBe('500');
|
|
// Evaluate opacity
|
|
expect(item.opacity).toBe('1');
|
|
}
|
|
|
|
// Evaluate that background-colors are different
|
|
expect(primary.backgroundColor).not.toBe(secondary.backgroundColor);
|
|
expect(primary.backgroundColor).not.toBe(danger.backgroundColor);
|
|
|
|
const primaryDisabled = await getButtonProperties(page, '.button.primary.disabled');
|
|
const secondaryDisabled = await getButtonProperties(page, '.button.secondary.disabled');
|
|
const dangerDisabled = await getButtonProperties(page, '.button.danger.disabled');
|
|
|
|
for (const item of [primaryDisabled, secondaryDisabled, dangerDisabled]) {
|
|
// Evaluate opacity
|
|
expect(item.opacity).toBe('0.55');
|
|
// Evaluate pointer-events
|
|
expect(item.pointerEvents).toBe('none');
|
|
|
|
// Evaluate other properties of non-disabled buttons
|
|
expect(item.backgroundColor).not.toBe(transparent);
|
|
expect(item.fontWeight).toBe('500');
|
|
}
|
|
});
|