# Instructions - Following Playwright test failed. - Explain why, be concise, respect Playwright best practices. - Provide a snippet of code with the fix, if possible. # Test info - Name: tests/ui/leaf-details.spec.ts >> leaf collection client-side detail pages >> individual Top Committees: Sankey by category, decoded types, refund columns only when refunded (sites#413) - Location: tests/ui/leaf-details.spec.ts:455:7 # Error details ``` Error: expect(locator).toHaveText(expected) failed Locator: locator('#committees h2') Expected: "Top Committees" Timeout: 20000ms Error: element(s) not found Call log: - Expect "toHaveText" locator('#committees h2') with timeout 20000ms - waiting for locator('#committees h2') ``` ```yaml - region "Status messages" - banner - main "Authentication form": - text: elect.info - heading "Sign in to elect.info" [level=1] - paragraph: Login to continue to us.elect.info. - text: Email - textbox "Email" - text: Password - textbox "Password": - /placeholder: Please enter your password - button "Log in" - group "Login sources": - text: or Login sources - button "Continue with Google" - group "Additional actions": - text: Additional actions Need an account? - link "Sign up.": - /url: /if/flow/elect-info-enrollment/?client_id=KI5Be8scLVeZN7n5zY8p5s8VbpyradOSKQvo9T2c&redirect_uri=https%3A%2F%2Fus.elect.info%2Foutpost.goauthentik.io%2Fcallback%3FX-authentik-auth-callback%3Dtrue&response_type=code&scope=openid+entitlements+ak_proxy+email+profile&state=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnb2F1dGhlbnRpay5pby9vdXRwb3N0L0tJNUJlOHNjTFZlWk43bjV6WThwNXM4VmJweXJhZE9TS1F2bzlUMmMiLCJzaWQiOiJLT0NGUTM0U1lMVkhMN1NFTlE2Uk00TzdBT0pQWEQ1NFZHQ1hOTFdWRkU2TU5GQkxUMkxRIiwic3RhdGUiOiJSZ0thTjZXcVhSVU82bjJLb3RtcnlHd2hlVXNSRTlfeVd0bnNocFlpN3cwIiwicmVkaXJlY3QiOiJodHRwczovL3VzLmVsZWN0LmluZm8vaW5kaXZpZHVhbHMvaW5kLXNhbmtleS8ifQ.4JsOloKOyQp5sHJ0ZHx5bzxWPjQkSwyx5LE_IgqLQJo&next=%2Fapplication%2Fo%2Fauthorize%2F%3Fclient_id%3DKI5Be8scLVeZN7n5zY8p5s8VbpyradOSKQvo9T2c%26redirect_uri%3Dhttps%253A%252F%252Fus.elect.info%252Foutpost.goauthentik.io%252Fcallback%253FX-authentik-auth-callback%253Dtrue%26response_type%3Dcode%26scope%3Dopenid%2Bentitlements%2Bak_proxy%2Bemail%2Bprofile%26state%3DeyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnb2F1dGhlbnRpay5pby9vdXRwb3N0L0tJNUJlOHNjTFZlWk43bjV6WThwNXM4VmJweXJhZE9TS1F2bzlUMmMiLCJzaWQiOiJLT0NGUTM0U1lMVkhMN1NFTlE2Uk00TzdBT0pQWEQ1NFZHQ1hOTFdWRkU2TU5GQkxUMkxRIiwic3RhdGUiOiJSZ0thTjZXcVhSVU82bjJLb3RtcnlHd2hlVXNSRTlfeVd0bnNocFlpN3cwIiwicmVkaXJlY3QiOiJodHRwczovL3VzLmVsZWN0LmluZm8vaW5kaXZpZHVhbHMvaW5kLXNhbmtleS8ifQ.4JsOloKOyQp5sHJ0ZHx5bzxWPjQkSwyx5LE_IgqLQJo - link "Forgot username or password?": - /url: /if/flow/elect-info-recovery/?client_id=KI5Be8scLVeZN7n5zY8p5s8VbpyradOSKQvo9T2c&redirect_uri=https%3A%2F%2Fus.elect.info%2Foutpost.goauthentik.io%2Fcallback%3FX-authentik-auth-callback%3Dtrue&response_type=code&scope=openid+entitlements+ak_proxy+email+profile&state=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnb2F1dGhlbnRpay5pby9vdXRwb3N0L0tJNUJlOHNjTFZlWk43bjV6WThwNXM4VmJweXJhZE9TS1F2bzlUMmMiLCJzaWQiOiJLT0NGUTM0U1lMVkhMN1NFTlE2Uk00TzdBT0pQWEQ1NFZHQ1hOTFdWRkU2TU5GQkxUMkxRIiwic3RhdGUiOiJSZ0thTjZXcVhSVU82bjJLb3RtcnlHd2hlVXNSRTlfeVd0bnNocFlpN3cwIiwicmVkaXJlY3QiOiJodHRwczovL3VzLmVsZWN0LmluZm8vaW5kaXZpZHVhbHMvaW5kLXNhbmtleS8ifQ.4JsOloKOyQp5sHJ0ZHx5bzxWPjQkSwyx5LE_IgqLQJo&next=%2Fapplication%2Fo%2Fauthorize%2F%3Fclient_id%3DKI5Be8scLVeZN7n5zY8p5s8VbpyradOSKQvo9T2c%26redirect_uri%3Dhttps%253A%252F%252Fus.elect.info%252Foutpost.goauthentik.io%252Fcallback%253FX-authentik-auth-callback%253Dtrue%26response_type%3Dcode%26scope%3Dopenid%2Bentitlements%2Bak_proxy%2Bemail%2Bprofile%26state%3DeyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnb2F1dGhlbnRpay5pby9vdXRwb3N0L0tJNUJlOHNjTFZlWk43bjV6WThwNXM4VmJweXJhZE9TS1F2bzlUMmMiLCJzaWQiOiJLT0NGUTM0U1lMVkhMN1NFTlE2Uk00TzdBT0pQWEQ1NFZHQ1hOTFdWRkU2TU5GQkxUMkxRIiwic3RhdGUiOiJSZ0thTjZXcVhSVU82bjJLb3RtcnlHd2hlVXNSRTlfeVd0bnNocFlpN3cwIiwicmVkaXJlY3QiOiJodHRwczovL3VzLmVsZWN0LmluZm8vaW5kaXZpZHVhbHMvaW5kLXNhbmtleS8ifQ.4JsOloKOyQp5sHJ0ZHx5bzxWPjQkSwyx5LE_IgqLQJo ``` # Test source ```ts 392 | expect(locationHrefs).toEqual([ 393 | '/states/ma/', '/individuals/?f_state=MA', 394 | '/places/place-wrentham/', '/individuals/?f_state=MA&f_city=WRENTHAM', 395 | '/postalcodes/zip-02093/', '/individuals/?f_zip=02093', 396 | '/counties/cty-norfolk/', 397 | ]); 398 | await expect(page.locator('section#geography')).toHaveCount(0); 399 | 400 | const districts = page.locator('section#districts'); 401 | await expect(districts).not.toContainText('donors'); 402 | await expect(districts.locator('a', { hasText: 'MA-04' })).toHaveAttribute('href', '/districts/ma-04/'); 403 | await expect(districts).toContainText('ZIP 02093 overlaps 2 districts'); 404 | expect((await districts.textContent())!.indexOf('MA-04')).toBeLessThan((await districts.textContent())!.indexOf('MA-08')); 405 | await expect(districts).not.toContainText('Precinct'); 406 | expect(errors).toEqual([]); 407 | }); 408 | 409 | test('individual Top Committees: one row per committee and a distinct-committee footer (sites#194)', async ({ page }) => { 410 | const graphqlBodies: string[] = []; 411 | await page.route('**/_resolve/**', route => route.fulfill({ status: 404, body: '' })); 412 | await page.route('**/api/graphql', async route => { 413 | const body = route.request().postData() || ''; 414 | graphqlBodies.push(body); 415 | const data = body.includes('IndividualCommittees') 416 | ? { 417 | moneyCounterparties: { 418 | deferred: false, 419 | totalCount: 35, 420 | counterparties: [ 421 | // summed over the pair's per-cycle edges by the resolver (rundeck#758) 422 | { id: 'c-1', name: 'FIRST VICTORY FUND', committeeType: 'N', amount: 12500, count: 7 }, 423 | { id: 'c-2', name: 'SECOND PAC', committeeType: 'Q', amount: 900, count: null }, 424 | ], 425 | }, 426 | } 427 | : { 428 | individuals: [{ 429 | id: 'ind-194', name: 'DOE, JANE', city: 'AUSTIN', state: 'TX', zip_code: '78701', 430 | employer: 'SELF', occupation: 'WRITER', total_contributions: 13400, contribution_count: 40, 431 | committee_count: 35, first_contribution: '2020-01-01', last_contribution: '2024-10-01', cycles: '2020,2024', 432 | employedByEmployersConnection: { edges: [] }, 433 | residesInPlacesConnection: { edges: [] }, 434 | residesInPostalCodesConnection: { edges: [] }, 435 | }], 436 | }; 437 | await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ data }) }); 438 | }); 439 | 440 | const response = await page.goto('/individuals/ind-194/'); 441 | expect(response?.status()).toBe(200); 442 | await expect(page.locator('.leaf-detail-page h1')).toHaveText('DOE, JANE', { timeout: DATA_LOAD_TIMEOUT }); 443 | await page.locator('#committees .mf-view-btn[data-view="table"]').click(); 444 | const rows = page.locator('#committees .leaf-relationship-list tbody tr'); 445 | await expect(rows).toHaveCount(2); 446 | await expect(rows.first()).toContainText('FIRST VICTORY FUND'); 447 | await expect(rows.first()).toContainText('$12,500'); 448 | await expect(rows.nth(1).locator('td').nth(3)).toHaveText('—'); 449 | await expect(page.locator('#committees .leaf-list-footer')).toHaveText('Showing top 2 of 35 committees'); 450 | const committees = graphqlBodies.find(body => body.includes('IndividualCommittees')) || ''; 451 | expect(committees).toContain('relationship: CONTRIBUTED_TO, direction: OUT, first: 20'); 452 | expect(graphqlBodies.every(body => !body.includes('contributedToCommitteesConnection'))).toBe(true); 453 | }); 454 | 455 | test('individual Top Committees: Sankey by category, decoded types, refund columns only when refunded (sites#413)', async ({ page }) => { 456 | const errors: string[] = []; 457 | page.on('pageerror', error => errors.push(error.message)); 458 | await page.route('**/_resolve/**', route => route.fulfill({ status: 404, body: '' })); 459 | await page.route('**/api/graphql', async route => { 460 | const body = route.request().postData() || ''; 461 | const row = (id: string, name: string, committeeType: string, party: string | null, amount: number) => 462 | ({ id, name, committeeType, party, affinityDem: null, affinityRep: null, amount, gross: amount, refunded: 0, count: 1 }); 463 | const data = body.includes('IndividualCommittees') 464 | ? { 465 | moneyCounterparties: { 466 | deferred: false, 467 | totalCount: 4, 468 | refundedInFullCount: 0, 469 | counterparties: [ 470 | row('c-sp', 'BIG SUPER PAC', 'O', null, 175000000), 471 | row('c-pty', 'PARTY COMMITTEE', 'Y', 'DEM', 250000), 472 | row('c-s', 'SENATOR FOR SENATE', 'S', 'DEM', 3300), 473 | row('c-h', 'REP FOR CONGRESS', 'H', 'REP', 1000), 474 | ], 475 | }, 476 | } 477 | : { 478 | individuals: [{ 479 | id: 'ind-sankey', name: 'DONOR, BIG', city: 'NEW YORK', state: 'NY', zip_code: '10001', 480 | employer: 'SELF', occupation: 'INVESTOR', total_contributions: 175254300, contribution_count: 4, 481 | committee_count: 4, first_contribution: '2020-01-01', last_contribution: '2024-10-01', cycles: '2020,2024', 482 | employedByEmployersConnection: { edges: [] }, 483 | residesInPlacesConnection: { edges: [] }, 484 | residesInPostalCodesConnection: { edges: [] }, 485 | }], 486 | }; 487 | await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ data }) }); 488 | }); 489 | 490 | const response = await page.goto('/individuals/ind-sankey/'); 491 | expect(response?.status()).toBe(200); > 492 | await expect(page.locator('#committees h2')).toHaveText('Top Committees', { timeout: DATA_LOAD_TIMEOUT }); | ^ Error: expect(locator).toHaveText(expected) failed 493 | await expect(page.locator('#committees .money-flow-chart canvas')).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 494 | await expect(page.locator('#committees .mf-note')).toBeVisible(); 495 | const option = await page.locator('#committees').evaluate(el => window.electinfoMoneyFlow!.inspect!(el)!.option as any); 496 | const series = option.series[0]; 497 | const depth = Object.fromEntries(series.data.map((d: any) => [d.name, d.depth])); 498 | expect(depth['focal']).toBe(0); 499 | expect(depth['mid:Super PACs']).toBe(1); 500 | expect(depth['out:c-h']).toBe(2); 501 | const toHouse = series.links.find((l: any) => l.target === 'out:c-h'); 502 | expect(toHouse.raw.amount).toBe(1000); 503 | expect(toHouse.value).toBeGreaterThan(1000); 504 | 505 | await page.locator('#committees .mf-view-btn[data-view="table"]').click(); 506 | await expect(page.locator('#committees .mf-note')).toBeHidden(); 507 | await expect(page.locator('#committees .leaf-relationship-list thead th')).toHaveText(['Committee', 'Type', 'Amount', 'Contributions']); 508 | const first = page.locator('#committees .leaf-relationship-list tbody tr').first(); 509 | await expect(first.locator('td').nth(1)).toHaveText('Super PAC'); 510 | await expect(first.locator('td').nth(1).locator('span')).toHaveAttribute('title', 'FEC committee type O'); 511 | expect(errors).toEqual([]); 512 | }); 513 | 514 | test('vendor live clients come from moneyCounterparties when the graph has no ranks (sites#194)', async ({ page }) => { 515 | const graphqlBodies: string[] = []; 516 | await page.route('**/_resolve/**', route => route.fulfill({ status: 404, body: '' })); 517 | await page.route('**/api/graphql', async route => { 518 | const body = route.request().postData() || ''; 519 | graphqlBodies.push(body); 520 | let data: unknown; 521 | if (body.includes('VendorRankedClients')) { 522 | data = { vendorClients: { ranked: false, clientCount: null, totalReceived: null, otherCount: null, otherAmount: null, clients: [] } }; 523 | } else if (body.includes('VendorClientList')) { 524 | data = { 525 | moneyCounterparties: { 526 | deferred: false, 527 | totalCount: 3, 528 | counterparties: [ 529 | { id: 'c-a', name: 'ALPHA FOR CONGRESS', committeeType: 'H', party: 'DEM', affinityDem: null, affinityRep: null, 530 | amount: 5000, count: 4, purposes: 'MEDIA,PRINTING' }, 531 | { id: 'c-b', name: 'BETA PAC', committeeType: 'Q', party: null, affinityDem: 0.2, affinityRep: 0.8, 532 | amount: 3000, count: 2, purposes: null }, 533 | ], 534 | }, 535 | }; 536 | } else { 537 | data = { 538 | vendors: [{ 539 | id: 'vendor-194', name: 'LIVE VENDOR', name_normalized: 'live vendor', city: 'DALLAS', state: 'TX', 540 | total_received: 9000, payment_count: 7, purpose_categories: 'MEDIA', client_count: 3, 541 | first_payment: '2020-01-01', last_payment: '2024-01-01', cycles: '2020,2024', 542 | }], 543 | }; 544 | } 545 | await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ data }) }); 546 | }); 547 | 548 | const response = await page.goto('/vendors/vendor-194/'); 549 | expect(response?.status()).toBe(200); 550 | await expect(page.locator('.leaf-detail-page h1')).toHaveText('LIVE VENDOR', { timeout: DATA_LOAD_TIMEOUT }); 551 | await expect(page.locator('#clients .leaf-list-footer')).toHaveText('Showing top 2 of 3 committees'); 552 | await expect(page.locator('#clients .money-flow-chart canvas')).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 553 | await page.locator('#clients .mf-view-btn[data-view="table"]').click(); 554 | const rows = page.locator('#clients .leaf-relationship-list tbody tr'); 555 | await expect(rows).toHaveCount(2); 556 | await expect(rows.first()).toContainText('MEDIA,PRINTING'); 557 | const list = graphqlBodies.find(body => body.includes('VendorClientList')) || ''; 558 | expect(list).toContain('relationship: PAYS, direction: IN, first: 20'); 559 | expect(graphqlBodies.every(body => !body.includes('committeesPaysConnection'))).toBe(true); 560 | }); 561 | }); 562 | ```