Create a test suite for the generator

[jgauna]

Test suite quick start (?

Added a new branch called tests-unit for developing a test suite for this brand new generator.

Inside the cloned folder should run:

• npm install -g generator-mocha
• yo mocha

It will create a new test folder and inside of it the structure:

• lib
  • mocha
  • mocha.css
  • mocha.js
  • chai.js
  • expect.js
• spec
  • test.js
• index.html

Now should be able to write some tests using Mocha:

http://visionmedia.github.io/mocha

e.g:

var assert = require("assert")
describe('Module test name', function(){
  describe('#indexOf()', function(){
    it('should return -1 when the value is not present', function(){
      assert.equal(-1, [1,2,3].indexOf(5));
      assert.equal(-1, [1,2,3].indexOf(0));
    })
  })
})

Assertions

npm install sinon-chai

Usage:

http://chaijs.com/plugins/sinon-chai

Let me know what you think.

[facundocabrera]

Cool!

Now, we will need to try something extra:

1. We will use probably Jasmine or QUnit. Do we have something for those???
2. Is it posible to add Karma alias Testacular as well ?

[jgauna]

Regarding Jasmine/qUnit, I think it's sounds like a lot. Chai extended with sinon features should be enough for asserts, isn't it?

On the other hand, Testacular seems great to add some real cross browser testing.

• You want to test code in real browsers.
• You want to test code in multiple browsers (desktop, mobile, tablets, etc.).
• You want to execute your tests locally during development.
• You want to execute your tests on a continuous integration server.
• You want to execute your tests on every save.
• You love your terminal.
• You don't want your (testing) life to suck.
• You want to use Istanbul to automagically generate coverage reports.
• You want to use RequireJS for your source files.

Resume.

• Mocha generator quick start
• Sinon-chai for asserts
• Testacular to test in multiple browser.
• Possible Istanbul (https://github.com/gotwarlost/istanbul) for code coverage although it means a bunch of problems :P

If it's ok with you, I will update the tests-suite's branch home page with the docs.

[facundocabrera]

Because the evaluation we did in #2 we have some facts:

1. Jasmine as BDD.
2. A cool process for translate .story files to code ('jasmine skeleton').
3. Eventually use phantomjs/nodejs/something as environment for the run the test suite.

Maybe the generator's test suite could be a good example for a future generalization of the testing process.

What do you think?

[jgauna]

Final test suite's architecture

After evaluating for a while, we want to create a brand new generator (new repository maybe).

It will handle the creation of tests. We think it's better because we will have everything in just one piece that could be use to test any generator and every project. Just install inside your project and use it!

---

Usage

• First of all, we need to create (inside our project) a structure.json file in this way (see #### Commands for more information):

  {
    "test": {
        "stories": {
  
        },
        "tests": {
  
        },
        "reports": {
  
        },
        "automation": {
  
        },
        "live": {
  
        }
    },
    "your-project-name": {
        "file1": "lala/js/bla",
        "file2": "lala/css/bla",
        "file3": "lala/images/bla",
    }
  }
  
  After we have the basic structure, we will write every single .story file using the BDD principles like we said in https://github.com/dendril/generator-deloitte/issues/2
  
  Note: The automation folder is new (probably a future headache for programmers) but it will add a high metric quality to any project. It will use phantomjs with Jasmine for this. The live folder will contain every BDD story for real time check. eg.g check that a text input is visible after complete a previous one.

• Then we should run the generator:

' yo dt-pcg

- It will look for all .story files and matching them with the new .js files creating the basic Jasmine skeleton.

    We propose this skeleton (Please validate it)

    describe("Scenario <NAME>", function() {
        it("GVIEN ...", function() {

            // Write test here
        });

        it("WHEN ...", function() {

            // Write test here
        });

        it("THEN ...", function() {

            // Write test here
        });

        it("AND ...", function() {

    - It's important to clarify that this will build the tests and check for your generator's file structure every time it runs.

        - Note: If the .js files were modified and you re-run the generator, it will run just the tests. It's intelligent!

Commands

• Run yo dt-pcg:build quick // It will create the structure.json file empty (if you don't want to write on hand) and the test folder with sub directories.
• Run yo dt-pcg:build run // It will create the matched .js files.
• Run yo dt-pcg:build reports // It will run the tests and generate the reports.

Black magic, rabbits and witches

We could provide an API for everybody who wants to write his own method for testing theirs generators. Every time you run yo dt-pcg you will be running that brand new method if needed.

Resume/Extras

• Will use Phantomjs as automation tool http://phantomjs.org/download.html
• Will use Jasmine (it's more compact and less maintainability than Mocha) https://github.com/pivotal/jasmine
• Will use Istambul as code coverage tool and reports https://github.com/gotwarlost/istanbul
• Will use Karma (Testacular) for multiple browser tests https://github.com/karma-runner/karma
• (Maybe) Will use Jasmine-phantomjs https://github.com/jcarver989/phantom-jasmine

[facundocabrera]

Just go ahead and let see what you can get :smile:

[jgauna]

Vamos a tener una carpeta live, donde van a estar los .story del SMOKE TEST y la carpeta automation donde van a estar los .js. Todo esto lo automatizamos con grunt y la idea es generar los .js (tests) con un comando de grunt. Aca va una exlicacion, que les parece?

Scenario: We need to see a text that confirms that the user was valid

Given a When I type a in a Then I will see a in a And I will wait for in

Examples page_url|user_name|text_area|text_information|label_area|time http://www.test-url.com|test-user|#text-area-id|the user is valid|#label-id-test|2000

De aca sacamos que podemos usar

• Genera un test con variables en chaining, sacandolas de examples
• El atributo "name" lo saca del nombre del Scenario.
• I type, sabemos que vamos a tener por lo menos lo menos los metodos .click(WHEN).setValue(WHEN) y el submitForm lo podriamos agregar pero comentado, si el programador lo necesita, lo activa.
• I will see, esta parte es del THEN, si la variable tiene como inicio "text_" podemos usar el .getText(text_information) a lo que le sumamos el .isVisible(label_area).
• I will wait, se podria traducir en .waitFor(page_url, time)
• Siempre terminamos con .end(done);

exports.tests = [{

name: "checks if title contains the search query",
func: function(done) {

var page_url = 'http://www.test-url.com',
    user_name = 'test-user',
    text_area = '#text-area-id',
    text_information = 'the user is valid',
    label_area = '#label-id-test';

    exports.driver
        .click('#js-command-bar-field')
        .setValue('#js-command-bar-field',query)
        .submitForm('.command-bar-form')
        .getTitle(function(title) {
            buster.assertions.assert(title.indexOf(query) !== -1);
        })
        .end(done);

}}

];