Cómo hacer tests en TypeScript en Visual Studio

Como hemos hablado con anterioridad TypeScript es una solución muy efectiva para poder hacer aplicaciones escalables y estructuradas con JavaScript. Para completar todo este ciclo, voy a enseñaros cómo hacer test unitarios dentro de nuestros desarrollos en TypeScript.

Para poder hacer testing dentro de Visual Studio tenemos dos opciones:

• Utilizando ReSharper. Por si alguien no conoce este plugin, es un complemento para ayudar a refactorizar, categorizar y «facilitar» el desarrollo. Tiene un inconveniente: es de pago.
• Instalarle dos plugin totalmente gratuitos. Estos son: Chutzpah Test Adapter for the Test Explorer y  Chutzpah Test Runner Context Extensión

 

 

 

Estas dos extensiones hacen que cuando escribamos un test en JavaScript, lo podamos ejecutar desde el propio Test Explorer que viene en Visual Studio o bien desde el propio fichero donde está definido. Pero para poder ejecutar el test, en primer lugar tenemos que seleccionar el framework de Test a utilizar. Hay multitud de ellos: Jasmine, QUnit, Mocha, etc. En este caso vamos a utilizar Jasmine (aunque el ejemplo es válido para cualquiera de ellos).

Manos a la obra

En primer lugar, abrimos Visual Studio, creamos un Proyecto Web e instalamos los siguientes paquetes Nuget:

A continuación, nos creamos una clase Persona dentro de Typescript con la siguiente estructura:

class Persona {
    nombre: string;
    apellidos: string;
    constructor(nombre: string, apellidos: string) {
        this.nombre = nombre;
        this.apellidos = apellidos;
    }

    FullName():string {
        return this.nombre + " " + this.apellidos;
    }
} 

En base a esta clase, escribimos un test para comprobar que el método FullName nos devuelva los valores adecuados. Para ello, en primer lugar crearemos una carpeta de Test y en la misma creamos un fichero TypeScript con los test que vayamos a escribir. Antes de empezar a realizar los test, tendremos que añadir los tipos de nuestro FrameWork JavaScript. En nuestro caso Jasmine. De esta forma, nuestra clase quedará de la siguiente manera:

/// <reference path="../typings/jasmine/jasmine.d.ts" />
/// <reference path="../persona.ts" />
describe("Person FullName", () => {
   var person: Persona;
    beforeEach(() => {
        person = new Persona("Adrian","Diaz");
        
    });
    it("should concatenate first and last names", () => {
        expect(person.FullName()).toBe("Adrian Diaz");
    });
}); 

A continuación, vamos dentro de las Vistas de la aplicación Views/Jasmine/SpecRunner.cshtml y añadimos la referencia del fichero js que vamos a utilizar. Ejemplo:

  <script type="text/javascript" src="/Scripts/persona.js"></script>

Si todo ha ido de forma correcta, mostramos la ventana de Test y nuestro test estará dentro del Test Explorer.

En algunos entornos es posible que los test se muestren duplicados. Para ello, hay que añadir un fichero chutzpah.json y añadirle una configuración similar a la siguiente:

    "Compile": {
        "Mode": "External",
        "Extensions": [".ts"],
        "ExtensionsWithNoOutput": [".d.ts"]
    },
    "References": [
        { "Path": "scripts/jasmine.js" },
        { "Path": "scripts/typings/" },
        {
            "Path": "app/", "Exclude":  "*/app/test/*"
        }
    ],
    "Tests": [
        { "Path": "app/test", "Include":  "*.ts" }
    ]
}

Conclusión

Typescript tiene todo lo que necesitamos para poder utilizarlo en aplicaciones de gran envergadura. Es una lenguaje muy potente y que combina lo mejor de un lenguaje servidor como es C# con la potencia y flexibilidad de un lenguaje de cliente como es el JavaScript. En cuanto a los test, no deben de ser opcional y hay que dotarlo en nuestras aplicaciones para asegurar el mantenimiento de las mismas.