wedding-planner-frontend/tests/guests.spec.ts

import { test, expect, Page } from '@playwright/test'
import { mock } from 'node:test';

const mockGuestsAPI = ({ page }: { page: Page }) => {
  page.route('*/**/api/default/guests', async route => {
    if (route.request().method() === 'GET') {
      const json = [
        {
          "id": "f4a09c28-40ea-4553-90a5-96935a59cac6",
          "status": "tentative",
          "name": "Kristofer Rohan DVM",
          "group": {
            "id": "2fcb8b22-6b07-4c34-92e3-a2535dbc5b14",
            "name": "Childhood friends",
          }
        },
        {
          "id": "bd585c40-0937-4cde-960a-bb23acfd6f18",
          "status": "invited",
          "name": "Olevia Quigley Jr.",
          "group": {
            "id": "da8edf26-3e1e-4cbb-b985-450c49fffe01",
            "name": "Work",
          }
        },
      ];

      await route.fulfill({ json })
    } else if (route.request().method() === 'POST') {
      const json = {};

      await route.fulfill({ json });
    }
  })
}

const mockGroupsAPI = ({ page }: { page: Page }) => {
  page.route('*/**/api/default/groups', async route => {
    const json = [
      {
        "id": "ee44ffb9-1147-4842-a378-9eaeb0f0871a",
        "name": "Pam's family",
        "icon": "pi pi-users",
        "parent_id": null,
        "color": "#ff0000",
        "attendance": {
          "total": 3,
          "considered": 2,
          "invited": 1,
          "confirmed": 0,
          "declined": 0,
          "tentative": 0
        }
      },
      {
        "id": "c8bda6ca-d8af-4bb8-b2bf-e6ec1c21b1e6",
        "name": "Pam's work",
        "icon": "pi pi-desktop",
        "parent_id": null,
        "color": "#00ff00",
        "attendance": {
          "total": 2,
          "considered": 0,
          "invited": 0,
          "confirmed": 0,
          "declined": 0,
          "tentative": 2
        }
      },
    ];

    await route.fulfill({ json })
  })
}

test('should display the list of guests', async ({ page }) => {
  await mockGuestsAPI({ page });

  await page.goto('/default/dashboard/guests');

  await expect(page.getByRole('button', { name: 'Add new' })).toBeVisible();

  await expect(page.getByRole('tab', { name: 'Guests' })).toBeVisible();
  await expect(page.getByRole('tab', { name: 'Groups' })).toBeVisible();
  await expect(page.getByRole('tab', { name: 'Invitations' })).toBeVisible();

  await expect(page.getByText('There are 2 elements in the list')).toBeVisible();
  await expect(page.getByRole('row')).toHaveCount(3); // 1 header row + 2 data rows

  await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Kristofer Rohan DVM' })).toBeVisible();
  await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Childhood friends' })).toBeVisible();
  await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Tentative' })).toBeVisible();
  await expect(page.getByRole('row').nth(1).locator('svg')).toHaveCount(2);


  await expect(page.getByRole('row').nth(2).getByRole('cell', { name: 'Olevia Quigley Jr.' })).toBeVisible();
  await expect(page.getByRole('row').nth(2).getByRole('cell', { name: 'Work' })).toBeVisible();
  await expect(page.getByRole('row').nth(2).getByRole('cell', { name: 'Invited' })).toBeVisible();
  await expect(page.getByRole('row').nth(2).locator('svg')).toHaveCount(2);
});

test('should allow creating a new guest', async ({ page }) => {
  await mockGuestsAPI({ page });
  await mockGroupsAPI({ page });

  await page.goto('/default/dashboard/guests');
  await page.getByRole('button', { name: 'Add new' }).click();

  await page.getByRole('dialog').getByLabel('Name').fill('John Snow');

  await page.keyboard.press('Tab');
  await page.keyboard.press('ArrowDown');
  await page.keyboard.press('ArrowDown');
  await page.keyboard.press('Enter');

  await page.keyboard.press('Tab');
  await page.keyboard.press('ArrowDown');
  await page.keyboard.press('ArrowDown');
  await page.keyboard.press('Enter');

  await page.getByRole('dialog').getByRole('button', { name: 'Create' }).click();
});

test('should display the list of groups', async ({ page }) => {
  await mockGroupsAPI({ page });

  await page.goto('/default/dashboard/guests');
  await page.getByRole('tab', { name: 'Groups' }).click();

  await expect(page.getByRole('button', { name: 'Add new' })).toBeVisible();
  await expect(page.getByRole('button', { name: 'Reset affinities' })).toBeVisible();

  await expect(page.getByRole('row')).toHaveCount(3); // 1 header row + 2 data rows

  await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(0)).toHaveText('Name');
  await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(1)).toHaveText('Color');
  await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(2)).toHaveText('Confirmed');
  await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(3)).toHaveText('Tentative');
  await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(4)).toHaveText('Pending');
  await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(5)).toHaveText('Declined');
  await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(6)).toHaveText('Considered');
  await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(7)).toHaveText('Total');
  await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(8)).toHaveText('Actions');

  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(0)).toContainText('Pam\'s family');
  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(2)).toHaveText('0');
  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(3)).toHaveText('0');
  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(4)).toHaveText('1');
  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(5)).toHaveText('0');
  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(6)).toHaveText('2');
  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(7)).toHaveText('3');
  await expect(page.getByRole('row').nth(1).locator('svg:visible')).toHaveCount(3);


  await expect(page.getByRole('row').nth(2).getByRole('cell').nth(0)).toContainText('Pam\'s work');
  await expect(page.getByRole('row').nth(2).getByRole('cell').nth(2)).toHaveText('0');
  await expect(page.getByRole('row').nth(2).getByRole('cell').nth(3)).toHaveText('2');
  await expect(page.getByRole('row').nth(2).getByRole('cell').nth(4)).toHaveText('0');
  await expect(page.getByRole('row').nth(2).getByRole('cell').nth(5)).toHaveText('0');
  await expect(page.getByRole('row').nth(2).getByRole('cell').nth(6)).toHaveText('0');
  await expect(page.getByRole('row').nth(2).getByRole('cell').nth(7)).toHaveText('2');
  await expect(page.getByRole('row').nth(2).locator('svg:visible')).toHaveCount(3);

});