Add clientside js test-runner (exercism#7865)

* Add local JavaScript test runner (exercism#7838)

* Add test_results_json option to submission create

* Insert stub test-result json into create testrun link

* Fix things up

* Add ClientSide test runner proto

* Make work

* Add local setup files

* Wire in `@exercism/javascript-browser-test-runner`

* Update app/commands/solution/generate_test_run_config.rb

* Refactor slightly

* Refactor plugin, organise files better

* Update jest transformIgnorePatterns

* Make runTestsClientSide more robust

* Make submission/create_test green

* Fix create_test

---------

Co-authored-by: dem4ron <[email protected]>

* Fix submitting status as 'grace' (exercism#7864)

* Add shims to esbuild

* Lazy import runTestsClientSide

* Remove esbuild shizzle

---------

Co-authored-by: Jeremy Walker <[email protected]>

Author: dem4ron

app/commands/solution/generate_test_run_config.rb

@@ -0,0 +1,27 @@
+class Solution::GenerateTestRunConfig
+  include Mandate
+
+  initialize_with :solution
+
+  def call
+    return nil unless [1530, 38_366, 757_288].include?(solution.user_id)
+    return nil unless track.slug == "javascript"
+
+    {
+      files: exercise_repo.tooling_files
+    }
+  end
+
+  private
+  delegate :track, to: :solution
+
+  memoize
+  def exercise_repo
+    Git::Exercise.new(
+      solution.git_slug,
+      solution.git_type,
+      solution.git_sha,
+      repo_url: solution.track.repo_url
+    )
+  end
+end

app/commands/submission/create.rb

@@ -1,16 +1,15 @@
 class Submission::Create
   include Mandate
 
-  def initialize(solution, files, submitted_via)
+  def initialize(solution, raw_files, submitted_via, test_results_json = nil)
     @submission_uuid = SecureRandom.compact_uuid
-
     @solution = solution
-    @submitted_files = files
     @submitted_via = submitted_via
+    @test_results_json = test_results_json
 
     # TODO: (Optional) - Move this into another service
     # TODO: (Optional) - Consider risks around filenames
-    @submitted_files.each do |f|
+    @submitted_files = raw_files.each do |f|
       f[:digest] = Digest::SHA1.hexdigest(f[:content])
     end
   end
@@ -21,7 +20,7 @@ def call
 
     create_submission!
     create_files!
-    init_test_run!
+    handle_test_run!
     schedule_jobs!
     log_metric!
 
@@ -30,7 +29,7 @@ def call
   end
 
   private
-  attr_reader :solution, :submitted_files, :submission_uuid, :submitted_via, :submission
+  attr_reader :solution, :submitted_files, :submission_uuid, :submitted_via, :submission, :test_results_json
 
   delegate :track, :user, to: :solution
 
@@ -61,8 +60,12 @@ def create_files!
     end
   end
 
-  def init_test_run!
-    Submission::TestRun::Init.(submission)
+  def handle_test_run!
+    if test_results_json.present?
+      Submission::TestRun::ProcessClientSideResults.(submission, test_results_json)
+    else
+      Submission::TestRun::Init.(submission)
+    end
   end
 
   def schedule_jobs!

app/commands/submission/test_run/process_client_side_results.rb

@@ -0,0 +1,29 @@
+class Submission::TestRun::ProcessClientSideResults
+  include Mandate
+
+  initialize_with :submission, :test_results_json
+
+  def call
+    Submission::TestRun::Process.(
+      FauxToolingJob.new(submission, test_results_json)
+    )
+  end
+
+  # Rather than rewrite this critical component, for now
+  # we're just stubbing a tooling job as if it had come back
+  # from the server.
+  class FauxToolingJob
+    include Mandate
+
+    initialize_with :submission, :test_results_json do
+      @id = SecureRandom.uuid
+    end
+
+    attr_reader :id
+
+    delegate :uuid, to: :submission, prefix: true
+    def execution_status = 200
+    def source = { "exercise_git_sha" => submission.solution.git_sha }
+    def execution_output = { "results.json" => test_results_json }
+  end
+end

app/controllers/api/solutions/submissions_controller.rb

@@ -16,7 +16,7 @@ def create
 
     # TODO: (Required) Allow rerunning of tests if previous submission was an error / ops error / timeout
     begin
-      submission = Submission::Create.(solution, files, :api)
+      submission = Submission::Create.(solution, files, :api, params[:test_results_json])
     rescue DuplicateSubmissionError
       return render_error(400, :duplicate_submission)
     end
@@ -28,6 +28,6 @@ def create
 
   private
   def submission_params
-    params.permit(files: %i[filename content])
+    params.permit(:test_results_json, :solution_uuid, files: %i[filename content type])
   end
 end

app/helpers/react_components/editor.rb

@@ -75,7 +75,8 @@ def data
           icon_url: track.icon_url,
           median_wait_time: track.median_wait_time
         },
-        show_deep_dive_video: show_deep_dive_video?
+        show_deep_dive_video: show_deep_dive_video?,
+        local_test_runner:
       }
     end
 
@@ -102,6 +103,10 @@ def show_deep_dive_video?
       true
     end
 
+    def local_test_runner
+      Solution::GenerateTestRunConfig.(solution)
+    end
+
     def mark_video_as_seen_endpoint
       return nil if solution.user.watched_video?(:youtube, exercise.deep_dive_youtube_id)
 

app/javascript/components/Editor.tsx

@@ -108,6 +108,7 @@ export default ({
   showDeepDiveVideo,
   hasAvailableMentoringSlot,
   features = { theme: false, keybindings: false },
+  localTestRunner,
 }: Props): JSX.Element => {
   const editorRef = useRef<FileEditorHandle>()
   const runTestsButtonRef = useRef<HTMLButtonElement>(null)
@@ -127,7 +128,9 @@ export default ({
     current: submission,
     set: setSubmission,
     remove: removeSubmission,
-  } = useSubmissionsList(defaultSubmissions, { create: links.runTests })
+  } = useSubmissionsList(defaultSubmissions, {
+    create: links.runTests,
+  })
   const { revertToExerciseStart, revertToLastIteration } = useFileRevert()
   const { create: createIteration } = useIteration()
   const { get: getFiles, set: setFiles } = useEditorFiles({
@@ -162,44 +165,63 @@ export default ({
     else setIsProcessing(false)
   }, [status, testRunStatus])
 
-  const runTests = useCallback(() => {
+  const runTests = useCallback(async () => {
     dispatch({ status: EditorStatus.CREATING_SUBMISSION })
 
-    createSubmission(files, {
-      onSuccess: () => {
-        dispatch({ status: EditorStatus.INITIALIZED })
-        setSubmissionFiles(files)
-        setHasLatestIteration(false)
-      },
-      onError: async (error) => {
-        let editorError: null | Promise<{ type: string; message: string }> =
-          null
+    let testResults: any = null
+    try {
+      const { runTestsClientSide } = await import(
+        './editor/ClientSideTestRunner/generalTestRunner'
+      )
+
+      testResults = await runTestsClientSide({
+        trackSlug: track.slug,
+        exerciseSlug: exercise.slug,
+        config: localTestRunner,
+        files,
+      })
+    } catch (e) {
+      console.warn('There was an error running tests clientside:', e)
+    }
 
-        if (error instanceof Error) {
-          editorError = Promise.resolve({
-            type: 'unknown',
-            message: 'Unable to submit file. Please try again.',
-          })
-        } else if (error instanceof Response) {
-          editorError = error
-            .json()
-            .then((json) => json.error)
-            .catch(() => {
-              return {
-                type: 'unknown',
-                message: 'Unable to submit file. Please try again.',
-              }
+    createSubmission(
+      { files, testResults },
+      {
+        onSuccess: () => {
+          dispatch({ status: EditorStatus.INITIALIZED })
+          setSubmissionFiles(files)
+          setHasLatestIteration(false)
+        },
+        onError: async (error) => {
+          let editorError: null | Promise<{ type: string; message: string }> =
+            null
+
+          if (error instanceof Error) {
+            editorError = Promise.resolve({
+              type: 'unknown',
+              message: 'Unable to submit file. Please try again.',
             })
-        }
+          } else if (error instanceof Response) {
+            editorError = error
+              .json()
+              .then((json) => json.error)
+              .catch(() => {
+                return {
+                  type: 'unknown',
+                  message: 'Unable to submit file. Please try again.',
+                }
+              })
+          }
 
-        if (editorError) {
-          dispatch({
-            status: EditorStatus.CREATE_SUBMISSION_FAILED,
-            error: await editorError,
-          })
-        }
-      },
-    })
+          if (editorError) {
+            dispatch({
+              status: EditorStatus.CREATE_SUBMISSION_FAILED,
+              error: await editorError,
+            })
+          }
+        },
+      }
+    )
   }, [createSubmission, dispatch, files])
 
   const showFeedbackModal = useCallback(() => {

app/javascript/components/editor/ClientSideTestRunner/generalTestRunner.ts

@@ -0,0 +1,58 @@
+import { OutputInterface } from '@exercism/javascript-browser-test-runner/src/output'
+import { File } from '../../types'
+import { runTests } from '@exercism/javascript-browser-test-runner'
+
+type FileMap = Record<string, string>
+
+interface RunTestsClientSideParams {
+  trackSlug: string
+  exerciseSlug: string
+  config?: { files?: FileMap }
+  files: File[]
+}
+
+export async function runTestsClientSide({
+  trackSlug,
+  exerciseSlug,
+  config = {},
+  files,
+}: RunTestsClientSideParams): Promise<OutputInterface | null> {
+  try {
+    if (!trackSlug || !exerciseSlug || !Array.isArray(files)) {
+      console.warn('Missing required params in runTestsClientSide')
+      return null
+    }
+
+    switch (trackSlug) {
+      case 'javascript': {
+        const studentFileMap: FileMap = Object.fromEntries(
+          files
+            .filter(
+              (f): f is File => !!f.filename && typeof f.content === 'string'
+            )
+            .map(({ filename, content }) => [filename, content])
+        )
+
+        if (Object.keys(studentFileMap).length === 0) {
+          console.warn('studentFileMap is empty in runTestsClientSide')
+          return null
+        }
+
+        const allFiles: FileMap = {
+          ...(config.files || {}),
+          ...studentFileMap,
+        }
+
+        const studentFilenames = Object.keys(studentFileMap)
+
+        return await runTests(exerciseSlug, allFiles, studentFilenames)
+      }
+
+      default:
+        return null
+    }
+  } catch (error) {
+    console.error('runTestsClientSide failed:', error)
+    return null
+  }
+}

app/javascript/components/editor/ClientSideTestRunner/jsTestRunner.ts

@@ -0,0 +1,34 @@
+export function runJsTests() {
+  // run tests here with the js test-runner from npm and return results
+
+  return TEST_RESULTS
+}
+
+const TEST_RESULTS = {
+  version: 3,
+  status: 'pass',
+  message: null,
+  messageHtml: null,
+  output: null,
+  outputHtml: null,
+  tests: [
+    {
+      name: 'Hello World > Say Hi!',
+      status: 'pass',
+      testCode: "expect(hello()).toEqual('Hello, World!');",
+      message:
+        'Error: \u001b[2mexpect(\u001b[22m\u001b[31mreceived\u001b[39m\u001b[2m).\u001b[22mtoEqual\u001b[2m(\u001b[22m\u001b[32mexpected\u001b[39m\u001b[2m) // deep equality\u001b[22m\n\nExpected: \u001b[32m"\u001b[7mHello, World\u001b[27m!"\u001b[39m\nReceived: \u001b[31m"\u001b[7mGoodbye, Mars\u001b[27m!"\u001b[39m',
+      messageHtml:
+        "Error: expect(<span style='color:#A00;'>received</span>).toEqual(<span style='color:#0A0;'>expected</span>) // deep equality\n\nExpected: <span style='color:#0A0;'>&quot;Hello, World!&quot;</span>\nReceived: <span style='color:#A00;'>&quot;Goodbye, Mars!&quot;</span>",
+      expected: null,
+      output: null,
+      outputHtml: null,
+      taskId: null,
+    },
+  ],
+  tasks: [],
+  highlightjsLanguage: 'javascript',
+  links: {
+    self: 'http://local.exercism.io:3020/api/v2/solutions/b714573e50244417a0812ca49cc76a1d/submissions/71487f490f584bfaa61a0051bd244932/test_run',
+  },
+}

app/javascript/components/editor/Props.tsx

@@ -108,4 +108,5 @@ export type Props = {
   trackObjectives: string
   showDeepDiveVideo: boolean
   hasAvailableMentoringSlot: boolean
+  localTestRunner: { files: Record<string, string> }
 }