From 4ec0b18a419b61916ac2282588c4541031211f22 Mon Sep 17 00:00:00 2001 From: Luke Brody Date: Sat, 1 Feb 2025 18:14:13 -0700 Subject: [PATCH] Refactor and fix tests involving search (#915) Allow search to work asynchronously Also refactor into utils --- react/src/components/search.tsx | 1 + react/test/article-universe_test.ts | 20 ++++++-------------- react/test/article_test.ts | 7 ++----- react/test/comparison_test.ts | 8 +++++--- react/test/navigation_test.ts | 4 +++- react/test/settings_test.ts | 12 +++++------- react/test/test_utils.ts | 19 +++++++++++++++++++ 7 files changed, 41 insertions(+), 30 deletions(-) diff --git a/react/src/components/search.tsx b/react/src/components/search.tsx index f95bfa48c..85faaef5b 100644 --- a/react/src/components/search.tsx +++ b/react/src/components/search.tsx @@ -146,6 +146,7 @@ export function SearchBox(props: { textDecoration: 'none', color: colors.textMain, }} + data-test-id={idx === focused ? 'selected-search-result' : undefined} >
{ }) test('article-universe-search', async (t) => { - await t - .click(searchField) - .typeText(searchField, 'Chino') - await t - .pressKey('enter') + await doSearch(t, 'Chino') await t.expect(getLocationWithoutSettings()) .eql(`${target}/article.html?longname=Chino+city%2C+California%2C+USA&universe=California%2C+USA`) }) test('article-universe-compare', async (t) => { // compare to San Francisco - await t - .click(Selector('input').withAttribute('placeholder', 'Other region...')) - .typeText(Selector('input').withAttribute('placeholder', 'Other region...'), 'San Francisco city california') - .pressKey('enter') + await createComparison(t, 'San Francisco city california') await t.expect(getLocationWithoutSettings()) .eql( `${target}/comparison.html?longnames=%5B%22San+Marino+city%2C+California%2C+USA%22%2C%22San+Francisco+city%2C+California%2C+USA%22%5D&universe=California%2C+USA`, @@ -101,10 +96,7 @@ test('article-universe-compare', async (t) => { test('article-universe-compare-different', async (t) => { // compare to Chicago - await t - .click(Selector('input').withAttribute('placeholder', 'Other region...')) - .typeText(Selector('input').withAttribute('placeholder', 'Other region...'), 'Chicago city illinois') - .pressKey('enter') + await createComparison(t, 'Chicago city illinois') await t.expect(getLocationWithoutSettings()) .eql( `${target}/comparison.html?longnames=%5B%22San+Marino+city%2C+California%2C+USA%22%2C%22Chicago+city%2C+Illinois%2C+USA%22%5D`, diff --git a/react/test/article_test.ts b/react/test/article_test.ts index 36c8fbe7c..647e860c1 100644 --- a/react/test/article_test.ts +++ b/react/test/article_test.ts @@ -5,6 +5,7 @@ import { getLocationWithoutSettings, safeReload, screencap, urbanstatsFixture, getLocation, + createComparison, } from './test_utils' urbanstatsFixture('longer article test', '/article.html?longname=California%2C+USA') @@ -136,11 +137,7 @@ test('download-article-dark', async (t) => { }) test('create-comparison-from-article', async (t) => { - const otherRegion = Selector('input').withAttribute('placeholder', 'Other region...') - await t - .click(otherRegion) - .typeText(otherRegion, 'pasadena city california') - .pressKey('enter') + await createComparison(t, 'pasadena city california') await t.expect(getLocationWithoutSettings()) .eql(comparisonPage(['San Marino city, California, USA', 'Pasadena city, California, USA'])) }) diff --git a/react/test/comparison_test.ts b/react/test/comparison_test.ts index 548f88513..b5ae96f5a 100644 --- a/react/test/comparison_test.ts +++ b/react/test/comparison_test.ts @@ -1,6 +1,6 @@ import { Selector } from 'testcafe' -import { target, checkTextboxes, comparisonPage, downloadImage, getLocation, getLocationWithoutSettings, screencap, urbanstatsFixture } from './test_utils' +import { target, checkTextboxes, comparisonPage, downloadImage, getLocation, getLocationWithoutSettings, screencap, urbanstatsFixture, waitForSelectedSearchResult } from './test_utils' export const upperSGV = 'Upper San Gabriel Valley CCD [CCD], Los Angeles County, California, USA' export const pasadena = 'Pasadena CCD [CCD], Los Angeles County, California, USA' @@ -49,7 +49,8 @@ test('comparison-3-add', async (t) => { await t .click(otherRegion) .typeText(otherRegion, 'san marino city california') - .pressKey('enter') + await waitForSelectedSearchResult(t) + await t.pressKey('enter') await t.expect(getLocationWithoutSettings()) .eql(comparisonPage([upperSGV, pasadena, swSGV, 'San Marino city, California, USA'])) }) @@ -78,7 +79,8 @@ test('comparison-3-replace-second', async (t) => { const otherRegion = Selector('input').withAttribute('placeholder', 'Replacement') await t .typeText(otherRegion, 'East San Gabriel Valley') - .pressKey('enter') + await waitForSelectedSearchResult(t) + await t.pressKey('enter') await t.expect(getLocationWithoutSettings()) .eql(comparisonPage([upperSGV, eastSGV, swSGV])) }) diff --git a/react/test/navigation_test.ts b/react/test/navigation_test.ts index db384c489..de7acc8b3 100644 --- a/react/test/navigation_test.ts +++ b/react/test/navigation_test.ts @@ -1,6 +1,6 @@ import { ClientFunction, RequestHook, Selector } from 'testcafe' -import { getLocation, openInNewTabModifiers, screencap, searchField, target, urbanstatsFixture, waitForPageLoaded } from './test_utils' +import { getLocation, openInNewTabModifiers, screencap, searchField, target, urbanstatsFixture, waitForPageLoaded, waitForSelectedSearchResult } from './test_utils' urbanstatsFixture('navigation test', '/') @@ -175,6 +175,7 @@ test('quick load', async (t) => { await t .click(searchField) .typeText(searchField, 'Kalamazoo city') + await waitForSelectedSearchResult(t) delayRequests.setFilter(dataFilter) await t.pressKey('enter') await t.expect(Selector('[data-test-id=quickLoad]').exists).ok() @@ -187,6 +188,7 @@ test('long load', async (t) => { await t .click(searchField) .typeText(searchField, 'Kalamazoo city') + await waitForSelectedSearchResult(t) delayRequests.setFilter(dataFilter) await t.pressKey('enter') await t.wait(3000) diff --git a/react/test/settings_test.ts b/react/test/settings_test.ts index 3e4469ba2..2d844191d 100644 --- a/react/test/settings_test.ts +++ b/react/test/settings_test.ts @@ -3,10 +3,11 @@ import fs from 'fs' import { Selector } from 'testcafe' import { - searchField, target, checkTextboxes, getLocation, + target, checkTextboxes, getLocation, safeReload, screencap, urbanstatsFixture, + doSearch, } from './test_utils' const testLocation = `${target}/article.html?longname=San+Marino+city%2C+California%2C+USA` @@ -41,8 +42,7 @@ test('check-settings-loaded-desktop', async (t) => { test('check-settings-persistent', async (t) => { await t.expect(Selector('span').withText(/mi/).exists).ok() // navigate to Pasadena via search - await t.typeText(searchField, 'Pasadena, CA, USA') - await t.pressKey('enter') + await doSearch(t, 'Pasadena, CA, USA') await t.expect(getLocation()).match(/\/article\.html\?longname=Pasadena\+city%2C\+California%2C\+USA/) // check box "Imperial" await checkTextboxes(t, ['Use Imperial Units']) @@ -55,8 +55,7 @@ test('check-settings-persistent', async (t) => { test('check-related-button-checkboxes-page-specific', async (t) => { // navigate to 91108 - await t.typeText(searchField, '91108') - await t.pressKey('enter') + await doSearch(t, '91108') await t.expect(getLocation()).match(/\/article\.html\?longname=91108%2C\+USA/) // this should not be page specific await t.expect(Selector('span').withText(/mi/).exists).ok() @@ -78,8 +77,7 @@ test('checkboxes-can-be-checked', async (t) => { // check that Pasadena CCD is now present await t.expect(Selector('path').withAttribute('class', /tag-Pasadena_CCD/).exists).ok() // check that this is persistent by going to Berkeley and checking that Briones CCD is present - await t.typeText(searchField, 'Berkeley, CA, USA') - await t.pressKey('enter') + await doSearch(t, 'Berkeley, CA, USA') await t.expect(getLocation()).match(/\/article\.html\?longname=Berkeley\+city%2C\+California%2C\+USA/) await t.expect(Selector('path').withAttribute('class', /tag-Briones_CCD/).exists).ok() }) diff --git a/react/test/test_utils.ts b/react/test/test_utils.ts index 43a0c7986..4a673768b 100644 --- a/react/test/test_utils.ts +++ b/react/test/test_utils.ts @@ -223,3 +223,22 @@ export async function safeReload(t: TestController): Promise { } export const openInNewTabModifiers = process.platform === 'darwin' ? { meta: true } : { ctrl: true } + +export async function waitForSelectedSearchResult(t: TestController): Promise { + await t.expect(Selector('[data-test-id=selected-search-result]').exists).ok() +} + +export async function doSearch(t: TestController, searchTerm: string): Promise { + await t.typeText(searchField, searchTerm) + await waitForSelectedSearchResult(t) + await t.pressKey('enter') +} + +export async function createComparison(t: TestController, searchTerm: string): Promise { + const otherRegion = Selector('input').withAttribute('placeholder', 'Other region...') + await t + .click(otherRegion) + .typeText(otherRegion, searchTerm) + await waitForSelectedSearchResult(t) + await t.pressKey('enter') +}