TypeScript Tutorial: Building a Simple Web-Based Code Testing Tool

Written by

learnmodernjavascript

in

In the world of software development, ensuring the quality of your code is paramount. Bugs can creep in unnoticed, leading to frustrating user experiences and, in some cases, significant financial repercussions. Manual testing is time-consuming and prone to human error. Automation is key, and that’s where a robust testing framework comes in. This tutorial will guide you through building a simple, yet effective, web-based code testing tool using TypeScript. This tool will allow you to write and execute tests directly in your browser, providing instant feedback on your code’s functionality.

Why Build a Code Testing Tool?

Automated testing offers numerous benefits:

  • Early Bug Detection: Catch errors early in the development cycle, reducing the cost of fixing them.
  • Increased Confidence: Ensure that your code behaves as expected, boosting your confidence in its reliability.
  • Faster Development Cycles: Reduce the time spent on manual testing, allowing you to iterate and release features more quickly.
  • Improved Code Quality: Encourage you to write more modular and testable code.

This tutorial provides a practical, hands-on approach to learning how to create such a tool. You’ll gain valuable experience with TypeScript, understand the fundamentals of testing, and learn how to build a user-friendly interface for your testing environment.

Prerequisites

Before we begin, make sure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for managing project dependencies and running the development server. You can download them from nodejs.org.
  • A basic understanding of HTML, CSS, and JavaScript: While this tutorial focuses on TypeScript, familiarity with these web technologies is helpful.
  • A code editor: Choose your favorite code editor, such as Visual Studio Code, Sublime Text, or Atom.

Setting Up the Project

Let’s get started by setting up our project. Open your terminal and create a new directory for your project, then navigate into it:

mkdir code-testing-tool
cd code-testing-tool

Now, initialize a new Node.js project:

npm init -y

This command creates a package.json file with default settings. Next, install TypeScript and a few other necessary packages:

npm install typescript ts-node --save-dev
  • typescript: The TypeScript compiler.
  • ts-node: Allows us to execute TypeScript files directly.

Create a tsconfig.json file in the root of your project. This file configures the TypeScript compiler:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

This configuration specifies:

  • target: The JavaScript version to compile to (ES5 in this case).
  • module: The module system to use (CommonJS).
  • outDir: The output directory for compiled JavaScript files (dist).
  • rootDir: The root directory of your TypeScript source files (src).
  • strict: Enables strict type checking.
  • esModuleInterop: Enables interoperability between CommonJS and ES modules.
  • skipLibCheck: Skips type checking of declaration files.
  • forceConsistentCasingInFileNames: Enforces consistent casing in filenames.

Create the src directory and a file named index.ts inside it. This is where we’ll write our TypeScript code.

mkdir src
touch src/index.ts

Building the Core Testing Logic

Let’s define the core logic for our testing tool. We’ll start by creating a simple function to run tests and display the results.

Open src/index.ts and add the following code:

// src/index.ts

interface TestResult {
    testName: string;
    passed: boolean;
    message?: string;
}

function runTest(testName: string, testFunction: () => boolean, errorMessage?: string): TestResult {
    try {
        const result = testFunction();
        return {
            testName: testName,
            passed: result,
        };
    } catch (error) {
        return {
            testName: testName,
            passed: false,
            message: errorMessage || (error instanceof Error ? error.message : String(error)),
        };
    }
}

function displayTestResults(results: TestResult[]): void {
    results.forEach(result => {
        const status = result.passed ? 'PASSED' : 'FAILED';
        const message = result.message ? ` - ${result.message}` : '';
        console.log(`[${status}] ${result.testName}${message}`);
    });
}

// Example usage:
function main(): void {
    const results: TestResult[] = [];

    results.push(runTest('Addition Test', () => 2 + 2 === 4));
    results.push(runTest('Subtraction Test', () => 5 - 3 === 2));
    results.push(runTest('Multiplication Test', () => 3 * 4 === 12));
    results.push(runTest('Division Test', () => 10 / 2 === 5, 'Division failed!'));

    displayTestResults(results);
}

main();

In this code:

  • We define a TestResult interface to store the results of each test.
  • The runTest function takes a test name, a test function (which returns a boolean indicating success or failure), and an optional error message. It executes the test and returns a TestResult object.
  • The displayTestResults function takes an array of TestResult objects and displays them in the console.
  • We include example tests for addition, subtraction, multiplication, and division.

To run this code, compile it using the TypeScript compiler and then execute the compiled JavaScript file with Node.js:

tsc
node dist/index.js

You should see the test results printed in your console. This is the foundation of our testing tool.

Creating a Simple Web Interface (HTML, CSS, and JavaScript)

Now, let’s create a web interface to interact with our testing tool. We’ll use HTML, CSS, and JavaScript to build a basic UI.

Create a new directory called public in the root of your project to store the HTML, CSS, and JavaScript files. Inside the public directory, create the following files:

  • index.html
  • style.css
  • script.js

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Testing Tool</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Code Testing Tool</h1>
    <div id="test-container">
        <textarea id="code-editor" placeholder="Enter your code here..."></textarea>
        <button id="run-tests-button">Run Tests</button>
        <div id="test-results"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

style.css:

body {
    font-family: sans-serif;
    margin: 20px;
}

h1 {
    text-align: center;
}

#test-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#code-editor {
    width: 80%;
    height: 150px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: monospace;
}

#run-tests-button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#test-results {
    width: 80%;
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.test-result {
    margin-bottom: 5px;
}

.passed {
    color: green;
}

.failed {
    color: red;
}

script.js:

// script.js

const codeEditor = document.getElementById('code-editor');
const runTestsButton = document.getElementById('run-tests-button');
const testResultsDiv = document.getElementById('test-results');

runTestsButton.addEventListener('click', () => {
    const code = codeEditor.value;
    // In a real application, you would parse the code, execute tests, and display the results.
    // For this example, we'll just show a placeholder.
    testResultsDiv.innerHTML = '<p>Running tests...</p>';

    // Simulate running tests (replace with actual test execution).
    setTimeout(() => {
        testResultsDiv.innerHTML = '<p class="passed">All tests passed!</p>';
    }, 1000);
});

This HTML provides the basic structure for the user interface, including a text area for entering code, a button to run tests, and a div to display the results. The CSS styles the elements, and the JavaScript adds an event listener to the button. The current JavaScript code is a placeholder; we’ll replace it with the actual test execution logic in the next steps.

Integrating TypeScript and the Web Interface

Now, let’s connect our TypeScript testing logic with the web interface. We’ll modify the script.js file to execute the tests based on the code entered in the text area.

First, we need a way to execute the code entered by the user. One way to do this is to use the eval() function. However, using eval() directly can be risky, especially if the code is from an untrusted source. For simplicity, we’ll use it in this tutorial, but in a production environment, you should consider safer alternatives like a sandboxed environment or a code execution service.

Modify script.js to include the following code:

// script.js

const codeEditor = document.getElementById('code-editor');
const runTestsButton = document.getElementById('run-tests-button');
const testResultsDiv = document.getElementById('test-results');

function runTest(testName, testFunction, errorMessage) {
    try {
        const result = testFunction();
        return {
            testName: testName,
            passed: result,
        };
    } catch (error) {
        return {
            testName: testName,
            passed: false,
            message: errorMessage || (error instanceof Error ? error.message : String(error)),
        };
    }
}

function displayTestResults(results) {
    testResultsDiv.innerHTML = ''; // Clear previous results
    results.forEach(result => {
        const status = result.passed ? 'PASSED' : 'FAILED';
        const message = result.message ? ` - ${result.message}` : '';
        const resultElement = document.createElement('div');
        resultElement.classList.add('test-result', result.passed ? 'passed' : 'failed');
        resultElement.textContent = `[${status}] ${result.testName}${message}`;
        testResultsDiv.appendChild(resultElement);
    });
}

runTestsButton.addEventListener('click', () => {
    const code = codeEditor.value;
    testResultsDiv.innerHTML = '<p>Running tests...</p>';

    try {
        // Execute the code entered by the user.
        eval(code);

        // Define your tests here (replace the example tests).
        const results = [];
        results.push(runTest('Example Test', () => 2 + 2 === 4));
        displayTestResults(results);

    } catch (error) {
        // Handle errors during code execution.
        testResultsDiv.innerHTML = `<p class="failed">Error: ${error.message}</p>`;
    }
});

In this updated code:

  • We’ve included the runTest and displayTestResults functions from our TypeScript code.
  • Inside the button click event listener, we use eval(code) to execute the code entered by the user.
  • We’ve added a basic example test.
  • We’ve added error handling to catch any errors that occur during code execution.

To make this work with TypeScript, we need to compile our TypeScript code and make it available to the web page. We can do this by:

  1. Compiling the TypeScript code to JavaScript using the command tsc. This will create a dist folder containing the compiled JavaScript.
  2. Referencing the compiled JavaScript file in our script.js. We need to copy the relevant functions from the compiled TypeScript code into the script.js file.

Open dist/index.js and copy the runTest and displayTestResults functions. Paste these functions into the script.js file, above the event listener.

Now, modify the script.js file to look like this (including the copied functions):

// script.js

function runTest(testName, testFunction, errorMessage) {
    try {
        const result = testFunction();
        return {
            testName: testName,
            passed: result,
        };
    } catch (error) {
        return {
            testName: testName,
            passed: false,
            message: errorMessage || (error instanceof Error ? error.message : String(error)),
        };
    }
}

function displayTestResults(results) {
    testResultsDiv.innerHTML = ''; // Clear previous results
    results.forEach(result => {
        const status = result.passed ? 'PASSED' : 'FAILED';
        const message = result.message ? ` - ${result.message}` : '';
        const resultElement = document.createElement('div');
        resultElement.classList.add('test-result', result.passed ? 'passed' : 'failed');
        resultElement.textContent = `[${status}] ${result.testName}${message}`;
        testResultsDiv.appendChild(resultElement);
    });
}

const codeEditor = document.getElementById('code-editor');
const runTestsButton = document.getElementById('run-tests-button');
const testResultsDiv = document.getElementById('test-results');

runTestsButton.addEventListener('click', () => {
    const code = codeEditor.value;
    testResultsDiv.innerHTML = '<p>Running tests...</p>';

    try {
        // Execute the code entered by the user.
        eval(code);

        // Define your tests here (replace the example tests).
        const results = [];
        results.push(runTest('Example Test', () => 2 + 2 === 4));
        displayTestResults(results);

    } catch (error) {
        // Handle errors during code execution.
        testResultsDiv.innerHTML = `<p class="failed">Error: ${error.message}</p>`;
    }
});

Now, when the user enters code in the text area and clicks the “Run Tests” button, the entered code will be executed, and the example test will be run. The results will be displayed in the test-results div.

Running the Application

To run the application, we’ll use a simple web server. There are many ways to do this, but one of the easiest is to use the serve package, which you can install globally:

npm install -g serve

Navigate to the root directory of your project in the terminal and run:

serve -p 3000 public

This command starts a web server and serves the contents of the public directory on port 3000. Open your web browser and go to http://localhost:3000. You should see your code testing tool.

Now, you can enter JavaScript code in the text area, including your own tests. Click the “Run Tests” button to see the results.

Adding More Advanced Testing Features

Our current tool is functional, but it’s very basic. Let’s add some features to make it more powerful and user-friendly.

1. Input Validation

Before running the tests, we should validate the user’s input to prevent errors. For example, ensure the entered code is valid JavaScript. You can use a library like JSHint or ESLint for this purpose. Here’s a simplified example using a try-catch block:

runTestsButton.addEventListener('click', () => {
    const code = codeEditor.value;
    testResultsDiv.innerHTML = '<p>Running tests...</p>';

    try {
        // Validate the code (basic example).
        try {
            eval(code); // Attempt to compile the code.
        } catch (syntaxError) {
            testResultsDiv.innerHTML = `<p class="failed">Syntax Error: ${syntaxError.message}</p>`;
            return; // Stop further execution if there's a syntax error.
        }

        // Execute the code entered by the user.
        eval(code);

        // Define your tests here (replace the example tests).
        const results = [];
        results.push(runTest('Example Test', () => 2 + 2 === 4));
        displayTestResults(results);

    } catch (error) {
        // Handle errors during code execution.
        testResultsDiv.innerHTML = `<p class="failed">Error: ${error.message}</p>`;
    }
});

2. Test Framework Integration

Instead of manually writing tests, integrate a testing framework like Jest or Mocha. These frameworks provide features like:

  • Test Suites: Organize tests into logical groups.
  • Assertions: Provide a rich set of assertions (e.g., expect(value).toBe(expected)).
  • Reporting: Generate detailed test reports.

Here’s a basic example of how you might integrate Jest:

  1. Install Jest: npm install --save-dev jest
  2. Modify your script.js to use Jest’s assertions. This would require modifying the user input code to include test definitions that Jest can understand.

3. Code Highlighting

Improve the user experience by adding code highlighting to the text area. Libraries like Prism.js or highlight.js can automatically highlight code syntax.

  1. Include the library’s CSS and JavaScript files in your index.html.
  2. Wrap the code editor in a <pre><code> block.
  3. Call the highlighting function after the user enters code.

4. Test Case Management

Allow users to save and load test cases. This would involve:

  • Adding input fields for test names and descriptions.
  • Adding a button to save the current test case (code and tests).
  • Adding a dropdown to load saved test cases.

Common Mistakes and How to Fix Them

  • Incorrect TypeScript Compilation: If you’re not seeing the expected changes, double-check your tsconfig.json file and ensure you’re running tsc to compile your TypeScript code.
  • Incorrect File Paths: Make sure your HTML, CSS, and JavaScript files are linked correctly in your index.html file.
  • JavaScript Errors: Use your browser’s developer console (usually accessed by pressing F12) to identify and debug any JavaScript errors.
  • Security Concerns with eval(): Be extremely cautious when using eval(), especially with user-provided code. Consider using a sandboxed environment or code execution service in production.

Key Takeaways

  • You’ve learned how to build a basic web-based code testing tool using TypeScript, HTML, CSS, and JavaScript.
  • You understand the fundamentals of automated testing and its benefits.
  • You have gained experience with TypeScript compilation, web interface design, and JavaScript integration.
  • You’ve explored ways to enhance the tool with features like input validation, test framework integration, code highlighting, and test case management.

FAQ

  1. Can I use this tool for production code?

    While this tutorial provides a foundation, it’s not suitable for production use in its current form. It lacks security features and advanced testing capabilities. You would need to implement robust security measures and integrate a more comprehensive testing framework.

  2. How can I improve the user interface?

    You can improve the UI by using a CSS framework (e.g., Bootstrap, Tailwind CSS), adding more interactive elements, and providing better feedback to the user.

  3. How do I handle asynchronous tests?

    To handle asynchronous tests, you’ll need to use asynchronous functions (async/await) within your test functions and handle promises correctly.

  4. What are some alternative testing frameworks?

    Besides Jest and Mocha, other popular testing frameworks include Jasmine and Karma.

  5. How can I deploy this tool online?

    You can deploy this tool to a hosting platform like Netlify, Vercel, or GitHub Pages. You’ll need to build your project (tsc) and then deploy the contents of the public directory.

Building a web-based code testing tool is a rewarding project that combines your TypeScript skills with web development principles. By starting with a simple tool and gradually adding features, you can create a powerful and useful testing environment. Remember that the journey of a thousand miles begins with a single step. Keep experimenting, keep learning, and keep building. Your skills in TypeScript, web development, and testing will grow exponentially as you refine your projects and explore more advanced concepts. The ability to automate testing is a cornerstone of professional software development, and this tool provides a practical entry point into that crucial domain.

More posts