Refactoring & Debugging Content

packages/client/src/components/Workspace.tsx

@@ -148,6 +148,7 @@ export interface ICodeEditorProps {
   userSettings: UserSettings;
   editorOptions: ICodeEditorOptions;
   onDidBlurEditorText: () => void;
+  onDidInitializeMonacoEditor: () => void;
 }
 
 export interface ICodeEditor extends React.Component<ICodeEditorProps> {
@@ -387,6 +388,13 @@ class Workspace extends React.Component<IProps, IState> {
     }
   }
 
+  /**
+   * Handle any actions after the Monaco editor is initialized.
+   */
+  onDidInitializeMonacoEditor = () => {
+    this.addModuleDependenciesOnMount();
+  };
+
   /**
    * For non-markup challenges (React, TS), enable the user to
    * preview test messages without the tests being run
@@ -805,6 +813,7 @@ class Workspace extends React.Component<IProps, IState> {
           language={this.getMonacoLanguageFromChallengeType()}
           value={this.state.code}
           onChange={this.handleEditorContentChange}
+          onDidInitializeMonacoEditor={this.onDidInitializeMonacoEditor}
         />
       </CodeEditorContainer>
     );
@@ -1374,12 +1383,12 @@ class Workspace extends React.Component<IProps, IState> {
   };
 
   compileAndTransformCodeString = async () => {
-    const { isTestingAndAutomationChallenge } = this.props;
     const { code, dependencies } = await compileCodeString(
       this.state.code,
       this.props.challenge,
     );
 
+    const { isTestingAndAutomationChallenge } = this.props;
     if (this.editor) {
       this.editor.addModuleTypeDefinitionsToMonaco(
         dependencies,
@@ -1390,6 +1399,16 @@ class Workspace extends React.Component<IProps, IState> {
     return code;
   };
 
+  /**
+   * This method calls the compileAndTransformCodeString method, which has the
+   * side effect of add relevant type definitions to the Monaco editor based
+   * on the current challenge code. This avoids the issue where these are not
+   * present when the challenge first loads.
+   */
+  addModuleDependenciesOnMount = () => {
+    this.compileAndTransformCodeString();
+  };
+
   handleCompilationError = (error: Error) => {
     debug("[handleCompilationError]", error);
     const log = Decode([

packages/client/src/components/WorkspaceCodemirrorEditor.tsx

@@ -50,7 +50,7 @@ export default class WorkspaceCodemirrorEditor
 
   refresh = async () => {
     debug("noop(refresh)");
-    // Unecessary for the controlled component, but required by the ICodeEditor spec
+    // Unnecessary for the controlled component, but required by the ICodeEditor spec
     // noop
   };
 

packages/client/src/components/WorkspaceMonacoEditor.tsx

@@ -232,6 +232,9 @@ export default class WorkspaceMonacoEditor
     }
 
     debug("[initializeMonaco] Monaco editor initialized.");
+
+    // Call parent callback to trigger any events on Monaco initialization
+    this.props.onDidInitializeMonacoEditor();
   };
 
   setTheme = (theme: string) => {

packages/client/src/tools/utils.ts

@@ -154,7 +154,7 @@ export const generateEmptyModule = (): Module => ({
 });
 
 const starterTestCode = `// Write your tests here:
-test("\`variable\` should be defined", () => {
+test("\`variable\` should be defined.", () => {
   expect(variable).toBeDefined();
 });
 `;