feat: onglet Accueil, menus contextuels de navigation et racine vault #158
- 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)
This commit is contained in:
@@ -0,0 +1,106 @@
|
||||
/**
|
||||
* 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);
|
||||
});
|
||||
});
|
||||
@@ -160,8 +160,9 @@ test.describe('Split View Matrix — Boutons & menu contextuel', () => {
|
||||
await flyout.click();
|
||||
await page.waitForTimeout(600);
|
||||
// Pane 0 (single) holds both files now; empty source pane auto-collapsed
|
||||
// (+ onglet navigation ouvert au clic sur la racine du vault — #158)
|
||||
await expect(page.locator('.pane-container')).toHaveCount(0);
|
||||
await expect(page.locator('#tab-list .tab-item')).toHaveCount(2);
|
||||
await expect(page.locator('#tab-list .tab-item')).toHaveCount(3);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -205,10 +206,10 @@ test.describe('Split View Matrix — Fermeture', () => {
|
||||
test('X button on tab closes it', async ({ page }) => {
|
||||
await openFile(page, 'TestVault', 'note1.md');
|
||||
await openFile(page, 'TestVault', 'note2.md');
|
||||
await expect(page.locator('.tab-item')).toHaveCount(2);
|
||||
await expect(page.locator('.tab-item')).toHaveCount(3); // + onglet navigation (#158)
|
||||
await page.locator('.tab-item').first().locator('.tab-close').click();
|
||||
await page.waitForTimeout(300);
|
||||
await expect(page.locator('.tab-item')).toHaveCount(1);
|
||||
await expect(page.locator('.tab-item')).toHaveCount(2);
|
||||
});
|
||||
|
||||
test('double-click on tab closes it', async ({ page }) => {
|
||||
@@ -216,12 +217,15 @@ test.describe('Split View Matrix — Fermeture', () => {
|
||||
await openFile(page, 'TestVault', 'note2.md');
|
||||
await page.locator('.tab-item').first().dblclick();
|
||||
await page.waitForTimeout(300);
|
||||
await expect(page.locator('.tab-item')).toHaveCount(1);
|
||||
await expect(page.locator('.tab-item')).toHaveCount(2); // reste : onglet navigation (#158)
|
||||
});
|
||||
|
||||
test('Ctrl+W closes active tab (single pane)', async ({ page }) => {
|
||||
await openFile(page, 'TestVault', 'note1.md');
|
||||
await page.keyboard.press('Control+w');
|
||||
await openFile(page, 'TestVault', 'note1.md'); // ouvre aussi l'onglet navigation (#158)
|
||||
await page.keyboard.press('Control+w'); // ferme l'onglet fichier
|
||||
await page.waitForTimeout(400);
|
||||
await expect(page.locator('.tab-item')).toHaveCount(1);
|
||||
await page.keyboard.press('Control+w'); // ferme l'onglet navigation
|
||||
await page.waitForTimeout(400);
|
||||
await expect(page.locator('.tab-item')).toHaveCount(0);
|
||||
await expect(page.locator('#dashboard-home')).toBeVisible();
|
||||
@@ -233,7 +237,7 @@ test.describe('Split View Matrix — Fermeture', () => {
|
||||
await page.locator('.tab-item').first().click({ button: 'right' });
|
||||
await page.locator('#tab-context-menu [data-action="close"]').click();
|
||||
await page.waitForTimeout(300);
|
||||
await expect(page.locator('.tab-item')).toHaveCount(1);
|
||||
await expect(page.locator('.tab-item')).toHaveCount(2); // reste navigation + fichier (#158)
|
||||
});
|
||||
|
||||
test('context menu Fermer les autres keeps one', async ({ page }) => {
|
||||
@@ -243,7 +247,7 @@ test.describe('Split View Matrix — Fermeture', () => {
|
||||
await openFile(page, 'TestVault', 'Accueil.md');
|
||||
await page.waitForTimeout(300);
|
||||
const tabs = page.locator('.tab-item');
|
||||
await expect(tabs).toHaveCount(3);
|
||||
await expect(tabs).toHaveCount(5); // accueil + navigation + 3 fichiers (#158)
|
||||
await tabs.nth(1).click({ button: 'right' });
|
||||
await page.locator('#tab-context-menu [data-action="closeOthers"]').click();
|
||||
await page.waitForTimeout(300);
|
||||
@@ -256,7 +260,7 @@ test.describe('Split View Matrix — Fermeture', () => {
|
||||
await page.locator('#header-logo').click(); await page.waitForTimeout(300);
|
||||
await openFile(page, 'TestVault', 'Accueil.md');
|
||||
await page.waitForTimeout(300);
|
||||
await expect(page.locator('.tab-item')).toHaveCount(3);
|
||||
await expect(page.locator('.tab-item')).toHaveCount(5); // accueil + navigation + 3 fichiers (#158)
|
||||
await page.locator('.tab-item').first().click({ button: 'right' });
|
||||
await page.locator('#tab-context-menu [data-action="closeRight"]').click();
|
||||
await page.waitForTimeout(300);
|
||||
@@ -286,8 +290,8 @@ test.describe('Split View Matrix — Fermeture', () => {
|
||||
await pane1.locator('.tab-item').first().locator('.tab-close').click({ force: true });
|
||||
await page.waitForTimeout(700);
|
||||
await expect(page.locator('.pane-container')).toHaveCount(0);
|
||||
// pane 0 file is still open in single mode
|
||||
await expect(page.locator('#tab-list .tab-item')).toHaveCount(1);
|
||||
// pane 0 file + onglet navigation still open in single mode (#158)
|
||||
await expect(page.locator('#tab-list .tab-item')).toHaveCount(2);
|
||||
});
|
||||
|
||||
test('closing pane 0 of 2 focuses neighbour then collapses correctly', async ({ page }) => {
|
||||
@@ -376,7 +380,7 @@ test.describe('Split View Matrix — Edge cases', () => {
|
||||
// dblclick note1 again
|
||||
await page.locator('.tree-item[data-path="note1.md"]').dblclick();
|
||||
await page.waitForTimeout(400);
|
||||
await expect(page.locator('.tab-item')).toHaveCount(2);
|
||||
await expect(page.locator('.tab-item')).toHaveCount(3); // + onglet navigation (#158)
|
||||
// it should be the active one
|
||||
const active = page.locator('.tab-item.active');
|
||||
await expect(active).toHaveCount(1);
|
||||
|
||||
@@ -79,7 +79,7 @@ test.describe('Split View — Basic Operations', () => {
|
||||
const tabBar = page.locator('#tab-bar');
|
||||
await expect(tabBar).toBeVisible();
|
||||
const tabs = page.locator('.tab-item');
|
||||
await expect(tabs).toHaveCount(1);
|
||||
await expect(tabs).toHaveCount(2); // navigation (racine vault) + fichier (#158)
|
||||
// Content area should show the file
|
||||
const content = page.locator('#content-area');
|
||||
await expect(content).not.toBeEmpty();
|
||||
@@ -91,7 +91,7 @@ test.describe('Split View — Basic Operations', () => {
|
||||
await page.waitForTimeout(300);
|
||||
await openFile(page, 'TestVault', 'note2.md');
|
||||
const tabs = page.locator('.tab-item');
|
||||
await expect(tabs).toHaveCount(2);
|
||||
await expect(tabs).toHaveCount(4); // accueil + navigation + 2 fichiers (#158)
|
||||
});
|
||||
|
||||
test('split right via keyboard shortcut', async ({ page }) => {
|
||||
@@ -192,7 +192,7 @@ test.describe('Split View — Tab Drag & Drop', () => {
|
||||
// Source pane should have 1 tab, target should have 1 tab
|
||||
const pane0Tabs = page.locator('.pane-container').nth(0).locator('.tab-item');
|
||||
const pane1Tabs = page.locator('.pane-container').nth(1).locator('.tab-item');
|
||||
await expect(pane0Tabs).toHaveCount(1);
|
||||
await expect(pane0Tabs).toHaveCount(2); // navigation + fichier (#158)
|
||||
await expect(pane1Tabs).toHaveCount(1);
|
||||
});
|
||||
|
||||
@@ -343,12 +343,13 @@ test.describe('Split View — Regression', () => {
|
||||
});
|
||||
|
||||
test('closing last tab shows dashboard', async ({ page }) => {
|
||||
await openFile(page, 'TestVault', 'note1.md');
|
||||
await openFile(page, 'TestVault', 'note1.md'); // ouvre aussi l'onglet navigation (#158)
|
||||
|
||||
// Close tab via middle-click
|
||||
const tab = page.locator('.tab-item').first();
|
||||
await tab.click({ button: 'middle' });
|
||||
await page.waitForTimeout(500);
|
||||
// Close tabs via middle-click until none remains (dernier onglet -> dashboard)
|
||||
while (await page.locator('.tab-item').count()) {
|
||||
await page.locator('.tab-item').first().click({ button: 'middle' });
|
||||
await page.waitForTimeout(300);
|
||||
}
|
||||
|
||||
// Dashboard should be visible
|
||||
const dashboard = page.locator('#dashboard-home');
|
||||
|
||||
Reference in New Issue
Block a user