test: alerts summary cards (#226)

* feat: initial work on alerts summary cards

* chore: use untitled icons

* test: alert summary cards

Author: alex-mcgovern

src/features/alerts/components/__tests__/alerts-summary-malicious-pkg.test.tsx

@@ -0,0 +1,34 @@
+import { server } from "@/mocks/msw/node";
+import { test } from "vitest";
+import { http, HttpResponse } from "msw";
+import { render, waitFor } from "@/lib/test-utils";
+import { AlertsSummaryMaliciousPkg } from "../alerts-summary-malicious-pkg";
+import { makeMockAlert } from "../../mocks/alert.mock";
+
+test("shows correct count when there is a malicious alert", async () => {
+  server.use(
+    http.get("*/api/v1/workspaces/:name/alerts", () => {
+      return HttpResponse.json([makeMockAlert({ type: "malicious" })]);
+    }),
+  );
+
+  const { getByTestId } = render(<AlertsSummaryMaliciousPkg />);
+
+  await waitFor(() => {
+    expect(getByTestId("malicious-count")).toHaveTextContent("1");
+  });
+});
+
+test("shows correct count when there is no malicious alert", async () => {
+  server.use(
+    http.get("*/api/v1/workspaces/:name/alerts", () => {
+      return HttpResponse.json([makeMockAlert({ type: "secret" })]);
+    }),
+  );
+
+  const { getByTestId } = render(<AlertsSummaryMaliciousPkg />);
+
+  await waitFor(() => {
+    expect(getByTestId("malicious-count")).toHaveTextContent("0");
+  });
+});

src/features/alerts/components/__tests__/alerts-summary-secrets.test.tsx

@@ -0,0 +1,35 @@
+import { server } from "@/mocks/msw/node";
+import { test } from "vitest";
+import { http, HttpResponse } from "msw";
+import { render, waitFor } from "@/lib/test-utils";
+
+import { AlertsSummaryMaliciousSecrets } from "../alerts-summary-secrets";
+import { makeMockAlert } from "../../mocks/alert.mock";
+
+test("shows correct count when there is a secret alert", async () => {
+  server.use(
+    http.get("*/api/v1/workspaces/:name/alerts", () => {
+      return HttpResponse.json([makeMockAlert({ type: "secret" })]);
+    }),
+  );
+
+  const { getByTestId } = render(<AlertsSummaryMaliciousSecrets />);
+
+  await waitFor(() => {
+    expect(getByTestId("secrets-count")).toHaveTextContent("1");
+  });
+});
+
+test("shows correct count when there is no malicious alert", async () => {
+  server.use(
+    http.get("*/api/v1/workspaces/:name/alerts", () => {
+      return HttpResponse.json([makeMockAlert({ type: "malicious" })]);
+    }),
+  );
+
+  const { getByTestId } = render(<AlertsSummaryMaliciousSecrets />);
+
+  await waitFor(() => {
+    expect(getByTestId("secrets-count")).toHaveTextContent("0");
+  });
+});

src/features/alerts/components/__tests__/alerts-summary-workspace-token-usage.test.tsx

@@ -0,0 +1,41 @@
+import { server } from "@/mocks/msw/node";
+import { test } from "vitest";
+import { http, HttpResponse } from "msw";
+import { render, waitFor } from "@/lib/test-utils";
+
+import { AlertsSummaryWorkspaceTokenUsage } from "../alerts-summary-workspace-token-usage";
+import { TOKEN_USAGE_AGG } from "../../mocks/token-usage.mock";
+
+test("shows correct count when there is token usage", async () => {
+  server.use(
+    http.get("*/api/v1/workspaces/:name/token-usage", () => {
+      return HttpResponse.json(TOKEN_USAGE_AGG);
+    }),
+  );
+
+  const { getByTestId } = render(<AlertsSummaryWorkspaceTokenUsage />);
+
+  await waitFor(() => {
+    expect(getByTestId("usage-input-tokens")).toHaveTextContent(
+      TOKEN_USAGE_AGG.token_usage.input_tokens.toString(),
+    );
+    expect(getByTestId("usage-output-tokens")).toHaveTextContent(
+      TOKEN_USAGE_AGG.token_usage.output_tokens.toString(),
+    );
+  });
+});
+
+test("shows correct count when there is no token usage", async () => {
+  server.use(
+    http.get("*/api/v1/workspaces/:name/token-usage", () => {
+      return HttpResponse.json({});
+    }),
+  );
+
+  const { getByTestId } = render(<AlertsSummaryWorkspaceTokenUsage />);
+
+  await waitFor(() => {
+    expect(getByTestId("usage-input-tokens")).toHaveTextContent("0");
+    expect(getByTestId("usage-output-tokens")).toHaveTextContent("0");
+  });
+});

src/features/alerts/components/__tests__/table-alerts.test.tsx

@@ -3,12 +3,8 @@ import { TableAlerts } from "../table-alerts";
 import { render, screen, waitFor, within } from "@/lib/test-utils";
 import { server } from "@/mocks/msw/node";
 import { http, HttpResponse } from "msw";
-import {
-  AlertConversation,
-  ProviderType,
-  QuestionType,
-  TokenUsageAggregate,
-} from "@/api/generated";
+import { makeMockAlert } from "../../mocks/alert.mock";
+import { TOKEN_USAGE_AGG } from "../../mocks/token-usage.mock";
 
 vi.mock("@untitled-ui/icons-react", async () => {
   const original = await vi.importActual<
@@ -21,63 +17,6 @@ vi.mock("@untitled-ui/icons-react", async () => {
   };
 });
 
-const TOKEN_USAGE_AGG = {
-  tokens_by_model: {
-    "claude-3-5-sonnet-latest": {
-      provider_type: ProviderType.ANTHROPIC,
-      model: "claude-3-5-sonnet-latest",
-      token_usage: {
-        input_tokens: 1183,
-        output_tokens: 433,
-        input_cost: 0.003549,
-        output_cost: 0.006495,
-      },
-    },
-  },
-  token_usage: {
-    input_tokens: 1183,
-    output_tokens: 433,
-    input_cost: 0.003549,
-    output_cost: 0.006495,
-  },
-} as const satisfies TokenUsageAggregate;
-
-const makeMockAlert = ({
-  token_usage_agg,
-}: {
-  token_usage_agg: TokenUsageAggregate | null;
-}) => {
-  return {
-    conversation: {
-      question_answers: [
-        {
-          question: {
-            message: "foo",
-            timestamp: "2025-01-28T14:32:57.836445Z",
-            message_id: "cfdf1acd-999c-430b-bb57-4c4db6cec6c9",
-          },
-          answer: {
-            message: "bar",
-            timestamp: "2025-01-28T14:32:59.107793Z",
-            message_id: "c2b88968-06b3-485d-a42b-7b54f973eef9",
-          },
-        },
-      ],
-      provider: "anthropic",
-      type: QuestionType.CHAT,
-      chat_id: "cfdf1acd-999c-430b-bb57-4c4db6cec6c9",
-      conversation_timestamp: "2025-01-28T14:32:57.836445Z",
-      token_usage_agg,
-    },
-    alert_id: "2379b08b-1e2b-4d6b-b425-e58a0b4fe7bc",
-    code_snippet: null,
-    trigger_string: "foo",
-    trigger_type: "codegate-secrets",
-    trigger_category: "critical",
-    timestamp: "2025-01-28T14:32:57.599032Z",
-  } as const satisfies AlertConversation;
-};
-
 const INPUT_TOKENS =
   TOKEN_USAGE_AGG.tokens_by_model[
     "claude-3-5-sonnet-latest"
@@ -92,7 +31,7 @@ test("renders token usage cell correctly", async () => {
   server.use(
     http.get("*/workspaces/:name/alerts", () => {
       return HttpResponse.json([
-        makeMockAlert({ token_usage_agg: TOKEN_USAGE_AGG }),
+        makeMockAlert({ token_usage: true, type: "malicious" }),
       ]);
     }),
   );
@@ -118,7 +57,9 @@ test("renders token usage cell correctly", async () => {
 test("renders N/A when token usage is missing", async () => {
   server.use(
     http.get("*/workspaces/:name/alerts", () => {
-      return HttpResponse.json([makeMockAlert({ token_usage_agg: null })]);
+      return HttpResponse.json([
+        makeMockAlert({ token_usage: false, type: "malicious" }),
+      ]);
     }),
   );
 

src/features/alerts/components/alerts-summary.tsx

@@ -11,7 +11,7 @@ function AlertsSummaryStatistic({
   Icon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
 }) {
   return (
-    <div id={id} className="text-5xl flex items-center gap-1">
+    <div data-testid={id} className="text-5xl flex items-center gap-1">
       <Icon className="size-11" />
       {count}
     </div>

src/features/alerts/lib/__tests__/is-alert-malicious.test.ts

@@ -1,12 +1,11 @@
 import { test, expect } from "vitest";
 import { isAlertMalicious } from "../is-alert-malicious";
-import { ALERT_MALICIOUS } from "../../mocks/alert-malicious.mock";
-import { ALERT_SECRET } from "../../mocks/alert-secret.mock";
+import { makeMockAlert } from "../../mocks/alert.mock";
 
 test("matches malicious alert", () => {
-  expect(isAlertMalicious(ALERT_MALICIOUS)).toBe(true);
+  expect(isAlertMalicious(makeMockAlert({ type: "malicious" }))).toBe(true);
 });
 
 test("doesn't match secret", () => {
-  expect(isAlertMalicious(ALERT_SECRET)).toBe(false);
+  expect(isAlertMalicious(makeMockAlert({ type: "secret" }))).toBe(false);
 });

src/features/alerts/lib/__tests__/is-alert-secret.test.ts

@@ -1,12 +1,11 @@
 import { test, expect } from "vitest";
-import { ALERT_MALICIOUS } from "../../mocks/alert-malicious.mock";
-import { ALERT_SECRET } from "../../mocks/alert-secret.mock";
 import { isAlertSecret } from "../is-alert-secret";
+import { makeMockAlert } from "../../mocks/alert.mock";
 
 test("matches secret alert", () => {
-  expect(isAlertSecret(ALERT_SECRET)).toBe(true);
+  expect(isAlertSecret(makeMockAlert({ type: "secret" }))).toBe(true);
 });
 
 test("doesn't match malicious", () => {
-  expect(isAlertSecret(ALERT_MALICIOUS)).toBe(false);
+  expect(isAlertSecret(makeMockAlert({ type: "malicious" }))).toBe(false);
 });