[Epic] E2E Create Flows (State Machine Modals) — Implementation

[aasimsyed]

Subtask of #1959.

Summary

E2E coverage for entity create flows implemented as state machine modals (not standalone page routes). Tests must trigger and assert modals from the Create dropdown in the left sidebar. Routes /events/create, /organizations/create, /groups/create exist but are unused; coverage is achieved by testing the modals.

---

1. Where Create Flows Are Triggered

• Desktop: Left sidebar footer (SidebarLeftFooter.vue). Create dropdown (DropdownCreate) in #sidebar-left; user must be signed in.
• Mobile: Slide-out menu; Create shown when userIsSignedIn && devMode.active in mobile header.
• Dropdown: frontend/app/components/dropdown/DropdownCreate.vue — opens ModalCreateEvent, ModalCreateOrganization, or ModalCreateGroup via useModalHandlers.

Test strategy: Use desktop and the left sidebar as primary path. Expand sidebar (e.g. sidebarLeft.open()), open Create dropdown, choose menu option.

---

2. Opening the Create Dropdown and Modal

• Sidebar: SidebarLeft page object (newSidebarLeft(page) from ~/test-e2e/component-objects/SidebarLeft) — use open() so sidebar is expanded.
• Create button: getByRole('button', { name: /create/i }) scoped to #sidebar-left, or data-testid="create-dropdown" if added.
• Menu options: New event (i18n._global.new_event), New organization (i18n.components.dropdown_create.new_organization), New group (i18n._global.new_group).
• Modals: getByTestId('modal-ModalCreateEvent'), modal-ModalCreateOrganization, modal-ModalCreateGroup (see ModalBase.vue).

---

3. Modal Flows and Steps

Modal	Steps	Key components
ModalCreateEvent (4-step)	EventDetails → EventType → OnlineOrPhysicalLocation (logic) → Location or LinkOnline → Time	EventDetails (name, description, orgs required), EventType (location/event type, topics), Location/LinkOnline, Time (dates, times)
ModalCreateOrganization (2-step)	OrganizationDetails → Location	OrganizationDetails (name, description), Location (country, city)
ModalCreateGroup (2-step)	GroupDetails → Location	GroupDetails (name, description, organization required), Location (city)

Post-submit: modals close; assert modal closes and optionally success toast or list update. Resource create excluded (no modal yet; see #1966).

---

4. File and Locator Reference

Item	Locator
Create dropdown	#sidebar-left → button name /Create/i or create_aria_label
Modals	getByTestId('modal-ModalCreateEvent'), modal-ModalCreateOrganization, modal-ModalCreateGroup
Modal close	getByTestId('modal-close-button') inside modal
Next/Previous	i18n._global.next_step, i18n.components.machine.steps._global.previous_step
Event type	data-testid="events-filter-location-type", data-testid="events-filter-event-type"

---

5. Dependencies and Notes

• API: Create flows use useEventMutations().create, useOrganizationMutations().create, useGroupMutations().create. Mock in error-path tests; happy path needs backend fixtures (e.g. orgs for event/group).
• Locale: Use fixed locale (e.g. en); getEnglishText() from #shared/utils/i18n for stable selectors.

---

6. Subtasks to Create

Open each of the following as a separate issue and link to this epic.

Phase 1: Shared infrastructure

• Create dropdown and modal page objects — In frontend/test-e2e/: helper or extend SidebarLeft to open sidebar, click Create, then "New event" / "New organization" / "New group". Add modal page objects: CreateEventModal, CreateOrganizationModal, CreateGroupModal with locators and fill/submit methods. Document auth and test data (signed-in admin/member; seed orgs for event/group combobox).

Phase 2: Event create E2E

• Event create modal spec — Spec frontend/test-e2e/specs/all/create-flows/event-create-modal.spec.ts: modal opens, step 1 validation, step 1→2 flow, full flow (physical), full flow (online), Previous button, modal close. Before each: navigate, signed in, open sidebar, Create → "New event".

Phase 3: Organization create E2E

• Organization create modal spec — Spec frontend/test-e2e/specs/all/create-flows/organization-create-modal.spec.ts: modal opens, validation (empty details), full flow (details → location → submit). Before each: sidebar + Create + "New organization".

Phase 4: Group create E2E

• Group create modal spec — Spec frontend/test-e2e/specs/all/create-flows/group-create-modal.spec.ts: modal opens, validation (no org/name), full flow (details + organization → location → submit). Before each: Create + "New group".

Phase 5: Error and accessibility (optional)

• Error handling — In each create spec, add test that mocks create API to return 4xx/5xx; assert error toast and modal behavior (consistent with FAQ/Resource server-error specs).
• Accessibility — Run axe in modal when open (e.g. step 1 of each flow); add shared "create modal a11y" test or per-spec.