# 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 >> block detail renders voter data and bounded geography links
- Location: tests/ui/leaf-details.spec.ts:90:7
# Error details
```
Error: expect(locator).toHaveText(expected) failed
Locator: locator('.leaf-detail-page h1')
Expected pattern: /Block 1020/i
Received string: "Census Block Not Found"
Timeout: 20000ms
Call log:
- Expect "toHaveText" locator('.leaf-detail-page h1') with timeout 20000ms
- waiting for locator('.leaf-detail-page h1')
44 × locator resolved to Census Block Not Found
- unexpected value "Census Block Not Found"
```
```yaml
- heading "Census Block Not Found" [level=1]
```
# Test source
```ts
1 | import { test, expect, Page } from '@playwright/test';
2 |
3 | const DATA_LOAD_TIMEOUT = 20_000;
4 |
5 | const samples = {
6 | individual: {
7 | path: '/individuals/93964649-04c3-db10-7f63-261c8c488cce/',
8 | heading: /BLOOMBERG, MICHAEL/i,
9 | operation: 'IndividualDetail',
10 | relationship: 'contributedToCommitteesConnection',
11 | },
12 | employer: {
13 | path: '/employers/5f9a1727-2225-3699-685b-8fb15c17c8f3/',
14 | heading: /SPACE EXPLORATION TECHNOLOGIES/i,
15 | operation: 'EmployerDonors',
16 | relationship: 'individualsEmployedByConnection',
17 | },
18 | vendor: {
19 | path: '/vendors/a2e9cfea-dee0-2824-46f2-843916cd2199/',
20 | heading: /TARGETED VICTORY/i,
21 | operation: 'VendorClients',
22 | relationship: 'committeesPaysConnection',
23 | },
24 | block: {
25 | path: '/blocks/a2e648d3-3cd7-613b-1bfe-85ea19fad69a/',
26 | heading: /Block 1020/i,
27 | operation: 'BlockDetail',
28 | relationship: 'inCountyCountiesConnection',
29 | },
30 | precinct: {
31 | path: '/precincts/2ff858ff-68ec-a17d-a564-4e71054573c6/',
32 | heading: /Providence/i,
33 | operation: 'PrecinctDetail',
34 | relationship: 'inCountyCountiesConnection',
35 | },
36 | };
37 |
38 | async function openLeafDetail(
39 | page: Page,
40 | sample: { path: string; heading: RegExp; operation: string; relationship: string },
41 | ): Promise {
42 | const graphqlBodies: string[] = [];
43 | page.on('request', request => {
44 | if (request.method() === 'POST' && request.url().includes('/api/graphql')) {
45 | graphqlBodies.push(request.postData() || '');
46 | }
47 | });
48 |
49 | const response = await page.goto(sample.path);
50 | expect(response?.status(), `${sample.path} should serve the baked shell`).toBe(200);
> 51 | await expect(page.locator('.leaf-detail-page h1')).toHaveText(sample.heading, { timeout: DATA_LOAD_TIMEOUT });
| ^ Error: expect(locator).toHaveText(expected) failed
52 |
53 | await expect(page).toHaveTitle(/elect\.info$/i);
54 | await expect(page.locator('meta[name="robots"]')).toHaveAttribute('content', 'noindex, follow');
55 | await expect(page.locator('link[rel="canonical"]')).toHaveAttribute('href', /^https:\/\/us\.elect\.info\//);
56 | await expect(page.locator('section#overview')).toBeVisible();
57 |
58 | expect(graphqlBodies.some(body => body.includes(sample.operation)), `${sample.operation} request missing`).toBe(true);
59 | const boundedBody = graphqlBodies.find(body => body.includes(sample.relationship));
60 | expect(boundedBody, `${sample.relationship} request missing`).toBeTruthy();
61 | expect(boundedBody).toContain('first: 20');
62 | return graphqlBodies;
63 | }
64 |
65 | test.describe('leaf collection client-side detail pages', () => {
66 | test('individual detail renders a bounded contribution profile', async ({ page }) => {
67 | const bodies = await openLeafDetail(page, samples.individual);
68 | const detail = bodies.find(body => body.includes('IndividualDetail')) || '';
69 | expect(detail).toContain('sort: [{ edge: { total_amount: DESC } }]');
70 | expect(detail.match(/first:\s*20/g) || []).toHaveLength(4);
71 | await expect(page.locator('#committees .leaf-relationship-list')).toBeVisible();
72 | });
73 |
74 | test('employer detail renders totals and a bounded donor list below threshold', async ({ page }) => {
75 | const bodies = await openLeafDetail(page, samples.employer);
76 | const donors = bodies.find(body => body.includes('EmployerDonors')) || '';
77 | expect(donors.match(/first:\s*20/g) || []).toHaveLength(1);
78 | await expect(page.locator('#activity')).toContainText('Employee donors');
79 | await expect(page.locator('#donors .leaf-relationship-list')).toBeVisible();
80 | });
81 |
82 | test('vendor detail renders totals and edge-sorted committee clients', async ({ page }) => {
83 | const bodies = await openLeafDetail(page, samples.vendor);
84 | const clients = bodies.find(body => body.includes('VendorClients')) || '';
85 | expect(clients).toContain('sort: [{ edge: { total_amount: DESC } }]');
86 | expect(clients.match(/first:\s*20/g) || []).toHaveLength(1);
87 | await expect(page.locator('#clients .leaf-relationship-list')).toBeVisible();
88 | });
89 |
90 | test('block detail renders voter data and bounded geography links', async ({ page }) => {
91 | const bodies = await openLeafDetail(page, samples.block);
92 | const detail = bodies.find(body => body.includes('BlockDetail')) || '';
93 | expect(detail.match(/first:\s*20/g) || []).toHaveLength(2);
94 | await expect(page.locator('#registration')).toContainText('Registered');
95 | await expect(page.locator('#geography a').first()).toBeVisible();
96 | });
97 |
98 | test('precinct detail bootstraps directly and renders results', async ({ page }) => {
99 | const bodies = await openLeafDetail(page, samples.precinct);
100 | const detail = bodies.find(body => body.includes('PrecinctDetail')) || '';
101 | expect(detail.match(/first:\s*20/g) || []).toHaveLength(1);
102 | await expect(page.locator('#results')).toContainText('Democratic');
103 | await expect(page.locator('#results')).toContainText('D+51.7%');
104 | await expect(page.locator('#county a').first()).toBeVisible();
105 | });
106 |
107 | test('tract detail remains client-rendered under the generalized leaf route', async ({ page }) => {
108 | const graphqlBodies: string[] = [];
109 | page.on('request', request => {
110 | if (request.method() === 'POST' && request.url().includes('/api/graphql')) {
111 | graphqlBodies.push(request.postData() || '');
112 | }
113 | });
114 |
115 | const response = await page.goto('/tracts/48453000101/');
116 | expect(response?.status()).toBe(200);
117 | await expect(page.locator('header h1')).toContainText('Census Tract 1.01', { timeout: DATA_LOAD_TIMEOUT });
118 | await expect(page).toHaveTitle(/elect\.info$/i);
119 | await expect(page.locator('meta[name="robots"]')).toHaveAttribute('content', 'noindex, follow');
120 | await expect(page.locator('link[rel="canonical"]')).toHaveAttribute('href', /^https:\/\/us\.elect\.info\/tracts\//);
121 |
122 | const detail = graphqlBodies.find(body => body.includes('TractDetail')) || '';
123 | expect(detail).toContain('variables');
124 | expect(detail.match(/limit:\s*20/g) || []).toHaveLength(3);
125 | });
126 |
127 | test('hub employer renders totals without issuing a live connection query', async ({ page }) => {
128 | const graphqlBodies: string[] = [];
129 | const resolveUrls: string[] = [];
130 | await page.route('**/_resolve/**', async route => {
131 | resolveUrls.push(route.request().url());
132 | await route.fulfill({
133 | status: 200,
134 | contentType: 'application/json',
135 | body: JSON.stringify({ canonical_path: '/employers/hub-employer/' }),
136 | });
137 | });
138 | await page.route('**/api/graphql', async route => {
139 | const body = route.request().postData() || '';
140 | graphqlBodies.push(body);
141 | await route.fulfill({
142 | status: 200,
143 | contentType: 'application/json',
144 | body: JSON.stringify({
145 | data: {
146 | employers: [{
147 | id: 'hub-test',
148 | name: 'HUB EMPLOYER',
149 | name_normalized: 'hub employer',
150 | total_employee_contributions: 123456789,
151 | employee_donor_count: 50000,
```