Merge pull request #714 from rage/fix

Add missing send solution button and fix running tests for exam exercise
rage · Feb 26, 2024 · 9e87624 · 9e87624
2 parents 4166d1b + e15596f
commit 9e87624
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 86 deletions.
diff --git a/shared/lib.ts b/shared/lib.ts
@@ -253,6 +253,10 @@ export type ExtensionToWebview =
           courseId: number;
           exerciseIds: Array<number>;
       }
+    | {
+          type: "willNotRunTestsForExam";
+          target: TargetPanel<ExerciseTestsPanel>;
+      }
     // the last variant exists just to make TypeScript think that every panel type has
     // at least two different message types, which makes TS treat them differently than if
     // they only had one...

diff --git a/src/actions/user.ts b/src/actions/user.ts
@@ -137,6 +137,12 @@ export async function testExercise(
             target: panel,
             testResults: data,
         });
+    } else {
+        // exam
+        TmcPanel.postMessage({
+            type: "willNotRunTestsForExam",
+            target: panel,
+        });
     }
 
     return Ok.EMPTY;

diff --git a/webview-ui/src/components/TestResults.svelte b/webview-ui/src/components/TestResults.svelte
@@ -3,10 +3,12 @@
     import { TestCase, TestResult } from "../shared/langsSchema";
     import Checkbox from "./Checkbox.svelte";
     import ProgressBar from "./ProgressBar.svelte";
+    import { vscode } from "../utilities/vscode";
 
     export let totalPoints: number;
     export let successPoints: number;
     export let testResults: Array<TestResult | TestCase>;
+    export let solutionUrl: string | null;
 
     const allTestsFailed = testResults.find((tr) => tr.successful) === undefined;
     const allTestsPassed = testResults.find((tr) => !tr.successful) === undefined;
@@ -20,6 +22,13 @@
 
     const pointsPercent =
         totalPoints > 0 ? ((successPoints / totalPoints) * 100.0).toFixed(2) : 0.0;
+
+    function showInBrowser(submissionUrl: string) {
+        vscode.postMessage({
+            type: "openLinkInBrowser",
+            url: submissionUrl,
+        });
+    }
 </script>
 
 <div class="points-display">
@@ -31,20 +40,34 @@
     </Checkbox>
 </div>
 
-{#each testResults as testResult}
-    {#if testResult.successful}
-        <div class="test passed-container" hidden={!$showPassedTests}>
-            <h2 class="passed">PASS:</h2>
-            <h3>{testResult.name}</h3>
-        </div>
-    {:else}
-        <div class="test failed-container">
-            <h2 class="failed">FAIL:</h2>
-            <h3>{testResult.name}</h3>
-            <pre class="test-message">{testResult.message}</pre>
-        </div>
-    {/if}
-{/each}
+<div class="solution-button-container" hidden={solutionUrl === null}>
+    <vscode-button
+        role="button"
+        tabindex="0"
+        appearance="primary"
+        on:click={() => solutionUrl && showInBrowser(solutionUrl)}
+        on:keypress={() => solutionUrl && showInBrowser(solutionUrl)}
+    >
+        Show model solution in browser
+    </vscode-button>
+</div>
+
+<div class="test-results-container">
+    {#each testResults as testResult}
+        {#if testResult.successful}
+            <div class="test passed-container" hidden={!$showPassedTests}>
+                <h2 class="passed">PASS:</h2>
+                <h3>{testResult.name}</h3>
+            </div>
+        {:else}
+            <div class="test failed-container">
+                <h2 class="failed">FAIL:</h2>
+                <h3>{testResult.name}</h3>
+                <pre class="test-message">{testResult.message}</pre>
+            </div>
+        {/if}
+    {/each}
+</div>
 
 <style>
     .test {
@@ -73,4 +96,12 @@
         margin-top: 1rem;
         margin-bottom: 1rem;
     }
+    .solution-button-container {
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+    }
+    .test-results-container {
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+    }
 </style>
diff --git a/webview-ui/src/panels/ExerciseSubmission.svelte b/webview-ui/src/panels/ExerciseSubmission.svelte
@@ -159,6 +159,7 @@
         totalPoints={panel.exercise.availablePoints}
         successPoints={$submissionResult.points.length}
         testResults={$submissionResult.test_cases ?? []}
+        solutionUrl={$submissionResult.solution_url}
     />
 {/if}
 

diff --git a/webview-ui/src/panels/ExerciseTests.svelte b/webview-ui/src/panels/ExerciseTests.svelte
@@ -13,6 +13,8 @@
     const pasteResult = loadable<string>();
     const pasteError = loadable<string>();
     const testResults = loadable<TestResultData>();
+    const tryingToRunTestsForExam = loadable<boolean>();
+
     const successPoints = derived(testResults, ($testResults) => {
         return ($testResults?.testResult.testResults ?? [])
             .filter((tr) => tr.successful)
@@ -58,6 +60,10 @@
                 testError.set(message.error);
                 break;
             }
+            case "willNotRunTestsForExam": {
+                tryingToRunTestsForExam.set(true);
+                break;
+            }
             default:
                 assertUnreachable(message);
         }
@@ -82,83 +88,94 @@
     }
 </script>
 
-{#if $testResults === undefined}
-    <h1>{panel.exercise.name}: Running tests</h1>
-{:else if $testResults.testResult.status === "PASSED"}
-    <h1>{panel.exercise.name}: Tests passed</h1>
-{:else if $testResults.testResult.status === "TESTS_FAILED"}
-    <h1>{panel.exercise.name}: Tests failed</h1>
-{:else if $testResults.testResult.status === "COMPILE_FAILED"}
-    <h1>{panel.exercise.name}: Compilation failed</h1>
-{:else if $testResults.testResult.status === "TESTRUN_INTERRUPTED"}
-    <h1>{panel.exercise.name}: The test run was interrupted</h1>
-{:else if $testResults.testResult.status === "GENERIC_ERROR"}
-    <h1>{panel.exercise.name}: An error occurred during the test run</h1>
-{:else}
-    {assertUnreachable($testResults.testResult.status)}
-{/if}
+{#if !$tryingToRunTestsForExam}
+    {#if $testResults === undefined}
+        <h1>{panel.exercise.name}: Running tests</h1>
+    {:else if $testResults.testResult.status === "PASSED"}
+        <h1>{panel.exercise.name}: Tests passed</h1>
+    {:else if $testResults.testResult.status === "TESTS_FAILED"}
+        <h1>{panel.exercise.name}: Tests failed</h1>
+    {:else if $testResults.testResult.status === "COMPILE_FAILED"}
+        <h1>{panel.exercise.name}: Compilation failed</h1>
+    {:else if $testResults.testResult.status === "TESTRUN_INTERRUPTED"}
+        <h1>{panel.exercise.name}: The test run was interrupted</h1>
+    {:else if $testResults.testResult.status === "GENERIC_ERROR"}
+        <h1>{panel.exercise.name}: An error occurred during the test run</h1>
+    {:else}
+        {assertUnreachable($testResults.testResult.status)}
+    {/if}
 
-<vscode-button
-    role="button"
-    tabindex="0"
-    class="close-button"
-    appearance="secondary"
-    on:click={closePanel}
-    on:keypress={closePanel}
->
-    ×
-</vscode-button>
+    <vscode-button
+        role="button"
+        tabindex="0"
+        class="close-button"
+        appearance="secondary"
+        on:click={closePanel}
+        on:keypress={closePanel}
+    >
+        ×
+    </vscode-button>
 
-{#if $testResults === undefined}
-    <div class="button-container">
-        <vscode-button
-            role="button"
-            tabindex="0"
-            appearance="secondary"
-            on:click={closePanel}
-            on:keypress={closePanel}
-        >
-            Run in background
-        </vscode-button>
-        <vscode-button
-            role="button"
-            tabindex="0"
-            appearance="secondary"
-            on:click={cancelTests}
-            on:keypress={cancelTests}
-        >
-            Cancel
-        </vscode-button>
-    </div>
-    <vscode-progress-ring />
-{:else}
-    {#if panel.course.disabled}
-        <div>
-            Sending the solution or pasting to the TMC server is not available for this exercise,
-            because the course is disabled.
-        </div>
-    {:else}
-        <div class="header-container">
-            <vscode-button role="button" tabindex="0" on:click={submit} on:keypress={submit}>
-                Send solution to server
+    {#if $testResults === undefined}
+        <div class="button-container">
+            <vscode-button
+                role="button"
+                tabindex="0"
+                appearance="secondary"
+                on:click={closePanel}
+                on:keypress={closePanel}
+            >
+                Run in background
+            </vscode-button>
+            <vscode-button
+                role="button"
+                tabindex="0"
+                appearance="secondary"
+                on:click={cancelTests}
+                on:keypress={cancelTests}
+            >
+                Cancel
             </vscode-button>
-            <span class="help-box-container">
-                <PasteHelpBox
-                    hidden={$allSuccessful ?? true}
-                    course={panel.course}
-                    exercise={panel.exercise}
-                    sourcePanel={panel}
-                    pasteUrl={$pasteResult}
-                    pasteError={$pasteError}
-                />
-            </span>
         </div>
+        <vscode-progress-ring />
+    {:else}
+        {#if panel.course.disabled}
+            <div>
+                Sending the solution or pasting to the TMC server is not available for this
+                exercise, because the course is disabled.
+            </div>
+        {:else}
+            <div class="header-container">
+                <vscode-button role="button" tabindex="0" on:click={submit} on:keypress={submit}>
+                    Send solution to server
+                </vscode-button>
+                <span class="help-box-container">
+                    <PasteHelpBox
+                        hidden={$allSuccessful ?? true}
+                        course={panel.course}
+                        exercise={panel.exercise}
+                        sourcePanel={panel}
+                        pasteUrl={$pasteResult}
+                        pasteError={$pasteError}
+                    />
+                </span>
+            </div>
+        {/if}
+        <TestResults
+            totalPoints={$totalPoints}
+            successPoints={$successPoints}
+            testResults={$testResults.testResult.testResults}
+            solutionUrl={null}
+        />
     {/if}
-    <TestResults
-        totalPoints={$totalPoints}
-        successPoints={$successPoints}
-        testResults={$testResults.testResult.testResults}
-    />
+{:else}
+    <h1>{panel.course.title}: {panel.exercise.name}</h1>
+    <div>You can submit your answer with the button below.</div>
+    <div class="exam-submission-button-container">
+        <vscode-button role="button" tabindex="0" on:click={submit} on:keypress={submit}>
+            Submit to server
+        </vscode-button>
+    </div>
 {/if}
 
 <style>
@@ -177,4 +194,8 @@
     .header-container {
         display: flex;
     }
+    .exam-submission-button-container {
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+    }
 </style>