Force UI into Running tests state when pressing "Run tests" button (exercism#7867)

* Force UI into Running tests state when pressing "Run tests" button

* Adjust things to make tests pass, make faux-submission non-cancellable

* Get rid of jest console.errors

* Remove faux-submission on error

Author: dem4ron

app/javascript/components/Editor.tsx

@@ -282,10 +282,7 @@ export default ({
       setSubmission(submission.uuid, { ...submission, testRun: testRun })
     },
 
-    // not stringifying this will lead to an infinite loop
-    // see https://github.com/exercism/website/pull/3137#discussion_r1015500657
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [setSubmission, JSON.stringify(submission)]
+    [setSubmission, submission?.uuid]
   )
   const editorDidMount = useCallback(
     (editor) => {
@@ -335,7 +332,13 @@ export default ({
         }
       },
     })
-  }, [submission, dispatch, revertToLastIteration, setFiles, defaultFiles])
+  }, [
+    submission?.uuid,
+    dispatch,
+    revertToLastIteration,
+    setFiles,
+    defaultFiles,
+  ])
 
   const handleRevertToExerciseStart = useCallback(() => {
     if (!submission) {
@@ -378,7 +381,13 @@ export default ({
         }
       },
     })
-  }, [submission, dispatch, revertToExerciseStart, setFiles, defaultFiles])
+  }, [
+    submission?.uuid,
+    dispatch,
+    revertToExerciseStart,
+    setFiles,
+    defaultFiles,
+  ])
 
   const handleCancelled = useCallback(() => {
     if (!submission) {
@@ -387,7 +396,7 @@ export default ({
 
     removeSubmission(submission.uuid)
     setHasCancelled(true)
-  }, [removeSubmission, setHasCancelled, submission])
+  }, [removeSubmission, setHasCancelled, submission?.uuid])
 
   useEffect(() => {
     if (!submission) {

app/javascript/components/editor/TestRunSummary.tsx

@@ -264,7 +264,8 @@ const TestRunSummaryContent = ({
               Estimated running time ~ {testRunner.averageTestDuration}s
             </span>
           </p>
-          {onCancel !== undefined ? (
+          {onCancel !== undefined &&
+          testRun.submissionUuid !== 'faux-submission' ? (
             <button
               type="button"
               onClick={() => onCancel()}

app/javascript/components/editor/TestRunSummaryContainer.tsx

@@ -29,6 +29,7 @@ export const TestRunSummaryContainer = ({
     {
       endpoint: testRun.links.self,
       options: {
+        enabled: testRun.submissionUuid !== 'faux-submission',
         refetchInterval:
           testRun.status === TestRunStatus.QUEUED ? REFETCH_INTERVAL : false,
       },
@@ -68,14 +69,16 @@ export const TestRunSummaryContainer = ({
   useEffect(() => {
     switch (testRun.status) {
       case TestRunStatus.QUEUED:
-        handleQueued()
+        if (testRun.submissionUuid !== 'faux-submission') {
+          handleQueued()
+        }
         break
       default:
         clearTimeout(timer.current)
         channel.current?.disconnect()
         break
     }
-  }, [handleQueued, testRun.status])
+  }, [handleQueued, testRun.status, testRun.submissionUuid])
 
   useEffect(() => {
     channel.current = new TestRunChannel(testRun, (updatedTestRun: TestRun) => {

app/javascript/components/editor/useSubmissionsList.ts

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback } from 'react'
 import { sendRequest } from '../../utils/send-request'
 import { Submission, TestRunStatus, TestRun } from './types'
-import { File } from '../types'
+import { File, SubmissionTestsStatus } from '../types'
 import { useMutation } from '@tanstack/react-query'
 import { typecheck } from '../../utils/typecheck'
 
@@ -35,20 +35,20 @@ export const useSubmissionsList = (
   >(
     async ({ files, testResults }) => {
       const testResultsJson = testResults ? JSON.stringify(testResults) : null
+      appendFaux()
       const { fetch } = sendRequest({
         endpoint: links.create,
         method: 'POST',
         body: JSON.stringify({ files, test_results_json: testResultsJson }),
       })
-
       return fetch.then((response) =>
         typecheck<Submission>(response, 'submission')
       )
     },
     {
       onSuccess: (submission) => {
         setList([
-          ...list,
+          ...list.filter((s) => s.uuid !== 'faux-submission'),
           {
             ...submission,
             testRun: {
@@ -70,21 +70,67 @@ export const useSubmissionsList = (
           },
         ])
       },
+
+      onError: () => {
+        setList((prevList) => {
+          return prevList.filter((s) => s.uuid !== 'faux-submission')
+        })
+      },
     }
   )
 
   const set = useCallback(
     (uuid: string, data: Submission) => {
-      setList(list.map((s) => (s.uuid === uuid ? data : s)))
+      setList((prevList) => prevList.map((s) => (s.uuid === uuid ? data : s)))
     },
-    [JSON.stringify(list)]
+    [setList]
   )
 
+  // append a faux submission at the moment someone clicks "Run Tests"
+  // to force the UI into the "Running tests" state
+  const appendFaux = useCallback(() => {
+    const fauxSubmission: Submission = {
+      testsStatus: SubmissionTestsStatus.NOT_QUEUED,
+      uuid: 'faux-submission',
+      links: {
+        cancel: '',
+        submit: '',
+        testRun: '',
+        aiHelp: '',
+        initialFiles: '',
+        lastIterationFiles: '',
+      },
+    }
+
+    setList((prev) => [
+      ...prev,
+      {
+        ...fauxSubmission,
+        testRun: {
+          uuid: null,
+          submissionUuid: fauxSubmission.uuid,
+          version: 0,
+          status: TestRunStatus.QUEUED,
+          tests: [],
+          message: '',
+          messageHtml: '',
+          output: '',
+          outputHtml: '',
+          highlightjsLanguage: '',
+          links: {
+            self: '',
+          },
+          tasks: [],
+        },
+      },
+    ])
+  }, [setList])
+
   const remove = useCallback(
     (uuid: string) => {
-      setList(list.filter((s) => s.uuid !== uuid))
+      setList((list) => list.filter((s) => s.uuid !== uuid))
     },
-    [JSON.stringify(list)]
+    [setList]
   )
 
   const current = list[list.length - 1] || null
@@ -109,7 +155,7 @@ export const useSubmissionsList = (
 
       set(current.uuid, { ...current, testRun: testRun })
     })
-  }, [JSON.stringify(defaultList), set])
+  }, [set])
 
   return { current, create, set, remove }
 }

test/javascript/components/Editor/features/submissions.test.tsx

@@ -2,7 +2,7 @@ jest.mock(
   '../../../../../app/javascript/components/editor/FileEditorCodeMirror'
 )
 
-import React from 'react'
+import React, { act } from 'react'
 import { waitFor, screen, fireEvent } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import '@testing-library/jest-dom/extend-expect'
@@ -60,7 +60,7 @@ afterAll(() => {
 })
 
 test('shows message when test times out', async () => {
-  const props = buildEditor({ overrides: { timeout: 1000 } })
+  const props = buildEditor({ overrides: { timeout: 500 } })
   const { promise } = deferred()
 
   server.use(
@@ -85,8 +85,13 @@ test('shows message when test times out', async () => {
 
   render(<Editor {...props} />)
 
-  userEvent.click(screen.getByRole('button', { name: /Run Tests/ }))
+  await act(async () => {
+    userEvent.click(screen.getByRole('button', { name: /Run Tests/i }))
+  })
   expect(await screen.findByText(/Running tests/i)).toBeInTheDocument()
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+  })
   expect(await screen.findByText('Your tests timed out')).toBeInTheDocument()
 })
 
@@ -95,7 +100,9 @@ test('cancels a pending submission', async () => {
 
   render(<Editor {...props} />)
 
-  userEvent.click(screen.getByRole('button', { name: /Run Tests/ }))
+  await act(async () => {
+    userEvent.click(screen.getByRole('button', { name: /Run Tests/i }))
+  })
   expect(await screen.findByText('Running tests…')).toBeInTheDocument()
   userEvent.click(await screen.findByRole('button', { name: /cancel/i }))
 
@@ -106,7 +113,9 @@ test('makes editor readonly while submitting tests', async () => {
 
   render(<Editor {...props} />)
 
-  userEvent.click(screen.getByRole('button', { name: /Run Tests/ }))
+  await act(async () => {
+    userEvent.click(screen.getByRole('button', { name: /Run Tests/i }))
+  })
   expect(await screen.findByText('Running tests…')).toBeInTheDocument()
   expect(screen.getByText('Readonly: true')).toBeInTheDocument()
 })