crowd-funder-for-time-pwa/test-playwright/40-add-contact.spec.ts

/**
 * Contact Management and Gift Recording Test Suite
 * 
 * This test suite verifies the contact management and gift recording functionality 
 * of the application. It includes tests for adding contacts, recording gifts, 
 * and confirming gifts.
 * 
 * Key Components:
 * 
 * 1. Constants
 *    - ALERT_TIMEOUT: For alert-related operations (5000ms)
 *    - NETWORK_TIMEOUT: For network operations (10000ms)
 *    - ANIMATION_TIMEOUT: For animation completion (1000ms)
 * 
 * 2. Main Test Cases
 *    - "Add contact, record gift, confirm gift"
 *      Tests complete flow of adding contact and managing gifts
 *    - "Without being registered, add contacts without registration"
 *      Verifies contact addition without registration
 *    - "Add contact, copy details, delete, and import"
 *      Tests contact import/export functionality
 * 
 * 3. Helper Functions
 *    - generateRandomString: Creates unique test identifiers
 *    - dismissAlertWithRetry: Handles alert dismissal with retry logic
 *    - recordGift: Encapsulates gift recording workflow
 *    - confirmGift: Manages gift confirmation process
 * 
 * Best Practices:
 * - Comprehensive error handling with try-catch blocks
 * - Random test data generation
 * - Consistent verification steps
 * - Page object patterns for maintainability
 * - Debug logging support
 * - Cross-browser compatibility considerations
 * 
 * @file 40-add-contact.spec.ts
 */

import { test, expect, Page } from '@playwright/test';
import { importUser } from './testUtils';

// Add timeout constants
const ALERT_TIMEOUT = 5000;
const NETWORK_TIMEOUT = 10000;
const ANIMATION_TIMEOUT = 1000;

test('Add contact, record gift, confirm gift', async ({ page }) => {
  try {
    // Generate test data with error checking
    const randomString = await generateRandomString(16);
    const randomNonZeroNumber = Math.floor(Math.random() * 99) + 1;
    if (randomNonZeroNumber <= 0) throw new Error('Failed to generate valid number');

    const finalTitle = `Gift ${randomString}`;
    const contactName = 'Contact #000 renamed';
    const userName = 'User #000';

    // Import user with error handling
    try {
      await importUser(page, '01');
    } catch (e) {
      throw new Error(`Failed to import user: ${e instanceof Error ? e.message : String(e)}`);
    }

    // Add new contact with verification
    await page.goto('./contacts');
    await page.getByPlaceholder('URL or DID, Name, Public Key').fill(`did:ethr:0x0000694B58C2cC69658993A90D3840C560f2F51F, ${userName}`);
    await page.locator('button > svg.fa-plus').click();
    
    // Handle the registration alert properly
    await handleRegistrationAlert(page);

    // Add a small delay to ensure UI is stable
    await page.waitForTimeout(500);

    // Verify contact was added and is clickable
    const contactElement = page.locator('li.border-b');
    await expect(contactElement).toContainText(userName, { timeout: ANIMATION_TIMEOUT });

    // Ensure no alerts are present before clicking
    await expect(page.locator('div[role="alert"]')).toBeHidden();

    // Click the info icon with force option if needed
    await page.locator(`li[data-testid="contactListItem"] h2:has-text("${userName}") + span svg.fa-circle-info`).click({ force: true });
    
    // Wait for navigation to contact details page
    await expect(page.getByRole('heading', { name: 'Identifier Details' })).toBeVisible({ timeout: NETWORK_TIMEOUT });

    // Click edit button and wait for navigation
    await page.locator('h2 svg.fa-pen').click();

    // Debug: Log all headings on the page
    const headings = await page.locator('h1, h2, h3, h4, h5, h6').allInnerTexts();
    console.log('Available headings:', headings);

    // Then look for the actual heading we expect to see
    await expect(page.getByRole('heading', { name: 'Contact Methods' })).toBeVisible({ timeout: NETWORK_TIMEOUT });

    // Now look for the input field
    const nameInput = page.getByTestId('contactName').locator('input');
    await expect(nameInput).toBeVisible({ timeout: NETWORK_TIMEOUT });
    await expect(nameInput).toHaveValue(userName);
    
    // Perform rename with verification
    await nameInput.fill(contactName);
    await page.getByRole('button', { name: 'Save' }).click();

    // Wait for save to complete and verify new name
    await expect(page.locator('h2', { hasText: contactName })).toBeVisible({ timeout: NETWORK_TIMEOUT });

    // Record gift with error handling
    try {
      await recordGift(page, contactName, finalTitle, randomNonZeroNumber);
    } catch (e) {
      throw new Error(`Failed to record gift: ${e instanceof Error ? e.message : String(e)}`);
    }

    // Switch users with verification
    try {
      await switchToUser00(page);
    } catch (e) {
      throw new Error(`Failed to switch users: ${e instanceof Error ? e.message : String(e)}`);
    }

    // Confirm gift with error handling
    await confirmGift(page, finalTitle);

  } catch (error) {
    // Add more context to the error
    if (error instanceof Error && error.message.includes('Edit Contact')) {
      console.error('Failed to find Edit page heading. Available elements:', await page.locator('*').allInnerTexts());
    }
    throw error;
  }
});

// Helper functions
async function generateRandomString(length: number): Promise<string> {
  let result = Math.random().toString(36).substring(2, 18);
  while (result.length < length) {
    result += Math.random().toString(36).substring(2, 18);
  }
  return result.substring(0, length);
}

async function dismissAlertWithRetry(page: Page, maxRetries = 3) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      await page.locator('div[role="alert"] button > svg.fa-xmark').click();
      await expect(page.locator('div[role="alert"]')).toBeHidden({ timeout: ANIMATION_TIMEOUT });
      return;
    } catch (e) {
      if (i === maxRetries - 1) throw e;
      await page.waitForTimeout(1000); // Wait before retry
    }
  }
}

async function recordGift(page: Page, contactName: string, title: string, amount: number) {
  // First navigate to home
  await page.goto('./');
  await page.getByTestId('closeOnboardingAndFinish').click();
  
  // Click on the contact name and wait for navigation
  await page.getByRole('heading', { name: contactName }).click();
  await expect(page.getByPlaceholder('What was given')).toBeVisible({ timeout: NETWORK_TIMEOUT });
  
  // Fill in gift details
  await page.getByPlaceholder('What was given').fill(title);
  await page.getByRole('spinbutton').fill(amount.toString());
  await page.getByRole('button', { name: 'Sign & Send' }).click();
  
  // Wait for confirmation
  await expect(page.getByText('That gift was recorded.')).toBeVisible({ timeout: NETWORK_TIMEOUT });
  await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss info alert
}

async function switchToUser00(page: Page) {
  await page.goto('./account');
  await page.getByRole('heading', { name: 'Advanced' }).click();
  await page.getByRole('link', { name: 'Switch Identifier' }).click();
  await page.getByRole('link', { name: 'Add Another Identity…' }).click();
  await page.getByText('You have a seed').click();
  
  const seedPhrase = 'rigid shrug mobile smart veteran half all pond toilet brave review universe ship congress found yard skate elite apology jar uniform subway slender luggage';
  await page.getByPlaceholder('Seed Phrase').fill(seedPhrase);
  await page.getByRole('button', { name: 'Import' }).click();
  
  await expect(page.getByRole('code')).toContainText('did:ethr:0x0000694B58C2cC69658993A90D3840C560f2F51F', 
    { timeout: NETWORK_TIMEOUT });
}

async function confirmGift(page: Page, title: string) {
  await page.goto('./');
  await page.getByTestId('closeOnboardingAndFinish').click();
  
  // Wait for the gift to be visible and clickable
  const giftElement = page.locator('li').filter({ hasText: title });
  await expect(giftElement).toBeVisible({ timeout: NETWORK_TIMEOUT });
  
  // Route all API requests to port 3000
  await page.route('**/api/**', async route => {
    const url = new URL(route.request().url());
    if (url.port === '8081') {
      const newUrl = `http://localhost:3000${url.pathname}${url.search}`;
      console.log(`Redirecting ${url.toString()} to ${newUrl}`);
      route.continue({ url: newUrl });
    } else {
      route.continue();
    }
  });
  
  await giftElement.locator('a').click();
  
  // Wait for both load states with a try-catch
  try {
    await Promise.all([
      page.waitForLoadState('networkidle', { timeout: NETWORK_TIMEOUT }),
      page.waitForLoadState('domcontentloaded', { timeout: NETWORK_TIMEOUT })
    ]);
  } catch (e) {
    console.log('Load state error:', e.message);
  }
  
  // Debug: Log all headings and content
  const headings = await page.locator('h1, h2, h3, h4, h5, h6').allInnerTexts();
  console.log('Gift page headings:', headings);
  
  // Log the current URL
  console.log('Current URL:', page.url());
  
  // Check for error message and retry if needed
  const errorMessage = page.getByText('Something went wrong retrieving claim data');
  const isError = await errorMessage.isVisible();
  
  if (isError) {
    console.log('Error detected, will retry');
    await page.waitForTimeout(2000); // Increased delay
    await page.goto('./');
    await page.waitForTimeout(2000); // Increased delay
    await giftElement.locator('a').click();
    await page.waitForLoadState('networkidle', { timeout: NETWORK_TIMEOUT });
  }

  // Wait for either the confirm link or button with increased timeout
  const confirmLink = page.getByTestId('confirmGiftLink');
  const confirmButton = page.getByTestId('confirmGiftButton');
  
  console.log('Waiting for confirm element to be visible...');
  
  try {
    // Try both selectors with a longer timeout
    const confirmElement = await Promise.race([
      confirmLink.waitFor({ state: 'visible', timeout: NETWORK_TIMEOUT * 2 }).then(() => confirmLink),
      confirmButton.waitFor({ state: 'visible', timeout: NETWORK_TIMEOUT * 2 }).then(() => confirmButton)
    ]);
    
    // Log success and click
    console.log('Found confirm element, clicking...');
    await confirmElement.click();
  } catch (e) {
    console.log('Error finding confirm element:', e.message);
    // Log the page content for debugging
    console.log('Page content:', await page.content());
    throw e;
  }
  
  // Handle confirmation dialog
  const confirmDialogButton = page.getByRole('button', { name: 'Confirm' });
  await expect(confirmDialogButton).toBeVisible({ timeout: NETWORK_TIMEOUT });
  await confirmDialogButton.click();
  
  const yesButton = page.getByRole('button', { name: 'Yes' });
  await expect(yesButton).toBeVisible({ timeout: NETWORK_TIMEOUT });
  await yesButton.click();
  
  // Wait for confirmation
  await expect(page.getByText('Confirmation submitted.')).toBeVisible({ timeout: NETWORK_TIMEOUT });
}

async function handleRegistrationAlert(page: Page) {
  // Wait for the registration alert
  await expect(page.locator('div[role="alert"]')).toBeVisible({ timeout: ALERT_TIMEOUT });
  
  // Click "No" on registration prompt
  await page.locator('div[role="alert"] button:has-text("No")').click();
  
  // Wait for info alert and dismiss it
  await dismissAlertWithRetry(page);
  
  // Ensure all alerts are gone before proceeding
  await expect(page.locator('div[role="alert"]')).toBeHidden({ timeout: ANIMATION_TIMEOUT });
}

test('Without being registered, add contacts without registration', async ({ page, context }) => {
  await page.goto('./account');
  // wait until the DID shows on the page in the 'did' element
  const didElem = await page.getByTestId('didWrapper').locator('code');
  const newDid = await didElem.innerText();
  expect(newDid.trim()).toEqual('');

  // Add new contact without registering
  await page.goto('./contacts');
  await page.getByPlaceholder('URL or DID, Name, Public Key').fill('did:ethr:0x111d15564f824D56C7a07b913aA7aDd03382aA39, User #111');
  await page.locator('button > svg.fa-plus').click();
  await expect(page.locator('div[role="alert"] span:has-text("Contact Added")')).toBeVisible();
  await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss info alert
  // wait for the alert to disappear, which also ensures that there is no "Register" button waiting
  await expect(page.locator('div[role="alert"]')).toBeHidden();

});

test('Add contact, copy details, delete, and import from paste & from file', async ({ page, context }) => {
  await importUser(page, '00');

  // Add new contact
  await page.goto('./contacts');
  await page.getByPlaceholder('URL or DID, Name, Public Key').fill('did:ethr:0x111d15564f824D56C7a07b913aA7aDd03382aA39, User #111');
  await page.locator('button > svg.fa-plus').click();
  await expect(page.locator('div[role="alert"]')).toBeVisible();
  await page.locator('div[role="alert"] button:has-text("No")').click(); // don't register
  await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss info alert
  // wait for the alert to disappear
  await expect(page.locator('div[role="alert"]')).toBeHidden();

  // Add another new contact
  await page.getByPlaceholder('URL or DID, Name, Public Key').fill('did:ethr:0x222BB77E6Ff3774d34c751f3c1260866357B677b, User #222, asdf1234');
  await page.locator('button > svg.fa-plus').click();
  await expect(page.locator('div[role="alert"]')).toBeVisible();
  await page.locator('div[role="alert"] button:has-text("No")').click(); // don't register
  await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss info alert
  await expect(page.locator('div[role="alert"]')).toBeHidden();

  await expect(page.getByTestId('contactListItem')).toHaveCount(2);

  //// Copy contact details, export them, remove them, and paste to add them

  // Copy contact details
  await page.getByTestId('contactCheckAllTop').click();
  await page.getByTestId('copySelectedContactsButtonTop').click();
  await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss alert
  await expect(page.locator('div[role="alert"]')).toBeHidden();
  // I would prefer to copy from the clipboard, but the recommended approaches don't work.
  // See a different clipboard solution below.

  // see contact details on the second contact
  await page.getByTestId('contactListItem').nth(1).locator('a').click();
  await page.getByRole('heading', { name: 'Identifier Details' }).isVisible();
  // remove contact
  await page.locator('button > svg.fa-trash-can').click();
  await page.locator('div[role="alert"] button:has-text("Yes")').click();
  // for some reason, .isHidden() (without expect) doesn't work
  await expect(page.locator('div[role="alert"] button:has-text("Yes")')).toBeHidden();

  // Firefox has a problem when we run this against the test server. It doesn't load the feed.
  // It says there's a CORS problem; maybe it's more strict than the other browsers.
  // It works when we set the config to use a local server.
  // Seems like we hit a similar problem above.
  await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss alert
  await expect(page.locator('div[role="alert"]')).toBeHidden();

  // go to the contacts page and paste the copied contact details
  await page.goto('./contacts');
  // check that there are fewer contacts
  await expect(page.getByTestId('contactListItem')).toHaveCount(1);

  const contactData = 'Paste this: [{ "did": "did:ethr:0x111d15564f824D56C7a07b913aA7aDd03382aA39", "name": "User #111" }, { "did": "did:ethr:0x222BB77E6Ff3774d34c751f3c1260866357B677b", "name": "User #222", "publicKeyBase64": "asdf1234"}] '
  await page.getByPlaceholder('URL or DID, Name, Public Key').fill(contactData);
  await page.locator('button > svg.fa-plus').click();
  // we're on the contact-import page
  await expect(page.locator('li', { hasText: 'New' })).toHaveCount(1);
  await expect(page.locator('span').filter({ hasText: 'the same as' })).toBeVisible();
  await page.locator('button', { hasText: 'Import' }).click();
  // check that there are more contacts
  await expect(page.getByTestId('contactListItem')).toHaveCount(2);

  // Import via the file backup-import, with both new and existing contacts
  await page.goto('./account');
  await page.getByRole('heading', { name: 'Advanced' }).click();
  const fileSelect = await page.locator('input[type="file"]')
  fileSelect.setInputFiles('./test-playwright/exported-data.json');
  await page.locator('button', { hasText: 'Import Only Contacts' }).click();
  // we're on the contact-import page
  await expect(page.locator('li', { hasText: '- New' })).toHaveCount(3);
  await expect(page.locator('li', { hasText: '- Existing' })).toHaveCount(1);
  await expect(page.locator('span').filter({ hasText: 'the same as' })).toBeHidden();
  await page.locator('button', { hasText: 'Import' }).click();
  // check that there are more contacts
  await expect(page.getByTestId('contactListItem')).toHaveCount(5);
  // The visibility error is because currently the server returns an error for the same person.
  // But it should only show that one, for User #000.

});

test('Copy contact to clipboard, then import ', async ({ page, context }, testInfo) => {
  await importUser(page, '00');

  await page.goto('./account');
  await page.getByRole('heading', { name: 'Advanced' }).click();
  const fileSelect = await page.locator('input[type="file"]')
  fileSelect.setInputFiles('./test-playwright/exported-data.json');
  await page.locator('button', { hasText: 'Import Only Contacts' }).click();
  // we're on the contact-import page
  await expect(page.getByRole('heading', { name: "Contact Import" })).toBeVisible();
  await page.locator('button', { hasText: 'Import' }).click();

  await page.goto('./contacts');
  // Copy contact details
  await page.getByTestId('contactCheckAllTop').click();

  // // There's a crazy amount of overlap in all the userAgent values. Ug.
  // const agent = await page.evaluate(() => {
  //   return navigator.userAgent;
  // });
  // console.log("agent: ", agent);

  const isFirefox = await page.evaluate(() => {
    return navigator.userAgent.includes('Firefox');
  });
  if (isFirefox) {
    // Firefox doesn't grant permissions like this but it works anyway.
  } else {
    await context.grantPermissions(['clipboard-read']);
  }

  const isWebkit = await page.evaluate(() => {
    return navigator.userAgent.includes('Macintosh') || navigator.userAgent.includes('iPhone');
  });
  if (isWebkit) {
    console.log("Haven't found a way to access clipboard text in Webkit. Skipping.");
    return;
  }

  console.log("Running test that copies contact details to clipboard.");
  await page.getByTestId('copySelectedContactsButtonTop').click();
  const clipboardText = await page.evaluate(async () => {
    return navigator.clipboard.readText();
  });

  // look into the playwright.config file for the server URL
  const webServer = testInfo.config.webServer;
  const clientServerUrl = webServer?.url;

  const PATH_PART = clientServerUrl + "/contact-import/";
  expect(clipboardText).toContain(PATH_PART);

  await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss alert
  await expect(page.locator('div[role="alert"]')).toBeHidden();

  await page.goto(clipboardText);
  // we're on the contact-import page
  await expect(page.getByRole('heading', { name: "Contact Import" })).toBeVisible();
  await expect(page.locator('span', { hasText: '4 contacts are the same' })).toBeVisible();
});