баги
This commit is contained in:
Zuev
254
frontend/tests/browser/ui-regressions.test.mjs
Normal file
254
frontend/tests/browser/ui-regressions.test.mjs
Normal file
@@ -0,0 +1,254 @@
|
||||
import assert from 'node:assert/strict';
|
||||
import { after, before, test } from 'node:test';
|
||||
import { chromium } from 'playwright';
|
||||
|
||||
const baseURL = process.env.FRONTEND_TEST_BASE_URL || 'https://localhost';
|
||||
let browser;
|
||||
let context;
|
||||
let page;
|
||||
const errors = [];
|
||||
|
||||
before(async () => {
|
||||
browser = await chromium.launch({
|
||||
executablePath: process.env.CHROMIUM_PATH || '/usr/bin/chromium',
|
||||
headless: true
|
||||
});
|
||||
context = await browser.newContext({
|
||||
baseURL,
|
||||
ignoreHTTPSErrors: true,
|
||||
viewport: { width: 1440, height: 1000 }
|
||||
});
|
||||
page = await context.newPage();
|
||||
page.on('pageerror', error => errors.push(error.message));
|
||||
});
|
||||
|
||||
after(async () => {
|
||||
await browser?.close();
|
||||
assert.deepEqual(errors, [], 'Во время проверки возникли ошибки JavaScript');
|
||||
});
|
||||
|
||||
async function assertStableHover(locator) {
|
||||
if (!await locator.isVisible() || !await locator.isEnabled()) return;
|
||||
await locator.scrollIntoViewIfNeeded();
|
||||
await page.mouse.move(0, 0);
|
||||
await page.waitForTimeout(250);
|
||||
const before = await locator.boundingBox();
|
||||
await locator.evaluate(element => {
|
||||
window.hoverLeaves = 0;
|
||||
element.addEventListener('mouseleave', () => { window.hoverLeaves += 1; }, { once: true });
|
||||
});
|
||||
// Курсор внутри нижней кромки: старый translateY(-1px) выводил кнопку из-под него.
|
||||
await page.mouse.move(before.x + before.width / 2, before.y + before.height - 0.2);
|
||||
await page.waitForTimeout(500);
|
||||
const after = await locator.boundingBox();
|
||||
assert(Math.abs(before.x - after.x) < 0.01, 'Элемент сместился по горизонтали при наведении');
|
||||
assert(Math.abs(before.y - after.y) < 0.01, 'Кнопка сместилась при наведении');
|
||||
assert.equal(await page.evaluate(() => window.hoverLeaves), 0, 'Кнопка теряет наведение у края');
|
||||
}
|
||||
|
||||
async function assertSelectsSynchronized() {
|
||||
await page.waitForTimeout(150);
|
||||
const values = await page.locator('.react-custom-select').evaluateAll(roots => roots.map(root => {
|
||||
const select = root.querySelector('select');
|
||||
return {
|
||||
id: select.id,
|
||||
text: select.options[select.selectedIndex]?.text || '—',
|
||||
triggerText: root.querySelector('.custom-select-text').textContent,
|
||||
disabled: select.disabled,
|
||||
triggerDisabled: root.querySelector('.custom-select-trigger').disabled
|
||||
};
|
||||
}));
|
||||
for (const value of values) {
|
||||
assert.equal(value.triggerText, value.text, `Устаревшая подпись ${value.id}`);
|
||||
assert.equal(value.triggerDisabled, value.disabled, `Устаревшее состояние disabled ${value.id}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function choose(id, name) {
|
||||
const root = page.locator('.react-custom-select').filter({ has: page.locator(id) });
|
||||
const value = await root.locator('select').evaluate((select, text) => (
|
||||
Array.from(select.options).find(option => option.text === text)?.value
|
||||
), name);
|
||||
await root.locator('.custom-select-trigger').click();
|
||||
await root.getByRole('option', { name, exact: true }).click();
|
||||
await page.waitForFunction(({ id, value }) => document.querySelector(id)?.value === value, { id, value });
|
||||
}
|
||||
|
||||
test('кнопки входа стабильны при наведении в обеих темах', async () => {
|
||||
await page.goto('/');
|
||||
await page.locator('#btn-submit').waitFor();
|
||||
await page.waitForTimeout(1000);
|
||||
for (const theme of ['light', 'dark']) {
|
||||
await page.evaluate(value => { document.documentElement.dataset.theme = value; }, theme);
|
||||
for (const selector of ['#btn-submit', '.toggle-password', '.theme-toggle']) {
|
||||
await assertStableHover(page.locator(selector));
|
||||
}
|
||||
}
|
||||
assert.deepEqual(await page.locator('#btn-submit').evaluate(element => ({
|
||||
position: getComputedStyle(element).position,
|
||||
overflow: getComputedStyle(element).overflow
|
||||
})), { position: 'relative', overflow: 'hidden' }, 'Волна нажатия должна оставаться внутри кнопки');
|
||||
});
|
||||
|
||||
test('вкладки админки сохраняют стабильные кнопки и актуальные селекты', async () => {
|
||||
await page.locator('#username').fill(process.env.FRONTEND_TEST_LOGIN || 'admin');
|
||||
await page.locator('#password').fill(process.env.FRONTEND_TEST_PASSWORD || 'admin');
|
||||
await page.locator('#btn-submit').click();
|
||||
await page.waitForURL('**/admin/**');
|
||||
await page.locator('.nav-item').first().waitFor();
|
||||
assert.equal(await page.locator('.menu-toggle').isVisible(), false, 'Десктопная кнопка мобильного меню скрыта');
|
||||
const tabs = await page.locator('.nav-item').evaluateAll(items => items.map(item => item.dataset.tab));
|
||||
assert(tabs.length > 0, 'Не появились вкладки админки');
|
||||
for (const theme of ['light', 'dark']) {
|
||||
await page.evaluate(value => { document.documentElement.dataset.theme = value; }, theme);
|
||||
await assertStableHover(page.locator('.sidebar .nav-item').first());
|
||||
for (const tab of tabs) {
|
||||
await page.locator(`.nav-item[data-tab="${tab}"]`).click();
|
||||
await page.locator('.tab-loading').waitFor({ state: 'hidden' });
|
||||
await page.waitForLoadState('networkidle');
|
||||
await assertSelectsSynchronized();
|
||||
await assertStableHover(page.locator('.theme-toggle'));
|
||||
const button = page.locator('#app-content .btn:visible').first();
|
||||
if (await button.count()) await assertStableHover(button);
|
||||
}
|
||||
}
|
||||
await page.locator('.nav-item[data-tab="users"]').click();
|
||||
await page.locator('#new-role').waitFor({ state: 'attached' });
|
||||
await choose('#new-role', 'Преподаватель');
|
||||
await assertSelectsSynchronized();
|
||||
await choose('#new-role', 'Студент');
|
||||
await assertSelectsSynchronized();
|
||||
await choose('#users-role-filter', 'Преподаватель');
|
||||
assert.equal(await page.locator('#users-role-filter').inputValue(), 'TEACHER');
|
||||
await choose('#users-role-filter', 'Все роли');
|
||||
assert.equal(await page.locator('#users-role-filter').inputValue(), '');
|
||||
await assertSelectsSynchronized();
|
||||
});
|
||||
|
||||
test('мобильное меню админки и настроек открывается и закрывается', async () => {
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
for (const path of ['/admin/', '/admin/settings/']) {
|
||||
await page.goto(path);
|
||||
const toggle = page.getByRole('button', { name: 'Открыть меню', exact: true });
|
||||
await toggle.click();
|
||||
assert.equal(await page.locator('.sidebar').evaluate(element => element.classList.contains('open')), true);
|
||||
const destination = path === '/admin/'
|
||||
? page.locator('.nav-item[data-tab="groups"]')
|
||||
: page.locator('.sidebar .nav-item').first();
|
||||
await destination.click();
|
||||
await page.locator('.tab-loading').waitFor({ state: 'hidden' });
|
||||
await page.waitForLoadState('networkidle');
|
||||
assert.equal(await page.locator('.sidebar').evaluate(element => element.classList.contains('open')), false);
|
||||
await toggle.click();
|
||||
await page.locator('.sidebar-overlay').click({ position: { x: 350, y: 300 } });
|
||||
assert.equal(await page.locator('.sidebar').evaluate(element => element.classList.contains('open')), false);
|
||||
await toggle.click();
|
||||
await page.keyboard.press('Escape');
|
||||
assert.equal(await page.locator('.sidebar').evaluate(element => element.classList.contains('open')), false);
|
||||
}
|
||||
});
|
||||
|
||||
test('кнопки календаря пожеланий преподавателя не смещаются при наведении', async () => {
|
||||
await page.setViewportSize({ width: 1440, height: 1000 });
|
||||
await page.goto('/');
|
||||
await page.locator('#username').fill(process.env.FRONTEND_TEST_TEACHER_LOGIN || 'Тестовый преподаватель');
|
||||
await page.locator('#password').fill(process.env.FRONTEND_TEST_TEACHER_PASSWORD || '1234567890');
|
||||
await page.locator('#btn-submit').click();
|
||||
await page.waitForURL('**/teacher/**');
|
||||
await page.locator('.workspace-tab').filter({ hasText: 'Пожелания' }).click();
|
||||
await page.locator('.preference-cell').first().waitFor();
|
||||
for (const theme of ['light', 'dark']) {
|
||||
await page.evaluate(value => { document.documentElement.dataset.theme = value; }, theme);
|
||||
await assertStableHover(page.locator('.preference-cell:enabled').first());
|
||||
}
|
||||
});
|
||||
|
||||
test('карточки дашборда не перерисовываются при наведении на боковое меню', async () => {
|
||||
await page.setViewportSize({ width: 1440, height: 1000 });
|
||||
await page.goto('/');
|
||||
await page.locator('#username').fill(process.env.FRONTEND_TEST_LOGIN || 'admin');
|
||||
await page.locator('#password').fill(process.env.FRONTEND_TEST_PASSWORD || 'admin');
|
||||
await page.locator('#btn-submit').click();
|
||||
await page.waitForURL('**/admin/**');
|
||||
await page.locator('.nav-item[data-tab="dashboard"]').click();
|
||||
await page.locator('.dashboard-metric-card').first().waitFor();
|
||||
await page.waitForLoadState('networkidle');
|
||||
await page.locator('[aria-busy="true"]').waitFor({ state: 'hidden' });
|
||||
|
||||
for (const theme of ['dark', 'light']) {
|
||||
await page.evaluate(value => { document.documentElement.dataset.theme = value; }, theme);
|
||||
await page.mouse.move(0, 0);
|
||||
await page.waitForTimeout(600);
|
||||
const surfaces = await page.locator('.card, .sidebar').evaluateAll(elements => elements.map(element => {
|
||||
const style = getComputedStyle(element);
|
||||
return {
|
||||
filter: style.backdropFilter,
|
||||
transform: style.transform,
|
||||
color: style.backgroundColor
|
||||
};
|
||||
}));
|
||||
for (const surface of surfaces) {
|
||||
assert.equal(surface.filter, 'none', 'На постоянной поверхности остался фоновой фильтр');
|
||||
assert.equal(surface.transform, 'none', 'На карточке осталась трансформация после появления');
|
||||
assert.match(surface.color, /^rgb\(/, 'Фон постоянной поверхности должен быть непрозрачным');
|
||||
}
|
||||
for (const selector of ['.dashboard-metrics-grid', '.dashboard-monitor-card', '.red-zone-card']) {
|
||||
const card = page.locator(selector);
|
||||
await page.mouse.move(0, 0);
|
||||
const before = await card.screenshot();
|
||||
await page.locator('.nav-item[data-tab="schedule"]').hover();
|
||||
await page.waitForTimeout(500);
|
||||
const after = await card.screenshot();
|
||||
assert(before.equals(after), `${theme}: изображение ${selector} изменилось при наведении на меню`);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
test('быстрые изменения фильтра и сортировки сохраняют оба параметра запроса', async () => {
|
||||
await page.locator('.nav-item[data-tab="users"]').click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
const requests = [];
|
||||
let releaseFirst;
|
||||
const firstBlocked = new Promise(resolve => { releaseFirst = resolve; });
|
||||
await page.route('**/api/users/page?**', async route => {
|
||||
requests.push(new URL(route.request().url()));
|
||||
if (requests.length === 1) await firstBlocked;
|
||||
await route.fulfill({ json: { items: [], totalItems: 0, totalPages: 0, page: 0, size: 25 } });
|
||||
});
|
||||
try {
|
||||
await choose('#users-role-filter', 'Преподаватель');
|
||||
const sortedResponse = page.waitForResponse(response => response.url().includes('/api/users/page?') && response.url().includes('sort=username'));
|
||||
await choose('#users-sort', 'По логину');
|
||||
await sortedResponse;
|
||||
assert.equal(requests.at(-1).searchParams.get('role'), 'TEACHER', 'Сортировка отменила выбранную роль');
|
||||
assert.equal(requests.at(-1).searchParams.get('sort'), 'username');
|
||||
releaseFirst();
|
||||
await page.waitForLoadState('networkidle');
|
||||
assert.equal(await page.locator('#users-role-filter').inputValue(), 'TEACHER', 'Старый ответ отменил роль');
|
||||
assert.equal(await page.locator('#users-sort').inputValue(), 'username,asc');
|
||||
} finally {
|
||||
releaseFirst();
|
||||
await page.unroute('**/api/users/page?**');
|
||||
}
|
||||
});
|
||||
|
||||
test('сброс фильтров групп отменяет отложенный поиск', async () => {
|
||||
await page.locator('.nav-item[data-tab="groups"]').click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
const queries = [];
|
||||
await page.route('**/api/groups/page?**', async route => {
|
||||
queries.push(new URL(route.request().url()).searchParams.get('query'));
|
||||
await route.fulfill({ json: { items: [], totalItems: 0, totalPages: 0, page: 0, size: 25 } });
|
||||
});
|
||||
try {
|
||||
await page.locator('#groups-search').fill('Отменённый поиск');
|
||||
await page.getByRole('button', { name: 'Сбросить фильтры', exact: true }).click();
|
||||
await page.waitForTimeout(500);
|
||||
await page.waitForLoadState('networkidle');
|
||||
assert.equal(await page.locator('#groups-search').inputValue(), '');
|
||||
assert(queries.length > 0, 'Сброс не обновил список');
|
||||
assert(queries.every(query => query === ''), 'После сброса запустился старый поиск');
|
||||
} finally {
|
||||
await page.unroute('**/api/groups/page?**');
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user