Skip to content

user-testing.md

Latest commit

 

History

History
684 lines (507 loc) · 32.7 KB

user-testing.md

File metadata and controls

684 lines (507 loc) · 32.7 KB

Fair Housing Data Mapping Tool — User Testing Guide

A comprehensive checklist for manually testing the Fair Housing Data Mapping Tool. Each test scenario includes steps to perform, expected results, and a pass/fail checkbox.

Prerequisites

  • R environment with all dependencies installed (devtools::load_all() succeeds)
  • Modern browser (Chrome, Firefox, or Safari)
  • Internet connection (required for basemap tiles and address search)
  • App running locally via shiny::runApp()

How to Use This Guide

  1. Launch the app: devtools::load_all(); shiny::runApp()
  2. Work through each section in order — later sections build on earlier ones
  3. Mark each test as Pass or Fail
  4. Note any unexpected behavior in the comments column

1. Initial Load & Navigation

1.1 App Launch

  • Steps:
    1. Run shiny::runApp() in the R console
    2. Wait for the browser to open
  • Expected: App loads to the Data Dashboard page. Sidebar shows "Build Your Map" with a Geography dropdown. The main area shows an empty map with a step progress indicator. No errors in the R console.
  • Pass/Fail: [ ]

1.2 User Guide Page

  • Steps:
    1. Click the "User Guide" link in the top navigation bar
    2. Scroll through the content
    3. Verify all sections are present: Overview, Building Your Map (Steps 1-4 with tables), Reading the Map, Value Boxes, Step Progress Indicator, Tabs, R/ECAP Areas, Downloading Your Data, Sources and Notes, Tips
    4. Verify the two data tables (geography levels, category availability) render with purple headers and alternating row colors
    5. Click "Data Dashboard" to return
  • Expected: User Guide page displays a centered, scrollable guide with branded headings (Oswald font, purple). Tables render correctly. Footer stays at the bottom of the viewport (not mid-page). Returning to Data Dashboard restores the previous state (map, selections, click state all preserved).
  • Pass/Fail: [ ]

1.3 User Guide Responsive Layout

  • Steps:
    1. Open the User Guide page
    2. Use browser DevTools responsive mode to test at: Desktop (1200px), Tablet (768px), Phone (375px)
  • Expected: At desktop, content is centered with ~800px max-width. At tablet, content fills width and tables remain readable. At phone, no horizontal scroll, tables use compact padding, text is legible.
  • Pass/Fail: [ ]

2. State-Level Map

2.1 Basic Choropleth Render

  • Steps:
    1. Select Geography: State
    2. Select Category: Race/Ethnicity
    3. Select Variable: White (%)
  • Expected: All U.S. states render as a choropleth in purple shades. Legend appears in the bottom-right corner. Step progress shows all steps completed (purple dots). A loading overlay briefly appears during render.
  • Pass/Fail: [ ]

2.2 State Click Interaction

  • Steps:
    1. With the State choropleth from 2.1 visible, click on California
  • Expected: California gets an orange border. The left value box updates to show California's White (%) value. The right value box shows the national average. The Charts tab and Table tab are now populated.
  • Pass/Fail: [ ]

2.3 Variable Switch (Same Category)

  • Steps:
    1. With California selected from 2.2, change the variable to Black (%)
  • Expected: Choropleth updates with new colors. Legend updates. Value boxes update to show Black (%) values. The map does NOT re-zoom — it stays at the same extent. No full page reload. Loading overlay appears briefly.
  • Pass/Fail: [ ]

2.4 Category Switch

  • Steps:
    1. Change Category to Housing Problems
    2. Select a variable (e.g., Housing Problems - White)
  • Expected: Variable dropdown resets and populates with Housing Problems variables. After selecting a variable, choropleth updates. Previous click selection (California) persists — the orange highlight remains. Value boxes temporarily show stale data until a new variable is selected, then update with the new variable's values for California. This avoids requiring a re-click after category change.
  • Pass/Fail: [ ]

2.5 Category Comparison Chart — Race/Ethnicity

  • Steps:
    1. Select Category: Race/Ethnicity, Variable: White (%)
    2. Click on Alabama
    3. Switch to the Charts tab
  • Expected: Two charts appear. Top: "White (%) Trends" time-series bar chart with purple bars (Alabama) and gray bars (national average). Bottom: horizontal bar chart titled "Race/Ethnicity in Alabama - For various groups" showing bars for White, Black, Hispanic, Asian, etc. The White bar is highlighted in darker purple.
  • Pass/Fail: [ ]

2.6 No Comparison Chart — Disability Category

  • Steps:
    1. Select Category: Disability, Variable: any available variable
    2. Click on any state
    3. Switch to the Charts tab
  • Expected: Only the time-series chart appears. No category comparison chart below it (Disability does not have race/ethnicity breakdowns with multiple sibling variables).
  • Pass/Fail: [ ]

3. County-Level Map

3.1 Geography Transition (State to County)

  • Steps:
    1. Start with a State-level choropleth displayed (from Section 2)
    2. Change Geography to County
  • Expected: Previous state choropleth dims to ~30% opacity (ghosted). A selection overlay appears with text: "Select a state to view its counties". The category and variable dropdowns reset. You can still pan/zoom the ghosted map.
  • Pass/Fail: [ ]

3.2 County Selection Flow

  • Steps:
    1. From 3.1, select Focus Area: Alabama
    2. Overlay message updates
    3. Select Category: Race/Ethnicity
    4. Select Variable: White (%)
  • Expected: After selecting Alabama, overlay updates to prompt for category. After selecting variable, overlay fades, ghosted map is replaced with Alabama county choropleth. Map zooms to Alabama extent. All counties are colored by White (%).
  • Pass/Fail: [ ]

3.3 County Click with Benchmarks

  • Steps:
    1. With Alabama counties displayed (from 3.2), click on Jefferson County
  • Expected: Jefferson County gets an orange border. Left value box shows Jefferson County's White (%) value. Right value box shows Alabama statewide average. Charts tab shows time-series with gray bars for state comparison.
  • Pass/Fail: [ ]

3.4 County Basemap Labels

  • Steps:
    1. Zoom in on the Alabama county map
  • Expected: City names and road labels appear on top of the choropleth polygons, helping with geographic orientation.
  • Pass/Fail: [ ]

3.5 Mortgage Category (County-specific)

  • Steps:
    1. Change Category to Mortgage Application and Denial
    2. Select a variable (e.g., Mortgage Denial Rate - Black)
    3. Click on a county
    4. Switch to Charts tab
  • Expected: Choropleth updates. Category comparison chart (if shown) groups only Mortgage Denial Rate variables together — not mixed with Mortgage Application Rate variables.
  • Pass/Fail: [ ]

3.6 Switch States

  • Steps:
    1. With Alabama counties displayed, change Focus Area to Illinois
  • Expected: Map transitions to show Illinois counties. Previous Alabama choropleth ghosting effect may briefly appear. Category and variable selections may reset depending on availability.
  • Pass/Fail: [ ]

4. Tract-Level Map

4.1 Geography Transition to Tract

  • Steps:
    1. Change Geography to Tract
  • Expected: Previous choropleth ghosts. Overlay prompts to select a county. Step progress shows 4 steps (Geography, Focus Area, Category, Variable).
  • Pass/Fail: [ ]

4.2 Tract Selection — Cook County, IL

  • Steps:
    1. Select Focus Area: type "Cook" and select Cook County, IL
    2. Select Category: Race/Ethnicity
    3. Select Variable: Hispanic (%)
  • Expected: ~1,300 tracts render for Cook County. Map zooms to Cook County extent. Choropleth shows Hispanic (%) distribution. Loading overlay appears during render (may take a few seconds for this many tracts).
  • Pass/Fail: [ ]

4.3 Three-Level Comparison Chart (Tract)

  • Steps:
    1. With Cook County tracts from 4.2, click on any tract
    2. Switch to Charts tab
  • Expected: Time-series chart shows three bar groups per year: purple (selected tract), gray (Cook County average), light purple (Illinois statewide average). Legend distinguishes all three levels.
  • Pass/Fail: [ ]

4.4 Category Comparison Chart at Tract Level

  • Steps:
    1. Remain on the Charts tab from 4.3
  • Expected: Below the time-series chart, a category comparison chart shows all Race/Ethnicity variables (White, Black, Hispanic, Asian, etc.) as horizontal bars for the selected tract. The Hispanic bar is highlighted darker.
  • Pass/Fail: [ ]

4.5 Tract-Only Category — Transportation

  • Steps:
    1. Change Category to Transportation
    2. Select any available variable
    3. Click on a tract
  • Expected: Choropleth updates. Transportation is only available at the Tract level — switching to County or State geography should not show this category.
  • Pass/Fail: [ ]

4.6 Tract-Only Category — Housing Tenure

  • Steps:
    1. Change Category to Housing Tenure
    2. Select any available variable
  • Expected: Choropleth updates. Category comparison chart appears (if the variable has race/ethnicity breakdowns).
  • Pass/Fail: [ ]

4.7 Tract-Only Category — Subsidized Housing

  • Steps:
    1. Change Category to Subsidized Housing
    2. Select any available variable
    3. Click on a tract, switch to Charts tab
  • Expected: Choropleth updates. Only time-series chart shows (no category comparison chart for Subsidized Housing).
  • Pass/Fail: [ ]

5. R/ECAP Highlighting

5.1 Enable R/ECAP Overlay

  • Steps:
    1. Navigate to Tract geography with a choropleth displayed (e.g., Cook County, Race/Ethnicity)
    2. Check the "Show R/ECAP Areas" checkbox in the sidebar
  • Expected: Red dashed borders appear on qualifying R/ECAP tracts overlaid on the choropleth. The choropleth colors remain visible beneath.
  • Pass/Fail: [ ]

5.2 R/ECAP Persists Through Variable Change

  • Steps:
    1. With R/ECAP overlay active from 5.1, change the variable (e.g., White (%) to Black (%))
  • Expected: Choropleth updates to new variable. R/ECAP red borders remain visible on the same tracts. The overlay is re-applied after the choropleth update.
  • Pass/Fail: [ ]

5.3 R/ECAP Hidden at Other Geography Levels

  • Steps:
    1. Switch Geography to County or State
  • Expected: The "Show R/ECAP Areas" checkbox is not visible in the sidebar. No red dashed borders appear on the map.
  • Pass/Fail: [ ]

6. Table Tab Features

6.1 Accordion Structure

  • Steps:
    1. Select State geography, Race/Ethnicity, White (%)
    2. Click on any state
    3. Switch to Table tab
  • Expected: Multiple accordion panels appear, one per category (Race/Ethnicity, Housing Problems, Education, Jobs and Labor Market, Low Poverty, Environmental Health, Disability, Mortgage Application and Denial, Housing Tenure — 9 total for State). Each panel expands to show a table with metric names and year columns.
  • Pass/Fail: [ ]

6.2 Selected Variable Row Highlight

  • Steps:
    1. With the Table tab open from 6.1, expand the Race/Ethnicity accordion panel
  • Expected: The row for "White (%)" (the currently selected variable) is highlighted with a gold accent to distinguish it from other rows.
  • Pass/Fail: [ ]

6.3 Filter Toggle — On

  • Steps:
    1. With the Table tab showing all categories, turn on the "Filter to selected variable" toggle switch
  • Expected: Accordion collapses to show only the Race/Ethnicity category (matching the selected variable). Within that table, only the White (%) row is displayed.
  • Pass/Fail: [ ]

6.4 Filter Toggle — Off

  • Steps:
    1. Turn the filter toggle off
  • Expected: All category accordion panels return. All rows within each table are visible again.
  • Pass/Fail: [ ]

6.5 Filter Toggle — No Variable Selected

  • Steps:
    1. Navigate to a state where no variable is selected yet (change geography, don't complete selections)
    2. Switch to Table tab
    3. Toggle the filter switch on
  • Expected: The toggle has no filtering effect when no variable is selected. Tables display normally (or a prompt to click an area appears if no area has been clicked).
  • Pass/Fail: [ ]

6.6 County and Tract Category Counts

  • Steps:
    1. Select County geography (Alabama), any category/variable, click a county, switch to Table tab
    2. Count the number of accordion panels
    3. Repeat for Tract geography
  • Expected: County shows 9 categories (same as State). Tract shows 10 categories (adds Transportation, Subsidized Housing; removes Low Poverty vs State/County).
  • Pass/Fail: [ ]

6.7 Year-Range Column Headers — Same Category

  • Steps:
    1. Select State geography, Category: Housing Problems, Variable: Housing Problems - White
    2. Click on any state
    3. Switch to Table tab, expand the Housing Problems accordion
  • Expected: Column headers show year-range labels (e.g., "2009-2012", "2012-2016", "2016-2020") instead of raw single years. These labels come from data_years_lookup.csv and reflect the ACS survey period for each data point.
  • Pass/Fail: [ ]

6.8 Year-Range Column Headers — Cross-Category

  • Steps:
    1. Select State geography, Category: Race/Ethnicity, Variable: White (%)
    2. Click on any state
    3. Switch to Table tab
    4. Expand the Housing Problems accordion
    5. Expand the Education accordion
  • Expected: Housing Problems headers show year-range labels appropriate for housing variables (e.g., "2009-2012", "2012-2016", "2016-2020") — NOT the Race/Ethnicity year labels. Education headers show labels appropriate for education variables. Each category resolves year labels using a representative variable from its own category, regardless of which variable is selected on the map.
  • Pass/Fail: [ ]

6.9 Year-Range Column Headers — Race/Ethnicity (1:1 Mapping)

  • Steps:
    1. Select State geography, Category: Race/Ethnicity, Variable: White (%)
    2. Click on any state
    3. Switch to Table tab, expand the Race/Ethnicity accordion
  • Expected: Column headers show "2000", "2010", "2020" — these are 1:1 mappings (decennial census years), not year ranges. No extra blank columns appear.
  • Pass/Fail: [ ]

6.10 All-NA Columns Dropped

  • Steps:
    1. Select State geography, Category: Housing Problems, Variable: any
    2. Click on any state
    3. Switch to Table tab, expand Housing Problems
    4. Count the year columns
  • Expected: Only columns that contain at least one non-NA value appear. There are no entirely blank year columns. For example, if Housing Problems data is only available for 3 survey periods, exactly 3 year columns appear — no empty "2010" column sitting next to populated "2009-2012" columns.
  • Pass/Fail: [ ]

6.11 All-NA Columns — Jobs and Labor Market Split

  • Steps:
    1. Select State geography, Category: Jobs and Labor Market, Variable: any Job Proximity variable
    2. Click on any state
    3. Switch to Table tab, expand Jobs and Labor Market
  • Expected: The table shows only year columns that have at least one value across all rows (Job Proximity and Labor Market rows combined). If a year column is populated for Labor Market rows but NA for all Job Proximity rows, the column still appears (because it has data for at least one row). Only columns that are entirely NA for every row in the table are dropped.
  • Pass/Fail: [ ]

6.12 Jobs/Labor Market Year Labels — Variable Sensitivity

  • Steps:
    1. Select State geography, Category: Jobs and Labor Market, Variable: a Labor Market variable (e.g., Labor Market - Black)
    2. Click on any state, switch to Table tab, expand Jobs and Labor Market
    3. Note the year column headers
    4. Now switch Variable to a Job Proximity variable (e.g., Job Proximity - Black)
    5. Return to the Table tab and check the headers again
  • Expected: When a Labor Market variable is selected, the Jobs table headers reflect the Labor Market year mapping (e.g., "2009-2013", "2011-2015", "2016-2020"). When a Job Proximity variable is selected, headers switch to the Job Proximity mapping (e.g., "2013", "2017", "2023"). The within-category variable determines which year label mapping is used.
  • Pass/Fail: [ ]

7. Download Functionality

7.1 CSV Download

  • Steps:
    1. Select any geography, category, variable
    2. Click on an area to populate tables
    3. Click the Download CSV button in the sidebar
  • Expected: A CSV file downloads containing all category tables combined. Columns include Category, Metric, and one column per data year. The file opens correctly in a spreadsheet application.
  • Pass/Fail: [ ]

7.2 PNG Download

  • Steps:
    1. With a choropleth map displayed, click the Download PNG button
  • Expected: A PNG image downloads showing the current map view with the variable title and focused geography printed above it. The image is legible and includes the legend.
  • Pass/Fail: [ ]

7.3 Disabled Button States

  • Steps:
    1. Launch the app fresh (no selections made)
    2. Check the download buttons in the sidebar
  • Expected: Both download buttons are disabled/grayed out. CSV becomes enabled after clicking an area. PNG becomes enabled after selecting a variable and rendering a choropleth.
  • Pass/Fail: [ ]

8. Value Boxes

8.1 Pre-Click State

  • Steps:
    1. Select State, Race/Ethnicity, White (%) — do not click the map
  • Expected: The left (purple) value box displays: "Click on a specific state". The right (gray) comparison box shows placeholder or is empty.
  • Pass/Fail: [ ]

8.2 NA Handling

  • Steps:
    1. Find a geography with missing data for the selected variable (gray areas on the map)
    2. Click on that area
  • Expected: Value box displays an appropriate message (e.g., "Not reported" or "NA") rather than crashing or showing a raw NA value.
  • Pass/Fail: [ ]

8.3 Parent Level Not Collected

  • Steps:
    1. Select a variable that is only available at certain geography levels
    2. Check the comparison value box
  • Expected: If the parent geography does not have data for that variable, the comparison box shows an appropriate "not available" message rather than an error.
  • Pass/Fail: [ ]

9. Address Search

9.1 Address Search at Tract Level

  • Steps:
    1. Select Tract geography, Cook County IL, any category/variable
    2. Click the search icon on the map
    3. Type "233 S Wacker Dr, Chicago, IL" (Willis Tower)
    4. Select the result
  • Expected: Map zooms to the address location at zoom level 14. A red circle marker appears at the result location and persists on the map after the search bar auto-collapses. The surrounding tracts are visible with choropleth colors. You can click the tract containing the address to see its data.
  • Pass/Fail: [ ]

9.2 Address Search at County Level

  • Steps:
    1. Select County geography, any state, category, variable
    2. Search for an address within that state
  • Expected: Map zooms to the address. Red circle marker appears and persists. County boundaries remain visible. Search works at all geography levels.
  • Pass/Fail: [ ]

9.3 Search Marker Cleared on Geography Change

  • Steps:
    1. With a search marker visible on the map (from 9.1 or 9.2), change the Geography dropdown (e.g., Tract → County)
  • Expected: The red circle marker disappears when geography changes. The clearSearchMarker JS handler removes it automatically.
  • Pass/Fail: [ ]

10. Step Progress Indicator

10.1 Three-Step Flow (State)

  • Steps:
    1. Select Geography: State
    2. Observe the step indicator after each selection (State → Category → Variable)
  • Expected: 3 dots appear. After selecting State: dot 1 is purple (completed), dot 2 is orange (current). After selecting Category: dots 1-2 purple, dot 3 orange. After selecting Variable: all 3 purple.
  • Pass/Fail: [ ]

10.2 Four-Step Flow (County/Tract)

  • Steps:
    1. Select Geography: County
    2. Step through: Focus Area → Category → Variable
  • Expected: 4 dots appear. Each step transitions correctly: completed (purple), current (orange glow), pending (empty outline).
  • Pass/Fail: [ ]

11. Sources and Notes

11.1 Content Update and Pulse

  • Steps:
    1. Select any geography, category, variable
    2. Observe the "Source(s) and notes:" section below the main tabs
    3. Change the variable to a different one
  • Expected: The sources/notes content updates to reflect the new variable's data source and methodology. A brief pulse animation signals that the content has changed.
  • Pass/Fail: [ ]

12. Tab Switching

12.1 Map Return After Tab Switch

  • Steps:
    1. Render a choropleth on the Map tab
    2. Switch to Table tab
    3. Switch back to Map tab
  • Expected: Map displays correctly without any white overlay or rendering artifacts. Choropleth colors, legend, and zoom level are preserved. This tests the invalidateSize() fix.
  • Pass/Fail: [ ]

12.2 Rapid Tab Switching

  • Steps:
    1. With a choropleth displayed, rapidly click between Map, Charts, and Table tabs 5-6 times
  • Expected: No crashes, no rendering glitches. Each tab displays its content correctly when you settle on it. No errors in the R console.
  • Pass/Fail: [ ]

13. Fullscreen Mode

13.1 Enter and Exit Fullscreen

  • Steps:
    1. With a choropleth map displayed, click the fullscreen (expand) icon on the tab card
    2. View the map in fullscreen
    3. Press Escape or click the exit fullscreen button
  • Expected: Map expands to fill the browser window. All controls remain functional in fullscreen. Exiting returns to normal layout.
  • Pass/Fail: [ ]

13.2 Map Rendering After Fullscreen Exit

  • Steps:
    1. Enter fullscreen mode with a choropleth displayed
    2. Exit fullscreen
    3. Pan and zoom the map
  • Expected: Map renders correctly at the original size. No white gaps or misaligned tiles. Choropleth polygons display properly. The invalidateSize call on fullscreen exit ensures correct dimensions.
  • Pass/Fail: [ ]

14. Edge Cases

14.1 Connecticut Counties

  • Steps:
    1. Select County geography, Focus Area: Connecticut
    2. Select any category/variable
  • Expected: Map shows 8 historical counties (Hartford, New Haven, Fairfield, etc.) — NOT the 9 planning regions that replaced them in 2022. County boundaries align with the AFFH data. The app uses 2021-vintage geometries for Connecticut.
  • Pass/Fail: [ ]

14.2 District of Columbia (Single County)

  • Steps:
    1. Select County geography, Focus Area: District of Columbia
    2. Select any category/variable
  • Expected: Map shows a single county polygon covering all of DC. Clicking it populates value boxes and charts normally. No errors from the single-polygon edge case.
  • Pass/Fail: [ ]

14.3 Alaska Census Areas

  • Steps:
    1. Select County geography, Focus Area: Alaska
    2. Select any category/variable
  • Expected: Alaska boroughs and census areas render correctly. Names match (e.g., "Kusilvak Census Area" not "Wade Hampton Census Area"). No missing geometries.
  • Pass/Fail: [ ]

14.4 Rapid Geography Switching

  • Steps:
    1. Quickly switch: State → County → Tract → State → County
    2. Make partial selections at each level
  • Expected: No crashes or frozen UI. Ghosted overlays appear and disappear correctly. Dropdowns reset appropriately at each geography change. No orphaned overlay text.
  • Pass/Fail: [ ]

14.5 Missing/NA Data Display

  • Steps:
    1. Select a variable where some geographies have no data (gray polygons on the map)
    2. Click on a gray polygon
    3. Check the tooltip, value box, and table
  • Expected: Tooltip shows "Not reported." Value box handles the NA gracefully. Table shows empty or "NA" cells without errors. Charts handle the missing data without crashing.
  • Pass/Fail: [ ]

14.6 Jobs/Labor Market Split Groups

  • Steps:
    1. Select Geography: State or County (race-disaggregated Jobs variables are not available at Tract level)
    2. Select Category: Jobs and Labor Market
    3. Select a Job Proximity variable (e.g., Job Proximity - Black)
    4. Click an area, check the Charts tab
    5. Then switch to a Labor Market variable (e.g., Labor Market - Black)
    6. Check the Charts tab again
  • Expected: The category comparison chart for Job Proximity shows only Job Proximity bars (5 groups). The chart for Labor Market shows only Labor Market bars. They do NOT mix — the comparison_group column correctly separates them.
  • Pass/Fail: [ ]

14.7 Tooltip Content Verification

  • Steps:
    1. Select State, Race/Ethnicity, White (%)
    2. Hover over California
  • Expected: Tooltip shows: area name ("California"), variable label ("White (%)"), and the numeric value formatted as a percentage. Tooltip is positioned near the cursor and readable. The area name should never show literal "NA" — if a name is missing, it shows "Unknown".
  • Pass/Fail: [ ]

14.8 Geography Transition Ghosted Overlay

  • Steps:
    1. Select State, Race/Ethnicity, White (%) and render the choropleth
    2. Change Geography to County
    3. Observe the map — previous state polygons should be visible but dimmed
    4. Verify the overlay message reads "Select a state to view its counties"
    5. Try panning and zooming the map while the overlay is visible
    6. Complete the County selections (Focus Area → Category → Variable)
    7. Observe the transition as the new choropleth replaces the ghosted polygons
  • Expected: State polygons dim to ~30% opacity when geography changes. The selection overlay message is visible and updates as each selection is made. The map remains pan/zoomable during the ghosted state (overlay has pointer-events: none). After completing all selections, the overlay fades out and the new County choropleth renders, fully replacing the ghosted State polygons.
  • Pass/Fail: [ ]

14.9 Data Load Error Handling

  • Steps:
    1. Temporarily rename data/final/AFFH_tract.parquet (e.g., add .bak suffix)
    2. Select Tract geography, any county, any category/variable
    3. Observe the app behavior
    4. Restore the file name after testing
  • Expected: A red notification toast appears: "Data could not be loaded for Tract level. Please contact support." The app does NOT crash or show a raw R error stack trace. The app remains interactive.
  • Pass/Fail: [ ]

14.10 PNG Capture Error Handling

  • Steps:
    1. Render any choropleth map
    2. Open DevTools → Network tab → Block html2canvas CDN URL
    3. Click the Download PNG button
  • Expected: A non-blocking toast notification appears: "Map capture failed. Please try again." (NOT a browser alert() dialog). The button returns to its original state. The app remains interactive.
  • Pass/Fail: [ ]

15. Performance Checks

15.1 Large Tract Load — LA County

  • Steps:
    1. Select Tract geography
    2. Select Focus Area: Los Angeles County, CA (~2,500 tracts)
    3. Select any category/variable
    4. Time from variable selection to choropleth render
  • Expected: Choropleth renders within approximately 10 seconds. Loading overlay displays during render. App remains responsive after render. No browser tab crashes.
  • Pass/Fail: [ ]
  • Observed time: _____ seconds

15.2 Variable Switching Speed

  • Steps:
    1. With a choropleth displayed (any geography), switch variables within the same category 3-4 times
  • Expected: Each variable switch re-renders the choropleth within 1-3 seconds. The map does not re-zoom or re-fetch geometry — only the colors update. Loading overlay appears briefly.
  • Pass/Fail: [ ]

16. Cross-Browser Testing

16.1 Chrome

  • Steps:
    1. Open the app in Google Chrome
    2. Perform a quick walkthrough: State choropleth, click, Charts tab, Table tab, County transition
  • Expected: All features work correctly. Map renders, charts display, tables populate. No console errors.
  • Pass/Fail: [ ]

16.2 Firefox

  • Steps:
    1. Open the app in Mozilla Firefox
    2. Perform the same quick walkthrough as 16.1
  • Expected: All features work correctly. No rendering differences that affect usability.
  • Pass/Fail: [ ]

16.3 Safari

  • Steps:
    1. Open the app in Safari (macOS)
    2. Perform the same quick walkthrough as 16.1
  • Expected: All features work correctly. Note any Safari-specific rendering quirks (Safari handles CSS animations differently).
  • Pass/Fail: [ ]

Test Summary

Section Tests Passed Failed
1. Initial Load & Navigation 3
2. State-Level Map 6
3. County-Level Map 6
4. Tract-Level Map 7
5. R/ECAP Highlighting 3
6. Table Tab Features 12
7. Download Functionality 3
8. Value Boxes 3
9. Address Search 3
10. Step Progress Indicator 2
11. Sources and Notes 1
12. Tab Switching 2
13. Fullscreen Mode 2
14. Edge Cases 10
15. Performance Checks 2
16. Cross-Browser 3
Total 68

Tester: _______________ Date: _______________ App Version/Branch: _______________ Browser: _______________ Notes: