You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
722 lines
28 KiB
722 lines
28 KiB
/**
|
|
* Contact Import End-to-End Tests
|
|
*
|
|
* Comprehensive test suite for Time Safari's contact import functionality.
|
|
* Tests cover all import methods, error scenarios, and edge cases.
|
|
*
|
|
* Test Coverage:
|
|
* 1. Contact import via URL query parameters
|
|
* 2. JWT import via URL path
|
|
* 3. Manual JWT input via textarea
|
|
* 4. Duplicate contact detection and field comparison
|
|
* 5. Error scenarios: invalid JWT, malformed data, network issues
|
|
* 6. Error logging verification
|
|
*
|
|
* Import Methods Tested:
|
|
* - URL Query: /contact-import?contacts=[{"did":"did:example:123","name":"Alice"}]
|
|
* - JWT Path: /contact-import/[JWT_TOKEN]
|
|
* - Manual Input: Textarea with JWT or contact data
|
|
* - Deep Link: /deep-link/contact-import/[JWT_TOKEN]
|
|
*
|
|
* Test Data:
|
|
* - Valid DIDs: did:ethr:0x... format
|
|
* - Test contacts: Alice, Bob, Charlie with various properties
|
|
* - Invalid JWTs: Malformed, expired, wrong signature
|
|
* - Malformed data: Missing fields, wrong types, empty arrays
|
|
*
|
|
* Key Selectors:
|
|
* - Import button: 'button:has-text("Import Selected Contacts")'
|
|
* - JWT textarea: 'textarea[placeholder="Contact-import data"]'
|
|
* - Check import button: 'button:has-text("Check Import")'
|
|
* - Contact list items: 'li[data-testid="contactListItem"]'
|
|
* - Alert dialogs: 'div[role="alert"]'
|
|
*
|
|
* Error Handling:
|
|
* - Invalid JWT format detection
|
|
* - Malformed contact data validation
|
|
* - Network error simulation
|
|
* - Duplicate contact field comparison
|
|
* - Error message verification
|
|
*
|
|
* State Management:
|
|
* - Clean database state before each test
|
|
* - Contact cleanup after tests
|
|
* - User state management
|
|
*
|
|
* @example Basic URL import test
|
|
* ```typescript
|
|
* await page.goto('./contact-import?contacts=[{"did":"did:test:123","name":"Test User"}]');
|
|
* await expect(page.locator('li', { hasText: 'New' })).toBeVisible();
|
|
* await page.locator('button:has-text("Import Selected Contacts")').click();
|
|
* ```
|
|
*
|
|
* @author Matthew Raymer
|
|
* @date 2025-08-04
|
|
*/
|
|
|
|
import { test, expect, Page } from '@playwright/test';
|
|
import {
|
|
importUser,
|
|
getOSSpecificTimeout,
|
|
createTestJwt,
|
|
cleanupTestContacts,
|
|
addTestContact,
|
|
verifyContactExists,
|
|
verifyContactCount
|
|
} from './testUtils';
|
|
|
|
/**
|
|
* Performance monitoring utilities
|
|
*/
|
|
class PerformanceMonitor {
|
|
private startTime: number = 0;
|
|
private checkpoints: Map<string, number> = new Map();
|
|
private browserName: string = '';
|
|
|
|
constructor(browserName: string) {
|
|
this.browserName = browserName;
|
|
}
|
|
|
|
start(label: string = 'test') {
|
|
this.startTime = Date.now();
|
|
this.checkpoints.clear();
|
|
console.log(`[${this.browserName}] 🚀 Starting: ${label}`);
|
|
}
|
|
|
|
checkpoint(name: string) {
|
|
const elapsed = Date.now() - this.startTime;
|
|
this.checkpoints.set(name, elapsed);
|
|
console.log(`[${this.browserName}] ⏱️ ${name}: ${elapsed}ms`);
|
|
}
|
|
|
|
end(label: string = 'test') {
|
|
const totalTime = Date.now() - this.startTime;
|
|
console.log(`[${this.browserName}] ✅ Completed: ${label} in ${totalTime}ms`);
|
|
|
|
// Log all checkpoints
|
|
this.checkpoints.forEach((time, name) => {
|
|
console.log(`[${this.browserName}] 📊 ${name}: ${time}ms`);
|
|
});
|
|
|
|
return totalTime;
|
|
}
|
|
|
|
async measureAsync<T>(name: string, operation: () => Promise<T>): Promise<T> {
|
|
const start = Date.now();
|
|
try {
|
|
const result = await operation();
|
|
const elapsed = Date.now() - start;
|
|
console.log(`[${this.browserName}] ⏱️ ${name}: ${elapsed}ms`);
|
|
return result;
|
|
} catch (error) {
|
|
const elapsed = Date.now() - start;
|
|
console.log(`[${this.browserName}] ❌ ${name}: ${elapsed}ms (FAILED)`);
|
|
throw error;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Test data for contact imports
|
|
interface TestContact {
|
|
did: string;
|
|
name: string;
|
|
publicKey: string;
|
|
}
|
|
|
|
/**
|
|
* Generate unique test contacts with random DIDs
|
|
* This prevents conflicts with existing contacts in the database
|
|
*/
|
|
function generateUniqueTestContacts(): Record<string, TestContact> {
|
|
const timestamp = Date.now();
|
|
const randomSuffix = Math.random().toString(36).substring(2, 8);
|
|
|
|
return {
|
|
alice: {
|
|
did: `did:ethr:0x111d15564f824D56C7a07b913aA7aDd03382aA39${randomSuffix}`,
|
|
name: `Alice Test ${timestamp}`,
|
|
publicKey: `alice-public-key-${randomSuffix}`
|
|
},
|
|
bob: {
|
|
did: `did:ethr:0x222BB77E6Ff3774d34c751f3c1260866357B677b${randomSuffix}`,
|
|
name: `Bob Test ${timestamp}`,
|
|
publicKey: `bob-public-key-${randomSuffix}`
|
|
},
|
|
charlie: {
|
|
did: `did:ethr:0x333CC88F7Gg488e45d862f4d237097f748C788c${randomSuffix}`,
|
|
name: `Charlie Test ${timestamp}`,
|
|
publicKey: `charlie-public-key-${randomSuffix}`
|
|
}
|
|
};
|
|
}
|
|
|
|
// Invalid test data
|
|
const INVALID_DATA = {
|
|
malformedJwt: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.invalid.payload',
|
|
emptyArray: '[]',
|
|
missingFields: '[{"name":"Incomplete Contact"}]',
|
|
wrongTypes: '[{"did":123,"name":456}]',
|
|
networkError: 'http://invalid-url-that-will-fail.com/contacts'
|
|
};
|
|
|
|
|
|
|
|
test.describe('Contact Import Functionality', () => {
|
|
let perfMonitor: PerformanceMonitor;
|
|
|
|
test.beforeEach(async ({ page, browserName }) => {
|
|
perfMonitor = new PerformanceMonitor(browserName);
|
|
perfMonitor.start('test setup');
|
|
|
|
// Import test user and clean up existing contacts
|
|
await perfMonitor.measureAsync('import user', () => importUser(page, '00'));
|
|
const testContacts = generateUniqueTestContacts();
|
|
await perfMonitor.measureAsync('cleanup contacts', () => cleanupTestContacts(page, Object.values(testContacts).map(c => c.name)));
|
|
|
|
perfMonitor.checkpoint('setup complete');
|
|
});
|
|
|
|
test.afterEach(async ({ page, browserName }) => {
|
|
perfMonitor.checkpoint('test complete');
|
|
|
|
// Clean up test contacts after each test
|
|
const testContacts = generateUniqueTestContacts();
|
|
await perfMonitor.measureAsync('final cleanup', () => cleanupTestContacts(page, Object.values(testContacts).map(c => c.name)));
|
|
|
|
perfMonitor.end('test teardown');
|
|
});
|
|
|
|
test('Basic contact addition works', async ({ page, browserName }) => {
|
|
perfMonitor.start('Basic contact addition works');
|
|
|
|
const testContacts = generateUniqueTestContacts();
|
|
|
|
// Go to contacts page
|
|
await perfMonitor.measureAsync('navigate to contacts', () => page.goto('./contacts'));
|
|
|
|
// Add a contact normally
|
|
await perfMonitor.measureAsync('fill contact input', () =>
|
|
page.getByPlaceholder('URL or DID, Name, Public Key').fill(`${testContacts.alice.did}, ${testContacts.alice.name}`)
|
|
);
|
|
|
|
await perfMonitor.measureAsync('click add button', () =>
|
|
page.locator('button > svg.fa-plus').click()
|
|
);
|
|
|
|
// Verify success
|
|
await perfMonitor.measureAsync('wait for success alert', () =>
|
|
expect(page.locator('div[role="alert"] span:has-text("Success")')).toBeVisible()
|
|
);
|
|
|
|
await perfMonitor.measureAsync('dismiss alert', () =>
|
|
page.locator('div[role="alert"] button > svg.fa-xmark').first().click()
|
|
);
|
|
|
|
// Verify contact appears in list
|
|
await perfMonitor.measureAsync('verify contact in list', () =>
|
|
expect(page.locator(`li[data-testid="contactListItem"] h2:has-text("${testContacts.alice.name}")`).first()).toBeVisible()
|
|
);
|
|
|
|
perfMonitor.end('Basic contact addition works');
|
|
});
|
|
|
|
test('Import single contact via contacts page input', async ({ page }) => {
|
|
// Use the exact same format as the working test
|
|
const contactData = 'Paste this: [{ "did": "did:ethr:0x111d15564f824D56C7a07b913aA7aDd03382aA39", "name": "User #111" }, { "did": "did:ethr:0x222BB77E6Ff3774d34c751f3c1260866357B677b", "name": "User #222", "publicKeyBase64": "asdf1234"}] ';
|
|
|
|
// Go to contacts page and paste contact data
|
|
await page.goto('./contacts');
|
|
await page.getByPlaceholder('URL or DID, Name, Public Key').fill(contactData);
|
|
await page.locator('button > svg.fa-plus').click();
|
|
|
|
// Check that contacts are detected
|
|
await expect(page.locator('li', { hasText: 'New' }).first()).toBeVisible();
|
|
|
|
// Import the contacts
|
|
await page.locator('button', { hasText: 'Import' }).click();
|
|
|
|
// Verify success message
|
|
await expect(page.locator('div[role="alert"] span:has-text("Success")')).toBeVisible();
|
|
await page.locator('div[role="alert"] button > svg.fa-xmark').first().click();
|
|
|
|
// Verify contacts appear in contacts list
|
|
await page.goto('./contacts');
|
|
await expect(page.getByTestId('contactListItem')).toHaveCount(2);
|
|
});
|
|
|
|
test('Import multiple contacts via contacts page input', async ({ page }) => {
|
|
// Use the exact same format as the working test
|
|
const contactsData = 'Paste this: [{ "did": "did:ethr:0x111d15564f824D56C7a07b913aA7aDd03382aA39", "name": "User #111" }, { "did": "did:ethr:0x222BB77E6Ff3774d34c751f3c1260866357B677b", "name": "User #222", "publicKeyBase64": "asdf1234"}] ';
|
|
|
|
// Go to contacts page and paste contact data
|
|
await page.goto('./contacts');
|
|
await page.getByPlaceholder('URL or DID, Name, Public Key').fill(contactsData);
|
|
await page.locator('button > svg.fa-plus').click();
|
|
|
|
// Verify we're redirected to contact import page
|
|
await expect(page.getByRole('heading', { name: 'Contact Import' })).toBeVisible();
|
|
|
|
// Verify all contacts are detected as new
|
|
await expect(page.locator('li', { hasText: 'New' })).toHaveCount(2);
|
|
await expect(page.locator('li', { hasText: 'User #111' })).toBeVisible();
|
|
await expect(page.locator('li', { hasText: 'User #222' })).toBeVisible();
|
|
|
|
// Import all contacts
|
|
await page.locator('button', { hasText: 'Import Selected Contacts' }).click();
|
|
|
|
// Verify success
|
|
await expect(page.locator('div[role="alert"] span:has-text("Success")').first()).toBeVisible();
|
|
await page.locator('div[role="alert"] button > svg.fa-xmark').first().click();
|
|
|
|
// Verify all contacts appear in list
|
|
await page.goto('./contacts');
|
|
await expect(page.getByTestId('contactListItem').first()).toBeVisible();
|
|
});
|
|
|
|
// TODO: JWT-based import tests - These require proper JWT implementation
|
|
// test('Import contact via JWT in URL path', async ({ page }) => {
|
|
// // Create a test JWT with contact data
|
|
// const testContacts = generateUniqueTestContacts();
|
|
// const jwtPayload = {
|
|
// contacts: [testContacts.alice]
|
|
// };
|
|
// const testJwt = createTestJwt(jwtPayload);
|
|
//
|
|
// await page.goto(`./contact-import/${testJwt}`);
|
|
//
|
|
// // Verify contact import page loads
|
|
// await expect(page.getByRole('heading', { name: 'Contact Import' })).toBeVisible();
|
|
//
|
|
// // Check that new contact is detected
|
|
// await expect(page.locator('li', { hasText: 'New' })).toBeVisible();
|
|
// await expect(page.locator('li', { hasText: testContacts.alice.name })).toBeVisible();
|
|
//
|
|
// // Import the contact
|
|
// await page.locator('button:has-text("Import Selected Contacts")').click();
|
|
//
|
|
// // Verify success
|
|
// await expect(page.locator('div[role="alert"] span:has-text("Success")')).toBeVisible();
|
|
// });
|
|
|
|
// TODO: JWT-based import tests - These require proper JWT implementation
|
|
// test('Import via deep link with JWT', async ({ page }) => {
|
|
// // Create a test JWT with contact data
|
|
// const testContacts = generateUniqueTestContacts();
|
|
// const jwtPayload = {
|
|
// contacts: [testContacts.bob]
|
|
// };
|
|
// const testJwt = createTestJwt(jwtPayload);
|
|
//
|
|
// await page.goto(`./deep-link/contact-import/${testJwt}`);
|
|
//
|
|
// // Verify redirect to contact import page
|
|
// await expect(page.getByRole('heading', { name: 'Contact Import' })).toBeVisible();
|
|
//
|
|
// // Check that new contact is detected
|
|
// await expect(page.locator('li', { hasText: 'New' })).toBeVisible();
|
|
// await expect(page.locator('li', { hasText: testContacts.bob.name })).toBeVisible();
|
|
//
|
|
// // Import the contact
|
|
// await page.locator('button:has-text("Import Selected Contacts")').click();
|
|
//
|
|
// // Verify success
|
|
// await expect(page.locator('div[role="alert"] span:has-text("Success")')).toBeVisible();
|
|
// });
|
|
|
|
// TODO: JWT-based import tests - These require proper JWT implementation
|
|
// test('Manual JWT input via textarea', async ({ page }) => {
|
|
// await page.goto('./contact-import');
|
|
//
|
|
// // Create a test JWT with contact data
|
|
// const testContacts = generateUniqueTestContacts();
|
|
// const jwtPayload = {
|
|
// contacts: [testContacts.charlie]
|
|
// };
|
|
// const testJwt = createTestJwt(jwtPayload);
|
|
//
|
|
// // Input JWT in textarea
|
|
// await page.locator('textarea[placeholder="Contact-import data"]').fill(testJwt);
|
|
// await page.locator('button:has-text("Check Import")').click();
|
|
//
|
|
// // Verify contact is detected
|
|
// await expect(page.locator('li', { hasText: 'New' })).toBeVisible();
|
|
// await expect(page.locator('li', { hasText: testContacts.charlie.name })).toBeVisible();
|
|
//
|
|
// // Import the contact
|
|
// await page.locator('button:has-text("Import Selected Contacts")').click();
|
|
//
|
|
// // Verify success
|
|
// await expect(page.locator('div[role="alert"] span:has-text("Success")')).toBeVisible();
|
|
// });
|
|
|
|
test('Manual contact data input via textarea', async ({ page, browserName }) => {
|
|
perfMonitor.start('Manual contact data input via textarea');
|
|
|
|
// Go to contacts page and input contact data directly
|
|
await perfMonitor.measureAsync('navigate to contacts', () => page.goto('./contacts'));
|
|
|
|
// Use the exact same format as the working test
|
|
const contactData = 'Paste this: [{ "did": "did:ethr:0x111d15564f824D56C7a07b913aA7aDd03382aA39", "name": "User #111" }, { "did": "did:ethr:0x222BB77E6Ff3774d34c751f3c1260866357B677b", "name": "User #222", "publicKeyBase64": "asdf1234"}] ';
|
|
|
|
await perfMonitor.measureAsync('fill contact data', () =>
|
|
page.getByPlaceholder('URL or DID, Name, Public Key').fill(contactData)
|
|
);
|
|
|
|
await perfMonitor.measureAsync('click add button', () =>
|
|
page.locator('button > svg.fa-plus').click()
|
|
);
|
|
|
|
// Verify we're redirected to contact import page
|
|
await perfMonitor.measureAsync('wait for contact import page', () =>
|
|
expect(page.getByRole('heading', { name: 'Contact Import' })).toBeVisible()
|
|
);
|
|
|
|
// Verify contact is detected
|
|
await perfMonitor.measureAsync('verify new contact detected', () =>
|
|
expect(page.locator('li', { hasText: 'New' }).first()).toBeVisible()
|
|
);
|
|
|
|
// Import the contact
|
|
await perfMonitor.measureAsync('click import button', () =>
|
|
page.locator('button', { hasText: 'Import Selected Contacts' }).click()
|
|
);
|
|
|
|
// Verify success
|
|
await perfMonitor.measureAsync('wait for success message', () =>
|
|
expect(page.locator('div[role="alert"] span:has-text("Success")').first()).toBeVisible()
|
|
);
|
|
|
|
perfMonitor.end('Manual contact data input via textarea');
|
|
});
|
|
|
|
test('Duplicate contact detection and field comparison', async ({ page }) => {
|
|
const testContacts = generateUniqueTestContacts();
|
|
|
|
// First, add a contact normally
|
|
await page.goto('./contacts');
|
|
await page.getByPlaceholder('URL or DID, Name, Public Key').fill(
|
|
`${testContacts.alice.did}, ${testContacts.alice.name}`
|
|
);
|
|
await page.locator('button > svg.fa-plus').click();
|
|
await expect(page.locator('div[role="alert"] span:has-text("Success")')).toBeVisible();
|
|
await page.locator('div[role="alert"] button > svg.fa-xmark').first().click();
|
|
|
|
// Now try to import the same contact with different data
|
|
const contactData = `Paste this: ${JSON.stringify([{
|
|
...testContacts.alice,
|
|
publicKey: 'different-key'
|
|
}])}`;
|
|
|
|
await page.getByPlaceholder('URL or DID, Name, Public Key').fill(contactData);
|
|
await page.locator('button > svg.fa-plus').click();
|
|
|
|
// Verify duplicate detection
|
|
await expect(page.locator('li', { hasText: 'Existing' })).toHaveCount(1);
|
|
|
|
// Import the contact anyway
|
|
await page.locator('button', { hasText: 'Import Selected Contacts' }).click();
|
|
|
|
// Verify success
|
|
await expect(page.locator('div[role="alert"] span:has-text("Success")').first()).toBeVisible();
|
|
});
|
|
|
|
test('Error handling: Invalid JWT format', async ({ page }) => {
|
|
// Go to contact import page with invalid JWT
|
|
await page.goto('./contact-import?jwt=invalid.jwt.token');
|
|
|
|
// Verify error handling (should show appropriate error message)
|
|
await expect(page.locator('div', { hasText: 'There are no contacts' }).first()).toBeVisible();
|
|
});
|
|
|
|
test('Error handling: Empty contact array', async ({ page }) => {
|
|
const emptyData = encodeURIComponent(INVALID_DATA.emptyArray);
|
|
await page.goto(`./contact-import?contacts=${emptyData}`);
|
|
|
|
// Verify appropriate message for empty import
|
|
await expect(page.locator('div', { hasText: 'There are no contacts' }).first()).toBeVisible();
|
|
});
|
|
|
|
test('Error handling: Missing required fields', async ({ page }) => {
|
|
const malformedData = encodeURIComponent(INVALID_DATA.missingFields);
|
|
await page.goto(`./contact-import?contacts=${malformedData}`);
|
|
|
|
// Verify error handling for malformed data
|
|
await expect(page.locator('div', { hasText: 'There are no contacts' })).toBeVisible();
|
|
});
|
|
|
|
test('Error handling: Wrong data types', async ({ page }) => {
|
|
// Go to contact import page with invalid data
|
|
await page.goto('./contact-import?contacts=invalid-data');
|
|
|
|
// Verify error handling for wrong data types
|
|
await expect(page.locator('div', { hasText: 'There are no contacts' }).first()).toBeVisible();
|
|
});
|
|
|
|
test('Selective contact import with checkboxes', async ({ page }) => {
|
|
const testContacts = generateUniqueTestContacts();
|
|
const contactsData = encodeURIComponent(JSON.stringify([
|
|
testContacts.alice,
|
|
testContacts.bob,
|
|
testContacts.charlie
|
|
]));
|
|
await page.goto(`./contact-import?contacts=${contactsData}`);
|
|
|
|
// Uncheck one contact
|
|
await page.locator('input[type="checkbox"]').nth(1).uncheck();
|
|
|
|
// Import selected contacts
|
|
await page.locator('button:has-text("Import Selected Contacts")').click();
|
|
|
|
// Verify success
|
|
await expect(page.locator('div[role="alert"] span:has-text("Success")')).toBeVisible();
|
|
await page.locator('div[role="alert"] button > svg.fa-xmark').click();
|
|
|
|
// Verify only selected contacts were imported
|
|
await page.goto('./contacts');
|
|
await expect(page.getByTestId('contactListItem')).toHaveCount(2);
|
|
});
|
|
|
|
test('Visibility settings for imported contacts', async ({ page }) => {
|
|
const testContacts = generateUniqueTestContacts();
|
|
const contactsData = encodeURIComponent(JSON.stringify([
|
|
testContacts.alice,
|
|
testContacts.bob
|
|
]));
|
|
await page.goto(`./contact-import?contacts=${contactsData}`);
|
|
|
|
// Check visibility checkbox
|
|
await page.locator('input[type="checkbox"]').first().check();
|
|
await expect(page.locator('span', { hasText: 'Make my activity visible' })).toBeVisible();
|
|
|
|
// Import contacts
|
|
await page.locator('button:has-text("Import Selected Contacts")').click();
|
|
|
|
// Verify success
|
|
await expect(page.locator('div[role="alert"] span:has-text("Success")')).toBeVisible();
|
|
});
|
|
|
|
test('Import with existing contacts - all duplicates', async ({ page, browserName }) => {
|
|
perfMonitor.start('Import with existing contacts - all duplicates');
|
|
|
|
// First, add all test contacts
|
|
const testContacts = generateUniqueTestContacts();
|
|
await perfMonitor.measureAsync('navigate to contacts', () => page.goto('./contacts'));
|
|
|
|
for (let i = 0; i < Object.values(testContacts).length; i++) {
|
|
const contact = Object.values(testContacts)[i];
|
|
perfMonitor.checkpoint(`adding contact ${i + 1}`);
|
|
|
|
await perfMonitor.measureAsync(`fill contact ${i + 1}`, () =>
|
|
page.getByPlaceholder('URL or DID, Name, Public Key').fill(`${contact.did}, ${contact.name}`)
|
|
);
|
|
|
|
await perfMonitor.measureAsync(`click add button ${i + 1}`, () =>
|
|
page.locator('button > svg.fa-plus').click()
|
|
);
|
|
|
|
await perfMonitor.measureAsync(`wait for success alert ${i + 1}`, () =>
|
|
expect(page.locator('div[role="alert"] span:has-text("Success")')).toBeVisible()
|
|
);
|
|
|
|
await perfMonitor.measureAsync(`dismiss alert ${i + 1}`, async () => {
|
|
try {
|
|
await page.locator('div[role="alert"] button > svg.fa-xmark').first().click();
|
|
} catch (error) {
|
|
// If alert dismissal fails, check for modal dialog and handle it
|
|
console.log(`[${browserName}] Alert dismissal failed, checking for modal dialog`);
|
|
|
|
try {
|
|
// Check if there's a modal dialog blocking the click
|
|
const modalDialog = page.locator('div.absolute.inset-0.h-screen');
|
|
const isModalVisible = await modalDialog.isVisible().catch(() => false);
|
|
|
|
if (isModalVisible) {
|
|
console.log(`[${browserName}] Modal dialog detected, trying to dismiss it`);
|
|
|
|
// Try to find and click a dismiss button in the modal
|
|
const modalDismissButton = page.locator('div[role="dialog"] button, .modal button, .dialog button').first();
|
|
const isModalButtonVisible = await modalDismissButton.isVisible().catch(() => false);
|
|
|
|
if (isModalButtonVisible) {
|
|
await modalDismissButton.click();
|
|
}
|
|
|
|
// Now try to dismiss the original alert
|
|
await page.locator('div[role="alert"] button > svg.fa-xmark').first().click();
|
|
} else {
|
|
// If no modal dialog, try force click as fallback
|
|
console.log(`[${browserName}] No modal dialog, trying force click`);
|
|
await page.locator('div[role="alert"] button > svg.fa-xmark').first().click({ force: true });
|
|
}
|
|
} catch (modalError) {
|
|
console.log(`[${browserName}] Modal handling failed, trying force click: ${modalError}`);
|
|
// Final fallback: force click with page state check
|
|
try {
|
|
await page.locator('div[role="alert"] button > svg.fa-xmark').first().click({ force: true });
|
|
} catch (finalError) {
|
|
console.log(`[${browserName}] Force click also failed, page may be closed: ${finalError}`);
|
|
// If page is closed, we can't dismiss the alert, but the test can continue
|
|
// The alert will be cleaned up when the page is destroyed
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
perfMonitor.checkpoint('all contacts added');
|
|
|
|
// Try to import the same contacts again
|
|
const contactsData = encodeURIComponent(JSON.stringify(Object.values(testContacts)));
|
|
await perfMonitor.measureAsync('navigate to contact import', () =>
|
|
page.goto(`./contact-import?contacts=${contactsData}`)
|
|
);
|
|
|
|
// Verify all are detected as existing
|
|
await perfMonitor.measureAsync('verify existing contacts', () =>
|
|
expect(page.locator('li', { hasText: 'Existing' })).toHaveCount(3)
|
|
);
|
|
|
|
perfMonitor.end('Import with existing contacts - all duplicates');
|
|
});
|
|
|
|
test('Mixed new and existing contacts', async ({ page }) => {
|
|
// Add one existing contact
|
|
const testContacts = generateUniqueTestContacts();
|
|
await page.goto('./contacts');
|
|
await page.getByPlaceholder('URL or DID, Name, Public Key').fill(
|
|
`${testContacts.alice.did}, ${testContacts.alice.name}`
|
|
);
|
|
await page.locator('button > svg.fa-plus').click();
|
|
await expect(page.locator('div[role="alert"] span:has-text("Success")')).toBeVisible();
|
|
await page.locator('div[role="alert"] button > svg.fa-xmark').first().click();
|
|
|
|
// Import mix of new and existing contacts
|
|
const mixedContacts = [
|
|
testContacts.alice, // existing
|
|
testContacts.bob, // new
|
|
testContacts.charlie // new
|
|
];
|
|
const contactsData = encodeURIComponent(JSON.stringify(mixedContacts));
|
|
await page.goto(`./contact-import?contacts=${contactsData}`);
|
|
|
|
// Verify correct detection
|
|
await expect(page.locator('li', { hasText: 'Existing' })).toHaveCount(1);
|
|
await expect(page.locator('li', { hasText: 'New' }).first()).toBeVisible();
|
|
|
|
// Import selected contacts
|
|
await page.locator('button:has-text("Import Selected Contacts")').click();
|
|
|
|
// Verify success
|
|
await expect(page.locator('div[role="alert"] span:has-text("Success")')).toBeVisible();
|
|
});
|
|
|
|
test('Error logging verification', async ({ page }) => {
|
|
// This test verifies that error logging appears correctly
|
|
// by checking console logs and error messages
|
|
|
|
// Test with invalid JWT
|
|
await page.goto('./contact-import');
|
|
await page.locator('textarea[placeholder="Contact-import data"]').fill(INVALID_DATA.malformedJwt);
|
|
await page.locator('button:has-text("Check Import")').click();
|
|
|
|
// Verify appropriate error message is displayed
|
|
await expect(page.locator('div', { hasText: 'There are no contacts' }).first()).toBeVisible();
|
|
|
|
// Test with malformed data
|
|
const malformedData = encodeURIComponent(INVALID_DATA.missingFields);
|
|
await page.goto(`./contact-import?contacts=${malformedData}`);
|
|
|
|
// Verify error handling
|
|
await expect(page.locator('div', { hasText: 'There are no contacts' }).first()).toBeVisible();
|
|
});
|
|
|
|
test('Network error handling simulation', async ({ page }) => {
|
|
// This test simulates network errors by using invalid URLs
|
|
// Note: This is a simplified test - in a real scenario you might
|
|
// want to use a mock server or intercept network requests
|
|
|
|
await page.goto('./contact-import');
|
|
|
|
// Try to import from an invalid URL
|
|
await page.locator('textarea[placeholder="Contact-import data"]').fill(INVALID_DATA.networkError);
|
|
await page.locator('button:has-text("Check Import")').click();
|
|
|
|
// Verify error handling
|
|
await expect(page.locator('div', { hasText: 'There are no contacts' }).first()).toBeVisible();
|
|
});
|
|
|
|
test('Large contact import performance', async ({ page, browserName }) => {
|
|
perfMonitor.start('Large contact import performance');
|
|
|
|
// Test performance with larger contact lists
|
|
const largeContactList: TestContact[] = [];
|
|
for (let i = 0; i < 10; i++) {
|
|
largeContactList.push({
|
|
did: `did:ethr:0x${i.toString().padStart(40, '0')}`,
|
|
name: `Contact ${i}`,
|
|
publicKey: `public-key-${i}`
|
|
});
|
|
}
|
|
|
|
const contactsData = encodeURIComponent(JSON.stringify(largeContactList));
|
|
await perfMonitor.measureAsync('navigate to contact import', () =>
|
|
page.goto(`./contact-import?contacts=${contactsData}`)
|
|
);
|
|
|
|
// Verify all contacts are detected
|
|
await perfMonitor.measureAsync('verify new contacts detected', () =>
|
|
expect(page.locator('li', { hasText: 'New' })).toHaveCount(10)
|
|
);
|
|
|
|
// Import all contacts
|
|
await perfMonitor.measureAsync('click import button', () =>
|
|
page.locator('button:has-text("Import Selected Contacts")').click()
|
|
);
|
|
|
|
// Verify success
|
|
await perfMonitor.measureAsync('wait for success message', () =>
|
|
expect(page.locator('div[role="alert"] span:has-text("Success")')).toBeVisible()
|
|
);
|
|
|
|
perfMonitor.end('Large contact import performance');
|
|
});
|
|
|
|
test('Alert dismissal performance test', async ({ page, browserName }) => {
|
|
perfMonitor.start('Alert dismissal performance test');
|
|
|
|
// Add a contact to trigger an alert
|
|
const testContacts = generateUniqueTestContacts();
|
|
await perfMonitor.measureAsync('navigate to contacts', () => page.goto('./contacts'));
|
|
|
|
await perfMonitor.measureAsync('fill contact input', () =>
|
|
page.getByPlaceholder('URL or DID, Name, Public Key').fill(`${testContacts.alice.did}, ${testContacts.alice.name}`)
|
|
);
|
|
|
|
await perfMonitor.measureAsync('click add button', () =>
|
|
page.locator('button > svg.fa-plus').click()
|
|
);
|
|
|
|
await perfMonitor.measureAsync('wait for success alert', () =>
|
|
expect(page.locator('div[role="alert"] span:has-text("Success")')).toBeVisible()
|
|
);
|
|
|
|
// Test alert dismissal performance
|
|
await perfMonitor.measureAsync('dismiss alert (detailed)', async () => {
|
|
const alertButton = page.locator('div[role="alert"] button > svg.fa-xmark').first();
|
|
|
|
// Wait for button to be stable
|
|
await alertButton.waitFor({ state: 'visible', timeout: 10000 });
|
|
|
|
// Try clicking with different strategies
|
|
try {
|
|
await alertButton.click({ timeout: 5000 });
|
|
} catch (error) {
|
|
console.log(`[${browserName}] Alert dismissal failed, trying alternative approach`);
|
|
// Try force click if normal click fails
|
|
await alertButton.click({ force: true, timeout: 5000 });
|
|
}
|
|
});
|
|
|
|
perfMonitor.end('Alert dismissal performance test');
|
|
});
|
|
});
|