Single Page App: Coding Exercises

In the context of learning, coding challenges are a structured way to practice and demonstrate expertise in coding and problem-solving. You can use the 'SPA widget' to assess the web development concepts.

We'll cover the following

Like creating challenges with the Code widget, the SPA widget's exercise option works similarly. Add the SPA widget and mark the "Exercise" checkbox. Note a new "Exercise" toggle button.

Press + to interact

Activate the "Exercise" toggle button and notice the change.

Press + to interact

What do I need to know?

  • Solution: You can provide the solution to the challenge in the "Solution" tab.

  • Hints: You can provide hints to the solution in the "Hints" tab.

  • Evaluation: You can write tests in the “Evaluation” tab. It contains a predefined TestResult object, providing all the information for each test case.
      var TestResult = function() {
  this.succeeded = false;     // specify whether the test case passed or failed.
  this.reason = "";           // contains the reason for why a test case passed/failed.
  this.input = "";            // stores the input provided to the function.
  this.expected_output = "";  // contains the output required for the particular test case to pass. 
  this.actual_output = "";    // output that the user-defined function produces against an input.
}

Sample evaluation

In the example below, we will evaluate if our component contains a ‘Hello World’ string wrapped in a span tag.

Press + to interact
export const executeTests = function() {
  var results = [];
  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"
  let wrapper = shallow(<HelloWorld />);
  // Call your Challenge function here.
  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;
  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered the wrong message in your span element";
  }
  result.actual_output = wrapper.html();
  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }
  results.push(result);
  return results;
}

The executeTests function returns an array, results, which is initialized on line 3. This array contains all the TestResult objects. One TestResult object is initialized on line 5. This object will provide all the values we mentioned before that are necessary for evaluating a test case. Therefore, for each test case, you will need one TestResult object.

On line 9 we access the react component that we have defined in our actual SPA app. We are evaluating if the component contains the ‘Hello World’ string. We are also assessing if the string is wrapped in a span element. Line 17 and line 20 contain such checks. Once it is determined whether the test passed or failed, we update the TestResult object’s values accordingly and add the object to the results array. Lastly, we return the results array on line 37.

Example

See the example below.

import React from 'react';
require('./style.css');

import ReactDOM from 'react-dom';
import App from './app.js';

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);