OSIT-AE-App-Svelte/tests/event_badge_data_integrity.test.ts

import { test, expect } from '@playwright/test';
import { ae_app_local_data_defaults } from './_helpers/ae_defaults';
import { testing_event_id, testing_account_id } from './_helpers/env';

const event_id = testing_event_id;
const event_badge_id = 'UIJT-73-63-61'; // Per README test data
const event_badge_template_id = 'jgfixEpYp1B'; // Per README test data

test.describe('Badge Data Integrity & Field Mapping', () => {
  test.beforeEach(async ({ page }) => {
    page.on('pageerror', (err) => console.error(`BROWSER ERROR: ${err.message}`));
    page.on('console', (msg) => {
      if (msg.type() === 'error' || msg.type() === 'warning')
        console.error(`BROWSER [${msg.type().toUpperCase()}]: ${msg.text()}`);
    });

    await page.addInitScript(
      ({ defaults, event_id, account_id }) => {
        const testData = {
          ...defaults,
          account_id: account_id,
          manager_access: true,
          administrator_access: true,
          authenticated_access: true,
          edit_mode: true,
          person_id: 'test-person-1',
          user: { id: 'test-person-1' },
          mod: { ...defaults.mod, events: { ...defaults.mod.events, event_id: event_id } }
        };
        window.localStorage.setItem('ae_loc', JSON.stringify(testData));
      },
      { defaults: ae_app_local_data_defaults, event_id: event_id, account_id: testing_account_id }
    );

    // Mock V3 API with realistic enriched responses
    await page.route('**/v3/**', async (route) => {
      const req = route.request();
      const url = req.url();
      const method = req.method();

      if (url.includes('site_domain/search')) {
        return route.fulfill({
          status: 200,
          contentType: 'application/json',
          body: JSON.stringify({ data: [{ id: 'td', site_id: 'ts' }] })
        });
      }

      if (url.includes(`/v3/crud/event/${event_id}`) && method === 'GET') {
        return route.fulfill({
          status: 200,
          contentType: 'application/json',
          body: JSON.stringify({
            data: {
              id: event_id, // Why are both the id and event_id fields being set?
              event_id: event_id, // Why are both the id and event_id fields being set?
              name: 'Badge Integrity Test Event',
              cfg_json: {},
              mod_pres_mgmt_json: {},
              mod_badges_json: {},
              mod_abstracts_json: {},
              mod_exhibits_json: {},
              mod_meetings_json: {}
            }
          })
        });
      }

      // Badge search — IMPORTANT: search_ae_obj_v3 uses FLAT path /v3/crud/event_badge/search
      // NOT nested /v3/crud/event/{id}/event_badge/search — see api_post__crud_search_v3.ts
      if (url.includes('/v3/crud/event_badge/search') && method === 'POST') {
        return route.fulfill({
          status: 200,
          contentType: 'application/json',
          body: JSON.stringify({
            data: [
              {
                id: event_badge_id,
                event_badge_id: event_badge_id,
                // _random fields required by Dexie — without these the object
                // is silently dropped with "Object is missing a valid ID"
                event_badge_id_random: event_badge_id,
                id_random: event_badge_id,
                event_id: event_id,
                event_id_random: event_id,
                event_badge_template_id: event_badge_template_id,
                full_name: 'Jane Smith', // Computed from given_name + family_name
                full_name_override: 'Jane Smith',
                given_name: 'Jane',
                family_name: 'Smith',
                email: 'jane@example.com',
                badge_type_code: 'attendee',
                person_id: 'person-xyz',
                // API enriched fields (simulating joins)
                person_given_name: 'Jane',
                person_family_name: 'Smith',
                person_email: 'jane@example.com',
                event_name: 'Badge Integrity Test Event',
                badge_template_name: 'Standard Template 2026',
                enable: true,
                hide: false,
                priority: 0,
                sort: 0,
                created_on: '2026-02-15T09:00:00Z',
                updated_on: '2026-02-25T14:20:00Z',
                tmp_sort_1: '0_0_0_2026-02-15T09:00:00Z',
                tmp_sort_2: '0_0_0__2026-02-15T09:00:00Z'
              }
            ]
          })
        });
      }

      // Badge template list — uses FLAT path /v3/crud/event_badge_template/?for_obj_id=...
      // NOT nested /v3/crud/event/{id}/event_badge_template/ — see get_ae_obj_li_v3()
      if (url.includes('/v3/crud/event_badge_template/') && url.includes('for_obj_id') && method === 'GET') {
        return route.fulfill({
          status: 200,
          contentType: 'application/json',
          body: JSON.stringify({
            data: [
              {
                id: event_badge_template_id,
                event_badge_template_id: event_badge_template_id,
                event_id: event_id,
                name: 'Standard Template 2026',
                header_path: '/images/header.png',
                logo_path: '/images/logo.png',
                header_row_1: 'Welcome to',
                header_row_2: 'Our Event 2026',
                show_qr_front: true,
                show_qr_back: true,
                wireless_ssid: 'EventWiFi',
                wireless_password: 'Password123',
                ticket_1_text: 'Banquet Access',
                ticket_2_text: 'Workshop Pass',
                ticket_3_text: 'VIP Lounge',
                enable: true,
                hide: false
              }
            ]
          })
        });
      }

      // Badge template GET by ID
      if (url.includes(`/v3/crud/event_badge_template/${event_badge_template_id}`) && method === 'GET') {
        return route.fulfill({
          status: 200,
          contentType: 'application/json',
          body: JSON.stringify({
            data: {
              id: event_badge_template_id,
              event_badge_template_id: event_badge_template_id,
              event_id: event_id,
              name: 'Standard Template 2026',
              header_path: '/images/header.png',
              logo_path: '/images/logo.png',
              header_row_1: 'Welcome to',
              header_row_2: 'Our Event 2026',
              show_qr_front: true,
              show_qr_back: true,
              wireless_ssid: 'EventWiFi',
              wireless_password: 'Password123',
              ticket_1_text: 'Banquet Access',
              ticket_2_text: 'Workshop Pass',
              ticket_3_text: 'VIP Lounge'
            }
          })
        });
      }

      return route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({ data: [] })
      });
    });
  });

  test('Badge list loads without crashing', async ({ page }) => {
    await page.goto(`/events/${event_id}/badges`);

    await page.waitForResponse((r) =>
      r.url().includes('event_badge/search') && r.status() === 200
    );

    // Verify page loads (search interface or content)
    const page_body = await page.textContent('body');
    expect(page_body).toBeTruthy();

    // Verify enriched data displays somewhere on the page
    await expect(page.locator('text=/Jane Smith|jane@example/i')).toBeVisible({ timeout: 10000 });

    // Verify no broken field references
    expect(page_body).not.toContain('undefined');
    expect(page_body).not.toContain('NaN undefined');
    expect(page_body).not.toContain('[object Object]');
  });

  test('Badge template list loads and displays all templates', async ({ page }) => {
    await page.goto(`/events/${event_id}/templates`);

    await page.waitForResponse((r) =>
      r.url().includes('event_badge_template') && r.status() === 200
    );

    // Verify template name displays
    await expect(page.locator('text=/Standard Template 2026/i')).toBeVisible({ timeout: 5000 });

    // Verify action buttons are present
    const edit_btn = page.getByRole('button', { name: /edit/i });
    const delete_btn = page.getByRole('button', { name: /delete/i });

    await expect(edit_btn.first()).toBeVisible({ timeout: 3000 });
    await expect(delete_btn.first()).toBeVisible({ timeout: 3000 });
  });

  test('Badge template form fields render correctly', async ({ page }) => {
    await page.goto(`/events/${event_id}/templates`);

    // Click "Add New Template" button
    const add_btn = page.getByRole('button', { name: /Add New Template/i });
    await add_btn.click();

    // Verify form modal opens
    const form = page.locator('form, [role="dialog"]');
    await expect(form.first()).toBeVisible({ timeout: 3000 });

    // Verify key form fields exist
    await expect(page.locator('label:has-text("Name"), input[name="name"], input[placeholder*="name" i]')).toBeVisible({ timeout: 2000 });
  });

  test('Badge template values persist in form when editing', async ({ page }) => {
    await page.goto(`/events/${event_id}/templates`);

    await page.waitForResponse((r) =>
      r.url().includes('event_badge_template') && r.status() === 200
    );

    // Click Edit on first template
    const edit_btn = page.getByRole('button', { name: /edit/i }).first();
    await edit_btn.click();

    // Wait for form to load template data
    await page.waitForTimeout(1000);

    // Verify template name field is populated.
    // NOTE: Use getByLabel(), not input[value*=...] — CSS attribute selectors check
    // the HTML attribute, but Svelte bind:value sets the DOM property only.
    const name_input = page.getByLabel('Template Name');
    await expect(name_input).toBeVisible({ timeout: 3000 });

    const input_value = await name_input.inputValue();
    expect(input_value).not.toBe('');
    expect(input_value).toContain('2026');
  });

  test('Electron bridge compatibility (graceful degradation in browser)', async ({ page, context }) => {
    // Test that the app doesn't break when window.aetherNative is undefined
    // This simulates browser mode vs Electron native mode

    await page.addInitScript(() => {
      // Explicitly ensure aetherNative is NOT defined (browser mode)
      (window as any).aetherNative = undefined;
    });

    await page.goto(`/events/${event_id}/badges`);

    await page.waitForResponse((r) =>
      r.url().includes('event_badge/search') && r.status() === 200,
      { timeout: 10000 }
    );

    // Wait a bit for page to render
    await page.waitForTimeout(2000);

    // Verify page still loads correctly without Electron bridge
    const body_content = await page.textContent('body');
    expect(body_content).toBeTruthy();

    // Should not have unhandled errors about missing aetherNative
    expect(body_content).not.toContain('aetherNative is not defined');
    expect(body_content).not.toContain('Cannot read');
  });

  test('Badge field processor handles missing optional fields', async ({ page }) => {
    // Override mock to return minimal badge data (missing enriched fields)
    await page.route('**/v3/crud/event/*/event_badge/search', async (route) => {
      await route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({
          data: [
            {
              id: event_badge_id,
              event_badge_id: event_badge_id,
              // _random fields are required for Dexie to accept the object
              event_badge_id_random: event_badge_id,
              id_random: event_badge_id,
              event_id: event_id,
              event_id_random: event_id,
              full_name_override: 'Minimal Badge',
              enable: true,
              priority: 0,
              sort: 0,
              tmp_sort_1: '0_0_0_1970-01-01T00:00:00Z',
              tmp_sort_2: '0_0_0__1970-01-01T00:00:00Z'
              // Missing intentionally: email, person_id, template_id, enriched fields
            }
          ]
        })
      });
    });

    await page.goto(`/events/${event_id}/badges`);

    await page.waitForResponse((r) =>
      r.url().includes('event_badge/search') && r.status() === 200,
      { timeout: 10000 }
    );

    // Wait for render
    await page.waitForTimeout(1000);

    // Should still render without crashing
    const body_text = await page.textContent('body');

    // Should not show "undefined" for missing fields in rendered badge rows.
    // Note: Avoid checking the full body for 'null' — the debug panel footer
    // can contain that string legitimately. Scope to badge list area instead.
    expect(body_text).not.toContain('undefined');
    expect(body_text).not.toContain('NaN undefined');
    expect(body_text).not.toContain('[object Object]');
  });
});