Debug Alsatian test cases with vscode using ts-node

Question

I'm having some trouble trying to debug Alsatian test cases with ts-node suggestions would be appreciated - as writing test cases has slowed to a crawl

I'm using Alsatian to write selenium test cases in typescript I've followed instructions provided here: debug asaltian with vs code

but it crashes on ts-node saying that module chai not defined

if anyone could help out in getting both of these working and debugging line by line in vscode would be great

package.json:

{
  "dependencies": {
    "@types/dotenv": "^4.0.2",
    "@types/selenium-webdriver": "^3.0.8",
    "alsatian": "^2.0.0",
    "dotenv": "^4.0.0",
    "selenium-webdriver": "^4.0.0-alpha.1",
    "ts-node": "^4.1.0",
    "tslib": "^1.8.1",
    "typescript": "^2.6.2"
  }
}

runner.ts:

import tapSpec = require('tap-spec');
import { TestSet, TestRunner } from "alsatian";
import { config as dotenv } from 'dotenv';

(async () =>
{
    // Load up any pseudo environment variables
    dotenv({ path: __dirname + '/../.env' });

    // Setup the alsatian test runner
    let testRunner = new TestRunner();
    let tapStream = testRunner.outputStream;
    let testSet = TestSet.create();
    testSet.addTestsFromFiles('/**/*/*.spec.ts');

    // This will output a human readable report to the console.
    tapStream.pipe(tapSpec()).pipe(process.stdout);

    // Runs the tests
    await testRunner.run(testSet);
})()
.catch(e =>
{
    console.error(e);
    process.exit(1);
});

This is the old launch.json, that I was attempting to connect to the runner earlier, this configuration launches but doesn't connect.

the other provided on the alasatian github fails because it complains that module chai cannot be resolved in ts-node

{
            "name": "ANEX.Website.ManagementPortal.Tests",
            "type": "node",
            "request": "launch",
            "runtimeExecutable": "yarn",
            "runtimeArgs": [
                "run",
                "ts-node",
                "Tests/runner.ts"
            ],
            "cwd": "${workspaceFolder}/ANEX.Website.ManagementPortal.Tests",
            "timeout": 20000,
            "protocol": "inspector",

        }

Answer 1

tldr: I created a working example in this repo: https://github.com/andrefarzat/vscode-alsatian-debug

Alsatian works by loading the javascript (or typescript from ts-code) dynamically, which means vscode can't track the execution, for there are no map files related to them.

I could make it work adding the ts transpilation step before the execution.

Here is my launch.json:

{
    "type": "node",
    "request": "launch",
    "name": "Alsatian",
    "preLaunchTask": "tsc: build - tsconfig.json",
    "program": "${workspaceFolder}/node_modules/.bin/alsatian",
    "args": ["./dist/tests/**/*.js"]
}

Pay attention to preLaunchTask which executes the tsc to transpile the typescript code into javascript and put it into dist folder. I put the main code into src folder and the test code into tests folder.

Here is my tsconfig.json:

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "lib": ["es6"]
    },
    "include": [
        "./src/*.ts",
        "./src/**/*.ts",
        "./tests/*.ts",
        "./tests/**/*.ts"
    ],
    "exclude": [
        "./tests/runner.ts"
    ]
}

Like this, the ts-node ./tests/runner.ts still works and you will have the Alsatian debug command in vscode. Don't forget to install alsatian and ts-node locally.

I created this repo so you can test in your machine: https://github.com/andrefarzat/vscode-alsatian-debug