Re-enable gradebook what-if and add production E2E coverage

Co-authored-by: Jonathan Bell <jon@jonbell.net>

Author: cursoragent

app/course/[course_id]/gradebook/whatIf.tsx

@@ -179,16 +179,16 @@ function WhatIfScoreCell({
   );
 }
 
-// function canEditColumn(column: GradebookColumn) {
-//   const deps = column.dependencies;
-//   return !(
-//     deps &&
-//     typeof deps === "object" &&
-//     "gradebook_columns" in deps &&
-//     Array.isArray((deps as { gradebook_columns?: number[] }).gradebook_columns) &&
-//     (deps as { gradebook_columns?: number[] }).gradebook_columns!.length > 0
-//   );
-// }
+function canEditColumn(column: GradebookColumn) {
+  const deps = column.dependencies;
+  return !(
+    deps &&
+    typeof deps === "object" &&
+    "gradebook_columns" in deps &&
+    Array.isArray((deps as { gradebook_columns?: number[] }).gradebook_columns) &&
+    (deps as { gradebook_columns?: number[] }).gradebook_columns!.length > 0
+  );
+}
 
 function IncompleteValuesAlert({
   incompleteValues,
@@ -299,7 +299,7 @@ function GradebookCard({
   const score = studentGrade?.score_override ?? studentGrade?.score;
   const isShowingWhatIf =
     studentGrade?.score_override == null && whatIfVal?.what_if !== undefined && whatIfVal?.what_if !== score;
-  const canEdit = false; //canEditColumn(column); TODO re-enable when fixing whatIf
+  const canEdit = canEditColumn(column);
   const whatIfController = useGradebookWhatIf();
   const whatIfIncompleteValues = whatIfController.getIncompleteValues(column.id);
   const incompleteValues = whatIfIncompleteValues ?? studentGrade?.incomplete_values;

hooks/useGradebookWhatIf.tsx

@@ -67,6 +67,8 @@ class GradebookWhatIfController {
   public debugID: string = crypto.randomUUID();
   private _incompleteValues: GradebookWhatIfIncompleteValuesMap = {};
   private _subscribers: (() => void)[] = [];
+  // Tracks columns explicitly set by user input (vs derived what-if values).
+  private _userSetWhatIfColumns = new Set<number>();
   private _gradebookUnsubscribe: (() => void) | null = null;
   private _assignments: AssignmentForStudentDashboard[] = [];
   // Track shown errors to avoid spamming the user with duplicate toasts (scoped per controller instance)
@@ -240,6 +242,11 @@ class GradebookWhatIfController {
         what_if: value
       };
     }
+    if (value === undefined) {
+      this._userSetWhatIfColumns.delete(columnId);
+    } else {
+      this._userSetWhatIfColumns.add(columnId);
+    }
     this._incompleteValues[columnId] = incompleteValues;
     //Find everything that depends on this column
     const allColumns = this.gradebookController.columns as GradebookColumnWithEntries[];
@@ -264,6 +271,7 @@ class GradebookWhatIfController {
         gradebook_score: existingGrade.gradebook_score
       };
     }
+    this._userSetWhatIfColumns.delete(columnId);
     delete this._incompleteValues[columnId];
     // Recalculate dependent columns
     const allColumns = this.gradebookController.columns as GradebookColumnWithEntries[];
@@ -891,7 +899,7 @@ class GradebookWhatIfController {
 
         // Determine if we should show a what-if value
         const existingWhatIf = this._grades[columnId]?.what_if;
-        const hasUserSetWhatIf = existingWhatIf !== undefined;
+        const hasUserSetWhatIf = this._userSetWhatIfColumns.has(columnId);
 
         // Check if this column depends on other columns with user-set what-if values
         const hasWhatIfDependencies = this.hasWhatIfDependencies(columnId);
@@ -952,6 +960,7 @@ class GradebookWhatIfController {
     }
     // Clear error tracking Set when controller is cleaned up
     this._shownExpressionErrors.clear();
+    this._userSetWhatIfColumns.clear();
   }
 }
 

tests/e2e/gradebook-whatif.test.tsx

@@ -0,0 +1,159 @@
+import { Course } from "@/utils/supabase/DatabaseTypes";
+import { test, expect } from "../global-setup";
+import type { Page } from "@playwright/test";
+import dotenv from "dotenv";
+import {
+  createAssignmentsAndGradebookColumns,
+  createClass,
+  createUsersInClass,
+  loginAsUser,
+  TestingUser
+} from "./TestingUtils";
+
+dotenv.config({ path: ".env.local" });
+
+let course: Course;
+let student: TestingUser;
+
+function normalizeText(text: string) {
+  return text.replace(/\s+/g, " ").trim();
+}
+
+function getGradeCard(page: Page, gradeName: string) {
+  return page.getByRole("article", { name: `Grade for ${gradeName}` });
+}
+
+async function gotoStudentGradebook(page: Page) {
+  await loginAsUser(page, student, course);
+  let lastError: unknown;
+  for (let attempt = 0; attempt < 3; attempt++) {
+    try {
+      await page.goto(`/course/${course.id}/gradebook`, { waitUntil: "networkidle" });
+      lastError = undefined;
+      break;
+    } catch (error) {
+      lastError = error;
+      await page.waitForTimeout(500);
+    }
+  }
+  if (lastError) {
+    throw lastError;
+  }
+  await expect(page.getByRole("region", { name: "Student Gradebook" })).toBeVisible();
+}
+
+test.setTimeout(180_000);
+test.describe("Gradebook What-If", () => {
+  test.describe.configure({ mode: "serial" });
+
+  test.beforeAll(async () => {
+    course = await createClass({
+      name: "Gradebook What If Course"
+    });
+
+    const users = await createUsersInClass([
+      {
+        name: "WhatIf Student",
+        role: "student",
+        class_id: course.id,
+        useMagicLink: true
+      }
+    ]);
+
+    student = users[0];
+
+    // The helper sets up assignment, manual, and calculated gradebook columns used by the what-if UI.
+    await createAssignmentsAndGradebookColumns({
+      class_id: course.id,
+      numAssignments: 2,
+      numManualGradedColumns: 0,
+      manualGradedColumnSlugs: ["participation"],
+      groupConfig: "individual"
+    });
+  });
+
+  test("enables editing for manual what-if cards", async ({ page }) => {
+    await gotoStudentGradebook(page);
+
+    const participationCard = getGradeCard(page, "Participation");
+    await expect(participationCard).toBeVisible();
+
+    await participationCard.click();
+    const whatIfInput = participationCard.locator('input[type="number"]');
+    await expect(whatIfInput).toBeVisible();
+    await whatIfInput.fill("100");
+    await whatIfInput.press("Enter");
+
+    await expect(participationCard).toContainText("100/100");
+  });
+
+  test("updates dependent final-grade simulation and restores baseline on clear", async ({ page }) => {
+    await gotoStudentGradebook(page);
+
+    const participationCard = getGradeCard(page, "Participation");
+    const finalCard = getGradeCard(page, "Final Grade");
+    await expect(participationCard).toBeVisible();
+    await expect(finalCard).toBeVisible();
+
+    const finalBefore = normalizeText(await finalCard.innerText());
+
+    await participationCard.click();
+    const whatIfInput = participationCard.locator('input[type="number"]');
+    await expect(whatIfInput).toBeVisible();
+    await whatIfInput.fill("0");
+    await whatIfInput.press("Enter");
+
+    await expect(async () => {
+      const finalAfterSet = normalizeText(await finalCard.innerText());
+      expect(finalAfterSet).not.toBe(finalBefore);
+    }).toPass();
+
+    await participationCard.click();
+    await expect(whatIfInput).toBeVisible();
+    await whatIfInput.fill("");
+    await whatIfInput.press("Enter");
+
+    await expect(async () => {
+      const finalAfterClear = normalizeText(await finalCard.innerText());
+      expect(finalAfterClear).toBe(finalBefore);
+    }).toPass();
+  });
+
+  test("keeps calculated cards read-only", async ({ page }) => {
+    await gotoStudentGradebook(page);
+
+    const finalCard = getGradeCard(page, "Final Grade");
+    const averageAssignmentsCard = getGradeCard(page, "Average Assignments");
+    await expect(finalCard).toBeVisible();
+    await expect(averageAssignmentsCard).toBeVisible();
+
+    await finalCard.click();
+    await expect(finalCard.locator('input[type="number"]')).toHaveCount(0);
+
+    await averageAssignmentsCard.click();
+    await expect(averageAssignmentsCard.locator('input[type="number"]')).toHaveCount(0);
+  });
+
+  test("supports assignment-card simulation and cascades to final grade", async ({ page }) => {
+    await gotoStudentGradebook(page);
+
+    const finalCard = getGradeCard(page, "Final Grade");
+    const assignmentCard = page.getByRole("article", { name: /Grade for Test Assignment 1/ }).first();
+    await expect(finalCard).toBeVisible();
+    await expect(assignmentCard).toBeVisible();
+
+    const finalBefore = normalizeText(await finalCard.innerText());
+
+    await assignmentCard.click();
+    const whatIfInput = assignmentCard.locator('input[type="number"]');
+    await expect(whatIfInput).toBeVisible();
+    await whatIfInput.fill("100");
+    await whatIfInput.press("Enter");
+
+    await expect(assignmentCard).toContainText("100/100");
+    await expect(async () => {
+      const finalAfter = normalizeText(await finalCard.innerText());
+      expect(finalAfter).not.toBe(finalBefore);
+    }).toPass();
+  });
+});