🥇 Yeoman + AMD (RequireJS) + Mocha / Chai

Supondo que você goste da configuração que descrevi aqui (e por que não gostaria), isso descreverá como adicionar Mocha e Chai para teste de uma forma que funcione com módulos RequireJS que residem em seu app/diretório.

Crie um `config.js`arquivo para ser usado por ambos `app/`e`test/`

Divida o app/scripts/main.jsarquivo em dois arquivos app/scripts/main.jse app/scripts/config.js. O config.jsarquivo tem maincomo dependência, portanto main, appe os bootstraparquivos são carregados como antes.
Configure index.htmlpara apontar config.jse remover os usemincomentários, como este . Observação: o bloco de script comentado apontando para scripts/app.min.jsserá útil mais tarde, portanto, certifique-se de incluí-lo.

Atualize `test/`para usar o CSS gerado e as bibliotecas de teste instaladas com o Bower

Instale Mocha e Chai como dependências de desenvolvimento:
bower install mocha –save-dev
bower install chai –save-dev
Remova o test/libdiretório.
Substitua todo o conteúdo de test/index.htmlpelo conteúdo de app/index.html.
No headdo novo test/index.html, adicione referências às bibliotecas Mocha e Chai instaladas com o Bower:
<link rel = “stylesheet” href = “../ app / bower components / mocha / mocha.css”>
<script src = “../ app / bower components / mocha / mocha.js”> </script>
< script src = “../ app / bower_components / chai / chai.js”> </script>
Atualize a referência à folha de estilo principal, para apontar para o arquivo CSS gerado. O será atualizado para servir e , portanto, o caminho relativo será .Gruntfile.js.tmp.../styles/main.css

Atualize para usar o compartilhado .`test/config.js`

Na parte inferior (logo antes da tag de fechamento ), remova o comentário condicional do Frame do Chrome, a tag de script do Google Analytics e a referência do bloco de script comentado (não será necessário para testes).test/index.htmlbodyscripts/app.min.js
Atualize a referência a RequireJS para apontar e definir seu atributo como .../app/bower_components/requirejs/require.jsdata-mainspec/config
Criar , algo como esta :spec/config.js
‘use estrito’;
require.config ({
baseUrl: ‘../../app/scripts/’, // dependências sem caminho devem vir do diretório app / scripts
deps: [‘runner’], // load spec / runner.js por
caminhos padrão : {
spec: ‘../../test/spec’, // testes de caminho para este
executor de diretório : ‘../../test/spec/runner’, // o executor de teste principal, carregar todos os testes como dependências
appConfig: ‘../../app/scripts/config’ // o arquivo de configuração do aplicativo
},
shim: {
runner: [‘appConfig’] // fazer com que o executor dependa do arquivo de configuração do aplicativo
}
}) ;
Criar algo como este :spec/runner.js
/ * global define * /
define ([
// Todos os seus testes vão aqui.
‘spec / app.test’ // talvez faça sentido adicionar testes como dependências em spec / config?
], function () {
‘use strict’ ;
```
window.console = window.console || function() {}; // protect from barfs
window.notrack = true; // don't track
window.mocha.run(); // kickoff the runner
```
});

Criar algo como este :spec/app.test.js

/ * definir global, descrever, deve * /
define ([‘aplicativo’], função (aplicativo) {
‘usar estrito’;

// whatever tests are in here will run as soon as this module is loaded
describe('app', function () {
    it('should exist', function() {
        should.exist(app);
    });
});

});

Atualize para veicular e testar tudo`Gruntfile.js`

Faça essas alterações em . Os mais importantes são:Gruntfile.js

Adicione à tarefa. Isso adiciona a raiz do projeto aos arquivos servidos em . Os testes estarão disponíveis quando o servidor estiver em execução .mountFolder(connect, '.'),connect:livereloadlocalhost:9000localhost:9000/test
Substitua por na tarefa. Isso é necessário para ter acesso de caminho relativo às dependências de nível.mountFolder(connect, 'test')mountFolder(connect, '.')connect:testtest/index.htmlapp
Atualize as opções de tarefa para e . Opcionalmente, defina a opção repórter: . Executar agora é acionado quando ele (e suas dependências) são carregados. Os testes agora estão localizados em porque estamos servindo a raiz do projeto.mocha:allrun: falseurls: ['http://localhost:<%= connect.options.port %>/test/index.html']reporter: 'Spec'test/spec/runner.jstest/index.html
Atualize a tarefa adicionando ao hash de opções:requirejs:dist
incluem: ‘../bower_components/requirejs/require’,
mainConfigFile: yeomanConfig.app + ‘/scripts/config.js’,
out: yeomanConfig.dist + ‘/scripts/app.min.js’

Quase pronto!

Se tudo correr bem, você deve passar nos testes de ambos (durante a execução ) e por meio da linha de comando em execução . Supondo que isso seja verdade, comprometa tudo o que não está comprometido e envie para o GitHub. Quando o gancho Travis dispara, você também deve ter uma construção bem-sucedida em seu ramo!http://localhost:9000/testgrunt servergrunt testgh-pages

Mas espere! O que é isso!?

Os arquivos construídos ainda não funcionam bem. Como não estamos usando useminpara reescrever nossas tags de script, há uma referência de tag de script … mas esse arquivo não existe no diretório.dist/index.htmlbower_components/requirejs/require.jsdist

No entanto, aquela referência de tag de script pouco comentada é atualizada para apontar para o JavaScript gerado (RequireJS incluído e d). Então, como vamos usá-lo?scripts/app.min.jsrevdist

Adicione e atualize para usá-lo no gancho.`cleanup.js.travis.ymlafter_success`

Aqui está tudo (não estou muito familiarizado com o Node, portanto, se houver uma maneira melhor de fazer isso, diga). Além disso, observe: Este script é realmente específico para como eu tenho as coisas configuradas. Não aceito nenhuma responsabilidade se isso destruir seu projeto e arruinar sua vida. USE POR SUA CONTA E RISCO! :app/scripts/util/cleanup.js

'use strict';

var fs = require('fs');
var filename = process.argv[2];

// Make sure we got a filename on the command line.
if (process.argv.length < 3) {
    console.log('Usage: node ' + process.argv[1] + ' FILENAME');
    process.exit(1);
}

// Read the file.
fs.readFile(filename, 'utf8', function(error, data) {
    var file = data;

    // Find the old RequireJS script tag, and remove it.
    var tag = '        <script data-main="scripts/config" src="bower_components/requirejs/require.js"></script>';
    var tagIndex = file.indexOf(tag);
    file = file.substring(0, tagIndex) + file.substring(tagIndex + tag.length + 1);

    // Assume the last comment in the HTML file is the one you want to remove.
    // TODO: Make it a comment like build:uncomment or build:remove like `usemin` does.
    var beginComment = file.lastIndexOf('<!-- ');
    file = file.substring(0, beginComment) + file.substring(beginComment + 5);

    var endComment = file.lastIndexOf(' -->');
    file = file.substring(0, endComment) + file.substring(endComment + 4);

    // Write the edited file back into place.
    fs.writeFile(filename, file, 'utf8', function(error) {
        if (error) { throw error; }
    });
});

Crie este arquivo e, em seguida, adicione a seguinte linha depois da linha 45 ( como aqui ):.travis.yml

- node ../app/scripts/util/cleanup.js ../dist/index.html

Dessa forma, quando o Travis construir com sucesso seu projeto, ele removerá a tag de script apontando para a biblioteca RequireJS carregada do Bower e a tag de script não comentada apontando para o otimizado e JavaScript.r.jsrev

Esta foi uma dica profissional muito longa, mas espero que seja útil para você. Se alguém souber como melhorar , sou todo ouvidos. Além disso, se há uma maneira de ter Grunt run on durante o que seria bom (melhor) também.cleanup.jscleanup.jsdist/index.htmlgrunt:build

Além disso, eu realmente não sei o que está acontecendo com essa formatação … para uma comunidade específica de código não obter a formatação correta de código é uma grande chatice. Se você tiver alguma dúvida, pode verificar o todo, intocado após este projeto de demonstração aqui:

https://github.com/mysterycommand/my-new-everything
http://mysterycommand.github.io/my-new-everything/

Crie um config.jsarquivo para ser usado por ambos app/etest/

Atualize test/para usar o CSS gerado e as bibliotecas de teste instaladas com o Bower

Atualize para usar o compartilhado .test/config.js

Atualize para veicular e testar tudoGruntfile.js