Arquitectura, buenas prácticas y desarrollo sobre la nueva herramienta de Microsoft SharePoint 2016

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ónChutzpah

 

 

 

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:

Jasmine

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.

TestExplorerEn 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.

mm

Sobre Adrián Díaz

Adrián Díaz es Ingeniero Informático por la Universidad Politécnica de Valencia. Es MVP de Microsoft en la categoría Office Development desde 2014, MCPD de SharePoint 2010, Microsoft Active Profesional y Microsoft Comunity Contribuitor 2012. Cofundador del grupo de usuarios de SharePoint de Levante LevaPoint. Lleva desarrollando con tecnologías Microsoft más de 10 años y desde hace 3 años está centrado en el desarrollo sobre SharePoint. Actualmente es Software & Cloud Architect Lead en ENCAMINA.
Esta entrada ha sido publicada en buenas practicas, desarrollo, javascript, typescript y etiquetada como , . Enlace permanente .

Suscríbete a Desarrollando sobre SharePoint

Recibe todas las actualizaciones semanalmente de nuestro blog

You have Successfully Subscribed!

ENCAMINA, piensa en colores