diora-web/e2e/navigation.spec.js

// 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', 'Abos & Quellen']);

  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
});

test('Abos & Quellen: one page for every subscription, reached from the feeds too', async ({ page }) => {
  await page.setViewportSize({ width: 1200, height: 800 });
  await page.goto('/#news');
  await page.locator('#tab-feeds [data-act="manage"]').first().click();
  await expect(page).toHaveURL(/#sources$/);
  const tab = page.locator('#tab-sources');
  await expect(tab.locator('.src-h1')).toHaveText('Abos & Quellen');
  await expect(tab.locator('.src-add-q')).toBeVisible();
  await expect(tab.locator('.src-chip.on')).toContainText('Nachrichten');   // came from the news
  await tab.locator('[data-filter="all"]').click();
  await expect(tab.locator('.src-chip.on')).toContainText('Alle');
});