Tests

Pix-Live

Framework de tests

Le framework de test par défaut proposé par Ember.js est QUnit.

Nous estimons que ce framework est aujourd'hui dépassé et en retard en termes de communauté, fonctionnalités, intégrations support et évolution, par rapport à d'autres frameworks tels que Jasmine ou Mocha. C'est pourquoi nous avons fait le choix de le remplacer par ce dernier, considéré comme la référence dans l'écosystème JS depuis plusieurs années (un exploit dans le monde JS!).

Le remplacement de QUnit par Mocha s'est faite grâce au plugin ember-cli-mocha.

Exécuter les tests

L'exécution des tests se fait via la commande ember test (ou ember t). Il est possible de rejouer automatiquement les tests à chaque changement via la commande ember test --serve.

Il est possible de jouer directement les tests (sans passer par ember test) lorsque l'application est lancée (via ember serve ou ember s). Pour ce faire, il faut accéder à l'URL http://localhost:4200/tests.

Pour lancer un sous-ensemble défini de tests, on peut utiliser l'option --filter, par exemple : ember test --filter="assessments".

Le filtrage peut se faire aussi directement au niveau des tests (plutôt que du CLI), grâce aux options Mocha skip et only.

Typologies de tests

Ember.js permet de concevoir 3 types de tests :

• unitaires : pour tout ce qui est computed properties, serializers, adapters, helpers, services
• intégration : pour vérifier le rendu et le comportement d'un composant
• acceptance : pour jouer des scénarios end-to-end (E2E) dans des conditions au plus proches du réel

Tests unitaires

Tests d'intégration

Tests d'acceptation

/* On déclare explicitement les imports (même pour Mocha) pour faciliter la vie des IDE / Linters */
import { describe, it, beforeEach, afterEach } from 'mocha';
import { expect } from 'chai';
import startApp from '../helpers/start-app';
import destroyApp from '../helpers/destroy-app';

/* Définition des méthodes utiles, si besoin */
function assertDisplayedUrl(actualUrl, expectedUrl) {
  expect(actualUrl).to.equal(expectedUrl);
}

/* Définition des constantes, si besoin */
const INDEX_PAGE_URL = '/';
const INDEX_LANDING_TEXT_SELECTOR = '.first-page-hero__main-value-prop';

/* Description de la suite de tests */
describe('Acceptance | a1 - Accéder à la plateforme pour démarrer un test', function () {

  /* Déclaration de l'instance de l'application qui sera lancée lors des tests */ 
  let application;

  /* Initialisation de l'application, de préférence dans un forEach pour avoir des tests le plus indépendants */
  beforeEach(function () {
    application = startApp();
  });

  /* Destruction de l'application */
  afterEach(function () {
    destroyApp(application);
  });

  /* Toutes les méthodes asynchrones de type ember-helper peuvent être jouées d'affilées dans un beforeEach */
  beforeEach(function () {
    visit(INDEX_PAGE_URL);
    click(INDEX_LANDING_TEXT_SELECTOR);
  });

  it('a1.0 peut visiter /', function () {
    assertDisplayedUrl(currentURL(), INDEX_PAGE_URL) {
  });

  it('a1.1 la landing page contient un pitch de présentation', function () {
    const $landingText = findWithAssert(INDEX_LANDING_TEXT_SELECTOR).text();
    expect($landingText).to.contains('Développez vos compétences numériques');
  });

  it('a1.2 Sur la landing page, un lien pointant vers la page projet est présent dans les valeurs pix', function(){
    findWithAssert('.first-page-about a[href="/projet"]');
  });

});

Pix-API