Skip to content

Component Tests

Component tests interact with the components of the LE and are typically written using regular expressions. These components include:

  • Code Editor
  • Terminal (Interactive Command Line)
  • Output Terminal (Non-interactive, displays program output)
  • Web Browser

Component testing can be accessed by selecting "Component Test" under the Test type field in Author.

Return Value

A passing test only needs to return an object with the pass attribute set to true.

return {
  pass: true,
};

A failing test should have pass set to false and an errors attribute defined with a friendly message and the location of the error message as the component. Examples of component include:

  • Terminal
  • PersistentCodeEditor
  • WebBrowser

For example, a test in which the user was supposed to run a build command might return the following:

return {
  pass: false,
  errors: {
    friendly: "Did you run `npm run build` in the Terminal?",
    component: `Terminal`,
  },
};

This will cause the error message to be displayed within the Terminal component.

CodeEditor - Checking a Code File for Content:

Often we want to check whether a learner has added particular code to one of the files in the LE. Two common templates for this are:

  • CodeEditor Component Basic Test
  • CodeEditor Component Basic Test V2 (also checks the output terminal for an error message and provides a function for error message creation)

CodeEditor Component Basic Test

The base template for the CodeEditor Component Basic Test is as follows:

if (
  !Components.CodeEditor.codeContains("<filename>", /match in the CODE EDITOR/)
) {
  return {
    pass: false,
    errors: {
      friendly: "Did you ... ?",
      component: "PersistentCodeEditor",
    },
  };
}
return { pass: true };

The codeContains method takes two parameters, a filename as well as content. Both parameters are able to be defined as regular expressions or strings.

The filename parameter allows you to specify which files you would like to search. The path of the file starts from the files directory of the workspace rather than from within the test folder. If multiple files match the pattern specified in the parameter, each matching file will have its content checked. The test will return false if no file contains the search content.

The second parameter allows you to specify the content you would like to search for using a regular expression or string.

The following example tests whether the workspace contains a JavaScript file in which a constant has been defined and assigned a whole number:

if (!Components.CodeEditor.codeContains(/w+\.js/, /const\s+\w+\s+=\s+\d+/)) {
  return {
    pass: false,
    errors: {
      friendly: "Did you define a constant and give it a whole number value?",
      component: "PersistentCodeEditor",
    },
  };
}
return { pass: true };

Output Terminal

The Output Terminal is a component in which the output of a run program can be routed to and displayed to the user. It's library also provides several methods that allow us to check the content of a program's output:

  • hasOutput tests whether the standard output contains content that matches a provided regular expression.
  • hasOneOf allows for an array of strings and regular expressions to be provided, this will return true if any standard output content matches one of the provided elements of the array.
  • haError similar to hasOutput but standard error is checked instead of standard output.

Examples

In the following example we will check whether the output of a program contains a whole number:

if (!Components.OutputTerminal.hasOutput(/d+/)) {
  return {
    pass: false,
    errors: {
      friendly: "Does your program print a whole number to standard output?",
      component: "PersistentCodeEditor",
    },
  };
}
return { pass: true };

Perhaps we want to check whether the program outputs either a whole number or the word "Codecademy".

if (!Components.OutputTerminal.hasOneOf([/d+/, "Codecademy"])) {
  return {
    pass: false,
    errors: {
      friendly:
        'Does your program print a whole number or "Codecademy" to standard output?',
      component: "PersistentCodeEditor",
    },
  };
}
return { pass: true };

In the following example we will check whether standard error contains any content.

if (!Components.OutputTerminal.hasError(/./g) {
  return {
    pass: false,
    errors: {
      friendly: 'Uh oh! Your program seems to have produced an error!',
      component: 'PersistentCodeEditor'
    }
  };
}
return { pass: true };

Terminal (The Command Line)

The Terminal component has several methods for testing command execution in the command line interface.

  • didRunCommand tests whether a command was run in the terminal, an expected output and exit code can also be provided
  • didRunOneOf similar to didRunCommand except that an array of possible command patterns can be provided

Examples

Tests whether mocha has been run in the Terminal

if (!Components.Terminal.didRunCommand(/mocha/) {
  return {
    pass: false,
    errors: {
      friendly: 'Did you run the `mocha` command',
      component: 'Terminal'
    }
  };
}
return { pass: true };

Tests whether cat hello.txt resulted in an output of "hello world!", exit code is undefined and ignored.

if (!Components.Terminal.didRunCommand(/cat hello.txt/, undefined, "Hello world!") {
  return {
    pass: false,
    errors: {
      friendly: 'Did you print the file containing "Hello world!"?',
      component: 'Terminal'
    }
  };
}
return { pass: true };

Tests whether gcc program.c result in an exit code of 0.

if (!Components.Terminal.didRunCommand(/gcc program.c/, 0)/ {
  return {
    pass: false,
    errors: {
      friendly: 'Did you successfully compile your program?',
      component: 'Terminal'
    }
  };
}
return { pass: true };

Web Browser

We can test whether our students have loaded a particular URL within our LE WebBrowser components using the following methods:

  • loadedURL
  • loadedOneOf

Examples

The following example tests whether the user has visited http://localhost:4000.

if (!Components.WebBrowser.loadedURL('http://localhost:4001/') {
  return {
    pass: false,
    errors: {
      friendly: 'Did you visit http://localhost:4001/?',
      component: 'PersistentCodeEditor'
    }
  };
}
return { pass: true };

The provided parameter must be an exact string match to a value in the history of the WebBrowser component.

The loadedOneOf method works similarly to loadedURL except that an array of possible strings is provided, and if any of the provided strings are an exact match within the history, the function returns true.



Do you have feedback on this testing documentation? Please let us know and fill out the Feedback Form. Thank you!