javascript - kent - mocha js vs jasmine

Cargue una página web en una espec sin cabeza de Jasmine ejecutando PhantomJS

Question

¿Cómo leo en una página de localhost en una especificación de Jasmine sin cabeza para que los casos de prueba puedan funcionar en los elementos de DOM?

La tarea de My Gulp está ejecutando satisfactoriamente las especificaciones de Jasmine para pruebas unitarias, y ahora necesito crear pruebas de integración para verificar páginas web completas servidas desde localhost . Estoy usando el plugin gulp-jasmine-browser para ejecutar PhantomJS.

Ejemplo:

gulpfile.js

var gulp =           require(''gulp'');
var jasmineBrowser = require(''gulp-jasmine-browser'');

function specRunner() {
   gulp.src([''node_modules/jquery/dist/jquery.js'', ''src/js/*.js'', ''spec/*.js''])
      .pipe(jasmineBrowser.specRunner({ console: true }))
      .pipe(jasmineBrowser.headless());
   }

gulp.task(''spec'', specRunner);

spec / cart-spec.js

describe(''Cart component'', function() {

   it(''displays on the gateway page'', function() {
      var page = loadWebPage(''http://localhost/'');  //DOES NOT WORK
      var cart = page.find(''#cart'');
      expect(cart.length).toBe(1);
      });

   });

No hay función loadWebPage() . Es solo para ilustrar la funcionalidad que creo que es necesaria.

Answer 1

Puse el siguiente código que parece funcionar. Por favor, siéntase libre de revisar mi informe y confirmarlo en su propio entorno.

paquete.json

{
  "name": "40646680",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "gulp jasmine"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-jasmine-browser": "^1.7.1",
    "jasmine": "^2.5.2",
    "phantomjs": "^2.1.7"
  }
}

gulpfile.js

(() => {
    "use strict";

    var gulp = require("gulp"),
        jasmineBrowser = require("gulp-jasmine-browser");

    gulp.task("jasmine", () => {
        return gulp.src("test/*.js")
            .pipe(jasmineBrowser.specRunner({
                console: true
            }))
            .pipe(jasmineBrowser.headless());
    });
})();

prueba / muestraJasmine.js

describe("A suite", function() {
    it("contains spec with an expectation", function() {
        expect(true).toBe(true);
    });
    it("contains failing spec with an expectation", function() {
        expect(true).toBe(false);
    });
});

Ejecución

Bob Chatman@CHATBAG42 F:/Development//40646680
> npm test

> [email protected] test F:/Development//40646680
> gulp jasmine

[21:56:44] Using gulpfile F:/Development//40646680/gulpfile.js
[21:56:44] Starting ''jasmine''...
[21:56:44] Jasmine server listening on port 8000
.F
Failures:
1) A suite contains failing spec with an expectation
1.1) Expected true to be false.

2 specs, 1 failure
Finished in 0 seconds
[21:56:49] ''jasmine'' errored after 4.26 s
[21:56:49] Error in plugin ''gulp-jasmine-browser''
Message:
    1 failure
npm ERR! Test failed.  See above for more details.

Dependencias

node 7.2
npm 3.9.3
jasmine 2.5.2
phantomjs 2.1.7 
gulp 3.9.1

Answer 2

Los marcos de prueba de extremo a extremo, como Selenium , WebdriverIO , Nightwatch.js , Transportador , etc., son más adecuados en este caso.

El plugin gulp-jasmine-browser todavía se trata de la prueba unitaria en el entorno del navegador. No es posible navegar entre páginas.

Answer 3

jsdom al rescate!

Resulta que es bastante fácil cargar una página web en una especificación de Jasmine sin cabeza ... pero tienes que cambiar PhantomJS por jsdom .

Estrategia:

1. Use Jasmin''s beforeAll() para llamar a una función que ejecutará JSDOM.fromURL() para solicitar la página web.
2. Una vez que la página web se haya cargado en el DOM, exponga la window y jQuery para usar en sus casos de prueba.
3. Finalmente, llame a done() para indicar que las pruebas están ahora listas para ejecutarse.

Asegúrese de cerrar la window después de que se hayan ejecutado las pruebas.

spec.js

const url  = ''http://dnajs.org/'';
const { JSDOM } = require(''jsdom'');
let window, $;
function loadWebPage(done) {
   function handleWebPage(dom) {
      function waitForScripts() {
         window = dom.window;
         $ = dom.window.jQuery;
         done();
         }
      dom.window.onload = waitForScripts;
      }
   const options = { resources: ''usable'', runScripts: ''dangerously'' };
   JSDOM.fromURL(url, options).then(handleWebPage);
   }
function closeWebPage() { window.close(); }

describe(''The web page'', () => {

   beforeAll(loadWebPage);
   afterAll(closeWebPage);

   it(''has the correct URL'', () => {
      expect(window.location.href).toBe(url);
      });

   it(''has exactly one header, main, and footer'', () => {
      const actual =   {
          header: $(''body >header'').length,
          main:   $(''body >main'').length,
          footer: $(''body >footer'').length
          };
      const expected = { header: 1, main: 1, footer: 1 };
      expect(actual).toEqual(expected);
      });

   });

Salida de prueba

Nota: La captura de pantalla anterior es de una especificación Mocha similar, ya que Mocha tiene un buen reportero predeterminado.

Proyecto

Está en GitHub si quieres probarlo tú mismo:
https://github.com/dnajs/load-web-page-jsdom-jasmine

EDITADO: Actualizado para jsdom 11