Add e2e tests for CRUD events

[tyler-dane]

Overview

Create end-to-end tests using Playwright for the CRUD operations (CREATE, UPDATE, DELETE) on regular timed events in the Compass calendar. These tests will help ensure stability and reliability in our core event management flows.

Scope

• Test creation of a regular timed event (not all-day or "someday" types)
• Test updating an existing timed event
• Test deletion of a timed event

---

Implementation Guidance

• File Organization:
  • Separate the tests for Create, Update, and Delete operations into distinct files for clarity and maintainability.
  • Additionally, consider creating separate files for keyboard-only and mouse/click-based interaction validation. For example:
    • create-event-mouse.spec.ts
    • create-event-keyboard.spec.ts
    • update-event-mouse.spec.ts
    • ...
• Interaction Variations:
  • For each CRUD action, implement both:
    • Mouse/click interactions (e.g., clicking buttons, UI elements with the mouse)
    • Keyboard-only flows (e.g., navigating with TAB/SHIFT+TAB, activating elements with ENTER/SPACE, using shortcut keys, arrow navigation, etc.)
• Locator Strategy:
  • Use robust locator strategies as described in the Playwright Locators documentation.
  • Do NOT use data-testid attributes for locating elements. This is considered an anti-pattern in Playwright; prefer semantic selectors and accessible roles.
• Sample Test Structure (Keyboard-only example):

  import { test, expect } from '@playwright/test';
  
  test('should create a timed event using keyboard interaction', async ({ page }) => {
    await page.goto('https://app.compasscalendar.com');
    // Keyboard navigation to open create dialog
    await page.keyboard.press('Tab');
    await page.keyboard.press('Enter');
    // Fill fields using keyboard navigation
    await page.keyboard.type('Test Event');
    await page.keyboard.press('Tab');
    await page.keyboard.type('10:00');
    await page.keyboard.press('Tab');
    await page.keyboard.press('Enter'); // Save event
    // Assertion
    await expect(page.getByRole('listitem', { name: /Test Event/i })).toBeVisible();
  });
  

• Best Practices:
  • Make tests independent and repeatable.
  • Clean up created data after tests.
  • Use semantic locators, accessible roles, and text selectors.

Reference:

• Playwright Locators documentation

Acceptance Criteria

• [ ] Playwright tests exist for CREATE, UPDATE, DELETE of timed events
• [ ] Tests pass in CI
• [ ] Documentation for running these tests is added to the docs repo

References

• Parent Issue: #861
• Playwright Docs