Diferència entre revisions de la pàgina «Practicar sintaxi amb tests unitaris (framework Mocha)»

De wikijoan
Salta a la navegació Salta a la cerca
 
(Hi ha 6 revisions intermèdies del mateix usuari que no es mostren)
Línia 22: Línia 22:
 
<pre>
 
<pre>
 
$ mkdir test
 
$ mkdir test
−
$ nano test.js # or open with your favorite editor
+
$ nano test/test.js # or open with your favorite editor
 
</pre>
 
</pre>
 
En comptes de ''nano'' pots fer servir el teu editor per defecte, o fins i tot un editor gràfic (el professor fa servir l'editor ''joe'').
 
En comptes de ''nano'' pots fer servir el teu editor per defecte, o fins i tot un editor gràfic (el professor fa servir l'editor ''joe'').
Línia 60: Línia 60:
 
$ npm test
 
$ npm test
 
</pre>
 
</pre>
 +
 
=Diferents possibilitats=
 
=Diferents possibilitats=
 
===SYNCHRONOUS CODE===
 
===SYNCHRONOUS CODE===
 
A part de ''assert'', podem utilitzar altres llibreries, com per exemple ''should'':
 
A part de ''assert'', podem utilitzar altres llibreries, com per exemple ''should'':
−
 
+
<pre>
−
npm install should --save-dev
+
$ npm install should --save-dev
−
 
+
</pre>
−
 
+
Codi:
 +
<pre>
 
describe('Array', function() {
 
describe('Array', function() {
 
   describe('#indexOf()', function() {
 
   describe('#indexOf()', function() {
Línia 75: Línia 77:
 
   });
 
   });
 
});
 
});
−
 
+
</pre>
 
i en aquest cas podem testejar dues sentències de forma síncrona.
 
i en aquest cas podem testejar dues sentències de forma síncrona.
  
Línia 116: Línia 118:
 
   3 passing (3ms)
 
   3 passing (3ms)
 
</pre>
 
</pre>
 +
=Provar els tests unitaris en el navegador=
 +
*https://mochajs.org/#running-mocha-in-the-browser
 +
[[Fitxer:Mocha test.png | thumbnail | Mocha test en el navegador]]
 +
 +
'''mocha_test.html''':
 +
<pre>
 +
<!DOCTYPE html>
 +
<html lang="en">
 +
  <head>
 +
    <meta charset="utf-8" />
 +
    <title>Mocha Tests</title>
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 +
    <link rel="stylesheet" href="https://unpkg.com/mocha/mocha.css" />
 +
  </head>
 +
  <body>
 +
    <div id="mocha"></div>
 +
 +
    <script src="https://unpkg.com/chai/chai.js"></script>
 +
    <script src="https://unpkg.com/mocha/mocha.js"></script>
 +
 +
    <script class="mocha-init">
 +
      mocha.setup('bdd');
 +
      mocha.checkLeaks();
 +
    </script>
 +
 +
    <script src="./test_html.js"></script>
 +
    <script class="mocha-exec">
 +
      mocha.run();
 +
    </script>
 +
  </body>
 +
</html>
 +
</pre>
 +
 +
El nostre ''test_html.js'' queda de la següent forma: (necessitem la llibreria '''chai''')
 +
<pre>
 +
//https://www.chaijs.com/
 +
let assert = chai.assert;
 +
let should = chai.should();
 +
let expect = chai.expect;
  
 +
describe('Array', function() {
 +
  describe('#indexOf()', function() {
 +
    it('should return -1 when the value is not present', function() {
 +
      assert.equal([1, 2, 3].indexOf(4), -1);
 +
    });
 +
  });
 +
});
 +
 +
 +
describe('Array', function() {
 +
  describe('#indexOf()', function() {
 +
    it('should return -1 when the value is not present', function() {
 +
      [1, 2, 3].indexOf(5).should.equal(-1);
 +
      [1, 2, 3].indexOf(0).should.equal(-1);
 +
    });
 +
  });
 +
})
 +
 +
 +
function add(args) {
 +
  return args.reduce((prev, curr) => prev + curr, 0);
 +
}
 +
 +
describe('add()', function() {
 +
  const tests = [
 +
    {args: [1, 2], expected: 3},
 +
    {args: [1, 2, 3], expected: 6},
 +
    {args: [1, 2, 3, 4], expected: 10}
 +
  ];
 +
 +
  tests.forEach(({args, expected}) => {
 +
    it(`correctly adds ${args.length} args`, function() {
 +
      const res = add(args);
 +
      assert.strictEqual(res, expected);
 +
    });
 +
  });
 +
});
 +
 +
var cad = 'Don Quijote de la Mancha';
 +
 +
describe('Strings', function() {
 +
  describe('és una cadena', function() {
 +
    it(cad + ': comrpovem si és una cadena...', function() {
 +
      expect(cad).to.be.a('string');;
 +
    });
 +
  });
 +
});
 +
</pre>
 
{{Autor}}, setembre 2021
 
{{Autor}}, setembre 2021

Revisió de 13:42, 26 oct 2021

Introducció

Mocha és un framework per a fer tests unitaris. Ara que estem aprenent la sintaxi del llenguatge Javascript, donem preferència a la consola del navegador web i la consola de Node per practicar amb Javascript.

Mitjançant els tests unitaris podem fer tests que ens permetin acreditar el bon funcionament de les nostres funcions i procediments.

Instal·lació i primers passos

Llibreria per fer tests unitaris:

Instal·lació Primer de tot, crea la teva carpeta de treball per fer tests. Per exemple: ~/M06_2122/UF1/test 

$ cd ~/M06_2122/UF1/test
$ npm init (com a entry point posarem ''test.js'')

es crea el fitxer package.json

Intal·lem el packet mocha de forma local: 

$ npm install mocha

es crea la carpeta node_modules, que conté la carpeta mocha/. 

$ mkdir test
$ nano test/test.js # or open with your favorite editor

En comptes de nano pots fer servir el teu editor per defecte, o fins i tot un editor gràfic (el professor fa servir l'editor joe).

Contingut del script test.js: 

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

Aquest script el que fa és avaluar si dins de l'array [1,2,3] hi ha l'element 4. Com que no hi és, el mètode indexOf() retorna un -1. Aquesta és la manera com podem testejar el funcionament del mètode indexOf().

I ara ja podem testejar el script: 

$ ./node_modules/mocha/bin/mocha

  Array
    #indexOf()
      ✓ should return -1 when the value is not present


  1 passing (9ms)

Anem a fer-ho més senzill. Editem el fitxer package.json: 

"scripts": {
  "test": "mocha"
}

I ara senzillament hem de fer: 

$ npm test

Diferents possibilitats

SYNCHRONOUS CODE

A part de assert, podem utilitzar altres llibreries, com per exemple should: 

$ npm install should --save-dev

Codi: 

describe('Array', function() {
  describe('#indexOf()', function() {
    it('should return -1 when the value is not present', function() {
      [1, 2, 3].indexOf(5).should.equal(-1);
      [1, 2, 3].indexOf(0).should.equal(-1);
    });
  });
});

i en aquest cas podem testejar dues sentències de forma síncrona.

DYNAMICALLY GENERATING TESTS

Provem el següent codi: 

const assert = require('assert');

function add(args) {
  return args.reduce((prev, curr) => prev + curr, 0);
}

describe('add()', function() {
  const tests = [
    {args: [1, 2], expected: 3},
    {args: [1, 2, 3], expected: 6},
    {args: [1, 2, 3, 4], expected: 10}
  ];

  tests.forEach(({args, expected}) => {
    it(`correctly adds ${args.length} args`, function() {
      const res = add(args);
      assert.strictEqual(res, expected);
    });
  });
});

En aquest cas, si ens fixem bé en el codi, amb la funció add() estem avaluant la suma dels elements de l'array, i aquesta operació la fem tres vegades. El resultat que obtenim en la consola: 

> test@1.0.0 test
> mocha


  add()
    ✔ correctly adds 2 args
    ✔ correctly adds 3 args
    ✔ correctly adds 4 args


  3 passing (3ms)

Provar els tests unitaris en el navegador

Mocha test en el navegador

mocha_test.html: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Mocha Tests</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://unpkg.com/mocha/mocha.css" />
  </head>
  <body>
    <div id="mocha"></div>

    <script src="https://unpkg.com/chai/chai.js"></script>
    <script src="https://unpkg.com/mocha/mocha.js"></script>

    <script class="mocha-init">
      mocha.setup('bdd');
      mocha.checkLeaks();
    </script>

    <script src="./test_html.js"></script>
    <script class="mocha-exec">
      mocha.run();
    </script>
  </body>
</html>

El nostre test_html.js queda de la següent forma: (necessitem la llibreria chai) 

//https://www.chaijs.com/
let assert = chai.assert;
let should = chai.should();
let expect = chai.expect;

describe('Array', function() {
  describe('#indexOf()', function() {
    it('should return -1 when the value is not present', function() {
      assert.equal([1, 2, 3].indexOf(4), -1);
    });
  });
});


describe('Array', function() {
  describe('#indexOf()', function() {
    it('should return -1 when the value is not present', function() {
      [1, 2, 3].indexOf(5).should.equal(-1);
      [1, 2, 3].indexOf(0).should.equal(-1);
    });
  });
})


function add(args) {
  return args.reduce((prev, curr) => prev + curr, 0);
}

describe('add()', function() {
  const tests = [
    {args: [1, 2], expected: 3},
    {args: [1, 2, 3], expected: 6},
    {args: [1, 2, 3, 4], expected: 10}
  ];

  tests.forEach(({args, expected}) => {
    it(`correctly adds ${args.length} args`, function() {
      const res = add(args);
      assert.strictEqual(res, expected);
    });
  });
});

var cad = 'Don Quijote de la Mancha';

describe('Strings', function() {
  describe('és una cadena', function() {
    it(cad + ': comrpovem si és una cadena...', function() {
      expect(cad).to.be.a('string');;
    });
  });
});

creat per Joan Quintana Compte, setembre 2021

Obtingut de «http://wiki.joanillo.org/index.php?title=Practicar_sintaxi_amb_tests_unitaris_(framework_Mocha)&oldid=297825»