bruno
2add24a9c1
- clic sur le titre: la page d'accueil s'ouvre dans un onglet Accueil (icone Maison) epingle en tete de barre, reactivable d'un clic (onglet propre au panneau actif en split) - page de navigation: menus contextuels des repertoires et des fichiers identiques a ceux de la sidebar, clic sur la racine d'un vault qui ouvre la vue, icone dossier a la couleur de l'arbre de navigation - BUG-101: bloc « Keyboard shortcuts for tabs » duplique dans ui.js (un seul Ctrl+W fermait deux onglets) - BUG-102: le menu contextuel se refermait 10 ms apres son ouverture (scroll de reflow des icones lucide)
107 lines
5.0 KiB
JavaScript
107 lines
5.0 KiB
JavaScript
/**
|
|
* E2E — Page de navigation & onglet Accueil (#158).
|
|
*
|
|
* Couvre :
|
|
* - clic sur la racine d'un vault -> page de navigation (onglet dédié)
|
|
* - icône des répertoires à la couleur de l'arbre de la sidebar
|
|
* - menu contextuel des répertoires et des fichiers identique à la sidebar
|
|
* - clic sur le titre -> onglet Accueil (icône Maison) épinglé en tête de barre
|
|
*/
|
|
|
|
import { test, expect } from '@playwright/test';
|
|
|
|
async function boot(page) {
|
|
await page.goto('/');
|
|
await page.waitForFunction(() => window.__OBSIGATE_BOOTED === true, { timeout: 20000 });
|
|
await page.waitForSelector('#dashboard-home, #search-input', { timeout: 15000 });
|
|
}
|
|
|
|
const menuItems = (page) =>
|
|
page.$$eval('#context-menu .context-menu-item', (els) => els.map((e) => e.textContent.trim()))
|
|
.catch(() => []);
|
|
|
|
test.describe('Page de navigation (#158)', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await boot(page);
|
|
});
|
|
|
|
test("clic sur la racine d'un vault ouvre la page de navigation", async ({ page }) => {
|
|
const vault = await page.locator('.vault-item').first().getAttribute('data-vault');
|
|
await page.locator('.vault-item').first().click();
|
|
|
|
await page.waitForSelector('#vault-home .vault-home-breadcrumb', { timeout: 15000 });
|
|
await expect(page.locator(`#tab-list .tab-item[data-tab-id="nav::${vault}"]`)).toHaveCount(1);
|
|
// Le fil d'Ariane est à la racine du vault
|
|
await expect(page.locator('#vault-home .vault-home-breadcrumb-item')).toHaveCount(1);
|
|
});
|
|
|
|
test("répertoires de la vue : icône à la couleur de la sidebar + menu contextuel", async ({ page }) => {
|
|
await page.locator('.vault-item').first().click();
|
|
await page.waitForSelector('#vault-home .vault-home-dirs .vault-home-recent-item', { timeout: 15000 });
|
|
|
|
// Couleur identique à l'icône de l'arbre (.tree-item .icon -> var(--accent))
|
|
const colors = await page.evaluate(() => {
|
|
const cs = (el) => (el ? getComputedStyle(el).color : null);
|
|
return {
|
|
nav: cs(document.querySelector('#vault-home .vault-home-dirs .vault-home-recent-item svg')),
|
|
side: cs(document.querySelector('.tree-item[data-type="directory"] svg')),
|
|
};
|
|
});
|
|
expect(colors.nav).toBe(colors.side);
|
|
expect(colors.nav).toBeTruthy();
|
|
|
|
// Menu contextuel : page de navigation vs sidebar
|
|
await page.locator('#vault-home .vault-home-dirs .vault-home-recent-item').first().click({ button: 'right' });
|
|
await page.waitForSelector('#context-menu', { timeout: 5000 });
|
|
const navMenu = await menuItems(page);
|
|
expect(navMenu.length).toBeGreaterThan(0);
|
|
await page.keyboard.press('Escape');
|
|
|
|
await page.locator('.tree-item[data-type="directory"]').first().click({ button: 'right' });
|
|
await page.waitForSelector('#context-menu', { timeout: 5000 });
|
|
const sideMenu = await menuItems(page);
|
|
await page.keyboard.press('Escape');
|
|
expect(navMenu).toEqual(sideMenu);
|
|
});
|
|
|
|
test('fichiers de la vue : menu contextuel identique à la sidebar', async ({ page }) => {
|
|
await page.locator('.vault-item').first().click();
|
|
await page.waitForSelector('#vault-home .search-result-item', { timeout: 15000 });
|
|
|
|
await page.locator('#vault-home .search-result-item').first().click({ button: 'right' });
|
|
await page.waitForSelector('#context-menu', { timeout: 5000 });
|
|
const navMenu = await menuItems(page);
|
|
expect(navMenu.length).toBeGreaterThan(0);
|
|
await page.keyboard.press('Escape');
|
|
|
|
await page.locator('.tree-item[data-type="file"]').first().click({ button: 'right' });
|
|
await page.waitForSelector('#context-menu', { timeout: 5000 });
|
|
const sideMenu = await menuItems(page);
|
|
await page.keyboard.press('Escape');
|
|
expect(navMenu).toEqual(sideMenu);
|
|
});
|
|
|
|
test('titre -> onglet Accueil (Maison) épinglé en tête de barre', async ({ page }) => {
|
|
// Un fichier ouvert pour vérifier que l'onglet Accueil passe devant
|
|
await page.locator('.vault-item').first().click();
|
|
await page.waitForSelector('.tree-item[data-type="file"]', { timeout: 15000 });
|
|
await page.locator('.tree-item[data-type="file"]').first().dblclick();
|
|
await page.waitForTimeout(500);
|
|
|
|
await page.locator('#header-logo').click();
|
|
await page.waitForSelector('#dashboard-home', { timeout: 10000 });
|
|
|
|
const ids = await page.$$eval('#tab-list .tab-item', (els) => els.map((e) => e.dataset.tabId));
|
|
expect(ids[0]).toBe('home');
|
|
expect(ids.length).toBeGreaterThan(1);
|
|
await expect(page.locator('#tab-list .tab-item.active')).toHaveAttribute('data-tab-id', 'home');
|
|
// Icône Maison + libellé traduit
|
|
const iconClass = await page.locator('#tab-list .tab-item').first().locator('.tab-icon').getAttribute('class');
|
|
expect(iconClass).toContain('home');
|
|
const label = (await page.locator('#tab-list .tab-item').first().locator('.tab-name').textContent()) || '';
|
|
expect(['Accueil', 'Home']).toContain(label.trim());
|
|
// La page d'accueil est affichée (avec sa section Raccourcis & Astuces)
|
|
await expect(page.locator('#dashboard-home #quick-help')).toHaveCount(1);
|
|
});
|
|
});
|