Fix missing cities by adding missing options (#455)

Closes #260. We
had several options that we allow in Google Tables but didn't have in
the app. I'm skeptical we want all these options in the future, but we
can revisit that once migrating the database.

This also adds a test that every place is selected when all filter
options are used.

While we now have a lot of options, it doesn't take up too much real
estate thanks to the accordion redesign.

<img width="309" alt="Screenshot 2024-08-18 at 10 08 17 AM"
src="https://github.com/user-attachments/assets/1ab9c292-7f82-476e-bdfc-085ce17c3be7">

src/js/filterOptions.ts

@@ -19,18 +19,29 @@ const FILTER_CONFIG = {
     ["All Uses", true],
     ["Commercial", true],
     ["Residential", true],
+    ["Multi-Family Residential", true],
+    ["Low Density (SF) Residential", true],
+    ["High Density Residential", true],
+    ["Industrial", true],
+    ["Medical", true],
+    ["Other", true],
   ],
   implementationStage: [
     ["Implemented", true],
     ["Passed", true],
     ["Planned", false],
     ["Proposed", false],
     ["Repealed", false],
+    ["Unverified", false],
   ],
 } as const;
 
 type FilterGroupKey = keyof typeof FILTER_CONFIG;
 
+export function getAllFilterOptions(groupKey: FilterGroupKey): string[] {
+  return FILTER_CONFIG[groupKey].map((option) => option[0]);
+}
+
 export function getDefaultFilterOptions(groupKey: FilterGroupKey): string[] {
   return FILTER_CONFIG[groupKey]
     .filter(([, isDefaultSelected]) => isDefaultSelected)

tests/app/filter.test.ts

@@ -1,10 +1,13 @@
 import { Page, test } from "@playwright/test";
+
 import {
   loadMap,
   assertNumPlaces,
   deselectToggle,
   DEFAULT_PLACE_RANGE,
+  getTotalNumPlaces,
 } from "./utils";
+import { getAllFilterOptions } from "../../src/js/filterOptions";
 
 interface EdgeCase {
   desc: string;
@@ -14,7 +17,7 @@ interface EdgeCase {
   implementation?: string[];
   populationIntervals?: [number, number];
   noRequirements?: boolean;
-  expectedRange: [number, number];
+  expectedRange: [number, number] | "all";
 }
 
 // The expected ranges can be updated as the data is updated!
@@ -46,14 +49,8 @@ const TESTS: EdgeCase[] = [
   {
     desc: "all places",
     // The other filters already enable all options by default.
-    implementation: [
-      "Implemented",
-      "Passed",
-      "Planned",
-      "Proposed",
-      "Repealed",
-    ],
-    expectedRange: [2900, 4000],
+    implementation: getAllFilterOptions("implementationStage"),
+    expectedRange: "all",
   },
 ];
 
@@ -116,6 +113,11 @@ for (const edgeCase of TESTS) {
         .fill(rightInterval.toString());
     }
 
-    await assertNumPlaces(page, edgeCase.expectedRange);
+    if (edgeCase.expectedRange === "all") {
+      const expected = await getTotalNumPlaces();
+      await assertNumPlaces(page, [expected, expected]);
+    } else {
+      await assertNumPlaces(page, edgeCase.expectedRange);
+    }
   });
 }

tests/app/utils.ts

@@ -1,16 +1,24 @@
 import { expect } from "@playwright/test";
 import type { Page } from "@playwright/test";
 
+import { readCsv } from "../../scripts/syncLatLng";
+
 const PLACE_MARKER = "path.leaflet-interactive";
-const DEFAULT_PLACE_RANGE: [number, number] = [2930, 4000];
+export const DEFAULT_PLACE_RANGE: [number, number] = [3000, 4000];
 
-const loadMap = async (page: Page): Promise<void> => {
+export const loadMap = async (page: Page): Promise<void> => {
   await page.goto("");
   // Wait for data to load.
   await page.waitForSelector(PLACE_MARKER);
 };
 
-const assertNumPlaces = async (
+export async function getTotalNumPlaces(): Promise<number> {
+  const mapData = await readCsv("map/tidied_map_data.csv");
+  // For some reason, the CSV has one extra line than the data used in prod.
+  return mapData.length - 1;
+}
+
+export const assertNumPlaces = async (
   page: Page,
   range: [number, number],
 ): Promise<void> => {
@@ -29,10 +37,8 @@ const assertNumPlaces = async (
   expect(mapNumPlaces).toEqual(counterNumPlaces);
 };
 
-const deselectToggle = async (page: Page): Promise<void> => {
+export const deselectToggle = async (page: Page): Promise<void> => {
   // Default has requirement toggle on, so first de-select it by opening filter pop-up and clicking toggle.
   await page.locator(".header-filter-icon-container").click();
   await page.locator("#no-requirements-toggle").click({ force: true });
 };
-
-export { assertNumPlaces, loadMap, deselectToggle, DEFAULT_PLACE_RANGE };