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

import { test, expect, Page } from '@playwright/test'

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

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

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

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

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

  await expect(page.getByText('There are 2 elements in the list')).toBeVisible();

  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).getByRole('button', { name: 'Confirm' })).toBeVisible();
  await expect(page.getByRole('row').nth(1).getByRole('button', { name: 'Decline' })).toBeVisible();


  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).getByRole('button', { name: 'Confirm' })).toBeVisible();
  await expect(page.getByRole('row').nth(2).getByRole('button', { name: 'Tentative' })).toBeVisible();
  await expect(page.getByRole('row').nth(2).getByRole('button', { name: 'Decline' })).toBeVisible();
});

test('should allow changing the name of a guest', async ({ page }) => {
  await mockGuestsAPI({ page });

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

  await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Kristofer Rohan DVM' })).toBeVisible();

  await page.getByRole('row').nth(1).getByRole('cell', { name: 'Kristofer Rohan DVM' }).click();
  await page.getByRole('textbox').clear();
  await page.getByRole('textbox').pressSequentially('John Snow');
  await page.getByRole('textbox').evaluate(e => e.blur());

  await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'John Snow' })).toBeVisible();
});