mrwnslz
838457f6f9
Die Bereiche nach dem, was man tut (docs/navigation.md): Home; Lesen mit Bücher, Zeitschriften, Nachrichten, Blogs; Hören mit Hörbücher, Podcasts, Radio, Ambient. static/js/nav.js ist die eine Definition für alle Plattformen (DioraNav: Abschnitte, Gruppen, go, Hash, zuletzt gewählter Abschnitt je Gruppe). Die Webseite zeichnet ihre Leiste daraus: breit alle Abschnitte unter ihrer Gruppe, schmal Home · Lesen · Hören mit einer Abschnittszeile oben. - Hörbücher haben ein eigenes Panel (#tab-audiobooks), nicht mehr über den E-Books. - Zeitschriften: die Bücher im Ordner „Zeitschriften“ (oder „Magazine“). - Nachrichten/Blogs wählt die Navigation; der eigene Umschalter verschwindet dann. - Ein Link auf einen Abschnitt (#news …) schlägt die Startseite. Die Apps zeichnen ihre Leiste (native-radio.js, diora-android) bald ebenfalls daraus; bis dahin bleibt das hier unveröffentlicht. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
61 lines
3.3 KiB
JavaScript
61 lines
3.3 KiB
JavaScript
// The navigation (docs/navigation.md): Home, Lesen (Bücher, Zeitschriften, Nachrichten,
|
|
// Blogs), Hören (Hörbücher, Podcasts, Radio, Ambient), on the web page's own bar.
|
|
const { test, expect } = require('@playwright/test');
|
|
const path = require('path');
|
|
|
|
test.use({ storageState: path.join(__dirname, '.auth', 'user.json') });
|
|
|
|
const visiblePanel = page => page.evaluate(() =>
|
|
[...document.querySelectorAll('section.tab-panel')].filter(p => p.style.display !== 'none').map(p => p.id));
|
|
|
|
test('wide: every section in the bar under its group, each shows its panel and view', async ({ page }) => {
|
|
await page.setViewportSize({ width: 1200, height: 800 });
|
|
await page.goto('/#books');
|
|
const wide = page.locator('#tabs .nav-wide');
|
|
await expect(wide.locator('.nav-group-label')).toHaveText(['Lesen', 'Hören']);
|
|
await expect(wide.locator('[data-nav]')).toHaveText(
|
|
['Home', 'Bücher', 'Zeitschriften', 'Nachrichten', 'Blogs', 'Hörbücher', 'Podcasts', 'Radio', 'Ambient', 'Fokus']);
|
|
|
|
await wide.locator('[data-nav="blogs"]').click();
|
|
await expect(page).toHaveURL(/#blogs$/);
|
|
expect(await visiblePanel(page)).toEqual(['tab-feeds']);
|
|
expect(await page.evaluate(() => localStorage.getItem('diora_feeds_view'))).toBe('blogs');
|
|
await expect(page.locator('#tab-feeds .fd-seg')).toBeHidden(); // the bar chooses, not the tab
|
|
await expect(page.locator('#nav-segments')).toBeHidden();
|
|
|
|
await wide.locator('[data-nav="audiobooks"]').click();
|
|
expect(await visiblePanel(page)).toEqual(['tab-audiobooks']);
|
|
await expect(page.locator('#audiobook-shelf')).toBeVisible();
|
|
await expect(wide.locator('[data-nav="audiobooks"]')).toHaveClass(/active/);
|
|
});
|
|
|
|
test('narrow: three groups, the sections as a row on top, each group remembers its last', async ({ page }) => {
|
|
await page.setViewportSize({ width: 390, height: 800 });
|
|
await page.goto('/#news');
|
|
const narrow = page.locator('#tabs .nav-narrow');
|
|
await expect(narrow.locator('[data-nav]')).toHaveText(['Home', 'Lesen', 'Hören']);
|
|
await expect(narrow.locator('[data-nav="lesen"]')).toHaveClass(/active/);
|
|
const segs = page.locator('#nav-segments');
|
|
await expect(segs.locator('[data-nav]')).toHaveText(['Bücher', 'Zeitschriften', 'Nachrichten', 'Blogs']);
|
|
await expect(segs.locator('[data-nav="news"]')).toHaveClass(/active/);
|
|
|
|
await narrow.locator('[data-nav="hoeren"]').click();
|
|
await segs.locator('[data-nav="radio"]').click();
|
|
expect(await visiblePanel(page)).toEqual(['tab-radio']);
|
|
await narrow.locator('[data-nav="lesen"]').click();
|
|
await expect(page).toHaveURL(/#news$/); // back where Lesen was left
|
|
await narrow.locator('[data-nav="hoeren"]').click();
|
|
await expect(page).toHaveURL(/#radio/);
|
|
});
|
|
|
|
test('old links and direct panel switches land in their section', async ({ page }) => {
|
|
await page.setViewportSize({ width: 1200, height: 800 });
|
|
await page.goto('/#feeds');
|
|
expect(await visiblePanel(page)).toEqual(['tab-feeds']);
|
|
await expect(page.locator('#tabs .nav-wide [data-nav].active')).toHaveText(/Nachrichten|Blogs/);
|
|
await page.evaluate(() => showTab('podcasts'));
|
|
await expect(page.locator('#tabs [data-nav="podcasts"]')).toHaveClass(/active/);
|
|
await expect(page).toHaveURL(/#podcasts$/);
|
|
await page.reload();
|
|
expect(await visiblePanel(page)).toEqual(['tab-podcasts']); // remembered
|
|
});
|