Practicar sintaxi amb tests unitaris (framework Mocha) - Historial de revisió

Joan: /* Provar els tests unitaris en el navegador */

2021-10-26T13:42:11Z

Provar els tests unitaris en el navegador

Joan: /* Instal·lació i primers passos */

2021-10-21T17:12:04Z

Instal·lació i primers passos

Joan: /* Provar els tests unitaris en el navegador */

2021-10-21T09:40:00Z

Provar els tests unitaris en el navegador

Joan: /* Provar els tests unitaris en el navegador */

2021-09-20T16:01:43Z

Provar els tests unitaris en el navegador

Joan: /* Provar els tests unitaris en el navegador */

2021-09-20T16:01:16Z

Provar els tests unitaris en el navegador

Joan: /* Diferents possibilitats */

2021-09-20T16:00:04Z

Diferents possibilitats

Joan: /* SYNCHRONOUS CODE */

2021-09-20T15:46:39Z

SYNCHRONOUS CODE

Joan: /* Instal·lació i primers passos */

2021-09-20T15:46:03Z

Instal·lació i primers passos

Joan: Es crea la pàgina amb «=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...».

2021-09-20T15:27:34Z

Es crea la pàgina amb «=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...».

Pàgina nova

=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:
*https://mochajs.org

Instal·lació
Primer de tot, crea la teva carpeta de treball per fer tests. Per exemple: ''~/M06_2122/UF1/test''
<pre>
$ cd ~/M06_2122/UF1/test
$ npm init (com a entry point posarem ''test.js'')
</pre>
es crea el fitxer ''package.json''

Intal·lem el packet '''mocha''' de forma local:
<pre>
$ npm install mocha
</pre>
es crea la carpeta ''node_modules'', que conté la carpeta ''mocha/''.
<pre>
$ mkdir test
$ nano test.js # or open with your favorite editor
</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'').

Contingut del script ''test.js'':
<pre>
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);
});
});
});
</pre>
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:
<pre>
$ ./node_modules/mocha/bin/mocha

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

1 passing (9ms)
</pre>
Anem a fer-ho més senzill. Editem el fitxer ''package.json'':
<pre>
"scripts": {
"test": "mocha"
}
</pre>
I ara senzillament hem de fer:
<pre>
$ npm test
</pre>
{{Autor}}, setembre 2021

@@ Línia 119: / Línia 119: @@
 </pre>
 =Provar els tests unitaris en el navegador=
 [[Fitxer:Mocha test.png | thumbnail | Mocha test en el navegador]]

@@ Línia 118: / Línia 118: @@
 </pre>
 =Provar els tests unitaris en el navegador=
-[[Fitxer:Prova test unitari.png | thumbnail]]
+[[Fitxer:Mocha test.png | thumbnail | Mocha test en el navegador]]
-I ara necessitem un fitxer ''html'' que podem obrir en el navegador. Amb aquest codi mínim ha de funcionar:
+'''mocha_test.html''':
 <pre>
 <!DOCTYPE html>
@@ Línia 146: / Línia 141: @@
      </script>
-     <script src="./test.js"></script>
+     <script src="./test_html.js"></script>
      <script class="mocha-exec">
        mocha.run();
@@ Línia 152: / Línia 147: @@
    </body>
 </html>
 </pre>
 {{Autor}}, setembre 2021

@@ Línia 118: / Línia 118: @@
 </pre>
 =Provar els tests unitaris en el navegador=
 El nostre ''test.js'' que fins ara hem provat a la consola també el podem provar en el navegador. Per fer-ho, la única línia que canviarem és:
 <pre>

@@ Línia 116: / Línia 116: @@
 passing (3ms)
 </pre>
-{{Autor}}, setembre 2021
+I ara necessitem un fitxer ''html'' que podem obrir en el navegador. Amb aquest codi mínim ha de funcionar:

@@ Línia 63: / Línia 63: @@
 ===SYNCHRONOUS CODE===
 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:
 describe('Array', function() {
    describe('#indexOf()', function() {
@@ Línia 75: / Línia 76: @@
    });
 });
+</pre>
 i en aquest cas podem testejar dues sentències de forma síncrona.

@@ Línia 22: / Línia 22: @@
 <pre>
 $ mkdir test
-$ nano test.js # or open with your favorite editor
+$ nano test/test.js # or open with your favorite editor
 </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'').
@@ Línia 60: / Línia 60: @@
 $ npm test
 </pre>
 =Diferents possibilitats=
 ===SYNCHRONOUS CODE===