feat: Grade student (#263)

* feat: Add form to allow teachers to leave a comment in students' grades

* feat: Allow teachers to select criteria from rubric to grade students

* feat(ui): Create component to be shown when no rubric have been chosen

* feat: Add button to allow teachers to go back to the grades table

* feat: Show students' submissions to teachers

* feat: Allow teachers to download students' code

* chore(deps): Remove extra font

A mono-space font was being loaded to display the `stdout` of the tests but it wasn't necessary at all. 

* feat: Allow students to download their code

* test: Add test to ensure students can submit to tests blocks

* test: Add test to ensure teachers can grade students

* test: Add test to ensure teachers can download students' code

* chore(deps): Bump dependencies

Author: PedroChaparro

.gitignore

@@ -29,3 +29,4 @@ dist-ssr
 # Test data
 e2e/laboratories/data/java-downloaded.zip
 e2e/laboratories/data/Test block name.zip
+e2e/grades/data/downloaded-java-tests.zip

e2e/grades/data/java-tests.zip

@@ -6,12 +6,19 @@ import {
   getRandomName,
   getRandomUniversityID
 } from "e2e/Utils";
+import { dirname, join } from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 
 test.describe.serial("Grades workflow", () => {
   const teacherEmail = getRandomEmail();
 
   const courseName = "Test course";
+  const rubricName = "Test rubric";
   const laboratoryName = "Test laboratory";
+  const testBlockName = "Test block name";
 
   const studentFullName = getRandomName();
   const studentEmail = getRandomEmail();
@@ -43,6 +50,20 @@ test.describe.serial("Grades workflow", () => {
     await page.getByRole("button", { name: "Submit" }).click();
   });
 
+  test("Create test rubric", async ({ page }) => {
+    // Login as a teacher
+    await page.goto("/login");
+    await page.getByLabel("Email").fill(teacherEmail);
+    await page.getByLabel("Password").fill(getDefaultPassword());
+    await page.getByRole("button", { name: "Submit" }).click();
+
+    // Create a rubric
+    await page.getByRole("link", { name: "Rubrics", exact: true }).click();
+    await page.getByRole("button", { name: "Create rubric" }).click();
+    await page.getByLabel("Name").fill("Test rubric");
+    await page.getByRole("button", { name: "Create" }).click();
+  });
+
   test("Create test course", async ({ page }) => {
     // Login as a teacher
     await page.goto("/login");
@@ -78,6 +99,89 @@ test.describe.serial("Grades workflow", () => {
     await page.getByLabel("Opening date").fill("2023-12-01T00:00");
     await page.getByLabel("Closing date").fill("2032-12-01T23:59");
     await page.getByRole("button", { name: "Create" }).click();
+
+    // Select the rubric
+    const editLaboratoryButton = page.getByRole("link", {
+      name: `Edit ${laboratoryName} laboratory`
+    });
+    await expect(editLaboratoryButton).toBeVisible();
+    await editLaboratoryButton.click();
+
+    const rubricSelect = page.getByRole("combobox", { name: "Rubric" });
+    await expect(rubricSelect).toBeVisible();
+    await rubricSelect.click();
+
+    const rubricOption = page.getByLabel(rubricName);
+    await expect(rubricOption).toBeVisible();
+    await rubricOption.click();
+
+    // Save the changes
+    const saveButton = page.getByRole("button", { name: "Save changes" });
+    await expect(saveButton).toBeVisible();
+    await saveButton.click();
+
+    // Assert a toast is shown
+    await expect(
+      page.getByText("Laboratory details updated successfully")
+    ).toBeVisible();
+  });
+
+  test("Create test block", async ({ page }) => {
+    // Login as a teacher
+    await page.goto("/login");
+    await page.getByLabel("Email").fill(teacherEmail);
+    await page.getByLabel("Password").fill(getDefaultPassword());
+    await page.getByRole("button", { name: "Submit" }).click();
+
+    // Go to the course page
+    await page.getByRole("link", { name: courseName }).click();
+
+    // Enter to the edit page of the laboratory
+    const editLaboratoryButton = page.getByRole("link", {
+      name: `Edit ${laboratoryName} laboratory`
+    });
+    await expect(editLaboratoryButton).toBeVisible();
+    await editLaboratoryButton.click();
+
+    // Add the test block
+    const addTestBlockButton = page.getByRole("button", {
+      name: "Add test block"
+    });
+    await addTestBlockButton.click();
+
+    // set the name
+    const addTestBlockModal = page.getByRole("dialog");
+    await addTestBlockModal.getByLabel("Name").fill(testBlockName);
+
+    // select the language
+    const languageSelect = addTestBlockModal.getByRole("combobox", {
+      name: "Language"
+    });
+    await expect(languageSelect).toBeVisible();
+    languageSelect.click();
+
+    const javaOption = page.getByLabel("Java");
+    await expect(javaOption).toBeVisible();
+    await javaOption.click();
+
+    // Upload tests file
+    const zipFile = join(__dirname, "data", "java-tests.zip");
+    const zipFileInput = addTestBlockModal.getByLabel("Test file");
+
+    const fileChooserPromise = page.waitForEvent("filechooser");
+    await zipFileInput.click();
+    const fileChooser = await fileChooserPromise;
+    await fileChooser.setFiles(zipFile);
+
+    // Submit the form
+    const submitButton = page.getByRole("button", { name: "Add" });
+    await expect(submitButton).toBeVisible();
+    await submitButton.click();
+
+    // Assert the test block is shown
+    const nameInput = page.getByLabel("Block name");
+    await expect(nameInput).toBeVisible();
+    await expect(nameInput).toHaveValue(testBlockName);
   });
 
   test("Enroll student in test course", async ({ page }) => {
@@ -110,6 +214,81 @@ test.describe.serial("Grades workflow", () => {
     await studentButton.click();
   });
 
+  test("Student submits a solution", async ({ page }) => {
+    // Login as a student
+    await page.goto("/login");
+    await page.getByLabel("Email").fill(studentEmail);
+    await page.getByLabel("Password").fill(getDefaultPassword());
+    await page.getByRole("button", { name: "Submit" }).click();
+
+    // Go to the course page
+    await page.getByRole("link", { name: courseName }).click();
+
+    // Go to the laboratory page
+    await page
+      .getByRole("link", { name: `Complete ${laboratoryName} laboratory` })
+      .click();
+
+    // Assert the test block is shown
+    const testBlockNameInput = page.getByLabel("Test name");
+    await expect(testBlockNameInput).toBeVisible();
+    await expect(testBlockNameInput).toHaveValue(testBlockName);
+
+    // Upload the solution
+    const solutionFile = join(__dirname, "data", "java-tests.zip");
+    const solutionFileInput = page.getByLabel("Submission file");
+
+    const fileChooserPromise = page.waitForEvent("filechooser");
+    await solutionFileInput.click();
+    const fileChooser = await fileChooserPromise;
+    await fileChooser.setFiles(solutionFile);
+
+    // Submit the form
+    const submitButton = page.getByRole("button", { name: "Submit" });
+    await expect(submitButton).toBeVisible();
+    await submitButton.click();
+
+    // update the timeout
+    const ONE_MINUTE_IN_MS = 60000;
+    page.setDefaultTimeout(ONE_MINUTE_IN_MS);
+
+    // Assert the status phases are shown
+    // Pending phase
+    const pendingPhaseElm = page.getByTestId("pending-phase");
+    await expect(pendingPhaseElm).toBeVisible();
+    await expect(pendingPhaseElm).toHaveAttribute("data-reached", "true");
+
+    // Running phase
+    const runningPhaseElm = page.getByTestId("running-phase");
+    await expect(runningPhaseElm).toBeVisible();
+    await expect(runningPhaseElm).toHaveAttribute("data-reached", "true");
+
+    // Ready phase
+    const readyPhaseElm = page.getByTestId("ready-phase");
+    await expect(readyPhaseElm).toBeVisible();
+    await expect(readyPhaseElm).toHaveAttribute("data-reached", "true");
+
+    // TODO: Assert the student can download the submitted file
+    /*
+    const formTab = page.getByRole("tab", {
+      name: "Test block 1 submission form",
+      exact: true
+    });
+    await formTab.click();
+
+    const downloadButton = page.getByRole("button", {
+      name: "Download current submission file for block number 1"
+    });
+    await expect(downloadButton).toBeVisible();
+
+    const downloadPromise = page.waitForEvent("download");
+
+    await downloadButton.click();
+    const download = await downloadPromise;
+    await download.saveAs(join(__dirname, "data", "downloaded-java-tests.zip"));
+    */
+  });
+
   test("Student appears in the grades list", async ({ page }) => {
     // Login as a teacher
     await page.goto("/login");
@@ -141,12 +320,177 @@ test.describe.serial("Grades workflow", () => {
     await expect(studentRow).toBeVisible();
 
     await expect(
-      studentRow.getByRole("cell", { name: studentFullName })
+      studentRow.getByRole("cell", { name: studentFullName, exact: true })
     ).toBeVisible();
     await expect(
       studentRow.getByRole("cell", {
-        name: "N/A"
+        name: "N/A",
+        exact: true
+      })
+    ).toBeVisible();
+    await expect(
+      studentRow.getByRole("link", {
+        name: `Edit grade for student ${studentFullName}`,
+        exact: true
       })
     ).toBeVisible();
   });
+
+  test("Teacher can edit the grade", async ({ page }) => {
+    // Login as a teacher
+    await page.goto("/login");
+    await page.getByLabel("Email").fill(teacherEmail);
+    await page.getByLabel("Password").fill(getDefaultPassword());
+    await page.getByRole("button", { name: "Submit" }).click();
+
+    // Go to the course page
+    await page.getByRole("link", { name: courseName }).click();
+
+    // Go to the grades view of the laboratory
+    const laboratoryRow = page.getByRole("row", {
+      name: new RegExp(`^\\s*${laboratoryName}`),
+      exact: true
+    });
+    await expect(laboratoryRow).toBeVisible();
+
+    const laboratoryGradesButton = laboratoryRow.getByRole("link", {
+      name: `Go to the grades of ${laboratoryName}`,
+      exact: true
+    });
+    await laboratoryGradesButton.click();
+
+    // Edit the grade
+    const studentRow = page.getByRole("row", {
+      name: new RegExp(`^\\s*${studentFullName}`),
+      exact: true
+    });
+    await expect(studentRow).toBeVisible();
+
+    const editGradeButton = studentRow.getByRole("link", {
+      name: `Edit grade for student ${studentFullName}`,
+      exact: true
+    });
+    await editGradeButton.click();
+
+    // ## Select a criteria from the rubric
+    let criteriaCard = page.getByRole("button", {
+      name: "Select criteria 1 of objective 1",
+      exact: true
+    });
+    await criteriaCard.click();
+
+    const criteriaWeightElm = page.getByLabel(
+      "Criteria 1 of objective 1 weight"
+    );
+    expect(criteriaWeightElm).not.toBeNull();
+
+    const criteriaWeight = await criteriaWeightElm.getAttribute("value");
+    expect(criteriaWeight).not.toBeNull();
+
+    // Assert a toast is shown
+    await expect(page.getByText("Criteria has been selected")).toBeVisible();
+
+    // Assert the weight was added to the student grade
+    const studentGradeInput = page.getByLabel("Grade", { exact: true });
+    await expect(studentGradeInput).toBeVisible();
+    await expect(studentGradeInput).toHaveValue(criteriaWeight!);
+
+    // ## Deselect the criteria
+    criteriaCard = page.getByRole("button", {
+      name: "De-select criteria 1 of objective 1",
+      exact: true
+    });
+    await criteriaCard.click();
+
+    // Assert a toast is shown
+    await expect(page.getByText("Criteria has been de-selected")).toBeVisible();
+
+    // Assert the weight was removed from the student grade
+    await expect(studentGradeInput).toBeVisible();
+    await expect(studentGradeInput).toHaveValue("0");
+
+    // ## Add a comment
+    const commentInput = page.getByLabel("Comment");
+    await expect(commentInput).toBeVisible();
+    await commentInput.fill("This is a comment left by the teacher");
+
+    const updateCommentButton = page.getByRole("button", {
+      name: "Update comment",
+      exact: true
+    });
+    await updateCommentButton.click();
+
+    // Assert a toast is shown
+    await expect(
+      page.getByText("The comment has been set successfully")
+    ).toBeVisible();
+
+    // Select the criteria again
+    criteriaCard = page.getByRole("button", {
+      name: "Select criteria 1 of objective 1",
+      exact: true
+    });
+    await criteriaCard.click();
+  });
+
+  test("Teacher can download student submissions", async ({ page }) => {
+    // Login as a teacher
+    await page.goto("/login");
+    await page.getByLabel("Email").fill(teacherEmail);
+    await page.getByLabel("Password").fill(getDefaultPassword());
+    await page.getByRole("button", { name: "Submit" }).click();
+
+    // Go to the course page
+    await page.getByRole("link", { name: courseName }).click();
+
+    // Go to the grades view of the laboratory
+    const laboratoryRow = page.getByRole("row", {
+      name: new RegExp(`^\\s*${laboratoryName}`),
+      exact: true
+    });
+
+    const laboratoryGradesButton = laboratoryRow.getByRole("link", {
+      name: `Go to the grades of ${laboratoryName}`,
+      exact: true
+    });
+    await laboratoryGradesButton.click();
+
+    // Go to the grade of the student
+    const studentRow = page.getByRole("row", {
+      name: new RegExp(`^\\s*${studentFullName}`),
+      exact: true
+    });
+
+    const editGradeButton = studentRow.getByRole("link", {
+      name: `Edit grade for student ${studentFullName}`,
+      exact: true
+    });
+
+    await editGradeButton.click();
+
+    // Click on the Submission tab
+    const submissionTab = page.getByRole("tab", {
+      name: "Submissions",
+      exact: true
+    });
+    await submissionTab.click();
+
+    // Assert the teacher can download the submission
+    const downloadButton = page.getByRole("button", {
+      name: `Download code sent by the student for the ${testBlockName} test block`,
+      exact: true
+    });
+    await expect(downloadButton).toBeVisible();
+
+    const downloadPromise = page.waitForEvent("download");
+
+    await downloadButton.click();
+    const download = await downloadPromise;
+    await download.saveAs(join(__dirname, "data", "downloaded-java-tests.zip"));
+
+    // Assert a toast is shown
+    await expect(
+      page.getByText("The submission archive has been downloaded successfully")
+    ).toBeVisible();
+  });
 });