Как протестировать Mocha & Chai + TypeScript + SystemJS + JSPM + Angular + Three.js

Я работаю над сетевой 3D-игрой. Мой проект полностью настроен на TypeScript.

У меня вся маршрутизация настроена с помощью Angular, и наряду с этим я использую Three.js в качестве своего 3D-движка.

Наконец, у меня есть комбинация Mocha + Chai для тестирования моего TypeScript с помощью специального плагина под названием требуется машинопись.

Я использую Systemjs в качестве средства импорта для своих пакетов JSPM.

Итак, для подготовки:
(файлы урезаны для примера)

Файл Systemjs/JSPM: jspmconfig.js

System.config({

  ...

  paths: {

    ...

    "github:*": "jspm_packages/github/*"

    ...

  },

  map: {

    ...

    "three.js": "github:mrdoob/three.js@master"

    ...

  }
});

Файл узла: package.json

...

"scripts": {
  "test": "mocha --compilers ts:typescript-require ./source/**/*.spec.ts"
},

...

Файл контроллера: QuestDetailCtrl.ts:

/// <reference path="../../../../../typings/tsd.d.ts" />

// Controller | Dashboard
export default class QuestDetailCtrl {

    ... 

    // Constructor
    constructor() { ... }

    renderer: THREE.WebGLRenderer = new THREE.WebGLRenderer(); // <-- This line uses a THREE instance.
}

ПРИМЕЧАНИЕ Где-то ранее в моем приложении я уже импортировал Three.js, поэтому он доступен в моем контроллере (это также правильно компилируется в ES5 и работает в браузер).

Тестовый файл Мокко QuestDetailCtrl.spec.ts

/// <reference path="../../../../../typings/tsd.d.ts" />

// Imports
import { assert, expect } from 'chai';
import QuestDetailCtrl from './QuestDetailCtrl';

// Describe
describe('QuestDetailCtrl', function() {

    // Shoulds
    it('should exist', () => {
        expect(QuestDetailCtrl).to.exist; // <-- WORKS
    });

    it('should initialize', () => {
        let instance = new QuestDetailCtrl(); // <-- DOES NOT WORK
    });

});

В последнем файле QuestDetailCtrl.spec.ts я инициализирую новый экземпляр моего контроллера (класс TypeScript).

Поскольку Mocha не знает о Three.js, этот тест не проходит при инициализации экземпляра моего контроллера.

Итак, мой вопрос становится:

Как мне имитировать/импортировать Three.js (или любую другую стороннюю библиотеку) в мои тесты, чтобы Mocha знал об этом и мог протестировать/инициализировать его?

Я предполагаю, что подобные ситуации применимы к Angular, когда я начинаю тестировать это, поэтому решение будет очень признательно!

Я уже сталкивался с решениями, в которых можно было бы import System from 'systemjs' и установить meta данных в библиотеку three.js, чтобы установить global переменных для системы, но я не мог заставить это работать.

Спасибо!


typescript mocha.js chai systemjs jspm
person Nicky    schedule 22.09.2015    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Пока я могу думать о двух возможностях. Я напишу это на JS (es6), потому что я не совсем знаком с машинописным текстом и Jasmine, но вы можете очень легко преобразовать это в мокко.

установить глобальную переменную в вашем тесте

//QuestDetailCtrl.spec.ts
import THREE from 'three';
window.THREE = THREE;
// or just mock it window.THREE = {}. Its usually not a good thing to 
// import whole external library in your tests. If you will mock them, 
// don't forget to reset your mock before each test if you need a fresh mock

импортируйте три как зависимость в свой скрипт и смоделируйте его в своем тесте

//QuestDetailCtrl.ts
import THREE from 'three';
export default class QuestDetailCtrl {
  constructor() { ... }

  renderer: THREE.WebGLRenderer = new THREE.WebGLRenderer(); // <-- This line uses a THREE instance.
}

//===================================================================
//QuestDetailCtrl.spec.ts
// be aware, Im using jasmine 2 here. Im passing done value in to function because mocking dependencies are async. Im not sure how this can be done in mocha

beforeAll(done => {
  System.delete('three');

  System.set('absolute/and/normalized/three/path', System.newModule({
    WebGLRenderer: ()=>{},
  }));
  System.import('absolute/and/normalized/path/QuestDetailCtrl').then(module=>{
    ComponentBuilder = module;
    done();
  });
});

Надеюсь, это поможет.

person Eduard Jacko    schedule 03.11.2015
comment
К вашему сведению, before Mocha эквивалентен beforeAll. - person tony19; 04.08.2016

arrow_upward
2
arrow_downward

Вы не должны создавать экземпляры зависимостей от поставщиков в своем наборе тестов, а также вы не должны создавать экземпляры зависимостей тестируемых классов, просто имитируйте их, используя, например, синонджс.

Вот мой пример. В нем нет сложного набора тестов, только тривиальный (я попробую скоро добавим еще несколько сложных), но у него есть Mocha & Chai & sinon + TypeScript + SystemJS + JSPM + Angular + ... :)

person b091    schedule 10.10.2015