Sandpack Widget: Coding Exercises
Make front-end coding challenges with the Sandpack widget.
We'll cover the following
Like creating challenges with the Code and SPA widget, you can create tests with the Sandpack widget.
The Test-ts template
To begin creating the test cases, choose Test-ts from the "Template" drop-down menu. It has three files in the file tree by default. Below is the explanation
add.ts: It is a basic file consisting of the function which will be tested. By default, we have a functionaddthat adds two passed numbers.add.test.ts: In this file, we add the test cases against which the learner's code will be tested.
If we want learners to know about the number of test cases, uncheck the "Hide Tests" button. Try running the code below.
On execution, a list of given test cases and their results will be displayed in the "Tests" window.
The "Verbose" lets you look at the given test name. In this case, we had the "Commutative Law of Addition" test name.
The "Watch" will help you play around with the test cases. The test cases can be changed and tested for the given function simultaneously by enabling the "Watch". For this, the "Watch" needs to be enabled before adding the changes to the test cases file add.test.ts.