# 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 >> hub vendor resolves an alias without issuing a live connection query - Location: tests/ui/leaf-details.spec.ts:214:7 # Error details ``` Error: page.goto: net::ERR_CONNECTION_REFUSED at http://10.1.105.22/vendors/consulting/hub-alias/ Call log: - navigating to "http://10.1.105.22/vendors/consulting/hub-alias/", waiting until "load" ``` # Test source ```ts 165 | const graphqlBodies: string[] = []; 166 | const resolveUrls: string[] = []; 167 | await page.route('**/_resolve/**', async route => { 168 | resolveUrls.push(route.request().url()); 169 | await route.fulfill({ 170 | status: 200, 171 | contentType: 'application/json', 172 | body: JSON.stringify({ canonical_path: '/employers/hub-employer/' }), 173 | }); 174 | }); 175 | await page.route('**/api/graphql', async route => { 176 | const body = route.request().postData() || ''; 177 | graphqlBodies.push(body); 178 | await route.fulfill({ 179 | status: 200, 180 | contentType: 'application/json', 181 | body: JSON.stringify({ 182 | data: { 183 | employers: [{ 184 | id: 'hub-test', 185 | name: 'HUB EMPLOYER', 186 | name_normalized: 'hub employer', 187 | total_employee_contributions: 123456789, 188 | employee_donor_count: 50000, 189 | contribution_count: 75000, 190 | committee_count: 100, 191 | first_contribution: '2020-01-01', 192 | last_contribution: '2026-01-01', 193 | cycles: '2020,2022,2024,2026', 194 | }], 195 | }, 196 | }), 197 | }); 198 | }); 199 | 200 | const response = await page.goto('/employers/hub%20test/'); 201 | expect(response?.status()).toBe(200); 202 | await expect(page.locator('.leaf-detail-page h1')).toHaveText('HUB EMPLOYER', { timeout: DATA_LOAD_TIMEOUT }); 203 | await expect(page.locator('.leaf-hub-deferred')).toContainText('50,000 related records'); 204 | await expect(page.locator('link[rel="canonical"]')).toHaveAttribute( 205 | 'href', 'https://us.elect.info/employers/hub-employer/' 206 | ); 207 | expect(resolveUrls).toHaveLength(1); 208 | expect(new URL(resolveUrls[0]).pathname).toBe('/_resolve/employers/hub%20test'); 209 | expect(graphqlBodies).toHaveLength(1); 210 | expect(graphqlBodies[0]).toContain('EmployerProfile'); 211 | expect(graphqlBodies[0]).not.toContain('individualsEmployedByConnection'); 212 | }); 213 | 214 | test('hub vendor resolves an alias without issuing a live connection query', async ({ page }) => { 215 | const graphqlBodies: string[] = []; 216 | await page.route('**/_resolve/vendors/**', async route => { 217 | const path = new URL(route.request().url()).pathname; 218 | if (path.endsWith('/hub-alias')) { 219 | await route.fulfill({ status: 301, headers: { Location: '/vendors/hub-canonical/' } }); 220 | return; 221 | } 222 | await route.fulfill({ 223 | status: 200, 224 | contentType: 'application/json', 225 | body: JSON.stringify({ 226 | entity_id: 'hub-vendor-id', 227 | canonical_path: '/vendors/hub-canonical/', 228 | }), 229 | }); 230 | }); 231 | await page.route('**/api/graphql', async route => { 232 | const body = route.request().postData() || ''; 233 | graphqlBodies.push(body); 234 | const id = JSON.parse(body).variables?.id; 235 | if (body.includes('VendorPurposeFlow')) { 236 | await route.fulfill({ json: { data: { vendorPurposeFlow: { 237 | taxonomyVersion: null, totalAmount: 0, groups: [], links: [], otherLinks: [], 238 | } } } }); 239 | return; 240 | } 241 | await route.fulfill({ 242 | status: 200, 243 | contentType: 'application/json', 244 | body: JSON.stringify({ 245 | data: { 246 | vendors: id === 'hub-vendor-id' ? [{ 247 | id: 'hub-vendor-id', 248 | name: 'HUB VENDOR', 249 | name_normalized: 'hub vendor', 250 | city: 'AUSTIN', 251 | state: 'TX', 252 | total_received: 987654321, 253 | payment_count: 75000, 254 | purpose_categories: 'MEDIA', 255 | client_count: 50000, 256 | first_payment: '2020-01-01', 257 | last_payment: '2026-01-01', 258 | cycles: '2020,2022,2024,2026', 259 | }] : [], 260 | }, 261 | }), 262 | }); 263 | }); 264 | > 265 | const response = await page.goto('/vendors/consulting/hub-alias/'); | ^ Error: page.goto: net::ERR_CONNECTION_REFUSED at http://10.1.105.22/vendors/consulting/hub-alias/ 266 | expect(response?.status()).toBe(200); 267 | await expect(page.locator('.leaf-detail-page h1')).toHaveText('HUB VENDOR', { timeout: DATA_LOAD_TIMEOUT }); 268 | await expect(page.locator('.leaf-hub-deferred')).toContainText('50,000 related records'); 269 | await expect(page.locator('link[rel="canonical"]')).toHaveAttribute( 270 | 'href', 'https://us.elect.info/vendors/hub-canonical/' 271 | ); 272 | // Alias/canonical profiles and bounded ranked/purpose reads are allowed. 273 | // The hub guard must still suppress both live-client query implementations. 274 | expect(graphqlBodies.filter(body => body.includes('VendorProfile'))).toHaveLength(2); 275 | expect(graphqlBodies.filter(body => body.includes('VendorRankedClients'))).toHaveLength(1); 276 | const purposeReads = graphqlBodies.filter(body => body.includes('VendorPurposeFlow')); 277 | expect(purposeReads).toHaveLength(1); 278 | expect(JSON.parse(purposeReads[0]).variables).toEqual({ id: 'hub-vendor-id', cycle: null }); 279 | expect(graphqlBodies.some(body => body.includes('"id":"hub-vendor-id"'))).toBe(true); 280 | expect(graphqlBodies.every(body => !body.includes('committeesPaysConnection'))).toBe(true); 281 | expect(graphqlBodies.every(body => !body.includes('moneyCounterparties'))).toBe(true); 282 | await expect(page.locator('#purposes .purpose-raw')).toBeVisible(); 283 | }); 284 | 285 | test('hub vendor lists its ranked top clients with a top-N-of-P footer and Sankey (sites#261)', async ({ page }) => { 286 | const graphqlBodies: string[] = []; 287 | await page.route('**/_resolve/**', route => route.fulfill({ 288 | status: 200, 289 | contentType: 'application/json', 290 | body: JSON.stringify({ entity_id: 'hub-ranked', canonical_path: '/vendors/hub-ranked/' }), 291 | })); 292 | await page.route('**/api/graphql', async route => { 293 | const body = route.request().postData() || ''; 294 | graphqlBodies.push(body); 295 | const data = body.includes('VendorRankedClients') 296 | ? { 297 | vendorClients: { 298 | ranked: true, 299 | clientCount: 61204, 300 | totalReceived: 987654321, 301 | otherCount: 61202, 302 | otherAmount: 900000000, 303 | clients: [ 304 | { 305 | committeeId: 'c-dem', name: 'DEM VICTORY FUND', committeeType: 'N', party: 'DEM', 306 | affinityDem: null, affinityRep: null, amount: 60000000, count: 1200, purposes: 'MEDIA BUY', rank: 1, 307 | }, 308 | { 309 | committeeId: 'c-rep', name: 'REP LEADERSHIP PAC', committeeType: 'Q', party: null, 310 | affinityDem: 0.05, affinityRep: 0.95, amount: 27654321, count: 640, purposes: 'DIGITAL, CONSULTING', rank: 2, 311 | }, 312 | ], 313 | }, 314 | } 315 | : { 316 | vendors: [{ 317 | id: 'hub-ranked', 318 | name: 'RANKED HUB VENDOR', 319 | name_normalized: 'ranked hub vendor', 320 | city: 'AUSTIN', 321 | state: 'TX', 322 | total_received: 987654321, 323 | payment_count: 75000, 324 | purpose_categories: 'MEDIA', 325 | client_count: 61204, 326 | first_payment: '2020-01-01', 327 | last_payment: '2026-01-01', 328 | cycles: '2020,2022,2024,2026', 329 | }], 330 | }; 331 | await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ data }) }); 332 | }); 333 | 334 | const response = await page.goto('/vendors/hub-ranked/'); 335 | expect(response?.status()).toBe(200); 336 | await expect(page.locator('.leaf-detail-page h1')).toHaveText('RANKED HUB VENDOR', { timeout: DATA_LOAD_TIMEOUT }); 337 | await expect(page.locator('.leaf-hub-deferred')).toHaveCount(0); 338 | await expect(page.locator('#clients .leaf-list-footer')).toHaveText('Showing top 2 of 61,204 committees'); 339 | await expect(page.locator('#clients .money-flow-chart canvas')).toBeVisible({ timeout: DATA_LOAD_TIMEOUT }); 340 | 341 | await page.locator('#clients .mf-view-btn[data-view="table"]').click(); 342 | const rows = page.locator('#clients .leaf-relationship-list tbody tr'); 343 | await expect(rows).toHaveCount(2); 344 | await expect(rows.first()).toContainText('DEM VICTORY FUND'); 345 | await expect(rows.first()).toContainText('MEDIA BUY'); 346 | await expect(page.locator('#clients .leaf-list-footer')).toBeVisible(); 347 | await page.locator('#clients .mf-view-btn[data-view="sankey"]').click(); 348 | 349 | expect(graphqlBodies.every(body => !body.includes('committeesPaysConnection'))).toBe(true); 350 | expect(graphqlBodies.filter(body => body.includes('VendorRankedClients'))).toHaveLength(1); 351 | }); 352 | 353 | test('individual Overview, Location and Districts link like the voter page, districts by ZIP overlap', async ({ page, request }) => { 354 | await skipIfPremiumGated(request, '/individuals/'); 355 | const errors: string[] = []; 356 | page.on('pageerror', error => errors.push(error.message)); 357 | await page.route('**/_resolve/**', route => route.fulfill({ status: 404, body: '' })); 358 | await page.route('**/api/graphql', async route => { 359 | const body = route.request().postData() || ''; 360 | const overlap = (node: Record, area: number) => ({ node, properties: { overlap_land_area: area } }); 361 | const data = body.includes('IndividualCommittees') 362 | ? { moneyCounterparties: { deferred: false, totalCount: 0, refundedInFullCount: 0, counterparties: [] } } 363 | : { 364 | individuals: [{ 365 | id: 'ind-parity', name: 'MOLLICA, CAROL', city: 'WRENTHAM', state: 'MA', zip_code: '02093', ```