end fase 2
This commit is contained in:
@ -6,203 +6,668 @@ import { test, expect } from '@playwright/test';
|
||||
* - Цветовая маркировка
|
||||
* - Комментарии
|
||||
* - Управление командой
|
||||
*
|
||||
* Используем data-testid для стабильных селекторов
|
||||
*/
|
||||
|
||||
test.describe('Фаза 2: Drag & Drop', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await page.waitForSelector('table, [role="grid"]', { timeout: 10000 });
|
||||
await page.waitForSelector('[data-testid="ideas-table"]', { timeout: 10000 });
|
||||
});
|
||||
|
||||
test('Drag handle присутствует в таблице', async ({ page }) => {
|
||||
// Ждём загрузки строк таблицы
|
||||
await page.waitForSelector('tbody tr', { timeout: 10000 });
|
||||
test('Drag handle присутствует в каждой строке', async ({ page }) => {
|
||||
// Проверяем есть ли данные
|
||||
const emptyState = page.locator('[data-testid="ideas-empty-state"]');
|
||||
const hasData = !(await emptyState.isVisible().catch(() => false));
|
||||
|
||||
// Drag handle — это div с aria-roledescription="sortable" (dnd-kit)
|
||||
const handles = page.locator('[aria-roledescription="sortable"]');
|
||||
|
||||
// Ждём появления хотя бы одного handle
|
||||
await expect(handles.first()).toBeVisible({ timeout: 5000 });
|
||||
|
||||
const count = await handles.count();
|
||||
expect(count).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('Строки имеют drag handle для сортировки', async ({ page }) => {
|
||||
// Ждём загрузки строк таблицы
|
||||
await page.waitForSelector('tbody tr', { timeout: 10000 });
|
||||
|
||||
// dnd-kit добавляет aria-roledescription="sortable" на drag handle
|
||||
const handles = page.locator('[aria-roledescription="sortable"]');
|
||||
await expect(handles.first()).toBeVisible({ timeout: 5000 });
|
||||
|
||||
const count = await handles.count();
|
||||
const totalRows = await page.locator('tbody tr').count();
|
||||
|
||||
// Все строки должны иметь drag handle
|
||||
expect(count).toBe(totalRows);
|
||||
});
|
||||
|
||||
test('Визуальное перетаскивание работает', async ({ page }) => {
|
||||
const rows = page.locator('tbody tr');
|
||||
const rowCount = await rows.count();
|
||||
|
||||
if (rowCount >= 2) {
|
||||
const firstRow = rows.first();
|
||||
const handle = firstRow.locator('td:first-child svg, td:first-child').first();
|
||||
|
||||
// Начинаем перетаскивание
|
||||
const box = await handle.boundingBox();
|
||||
if (box) {
|
||||
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
|
||||
await page.mouse.down();
|
||||
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2 + 50);
|
||||
await page.waitForTimeout(300);
|
||||
|
||||
// Проверяем появление визуальной индикации
|
||||
const overlay = page.locator(
|
||||
'[data-dnd-kit-drag-overlay], ' + '.drag-overlay, ' + '[style*="position: fixed"]'
|
||||
);
|
||||
|
||||
await page.mouse.up();
|
||||
|
||||
// Drag action выполнен успешно
|
||||
expect(true).toBeTruthy();
|
||||
}
|
||||
if (hasData) {
|
||||
const dragHandles = page.locator('[data-testid="drag-handle"]');
|
||||
const handleCount = await dragHandles.count();
|
||||
expect(handleCount).toBeGreaterThan(0);
|
||||
}
|
||||
});
|
||||
|
||||
test('Drag handle имеет правильный курсор', async ({ page }) => {
|
||||
const emptyState = page.locator('[data-testid="ideas-empty-state"]');
|
||||
const hasData = !(await emptyState.isVisible().catch(() => false));
|
||||
|
||||
test.skip(!hasData, 'Нет данных для тестирования');
|
||||
|
||||
const dragHandle = page.locator('[data-testid="drag-handle"]').first();
|
||||
await expect(dragHandle).toBeVisible();
|
||||
|
||||
// Проверяем что элемент имеет cursor: grab
|
||||
const cursor = await dragHandle.evaluate((el) => getComputedStyle(el).cursor);
|
||||
expect(cursor).toBe('grab');
|
||||
});
|
||||
|
||||
test('Drag & Drop изменяет порядок строк', async ({ page }) => {
|
||||
const ideaRows = page.locator('[data-testid^="idea-row-"]');
|
||||
const rowCount = await ideaRows.count();
|
||||
|
||||
test.skip(rowCount < 2, 'Недостаточно данных для тестирования D&D');
|
||||
|
||||
// Находим drag handle первой строки
|
||||
const firstHandle = page.locator('[data-testid="drag-handle"]').first();
|
||||
const box = await firstHandle.boundingBox();
|
||||
|
||||
if (box) {
|
||||
// Выполняем drag & drop
|
||||
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
|
||||
await page.mouse.down();
|
||||
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2 + 80, { steps: 10 });
|
||||
await page.waitForTimeout(300);
|
||||
await page.mouse.up();
|
||||
|
||||
// Ждём обновления
|
||||
await page.waitForTimeout(500);
|
||||
}
|
||||
|
||||
// Тест прошёл без ошибок
|
||||
expect(true).toBeTruthy();
|
||||
});
|
||||
|
||||
test('DragOverlay появляется при перетаскивании', async ({ page }) => {
|
||||
const emptyState = page.locator('[data-testid="ideas-empty-state"]');
|
||||
const hasData = !(await emptyState.isVisible().catch(() => false));
|
||||
|
||||
test.skip(!hasData, 'Нет данных для тестирования');
|
||||
|
||||
const dragHandle = page.locator('[data-testid="drag-handle"]').first();
|
||||
const box = await dragHandle.boundingBox();
|
||||
|
||||
if (box) {
|
||||
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
|
||||
await page.mouse.down();
|
||||
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2 + 30, { steps: 5 });
|
||||
|
||||
await page.waitForTimeout(200);
|
||||
|
||||
await page.mouse.up();
|
||||
}
|
||||
|
||||
expect(true).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Фаза 2: Цветовая маркировка', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await page.waitForSelector('table, [role="grid"]', { timeout: 10000 });
|
||||
await page.waitForSelector('[data-testid="ideas-table"]', { timeout: 10000 });
|
||||
});
|
||||
|
||||
test('Колонка цвета присутствует', async ({ page }) => {
|
||||
const headers = page.locator('th, [role="columnheader"]');
|
||||
const headerTexts = await headers.allTextContents();
|
||||
|
||||
const hasColorColumn = headerTexts.some(
|
||||
(text) => text.toLowerCase().includes('цвет') || text.toLowerCase().includes('color')
|
||||
);
|
||||
|
||||
// Фича может быть ещё не реализована - отмечаем как skip
|
||||
test.skip(!hasColorColumn, 'Колонка цвета ещё не реализована');
|
||||
expect(hasColorColumn).toBeTruthy();
|
||||
test('Фильтр по цвету присутствует', async ({ page }) => {
|
||||
const colorFilter = page.locator('[data-testid="filter-color"]');
|
||||
await expect(colorFilter).toBeVisible();
|
||||
});
|
||||
|
||||
test('Color picker или индикаторы доступны', async ({ page }) => {
|
||||
const colorElements = page.locator(
|
||||
'input[type="color"], ' +
|
||||
'.color-picker, ' +
|
||||
'[aria-label*="цвет" i], ' +
|
||||
'[aria-label*="color" i], ' +
|
||||
'tbody [style*="background"]'
|
||||
);
|
||||
test('Color picker trigger присутствует в строке', async ({ page }) => {
|
||||
const emptyState = page.locator('[data-testid="ideas-empty-state"]');
|
||||
const hasData = !(await emptyState.isVisible().catch(() => false));
|
||||
|
||||
const count = await colorElements.count();
|
||||
// Фича может быть ещё не реализована
|
||||
test.skip(count === 0, 'Color picker ещё не реализован');
|
||||
expect(count).toBeGreaterThan(0);
|
||||
test.skip(!hasData, 'Нет данных для тестирования');
|
||||
|
||||
const colorTrigger = page.locator('[data-testid="color-picker-trigger"]').first();
|
||||
await expect(colorTrigger).toBeVisible();
|
||||
});
|
||||
|
||||
test('Строки могут иметь цветной фон', async ({ page }) => {
|
||||
const rows = page.locator('tbody tr');
|
||||
const rowCount = await rows.count();
|
||||
let coloredRows = 0;
|
||||
test('Color picker открывается по клику', async ({ page }) => {
|
||||
const emptyState = page.locator('[data-testid="ideas-empty-state"]');
|
||||
const hasData = !(await emptyState.isVisible().catch(() => false));
|
||||
|
||||
for (let i = 0; i < rowCount; i++) {
|
||||
const row = rows.nth(i);
|
||||
const bg = await row.evaluate((el) => getComputedStyle(el).backgroundColor);
|
||||
test.skip(!hasData, 'Нет данных для тестирования');
|
||||
|
||||
// Проверяем что фон не прозрачный и не белый
|
||||
if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'rgb(255, 255, 255)') {
|
||||
coloredRows++;
|
||||
}
|
||||
}
|
||||
// Кликаем на trigger
|
||||
const colorTrigger = page.locator('[data-testid="color-picker-trigger"]').first();
|
||||
await colorTrigger.click();
|
||||
|
||||
// Фича может быть ещё не реализована
|
||||
test.skip(coloredRows === 0, 'Цветные строки ещё не реализованы');
|
||||
expect(coloredRows).toBeGreaterThan(0);
|
||||
// Ждём появления Popover
|
||||
const popover = page.locator('[data-testid="color-picker-popover"]');
|
||||
await expect(popover).toBeVisible({ timeout: 3000 });
|
||||
|
||||
// Закрываем popover
|
||||
await page.keyboard.press('Escape');
|
||||
});
|
||||
|
||||
test('Color picker содержит цветовые опции', async ({ page }) => {
|
||||
const emptyState = page.locator('[data-testid="ideas-empty-state"]');
|
||||
const hasData = !(await emptyState.isVisible().catch(() => false));
|
||||
|
||||
test.skip(!hasData, 'Нет данных для тестирования');
|
||||
|
||||
const colorTrigger = page.locator('[data-testid="color-picker-trigger"]').first();
|
||||
await colorTrigger.click();
|
||||
|
||||
const popover = page.locator('[data-testid="color-picker-popover"]');
|
||||
await expect(popover).toBeVisible();
|
||||
|
||||
// Проверяем что есть цветные опции
|
||||
const colorOptions = page.locator('[data-testid^="color-option-"]');
|
||||
const count = await colorOptions.count();
|
||||
expect(count).toBeGreaterThanOrEqual(8); // 8 предустановленных цветов
|
||||
|
||||
await page.keyboard.press('Escape');
|
||||
});
|
||||
|
||||
test('Выбор цвета изменяет фон строки', async ({ page }) => {
|
||||
const emptyState = page.locator('[data-testid="ideas-empty-state"]');
|
||||
const hasData = !(await emptyState.isVisible().catch(() => false));
|
||||
|
||||
test.skip(!hasData, 'Нет данных для тестирования');
|
||||
|
||||
const colorTrigger = page.locator('[data-testid="color-picker-trigger"]').first();
|
||||
await colorTrigger.click();
|
||||
|
||||
const popover = page.locator('[data-testid="color-picker-popover"]');
|
||||
await expect(popover).toBeVisible({ timeout: 3000 });
|
||||
|
||||
// Выбираем первый цвет
|
||||
const colorOption = page.locator('[data-testid^="color-option-"]').first();
|
||||
await expect(colorOption).toBeVisible();
|
||||
await colorOption.click({ force: true });
|
||||
|
||||
// Ждём закрытия popover
|
||||
await expect(popover).toBeHidden({ timeout: 3000 });
|
||||
|
||||
// Проверяем что строка получила цветной фон
|
||||
await page.waitForTimeout(300);
|
||||
const firstRow = page.locator('[data-testid^="idea-row-"]').first();
|
||||
const rowStyle = await firstRow.evaluate((el) => {
|
||||
const bg = getComputedStyle(el).backgroundColor;
|
||||
return bg;
|
||||
});
|
||||
|
||||
// Фон не должен быть прозрачным
|
||||
expect(rowStyle).not.toBe('rgba(0, 0, 0, 0)');
|
||||
});
|
||||
|
||||
test('Фильтр по цвету открывает dropdown с опциями', async ({ page }) => {
|
||||
const colorFilter = page.locator('[data-testid="filter-color"]');
|
||||
const select = colorFilter.locator('[role="combobox"]');
|
||||
|
||||
await select.click();
|
||||
|
||||
// Проверяем что появился dropdown с цветами
|
||||
const listbox = page.locator('[role="listbox"]');
|
||||
await expect(listbox).toBeVisible();
|
||||
|
||||
// Должны быть опции цветов
|
||||
const options = listbox.locator('[role="option"]');
|
||||
const count = await options.count();
|
||||
expect(count).toBeGreaterThanOrEqual(8); // "Все" + 8 цветов
|
||||
|
||||
await page.keyboard.press('Escape');
|
||||
});
|
||||
|
||||
test('Можно сбросить цвет (кнопка Clear)', async ({ page }) => {
|
||||
const emptyState = page.locator('[data-testid="ideas-empty-state"]');
|
||||
const hasData = !(await emptyState.isVisible().catch(() => false));
|
||||
|
||||
test.skip(!hasData, 'Нет данных для тестирования');
|
||||
|
||||
const colorTrigger = page.locator('[data-testid="color-picker-trigger"]').first();
|
||||
await colorTrigger.click();
|
||||
|
||||
const popover = page.locator('[data-testid="color-picker-popover"]');
|
||||
await expect(popover).toBeVisible();
|
||||
|
||||
// Ищем кнопку очистки
|
||||
const clearButton = page.locator('[data-testid="color-clear-button"]');
|
||||
await expect(clearButton).toBeVisible();
|
||||
|
||||
await page.keyboard.press('Escape');
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Фаза 2: Комментарии', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await page.waitForSelector('table, [role="grid"]', { timeout: 10000 });
|
||||
await page.waitForSelector('[data-testid="ideas-table"]', { timeout: 10000 });
|
||||
});
|
||||
|
||||
test('Кнопка комментариев присутствует', async ({ page }) => {
|
||||
const commentButtons = page.locator(
|
||||
'[aria-label*="комментар" i], ' +
|
||||
'[aria-label*="comment" i], ' +
|
||||
'button svg[data-testid*="Comment"], ' +
|
||||
'[data-testid="CommentIcon"], ' +
|
||||
'[data-testid="ChatBubbleIcon"]'
|
||||
);
|
||||
test('Кнопка комментариев присутствует в строке', async ({ page }) => {
|
||||
const emptyState = page.locator('[data-testid="ideas-empty-state"]');
|
||||
const hasData = !(await emptyState.isVisible().catch(() => false));
|
||||
|
||||
test.skip(!hasData, 'Нет данных для тестирования');
|
||||
|
||||
const commentButtons = page.locator('[data-testid="toggle-comments-button"]');
|
||||
const count = await commentButtons.count();
|
||||
// Фича может быть ещё не реализована
|
||||
test.skip(count === 0, 'Комментарии ещё не реализованы');
|
||||
expect(count).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('Секция комментариев существует', async ({ page }) => {
|
||||
const commentsSection = page.locator(
|
||||
'.comments-section, ' +
|
||||
'[class*="comment"], ' +
|
||||
'[data-testid*="comment"], ' +
|
||||
'textarea[placeholder*="комментар" i]'
|
||||
);
|
||||
test('Панель комментариев открывается по клику', async ({ page }) => {
|
||||
const emptyState = page.locator('[data-testid="ideas-empty-state"]');
|
||||
const hasData = !(await emptyState.isVisible().catch(() => false));
|
||||
|
||||
const count = await commentsSection.count();
|
||||
// Фича может быть ещё не реализована
|
||||
test.skip(count === 0, 'Секция комментариев ещё не реализована');
|
||||
expect(count).toBeGreaterThan(0);
|
||||
test.skip(!hasData, 'Нет данных для тестирования');
|
||||
|
||||
// Кликаем на кнопку комментариев
|
||||
const commentButton = page.locator('[data-testid="toggle-comments-button"]').first();
|
||||
await commentButton.click();
|
||||
|
||||
// Ждём появления панели комментариев
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
const commentsPanel = page.locator('[data-testid="comments-panel"]');
|
||||
await expect(commentsPanel).toBeVisible();
|
||||
});
|
||||
|
||||
test('Панель комментариев показывает пустое состояние или комментарии', async ({ page }) => {
|
||||
const emptyState = page.locator('[data-testid="ideas-empty-state"]');
|
||||
const hasData = !(await emptyState.isVisible().catch(() => false));
|
||||
|
||||
test.skip(!hasData, 'Нет данных для тестирования');
|
||||
|
||||
// Открываем комментарии
|
||||
const commentButton = page.locator('[data-testid="toggle-comments-button"]').first();
|
||||
await commentButton.click();
|
||||
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// Проверяем что есть либо пустое состояние, либо список комментариев
|
||||
const commentsEmpty = page.locator('[data-testid="comments-empty"]');
|
||||
const commentsList = page.locator('[data-testid="comments-list"]');
|
||||
|
||||
const hasNoComments = await commentsEmpty.isVisible().catch(() => false);
|
||||
const hasComments = await commentsList.isVisible().catch(() => false);
|
||||
|
||||
expect(hasNoComments || hasComments).toBeTruthy();
|
||||
});
|
||||
|
||||
test('Форма добавления комментария присутствует', async ({ page }) => {
|
||||
const emptyState = page.locator('[data-testid="ideas-empty-state"]');
|
||||
const hasData = !(await emptyState.isVisible().catch(() => false));
|
||||
|
||||
test.skip(!hasData, 'Нет данных для тестирования');
|
||||
|
||||
const commentButton = page.locator('[data-testid="toggle-comments-button"]').first();
|
||||
await commentButton.click();
|
||||
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
const commentForm = page.locator('[data-testid="comment-form"]');
|
||||
await expect(commentForm).toBeVisible();
|
||||
|
||||
const commentInput = page.locator('[data-testid="comment-input"]');
|
||||
await expect(commentInput).toBeVisible();
|
||||
|
||||
const submitButton = page.locator('[data-testid="submit-comment-button"]');
|
||||
await expect(submitButton).toBeVisible();
|
||||
});
|
||||
|
||||
test('Можно добавить комментарий', async ({ page }) => {
|
||||
const emptyState = page.locator('[data-testid="ideas-empty-state"]');
|
||||
const hasData = !(await emptyState.isVisible().catch(() => false));
|
||||
|
||||
test.skip(!hasData, 'Нет данных для тестирования');
|
||||
|
||||
// Открываем комментарии
|
||||
const commentButton = page.locator('[data-testid="toggle-comments-button"]').first();
|
||||
await commentButton.click();
|
||||
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// Вводим текст комментария
|
||||
const testComment = `Тестовый комментарий ${Date.now()}`;
|
||||
const commentInput = page.locator('[data-testid="comment-input"]');
|
||||
await commentInput.fill(testComment);
|
||||
|
||||
// Нажимаем кнопку отправки
|
||||
const sendButton = page.locator('[data-testid="submit-comment-button"]');
|
||||
await sendButton.click();
|
||||
|
||||
// Ждём сохранения
|
||||
await page.waitForTimeout(1000);
|
||||
|
||||
// Проверяем что комментарий появился
|
||||
const addedComment = page.locator(`text=${testComment}`);
|
||||
await expect(addedComment).toBeVisible({ timeout: 5000 });
|
||||
});
|
||||
|
||||
test('Можно удалить комментарий', async ({ page }) => {
|
||||
const emptyState = page.locator('[data-testid="ideas-empty-state"]');
|
||||
const hasData = !(await emptyState.isVisible().catch(() => false));
|
||||
|
||||
test.skip(!hasData, 'Нет данных для тестирования');
|
||||
|
||||
// Открываем комментарии
|
||||
const commentButton = page.locator('[data-testid="toggle-comments-button"]').first();
|
||||
await commentButton.click();
|
||||
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// Проверяем есть ли комментарии для удаления
|
||||
const deleteButtons = page.locator('[data-testid="delete-comment-button"]');
|
||||
const deleteCount = await deleteButtons.count();
|
||||
|
||||
test.skip(deleteCount === 0, 'Нет комментариев для удаления');
|
||||
|
||||
const initialCount = deleteCount;
|
||||
|
||||
// Кликаем на удаление первого комментария
|
||||
await deleteButtons.first().click();
|
||||
|
||||
// Ждём удаления
|
||||
await page.waitForTimeout(1000);
|
||||
|
||||
// Проверяем что количество уменьшилось
|
||||
const newDeleteCount = await deleteButtons.count();
|
||||
expect(newDeleteCount).toBeLessThan(initialCount);
|
||||
});
|
||||
|
||||
test('Повторный клик закрывает панель комментариев', async ({ page }) => {
|
||||
const emptyState = page.locator('[data-testid="ideas-empty-state"]');
|
||||
const hasData = !(await emptyState.isVisible().catch(() => false));
|
||||
|
||||
test.skip(!hasData, 'Нет данных для тестирования');
|
||||
|
||||
// Открываем комментарии
|
||||
const commentButton = page.locator('[data-testid="toggle-comments-button"]').first();
|
||||
await commentButton.click();
|
||||
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// Проверяем что панель открыта
|
||||
const commentsPanel = page.locator('[data-testid="comments-panel"]');
|
||||
await expect(commentsPanel).toBeVisible();
|
||||
|
||||
// Кликаем ещё раз чтобы закрыть
|
||||
await commentButton.click();
|
||||
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// Панель должна закрыться
|
||||
await expect(commentsPanel).toBeHidden();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Фаза 2: Управление командой', () => {
|
||||
test('Страница /team существует', async ({ page }) => {
|
||||
await page.goto('/team');
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
const bodyText = await page.locator('body').textContent();
|
||||
const is404 =
|
||||
bodyText?.toLowerCase().includes('404') || bodyText?.toLowerCase().includes('not found');
|
||||
|
||||
// Фича может быть ещё не реализована
|
||||
test.skip(is404, 'Страница /team ещё не реализована');
|
||||
expect(is404).toBeFalsy();
|
||||
});
|
||||
|
||||
test('Ссылка на команду в навигации', async ({ page }) => {
|
||||
test.describe('Фаза 2: Управление командой - Навигация', () => {
|
||||
test('Таб "Команда" присутствует', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await page.waitForSelector('body');
|
||||
|
||||
const teamLinks = page.locator('a[href*="team"], nav a, [role="navigation"] a');
|
||||
const allLinks = await teamLinks.allTextContents();
|
||||
|
||||
const hasTeamLink = allLinks.some(
|
||||
(text) => text.toLowerCase().includes('команд') || text.toLowerCase().includes('team')
|
||||
);
|
||||
|
||||
// Фича может быть ещё не реализована
|
||||
test.skip(!hasTeamLink, 'Навигация на команду ещё не реализована');
|
||||
expect(hasTeamLink).toBeTruthy();
|
||||
// Ищем таб "Команда"
|
||||
const teamTab = page.locator('[role="tab"]').filter({ hasText: 'Команда' });
|
||||
await expect(teamTab).toBeVisible();
|
||||
});
|
||||
|
||||
test('Таблица участников команды', async ({ page }) => {
|
||||
await page.goto('/team');
|
||||
await page.waitForLoadState('networkidle');
|
||||
test('Клик на таб "Команда" переключает контент', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await page.waitForSelector('[data-testid="ideas-table"]', { timeout: 10000 });
|
||||
|
||||
const table = page.locator('table, [role="grid"]');
|
||||
const count = await table.count();
|
||||
// Переходим на вкладку "Команда"
|
||||
const teamTab = page.locator('[role="tab"]').filter({ hasText: 'Команда' });
|
||||
await teamTab.click();
|
||||
|
||||
// Фича может быть ещё не реализована
|
||||
test.skip(count === 0, 'Таблица команды ещё не реализована');
|
||||
expect(count).toBeGreaterThan(0);
|
||||
// Ждём загрузки
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// Должна появиться страница команды
|
||||
const teamPage = page.locator('[data-testid="team-page"]');
|
||||
await expect(teamPage).toBeVisible({ timeout: 5000 });
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Фаза 2: Управление командой - Сводка', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await page.waitForSelector('body');
|
||||
|
||||
// Переходим на вкладку "Команда"
|
||||
const teamTab = page.locator('[role="tab"]').filter({ hasText: 'Команда' });
|
||||
await teamTab.click();
|
||||
await page.waitForTimeout(500);
|
||||
});
|
||||
|
||||
test('Страница команды отображается', async ({ page }) => {
|
||||
const teamPage = page.locator('[data-testid="team-page"]');
|
||||
await expect(teamPage).toBeVisible();
|
||||
});
|
||||
|
||||
test('Вкладки "Участники" и "Роли" присутствуют', async ({ page }) => {
|
||||
const membersTab = page.locator('[data-testid="team-tab-members"]');
|
||||
const rolesTab = page.locator('[data-testid="team-tab-roles"]');
|
||||
|
||||
await expect(membersTab).toBeVisible();
|
||||
await expect(rolesTab).toBeVisible();
|
||||
});
|
||||
|
||||
test('Сводка по ролям отображается', async ({ page }) => {
|
||||
const summarySection = page.locator('[data-testid="team-summary"]');
|
||||
await expect(summarySection).toBeVisible();
|
||||
});
|
||||
|
||||
test('Карточки ролей присутствуют', async ({ page }) => {
|
||||
// Карточки с количеством участников по ролям
|
||||
const roleCards = page.locator('[data-testid^="role-card-"]');
|
||||
const count = await roleCards.count();
|
||||
|
||||
// Может не быть карточек если нет участников с ролями
|
||||
expect(count).toBeGreaterThanOrEqual(0);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Фаза 2: Управление командой - Таблица участников', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await page.waitForSelector('body');
|
||||
|
||||
// Переходим на вкладку "Команда"
|
||||
const teamTab = page.locator('[role="tab"]').filter({ hasText: 'Команда' });
|
||||
await teamTab.click();
|
||||
await page.waitForTimeout(500);
|
||||
});
|
||||
|
||||
test('Таблица участников присутствует', async ({ page }) => {
|
||||
const table = page.locator('[data-testid="team-table"]');
|
||||
await expect(table).toBeVisible();
|
||||
});
|
||||
|
||||
test('Кнопка "Добавить" присутствует', async ({ page }) => {
|
||||
const addButton = page.locator('[data-testid="add-team-member-button"]');
|
||||
await expect(addButton).toBeVisible();
|
||||
});
|
||||
|
||||
test('Таблица показывает данные или empty state', async ({ page }) => {
|
||||
const emptyState = page.locator('[data-testid="team-empty-state"]');
|
||||
const memberRows = page.locator('[data-testid^="team-member-row-"]');
|
||||
|
||||
const hasEmptyState = await emptyState.isVisible().catch(() => false);
|
||||
const rowCount = await memberRows.count();
|
||||
|
||||
expect(hasEmptyState || rowCount > 0).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Фаза 2: Управление командой - CRUD участников', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await page.waitForSelector('body');
|
||||
|
||||
// Переходим на вкладку "Команда"
|
||||
const teamTab = page.locator('[role="tab"]').filter({ hasText: 'Команда' });
|
||||
await teamTab.click();
|
||||
await page.waitForTimeout(500);
|
||||
});
|
||||
|
||||
test('Модалка добавления открывается по кнопке', async ({ page }) => {
|
||||
const addButton = page.locator('[data-testid="add-team-member-button"]');
|
||||
await addButton.click();
|
||||
|
||||
// Ждём модалку
|
||||
const modal = page.locator('[data-testid="team-member-modal"]');
|
||||
await expect(modal).toBeVisible({ timeout: 3000 });
|
||||
|
||||
// Закрываем
|
||||
await page.keyboard.press('Escape');
|
||||
});
|
||||
|
||||
test('Модалка содержит необходимые поля', async ({ page }) => {
|
||||
const addButton = page.locator('[data-testid="add-team-member-button"]');
|
||||
await addButton.click();
|
||||
|
||||
const modal = page.locator('[data-testid="team-member-modal"]');
|
||||
await expect(modal).toBeVisible();
|
||||
|
||||
// Проверяем форму
|
||||
const form = page.locator('[data-testid="team-member-form"]');
|
||||
await expect(form).toBeVisible();
|
||||
|
||||
// Поле "Имя"
|
||||
const nameInput = page.locator('[data-testid="member-name-input"]');
|
||||
await expect(nameInput).toBeVisible();
|
||||
|
||||
// Select "Роль"
|
||||
const roleSelect = page.locator('[data-testid="member-role-select"]');
|
||||
await expect(roleSelect).toBeVisible();
|
||||
|
||||
// Кнопки
|
||||
const cancelButton = page.locator('[data-testid="cancel-member-button"]');
|
||||
await expect(cancelButton).toBeVisible();
|
||||
|
||||
const submitButton = page.locator('[data-testid="submit-member-button"]');
|
||||
await expect(submitButton).toBeVisible();
|
||||
|
||||
await page.keyboard.press('Escape');
|
||||
});
|
||||
|
||||
test('Можно добавить нового участника', async ({ page }) => {
|
||||
const addButton = page.locator('[data-testid="add-team-member-button"]');
|
||||
await addButton.click();
|
||||
|
||||
const modal = page.locator('[data-testid="team-member-modal"]');
|
||||
await expect(modal).toBeVisible();
|
||||
|
||||
// Заполняем имя
|
||||
const testName = `Тестовый участник ${Date.now()}`;
|
||||
const nameInput = page.locator('[data-testid="member-name-input"] input');
|
||||
await nameInput.fill(testName);
|
||||
|
||||
// Кликаем "Добавить"
|
||||
const submitButton = page.locator('[data-testid="submit-member-button"]');
|
||||
await submitButton.click();
|
||||
|
||||
// Ждём закрытия модалки
|
||||
await expect(modal).toBeHidden({ timeout: 5000 });
|
||||
|
||||
// Проверяем что участник появился в таблице
|
||||
await page.waitForTimeout(500);
|
||||
const newMember = page.locator(`text=${testName}`);
|
||||
await expect(newMember).toBeVisible();
|
||||
});
|
||||
|
||||
test('Кнопка редактирования присутствует в строке', async ({ page }) => {
|
||||
const memberRows = page.locator('[data-testid^="team-member-row-"]');
|
||||
const rowCount = await memberRows.count();
|
||||
|
||||
test.skip(rowCount === 0, 'Нет участников для редактирования');
|
||||
|
||||
const editButtons = page.locator('[data-testid="edit-team-member-button"]');
|
||||
const editCount = await editButtons.count();
|
||||
|
||||
expect(editCount).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('Модалка редактирования открывается с данными', async ({ page }) => {
|
||||
const editButton = page.locator('[data-testid="edit-team-member-button"]').first();
|
||||
const isVisible = await editButton.isVisible().catch(() => false);
|
||||
|
||||
test.skip(!isVisible, 'Нет участников для редактирования');
|
||||
|
||||
await editButton.click();
|
||||
|
||||
const modal = page.locator('[data-testid="team-member-modal"]');
|
||||
await expect(modal).toBeVisible();
|
||||
|
||||
// Поле имени должно быть заполнено
|
||||
const nameInput = page.locator('[data-testid="member-name-input"] input');
|
||||
const nameValue = await nameInput.inputValue();
|
||||
expect(nameValue.length).toBeGreaterThan(0);
|
||||
|
||||
await page.keyboard.press('Escape');
|
||||
});
|
||||
|
||||
test('Кнопка удаления присутствует в строке', async ({ page }) => {
|
||||
const memberRows = page.locator('[data-testid^="team-member-row-"]');
|
||||
const rowCount = await memberRows.count();
|
||||
|
||||
test.skip(rowCount === 0, 'Нет участников для удаления');
|
||||
|
||||
const deleteButtons = page.locator('[data-testid="delete-team-member-button"]');
|
||||
const deleteCount = await deleteButtons.count();
|
||||
|
||||
expect(deleteCount).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Фаза 2: Управление командой - Вкладка Роли', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await page.waitForSelector('body');
|
||||
|
||||
// Переходим на вкладку "Команда"
|
||||
const teamTab = page.locator('[role="tab"]').filter({ hasText: 'Команда' });
|
||||
await teamTab.click();
|
||||
await page.waitForTimeout(500);
|
||||
});
|
||||
|
||||
test('Вкладка "Роли" присутствует на странице команды', async ({ page }) => {
|
||||
const rolesTab = page.locator('[data-testid="team-tab-roles"]');
|
||||
await expect(rolesTab).toBeVisible();
|
||||
});
|
||||
|
||||
test('Переключение на вкладку "Роли" работает', async ({ page }) => {
|
||||
const rolesTab = page.locator('[data-testid="team-tab-roles"]');
|
||||
await rolesTab.click();
|
||||
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// Должен появиться RolesManager
|
||||
const rolesManager = page.locator('[data-testid="roles-manager"]');
|
||||
await expect(rolesManager).toBeVisible({ timeout: 5000 });
|
||||
});
|
||||
|
||||
test('Таблица ролей присутствует', async ({ page }) => {
|
||||
const rolesTab = page.locator('[data-testid="team-tab-roles"]');
|
||||
await rolesTab.click();
|
||||
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
const rolesTable = page.locator('[data-testid="roles-table"]');
|
||||
await expect(rolesTable).toBeVisible();
|
||||
});
|
||||
|
||||
test('Кнопка добавления роли присутствует', async ({ page }) => {
|
||||
const rolesTab = page.locator('[data-testid="team-tab-roles"]');
|
||||
await rolesTab.click();
|
||||
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
const addRoleButton = page.locator('[data-testid="add-role-button"]');
|
||||
await expect(addRoleButton).toBeVisible();
|
||||
});
|
||||
|
||||
test('Модалка добавления роли открывается', async ({ page }) => {
|
||||
const rolesTab = page.locator('[data-testid="team-tab-roles"]');
|
||||
await rolesTab.click();
|
||||
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
const addRoleButton = page.locator('[data-testid="add-role-button"]');
|
||||
await addRoleButton.click();
|
||||
|
||||
const modal = page.locator('[data-testid="role-modal"]');
|
||||
await expect(modal).toBeVisible();
|
||||
|
||||
// Проверяем поля
|
||||
const nameInput = page.locator('[data-testid="role-name-input"]');
|
||||
await expect(nameInput).toBeVisible();
|
||||
|
||||
const labelInput = page.locator('[data-testid="role-label-input"]');
|
||||
await expect(labelInput).toBeVisible();
|
||||
|
||||
await page.keyboard.press('Escape');
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user