mascarpone/e2e/pages/home.spec.ts

import { test, expect } from '@playwright/test';
import { login, verifyCreateUser, todate } from './util';

test.beforeEach(async ({ page }) => {
  await login(page);
});

test('can log out', async ({ page }) => {
  await page.getByText("Logout").click();
  await expect(page.getByLabel("Username")).toBeVisible();
});

test('has no contacts', async ({ page }) => {
  await expect(page.getByRole("navigation").getByRole("link")).toHaveCount(0);
});

test('can add contacts', async ({ page }) => {
  await verifyCreateUser(page, { names: ['John Contact'] });
  await verifyCreateUser(page, { names: ['Jack Contact'] });
  if (await page.locator('#sidebar-show-hide').isVisible()) {
    await page.locator('#sidebar-show-hide').click();
  }
  await expect(page.getByRole("navigation").getByRole("link")).toHaveCount(2);
});

test('shows "never" for unfreshened contacts', async ({ page }) => {
  await verifyCreateUser(page, { names: ['John Contact'] });
  await page.getByRole('link', { name: 'Mascarpone' }).click();

  await expect(page.locator('#freshness')).toContainText('John Contactnever');
});

test('shows the date for fresh contacts', async ({ page }) => {
  await verifyCreateUser(page, { names: ['John Contact'] });
  await page.getByRole('link', { name: /edit/i }).click();
  await page.getByRole('button', { name: /fresh/i }).click();
  await page.getByRole('button', { name: /save/i }).click();
  await page.getByRole('link', { name: 'Mascarpone' }).click();
  await expect(page.locator('#freshness')).toContainText(`John Contact${todate()}`);
});

test('sidebar is sorted alphabetically', async ({ page }) => {
  await verifyCreateUser(page, { names: ['Zulu'] });
  await verifyCreateUser(page, { names: ['Alfa'] });
  await verifyCreateUser(page, { names: ['Golf'] });

  if (await page.locator('#sidebar-show-hide').isVisible()) {
    await page.locator('#sidebar-show-hide').click();
  }

  await expect(page.getByRole('navigation')).toHaveText(/Alfa\s*Golf\s*Zulu/);
});

test('upcoming and recent show at least one birthday a week away', async ({ page }) => {
  const monthday = d => d.toISOString().split("T")[0].replace(/^\d{4}-/, '');
  const today = monthday(new Date());
  const yesterday = monthday((() => {
    let date = new Date();
    date.setDate(date.getDate() - 1);
    return date;
  })());
  const tomorrow = monthday((() => {
    let date = new Date();
    date.setDate(date.getDate() + 1);
    return date;
  })());
  const aMonthAgo = monthday((() => {
    let date = new Date();
    date.setDate(date.getDate() - 28);
    return date;
  })());
  const inAMonth = monthday((() => {
    let date = new Date();
    date.setDate(date.getDate() + 28);
    return date;
  })());
  await verifyCreateUser(page, { names: ['Alfa'], birthday: today });
  await verifyCreateUser(page, { names: ['Beta'], birthday: yesterday });
  await verifyCreateUser(page, { names: ['Echo'], birthday: today });
  await verifyCreateUser(page, { names: ['Golf'], birthday: yesterday });
  await verifyCreateUser(page, { names: ['Lima'], birthday: tomorrow });
  await verifyCreateUser(page, { names: ['Mike'], birthday: yesterday });
  await verifyCreateUser(page, { names: ['Xray'], birthday: inAMonth });
  await verifyCreateUser(page, { names: ['Zulu'], birthday: aMonthAgo });

  await page.goto('/');

  await expect(page.locator('#upcoming').getByRole('link')).toHaveCount(4);
  await expect(page.locator('#recent').getByRole('link')).toHaveCount(4);
});


test('contact list scrolls (independently) to current contact in center of view', async ({ page }) => {
  for (let count = 0; count < 30; count++) {
    await verifyCreateUser(page, { names: [`Contact${count < 10 ? '0' + count : count}`] });
  }

  await page.goto('/contact/28');
  if (await page.locator('#sidebar-show-hide').isVisible()) {
    await page.locator('#sidebar-show-hide').click();
  }
  await expect(page.getByRole('navigation').getByRole('link', { name: /Contact28/ })).toBeVisible();
  expect(await page.locator('main').evaluate(e => e.scrollTop)).toEqual(0);

  await page.goto('/contact/16');
  if (await page.locator('#sidebar-show-hide').isVisible()) {
    await page.locator('#sidebar-show-hide').click();
  }
  await expect(page.locator('#nav-link-16')).toBeVisible();
  const linkPos: number = await page.locator('#nav-link-16').evaluate(e => e.getBoundingClientRect().y);

  // roughly centered is fine, not that fussy about headers and whatnot
  expect(await page.getByRole('navigation').evaluate(e => e.scrollTop)).not.toEqual(0);
  expect(Math.abs(linkPos - (await page.evaluate('window.innerHeight/2') as number))).toBeLessThan(300);
});

test('clicking off contact list when expanded closes it', async ({ page }) => {
  await page.setViewportSize({
    width: 640,
    height: 1000,
  });
  // TODO aria-label
  await page.locator('#sidebar-show-hide').click();
  await expect(page.getByRole('button', { name: /add contact/i })).toBeVisible();
  await page.mouse.click(600, 500);
  await expect(page.getByRole('button', { name: /add contact/i })).not.toBeVisible();
});

test('contact list is sorted ignoring case', async ({ page }) => {
  await verifyCreateUser(page, { names: ['Alfa'] });
  await verifyCreateUser(page, { names: ['bob'] });
  await verifyCreateUser(page, { names: ['Charlie'] });

  await expect(page.locator('#contacts-sidebar')).toContainText(/alfa\s*bob\s*charlie/i);
});