Improve user feedback on running tests

IllumiDesk · Mar 31, 2021 · b33b031 · b33b031
1 parent fad88df
commit b33b031
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 29 deletions.
diff --git a/src/cellType.ts b/src/cellType.ts
@@ -11,7 +11,7 @@ import { cellControls as cellControlsTemplate, icons } from "starboard-notebook/
 import { NBGraderMetadata, StarboardGraderMetadata } from "./types";
 import { graderMetadataToNBGraderCellType } from "./graderUtils";
 import { TemplateResult } from "lit-html";
-import { CodeRunnerFeedbackElement } from "./elements/codeRunnerFeedback";
+import { CodeRunnerFeedbackElement, CodeRunnerResult } from "./elements/codeRunnerFeedback";
 
 declare const runtime: Runtime
 declare const html: typeof lithtml.html;
@@ -226,7 +226,6 @@ export class GraderCellHandler implements CellHandler {
 
     attach(params: CellHandlerAttachParameters) {
         this.elements = params.elements;
-
         this.setupEditor();
         this.updateRender();
     }
@@ -244,9 +243,11 @@ export class GraderCellHandler implements CellHandler {
             this.lastRunId++;
             const currentRunId = this.lastRunId;
             this.isCurrentlyRunning = true;
+            this.codeRunnerFeedbackElement.setRunResult("running");
 
             if (pythonPlugin.getPyodideLoadingStatus() !== "ready") {
                 this.isCurrentlyLoadingPyodide = true;
+                this.codeRunnerFeedbackElement.setRunResult("running-setup");
                 lithtml.render(this.getControls(), this.elements.topControlsElement);
             }
 
@@ -257,12 +258,17 @@ export class GraderCellHandler implements CellHandler {
             } catch(e) {
                 didError = true;
             }
+
             this.isCurrentlyLoadingPyodide = false;
             if (this.lastRunId === currentRunId) {
                 this.isCurrentlyRunning = false;
                 lithtml.render(this.getControls(), this.elements.topControlsElement);
 
-                this.codeRunnerFeedbackElement.setRunResult(didError ? "fail" : "success");
+                let runnerStatusCode: CodeRunnerResult = didError ? "fail" : "success";
+                if (this.graderType === "autograder-tests") {
+                    runnerStatusCode = didError ? "test-fail" : "test-success";
+                }
+                this.codeRunnerFeedbackElement.setRunResult(runnerStatusCode);
             }
 
             return val;

diff --git a/src/elements/codeRunnerFeedback.ts b/src/elements/codeRunnerFeedback.ts
@@ -1,6 +1,6 @@
 import {LitElement, LitHtml} from "starboard-notebook/dist/src/runtime/esm/exports/libraries";
 
-export type CodeRunnerResult = "empty" | "success" | "fail";
+export type CodeRunnerResult = "empty" | "success" | "test-success" | "test-fail" | "fail" | "running" | "running-setup";
 
 const html = LitHtml.html;
 
@@ -37,37 +37,48 @@ export class CodeRunnerFeedbackElement extends LitElement.LitElement {
 
     render() {
         return html`
-            <style>
-                .grader-code-feedback-bar {
-                    border: 1px solid #999;
-                    background-color: #fafafa;
-                    padding: 0.2em;
-                    font-size: 0.8em;
-                }
-                .grader-code-feedback-bar.success {
-                    border: 1px solid #999;
-                    background-color: #baedc0;
-                }
-
-                .grader-code-feedback-bar.fail {
-                    border: 1px solid #999;
-                    background-color: #eba0ac;
-                }
-            </style>
             ${this.result === "empty" ? undefined : 
                 html`
                 <div class="grader-code-feedback-bar ${this.result}">
                     ${
-                        this.result === "success" ? 
-                        html`<div>
-                            ✅ Code ran succesfully
-                        </div>`:
-                        html`<div>
-                            ❌ An exception was thrown (tests failed)
-                        </div>`
+                        (() => {
+                            switch(this.result) {
+                                case("success"): {
+                                    return html`<div>
+                                    ✅ Code ran succesfully
+                                    </div>`
+                                }
+                                case("fail"): {
+                                    return html`<div>
+                                    ❌ An error was thrown
+                                    </div>`
+                                }
+                                case("test-success"): {
+                                    return html`<div>
+                                    ✅ Tests passed
+                                    </div>`
+                                }
+                                case("test-fail"): {
+                                    return html`<div>
+                                    ❌ Tests failed.
+                                    </div>`
+                                }
+                                case("running"): {
+                                    return html`<div>
+                                    ⚙️ Cell is running..
+                                    </div>`
+                                }
+                                case("running-setup"): {
+                                    return html`<div>
+                                    ⚙️ Cell is running.. <small>(for the first time, setup will take some extra time)</small>
+                                    </div>`
+                                }
+                            }
+                           
+                        })()
                     }
                 </div>`
             }
             <div class="grader-code-cell-output"></div>`
     }
-}
+}
diff --git a/src/styles.css b/src/styles.css
@@ -9,3 +9,24 @@
     border-bottom-right-radius: 0;
     border-bottom: 1px transparent solid;
 }
+
+.grader-code-feedback-bar {
+    border: 1px solid #999;
+    background-color: #fafafa;
+    padding: 0.2em 0.4em;
+    font-size: 0.75em;
+}
+.grader-code-feedback-bar.success,  .grader-code-feedback-bar.test-success{
+    border: 1px solid #00ce6e;
+    background-color: #baedc0;
+}
+
+.grader-code-feedback-bar.fail, .grader-code-feedback-bar.test-fail {
+    border: 1px solid #d20d0d;
+    background-color: #eba0ac;
+}
+
+.grader-code-feedback-bar.running, .grader-code-feedback-bar.running-setup {
+    border: 1px solid #9ad0ff;
+    background-color: #e4f6ff;
+}