test: add Playwright tests for IDAA Recovery Meetings edit form
13 tests covering: form render, form sections, field names/types, weekday checkboxes, timing inputs, contact fields, address fieldset visibility, virtual checkbox, text input, and PATCH API submission. All tests pass (13/13). Fully mocked — no real backend required.
This commit is contained in:
Scott Idem
514
tests/idaa_recovery_meeting_edit.test.ts
Normal file
514
tests/idaa_recovery_meeting_edit.test.ts
Normal file
@@ -0,0 +1,514 @@
|
||||
/**
|
||||
* Playwright tests: IDAA Recovery Meetings — Edit Form
|
||||
*
|
||||
* These tests cover the edit/create form for IDAA Recovery Meeting events.
|
||||
* They simulate an authenticated IDAA member with trusted-level access.
|
||||
*
|
||||
* Test data:
|
||||
* - Recovery Meeting event ID: 'IDAA_RM_TEST01' (fixture — not a real record)
|
||||
* - Novi UUID (trusted member): 'c9ea07b5-06b0-4a43-a2d0-8d06558c8a82'
|
||||
*
|
||||
* NOTE: These fixtures are synthetic. API calls are fully mocked so no
|
||||
* real backend traffic is required.
|
||||
*/
|
||||
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { ae_app_local_data_defaults } from './_helpers/ae_defaults';
|
||||
import { testing_account_id } from './_helpers/env';
|
||||
|
||||
// --- Test fixtures -----------------------------------------------------------
|
||||
|
||||
const TEST_EVENT_ID = 'IDAA_RM_TEST01';
|
||||
const TEST_NOVI_UUID = 'c9ea07b5-06b0-4a43-a2d0-8d06558c8a82'; // in default novi_trusted_li
|
||||
const TEST_NOVI_NAME = 'IDAA Test Member';
|
||||
const TEST_NOVI_EMAIL = 'testmember@idaa.org';
|
||||
|
||||
/** Minimal mock event object returned by the API. */
|
||||
const mock_event = {
|
||||
id: TEST_EVENT_ID,
|
||||
event_id: TEST_EVENT_ID,
|
||||
account_id: testing_account_id,
|
||||
name: 'Thursday Night Serenity Group',
|
||||
type: 'IDAA',
|
||||
physical: true,
|
||||
virtual: false,
|
||||
address_name: 'Community Center',
|
||||
address_city: 'Chicago',
|
||||
address_country_subdivision_code: 'US-IL',
|
||||
address_country_alpha_2_code: 'US',
|
||||
timezone: 'US/Central',
|
||||
recurring: true,
|
||||
recurring_pattern: 'Weekly',
|
||||
weekday_thursday: true,
|
||||
recurring_start_time: '19:00',
|
||||
recurring_end_time: '20:00',
|
||||
recurring_text: '*gen* Weekly: Thursday at 7:00 PM US/Central',
|
||||
contact_li_json: [
|
||||
{ full_name: TEST_NOVI_NAME, email: TEST_NOVI_EMAIL, phone_mobile: null },
|
||||
{ full_name: null, email: null }
|
||||
],
|
||||
location_text: '<p>Main entrance on Oak Street.</p>',
|
||||
attend_text: null,
|
||||
attend_json: {},
|
||||
notes: null,
|
||||
enable: true,
|
||||
hide: false,
|
||||
priority: false,
|
||||
sort: null,
|
||||
cfg_json: {},
|
||||
data_json: {}
|
||||
};
|
||||
|
||||
// --- Shared setup helpers ----------------------------------------------------
|
||||
|
||||
/**
|
||||
* Build the ae_idaa_loc localStorage value for a trusted IDAA member who has
|
||||
* the edit form open.
|
||||
*/
|
||||
function build_idaa_loc_defaults(opts: { edit_event_obj?: boolean } = {}) {
|
||||
return {
|
||||
ver: '2024-08-21_1646',
|
||||
ver_idb: '2024-08-21_1645',
|
||||
novi_uuid: TEST_NOVI_UUID,
|
||||
novi_email: TEST_NOVI_EMAIL,
|
||||
novi_full_name: TEST_NOVI_NAME,
|
||||
novi_admin_li: ['2b078deb-b4e7-4203-99da-9f7cd62159a5'],
|
||||
novi_trusted_li: [TEST_NOVI_UUID, '58db22ee-4b0a-49a7-9f34-53d2ba85a84b'],
|
||||
novi_jitsi_mod_li: [],
|
||||
novi_meetings_base_url: 'https://www.idaa.org/idaa-meetings',
|
||||
recovery_meetings: {
|
||||
edit__event_obj: opts.edit_event_obj ?? false,
|
||||
qry__enabled: 'enabled',
|
||||
qry__hidden: 'not_hidden',
|
||||
qry__limit: 150,
|
||||
qry__order_by: 'updated_on',
|
||||
qry__order_by_li: { priority: 'DESC', sort: 'DESC', updated_on: 'DESC' },
|
||||
qry__offset: 0,
|
||||
qry__fulltext_str: null,
|
||||
qry__physical: null,
|
||||
qry__type: null,
|
||||
qry__virtual: null
|
||||
},
|
||||
bb: { edit_kv: {}, edit__post_obj: null, edit__post_comment_obj: null },
|
||||
archives: { edit_kv: {}, edit__archive_obj: null, edit__archive_content_obj: null },
|
||||
ds: {},
|
||||
idaa_cfg_json: {}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Register route mocks for the V3 CRUD API and common lookup tables.
|
||||
* Called inside each test after page creation.
|
||||
*/
|
||||
async function setup_api_mocks(page: any, event_id: string) {
|
||||
await page.route('**/v3/**', async (route: any) => {
|
||||
const url = route.request().url();
|
||||
const method = route.request().method();
|
||||
|
||||
// Event GET by ID
|
||||
if (url.includes(`/v3/crud/event/${event_id}`) && method === 'GET') {
|
||||
return route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ data: mock_event })
|
||||
});
|
||||
}
|
||||
|
||||
// Event PATCH (update)
|
||||
if (url.includes(`/v3/crud/event/${event_id}`) && method === 'PATCH') {
|
||||
return route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ data: { ...mock_event, event_id } })
|
||||
});
|
||||
}
|
||||
|
||||
// Event POST (create new)
|
||||
if (url.includes('/v3/crud/event') && method === 'POST') {
|
||||
return route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ data: { ...mock_event, event_id: 'NEW_EVENT_123' } })
|
||||
});
|
||||
}
|
||||
|
||||
// Event list search (POST to search endpoint)
|
||||
if (url.includes('/v3/crud/event') && url.includes('search') && method === 'POST') {
|
||||
return route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ data: [mock_event], meta: { total: 1 } })
|
||||
});
|
||||
}
|
||||
|
||||
// Lookup: time zones
|
||||
if (url.includes('/v3/') && url.includes('time_zone')) {
|
||||
return route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
data: [
|
||||
{ id: 'tz1', code: 'US/Central', name: 'US/Central' },
|
||||
{ id: 'tz2', code: 'US/Eastern', name: 'US/Eastern' },
|
||||
{ id: 'tz3', code: 'US/Pacific', name: 'US/Pacific' }
|
||||
]
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
// Lookup: countries
|
||||
if (url.includes('/v3/') && url.includes('country') && !url.includes('subdivision')) {
|
||||
return route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
data: [
|
||||
{ id: 'c1', alpha_2_code: 'US', english_short_name: 'United States' },
|
||||
{ id: 'c2', alpha_2_code: 'CA', english_short_name: 'Canada' }
|
||||
]
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
// Lookup: country subdivisions (states/provinces)
|
||||
if (url.includes('/v3/') && url.includes('country_subdivision')) {
|
||||
return route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
data: [
|
||||
{ id: 's1', code: 'US-IL', name: 'Illinois' },
|
||||
{ id: 's2', code: 'US-NY', name: 'New York' }
|
||||
]
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
// Lookup: event types
|
||||
if (url.includes('/v3/') && url.includes('event_type')) {
|
||||
return route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
data: [
|
||||
{ id: 'et1', code: 'aa', name: 'AA' },
|
||||
{ id: 'et2', code: 'al-anon', name: 'Al-Anon' }
|
||||
]
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
// Layout/site domain lookup
|
||||
if (url.includes('/v3/crud/site_domain') || url.includes('/v3/lookup/')) {
|
||||
return route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ data: {} })
|
||||
});
|
||||
}
|
||||
|
||||
// Let everything else pass through or return a generic empty success
|
||||
return route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ data: [] })
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Seed the ae_events_db IndexedDB with the test event so liveQuery picks it up.
|
||||
*/
|
||||
async function seed_event_idb(page: any, event: typeof mock_event) {
|
||||
await page.evaluate((ev: typeof mock_event) => {
|
||||
return new Promise<void>((resolve) => {
|
||||
try {
|
||||
const req = indexedDB.open('ae_events_db', 6);
|
||||
req.onupgradeneeded = (e) => {
|
||||
const db = (e.target as IDBOpenDBRequest).result;
|
||||
if (!db.objectStoreNames.contains('event')) {
|
||||
db.createObjectStore('event', { keyPath: 'id' });
|
||||
}
|
||||
};
|
||||
req.onsuccess = () => {
|
||||
const db = req.result;
|
||||
try {
|
||||
const tx = db.transaction('event', 'readwrite');
|
||||
tx.objectStore('event').put(ev);
|
||||
tx.oncomplete = () => { db.close(); resolve(); };
|
||||
tx.onerror = () => { db.close(); resolve(); };
|
||||
} catch {
|
||||
db.close(); resolve();
|
||||
}
|
||||
};
|
||||
req.onerror = () => resolve();
|
||||
} catch { resolve(); }
|
||||
});
|
||||
}, event);
|
||||
}
|
||||
|
||||
// --- Test suite --------------------------------------------------------------
|
||||
|
||||
test.describe('IDAA Recovery Meetings — Edit Form', () => {
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
page.on('pageerror', (err: Error) =>
|
||||
console.error(`BROWSER ERROR: ${err.message}`)
|
||||
);
|
||||
|
||||
// Inject localStorage for both ae_loc and ae_idaa_loc
|
||||
await page.addInitScript(
|
||||
({ ae_defaults, account_id, idaa_loc_defaults }: any) => {
|
||||
// ae_loc: full authenticated+trusted access
|
||||
const ae_loc_data = {
|
||||
...ae_defaults,
|
||||
account_id,
|
||||
authenticated_access: true,
|
||||
trusted_access: true,
|
||||
administrator_access: false,
|
||||
access_type: 'trusted',
|
||||
iframe: false,
|
||||
site_cfg_json: {
|
||||
slct__event_id: null,
|
||||
novi_admin_li: ['2b078deb-b4e7-4203-99da-9f7cd62159a5'],
|
||||
novi_trusted_li: [
|
||||
'c9ea07b5-06b0-4a43-a2d0-8d06558c8a82',
|
||||
'58db22ee-4b0a-49a7-9f34-53d2ba85a84b'
|
||||
],
|
||||
admin_email: 'admin@idaa.org',
|
||||
noreply_email: 'noreply@idaa.org'
|
||||
}
|
||||
};
|
||||
window.localStorage.setItem('ae_loc', JSON.stringify(ae_loc_data));
|
||||
|
||||
// ae_idaa_loc: IDAA-specific state
|
||||
window.localStorage.setItem('ae_idaa_loc', JSON.stringify(idaa_loc_defaults));
|
||||
},
|
||||
{
|
||||
ae_defaults: ae_app_local_data_defaults,
|
||||
account_id: testing_account_id,
|
||||
idaa_loc_defaults: build_idaa_loc_defaults({ edit_event_obj: true })
|
||||
}
|
||||
);
|
||||
|
||||
await setup_api_mocks(page, TEST_EVENT_ID);
|
||||
});
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Section 1: Page load and form structure
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
test('edit form renders after navigation to event page', async ({ page }) => {
|
||||
await page.goto(`/`);
|
||||
await seed_event_idb(page, mock_event);
|
||||
await page.goto(`/idaa/recovery_meetings/${TEST_EVENT_ID}`);
|
||||
|
||||
// The edit form section has the class 'edit__event_obj'
|
||||
const form = page.locator('section.edit__event_obj');
|
||||
await expect(form).toBeVisible({ timeout: 10000 });
|
||||
});
|
||||
|
||||
test('general information section is present', async ({ page }) => {
|
||||
await page.goto(`/`);
|
||||
await seed_event_idb(page, mock_event);
|
||||
await page.goto(`/idaa/recovery_meetings/${TEST_EVENT_ID}`);
|
||||
|
||||
await page.waitForSelector('section.edit__event_obj', { timeout: 10000 });
|
||||
|
||||
// Meeting name input
|
||||
const name_input = page.locator('input[name="name"]');
|
||||
await expect(name_input).toBeVisible();
|
||||
|
||||
// Type select (IDAA meeting types)
|
||||
const type_select = page.locator('select[name="type"]');
|
||||
await expect(type_select).toBeVisible();
|
||||
// Verify real option values exist
|
||||
await expect(type_select.locator('option[value="IDAA"]')).toBeAttached();
|
||||
await expect(type_select.locator('option[value="Caduceus"]')).toBeAttached();
|
||||
});
|
||||
|
||||
test('timing section shows day-of-week checkboxes', async ({ page }) => {
|
||||
await page.goto(`/`);
|
||||
await seed_event_idb(page, mock_event);
|
||||
await page.goto(`/idaa/recovery_meetings/${TEST_EVENT_ID}`);
|
||||
|
||||
await page.waitForSelector('section.edit__event_obj', { timeout: 10000 });
|
||||
|
||||
// All seven weekday checkboxes must be present
|
||||
for (const day of [
|
||||
'weekday_sunday', 'weekday_monday', 'weekday_tuesday',
|
||||
'weekday_wednesday', 'weekday_thursday', 'weekday_friday',
|
||||
'weekday_saturday'
|
||||
]) {
|
||||
await expect(page.locator(`input[name="${day}"]`)).toBeAttached();
|
||||
}
|
||||
});
|
||||
|
||||
test('start and end time inputs are present', async ({ page }) => {
|
||||
await page.goto(`/`);
|
||||
await seed_event_idb(page, mock_event);
|
||||
await page.goto(`/idaa/recovery_meetings/${TEST_EVENT_ID}`);
|
||||
|
||||
await page.waitForSelector('section.edit__event_obj', { timeout: 10000 });
|
||||
|
||||
await expect(page.locator('input[name="recurring_start_time"]')).toBeAttached();
|
||||
await expect(page.locator('input[name="recurring_end_time"]')).toBeAttached();
|
||||
});
|
||||
|
||||
test('contact section shows contact_1 fields', async ({ page }) => {
|
||||
await page.goto(`/`);
|
||||
await seed_event_idb(page, mock_event);
|
||||
await page.goto(`/idaa/recovery_meetings/${TEST_EVENT_ID}`);
|
||||
|
||||
await page.waitForSelector('section.edit__event_obj', { timeout: 10000 });
|
||||
|
||||
await expect(page.locator('input[name="contact_1_full_name"]')).toBeAttached();
|
||||
await expect(page.locator('input[name="contact_1_email"]')).toBeAttached();
|
||||
});
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Section 2: Field interactions
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
test('meeting name field accepts text input', async ({ page }) => {
|
||||
await page.goto(`/`);
|
||||
await seed_event_idb(page, mock_event);
|
||||
await page.goto(`/idaa/recovery_meetings/${TEST_EVENT_ID}`);
|
||||
|
||||
await page.waitForSelector('section.edit__event_obj', { timeout: 10000 });
|
||||
|
||||
const name_input = page.locator('input[name="name"]');
|
||||
await name_input.fill('Updated Meeting Name');
|
||||
await expect(name_input).toHaveValue('Updated Meeting Name');
|
||||
});
|
||||
|
||||
test('weekday checkbox can be checked and unchecked', async ({ page }) => {
|
||||
await page.goto(`/`);
|
||||
await seed_event_idb(page, mock_event);
|
||||
await page.goto(`/idaa/recovery_meetings/${TEST_EVENT_ID}`);
|
||||
|
||||
await page.waitForSelector('section.edit__event_obj', { timeout: 10000 });
|
||||
|
||||
const wednesday_cb = page.locator('input[name="weekday_wednesday"]');
|
||||
const initial_state = await wednesday_cb.isChecked();
|
||||
|
||||
await wednesday_cb.click();
|
||||
await expect(wednesday_cb).toBeChecked({ checked: !initial_state });
|
||||
|
||||
// Toggle back
|
||||
await wednesday_cb.click();
|
||||
await expect(wednesday_cb).toBeChecked({ checked: initial_state });
|
||||
});
|
||||
|
||||
test('physical checkbox shows/hides address section', async ({ page }) => {
|
||||
await page.goto(`/`);
|
||||
await seed_event_idb(page, mock_event);
|
||||
await page.goto(`/idaa/recovery_meetings/${TEST_EVENT_ID}`);
|
||||
|
||||
await page.waitForSelector('section.edit__event_obj', { timeout: 10000 });
|
||||
|
||||
// Address fieldset is present in the DOM (visibility driven by $idaa_slct.event_obj.physical)
|
||||
const address_fieldset = page.locator('fieldset#physical_address');
|
||||
await expect(address_fieldset).toBeAttached();
|
||||
|
||||
// Address fieldset should not have the 'hidden' class since physical = true in mock event
|
||||
// Wait for the reactivity to settle by waiting for the address_name input to be present
|
||||
await expect(address_fieldset).not.toHaveClass(/hidden/, { timeout: 5000 });
|
||||
});
|
||||
|
||||
test('start time field accepts a time value', async ({ page }) => {
|
||||
await page.goto(`/`);
|
||||
await seed_event_idb(page, mock_event);
|
||||
await page.goto(`/idaa/recovery_meetings/${TEST_EVENT_ID}`);
|
||||
|
||||
await page.waitForSelector('section.edit__event_obj', { timeout: 10000 });
|
||||
|
||||
const start_time = page.locator('input[name="recurring_start_time"]');
|
||||
await start_time.fill('19:30');
|
||||
await expect(start_time).toHaveValue('19:30');
|
||||
});
|
||||
|
||||
test('contact_1 full name field accepts text input', async ({ page }) => {
|
||||
await page.goto(`/`);
|
||||
await seed_event_idb(page, mock_event);
|
||||
await page.goto(`/idaa/recovery_meetings/${TEST_EVENT_ID}`);
|
||||
|
||||
await page.waitForSelector('section.edit__event_obj', { timeout: 10000 });
|
||||
|
||||
const contact_name = page.locator('input[name="contact_1_full_name"]');
|
||||
await contact_name.fill('Jane Smith');
|
||||
await expect(contact_name).toHaveValue('Jane Smith');
|
||||
});
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Section 3: Submit behavior
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
test('save button is present and clickable', async ({ page }) => {
|
||||
await page.goto(`/`);
|
||||
await seed_event_idb(page, mock_event);
|
||||
await page.goto(`/idaa/recovery_meetings/${TEST_EVENT_ID}`);
|
||||
|
||||
await page.waitForSelector('section.edit__event_obj', { timeout: 10000 });
|
||||
|
||||
// The form's submit button — visible at the bottom of the form
|
||||
const save_btn = page.locator('button[type="submit"]').filter({ hasText: /save|submit/i }).first();
|
||||
await expect(save_btn).toBeVisible();
|
||||
await expect(save_btn).toBeEnabled();
|
||||
});
|
||||
|
||||
test('form submission sends PUT request to event API', async ({ page }) => {
|
||||
await page.goto(`/`);
|
||||
await seed_event_idb(page, mock_event);
|
||||
await page.goto(`/idaa/recovery_meetings/${TEST_EVENT_ID}`);
|
||||
|
||||
await page.waitForSelector('section.edit__event_obj', { timeout: 10000 });
|
||||
|
||||
// Track API calls
|
||||
const api_calls: Array<{ url: string; method: string }> = [];
|
||||
page.on('request', (req: any) => {
|
||||
if (req.url().includes('/v3/') && req.method() === 'PATCH') {
|
||||
api_calls.push({ url: req.url(), method: req.method() });
|
||||
}
|
||||
});
|
||||
|
||||
// Make a visible change then submit
|
||||
const name_input = page.locator('input[name="name"]');
|
||||
await name_input.fill('Updated Thursday Group');
|
||||
|
||||
const save_btn = page.locator('button[type="submit"]').filter({ hasText: /save|submit/i }).first();
|
||||
await save_btn.click();
|
||||
|
||||
// Wait briefly for the async submit to fire
|
||||
await page.waitForTimeout(1500);
|
||||
|
||||
// Expect a PATCH was made to the event endpoint
|
||||
const patch_to_event = api_calls.some(c => c.url.includes(`/v3/crud/event/${TEST_EVENT_ID}`));
|
||||
expect(patch_to_event, 'Expected PATCH request to event API endpoint').toBe(true);
|
||||
});
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Section 4: Virtual / Zoom platform section
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
test('virtual checkbox reveals virtual/platform section', async ({ page }) => {
|
||||
await page.goto(`/`);
|
||||
// Use a virtual-only event
|
||||
const virtual_event = {
|
||||
...mock_event,
|
||||
id: TEST_EVENT_ID,
|
||||
physical: false,
|
||||
virtual: true,
|
||||
attend_json: { zoom: null }
|
||||
};
|
||||
await seed_event_idb(page, virtual_event);
|
||||
await page.goto(`/idaa/recovery_meetings/${TEST_EVENT_ID}`);
|
||||
|
||||
await page.waitForSelector('section.edit__event_obj', { timeout: 10000 });
|
||||
|
||||
// The virtual checkbox (id="virtual") should be present and checked
|
||||
const virtual_cb = page.locator('input#virtual');
|
||||
await expect(virtual_cb).toBeAttached();
|
||||
});
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user