milestone 24: persist and surface the unsupported-line count

web/src/features/blocklists/BlocklistsPage.test.tsx

@@ -19,6 +19,7 @@ const BLOCKLISTS = {
 			wildcard_count: 10,
 			exception_count: 7,
 			skipped_regex_count: 3,
+			skipped_unsupported_count: 21,
 			checksum: "abc",
 		},
 		{
@@ -32,6 +33,7 @@ const BLOCKLISTS = {
 			wildcard_count: 0,
 			exception_count: 0,
 			skipped_regex_count: 0,
+			skipped_unsupported_count: 0,
 			checksum: null,
 		},
 	],
@@ -102,6 +104,7 @@ const SNAPSHOT = {
 			wildcards: 12,
 			exceptions: 9,
 			skipped_regex: 4,
+			skipped_unsupported: 17,
 		},
 	],
 };
@@ -117,7 +120,13 @@ test("renders the source table and the status empty state", async () => {
 	expect(screen.getByText("10")).toBeTruthy();
 	expect(screen.getByText("7")).toBeTruthy();
 	expect(screen.getByText("3")).toBeTruthy();
+	expect(screen.getByText("21")).toBeTruthy();
 	expect(screen.getByText("never")).toBeTruthy();
+	expect(screen.getByRole("columnheader", { name: "Skipped regex" })).toBeTruthy();
+	expect(screen.getByRole("columnheader", { name: "Skipped unsupported" })).toBeTruthy();
+	expect(
+		screen.getByText(/Skipped unsupported lines are syntax nxdns cannot translate into a DNS decision/),
+	).toBeTruthy();
 
 	const enabledToggle = screen.getByLabelText("StevenBlack enabled") as HTMLInputElement;
 	expect(enabledToggle.checked).toBe(true);
@@ -153,6 +162,7 @@ test("update now disables the button, then replaces the status section from the
 				wildcards: 12,
 				exceptions: 9,
 				skipped_regex: 4,
+				skipped_unsupported: 17,
 			},
 			{
 				id: 2,
@@ -166,6 +176,7 @@ test("update now disables the button, then replaces the status section from the
 				wildcards: 0,
 				exceptions: 0,
 				skipped_regex: 0,
+				skipped_unsupported: 0,
 			},
 		],
 	};
@@ -180,6 +191,8 @@ test("update now disables the button, then replaces the status section from the
 	expect(screen.getByText("12")).toBeTruthy();
 	expect(screen.getByText("9")).toBeTruthy();
 	expect(screen.getByText("4")).toBeTruthy();
+	expect(screen.getByText("17")).toBeTruthy();
+	expect(screen.getAllByRole("columnheader", { name: "Skipped unsupported" })).toHaveLength(2);
 	expect(screen.queryByText(/run .Update now. to fetch status/)).toBeNull();
 	// The store notifies one flush before the mutation's success state lands.
 	await screen.findByText(/Update completed/);