Mettre en place Cucumber pour vos tests end-to-end Angular

Par défaut, les applications Angular utilisent Protractor et Jasmine pour les tests end-to-end. Dans cet article, nous allons voir comment remplacer Jasmine et utiliser Cucumber en tant que framework de test end-to-end.

1. Installer les dépendances

Pour installer les dépendances requises, lancer la commande suivante dans un terminal :

1npm install --save-dev @types/{chai,cucumber} chai cucumber protractor-cucumber-framework

Si vous utilisez Yarn, la commande à lancer est :

1yarn add --dev @types/{chai,cucumber} chai cucumber protractor-cucumber-framework

Chai

Cucumber est un framework de test qui ne vient pas avec une librairie d’assertions comme le fait Jasmine, nous devons donc en installer une nous-mêmes. Nous allons utiliser chai dans cet article.

Protractor Cucumber Framework

Le paquet protractor-cucumber-framework est un plugin qui fait le lien entre Protractor and Cucumber. C’est ce qui rend possible l’exécution des tests Cucumber via Protractor.

Les déclarations de types pour Chai and Cucumber

Les paquets @types/chai et @types/cucumber contiennent les déclarations de types qui permettent à TypeScript de vérifier le typage statique de notre code.

2. Mettre à jour la configuration du compilateur TypeScript

Ouvrez le fichier e2e/tsconfig.json. Puis, mettez à jour la configuration du compilateur TypeScript en remplaçant :

1"types": ["jasmine", "jasminewd2", "node"]

par :

1"types": ["chai", "cucumber", "node"]

Cela permet au compilateur TypeScript de prendre en compte les déclarations de types que nous avons installées à l’étape d’avant.

3.Configurer Protractor pour utiliser Cucumber

Nous allons maintenant effectuer des modifications dans le fichier e2e/protractor.conf.js qui contient la configuration de Protractor.

Mettre à jour les fichiers de test à utiliser par Protractor :

1exports.config = {
2  allScriptsTimeout: 11000,
3- specs: ['./src/**/*.e2e-spec.ts'],
4+ specs: ['./src/features/**/*.feature'],
5  capabilities: {
6    browserName: 'chrome',
7  },
8  directConnect: true,
9  baseUrl: 'http://localhost:4200/',
10  framework: 'jasmine',
11  jasmineNodeOpts: {
12    showColors: true,
13    defaultTimeoutInterval: 30000,
14    print: function() {},
15  },
16  onPrepare() {
17    require('ts-node').register({
18      project: require('path').join(__dirname, './tsconfig.json'),
19    });
20    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
21  },
22};

Les fichiers de “feature” vont resider dans le dossier e2e/src/features.

Déclarer Cucumber en tant que framework de test à utiliser

À la place de Jasmine, nous allons déclarer Cucumber en tant que framework de test à utiliser. Mettez donc à jour le fichier de configuration de Protractor comme suit :

1exports.config = {
2  allScriptsTimeout: 11000,
3  specs: ['./src/features/**/*.feature'],
4  capabilities: {
5    browserName: 'chrome',
6  },
7  directConnect: true,
8  baseUrl: 'http://localhost:4200/',
9- framework: 'jasmine',
10+ framework: 'custom',
11+ frameworkPath: require.resolve('protractor-cucumber-framework')
12  jasmineNodeOpts: {
13    showColors: true,
14    defaultTimeoutInterval: 30000,
15    print: function() {},
16  },
17  onPrepare() {
18    require('ts-node').register({
19      project: require('path').join(__dirname, './tsconfig.json'),
20    });
21    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
22  },
23};

Configurer les options Cucumber

cucumberOpts définit les options de la ligne de commande qui sont transmises à Cucumber.js.

1exports.config = {
2  allScriptsTimeout: 11000,
3  specs: ['./src/features/**/*.feature'],
4  capabilities: {
5    browserName: 'chrome',
6  },
7  directConnect: true,
8  baseUrl: 'http://localhost:4200/',
9  framework: 'custom',
10  frameworkPath: require.resolve('protractor-cucumber-framework')
11+ cucumberOpts: {
12+    require: ['./src/steps/**/*.steps.ts'],
13+  },
14  jasmineNodeOpts: {
15    showColors: true,
16    defaultTimeoutInterval: 30000,
17    print: function() {},
18  },
19  onPrepare() {
20    require('ts-node').register({
21      project: require('path').join(__dirname, './tsconfig.json'),
22    });
23    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
24  },
25};

Dans notre cas, nous disons à Cucumber que nos fichiers de définition des steps se trouvent dans le dossier e2e/src/steps.

Enlever les résidus de Jasmine

Nous pouvons maintenant tranquillement enlever Jasmine de notre configuration Protractor :

1exports.config = {
2  allScriptsTimeout: 11000,
3  specs: ['./src/features/**/*.feature'],
4  capabilities: {
5    browserName: 'chrome',
6  },
7  directConnect: true,
8  baseUrl: 'http://localhost:4200/',
9  framework: 'custom',
10  frameworkPath: require.resolve('protractor-cucumber-framework')
11  cucumberOpts: {
12     require: ['./src/steps/**/*.steps.ts'],
13   },
14- jasmineNodeOpts: {
15-   showColors: true,
16-   defaultTimeoutInterval: 30000,
17-   print: function() {},
18- },
19  onPrepare() {
20    require('ts-node').register({
21      project: require('path').join(__dirname, './tsconfig.json'),
22    });
23-   jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
24  },
25};

Nous n’avons pas désinstallé les dépendances vers Jasmine et son écosystème, car Jasmine reste utilisé pour les tests unitaires. Si vous souhaitez vous débarrasser de Jasmine et utiliser Jest pour vos tests unitaires, j’ai un article spécialement pour vous.

4. Écrire les tests Cucumber

Nous pouvons maintenant commencer à écrire nos tests end-to-end avec Cucumber.

Fichier feature

Créez le fichier e2e/src/features/app.feature avec le contenu suivant :

1Feature: Go to the home
2  Display the title
3
4  Scenario: Home Page
5    Given I am on the home page
6    When I do nothing
7    Then I should see the title

La “page object”

Le fichier e2e/src/pages/app.po.ts existe déjà. Vérifiez que son contenu est bien comme suit :

1import { browser, by, element } from 'protractor';
2
3export class AppPage {
4  navigateTo() {
5    return browser.get(browser.baseUrl) as Promise<unknown>;
6  }
7
8  getTitleText() {
9    return element(by.css('app-root h1')).getText() as Promise<string>;
10  }
11}

La définition des steps

Créez le fichier e2e/src/steps/app.steps.ts avec le contenu suivant :

1import { Before, Given, Then, When } from 'cucumber';
2import { expect } from 'chai';
3
4import { AppPage } from '../pages/app.po';
5
6let page: AppPage;
7
8Before(() => {
9  page = new AppPage();
10});
11
12Given(/^I am on the home page$/, async () => {
13  await page.navigateTo();
14});
15
16When(/^I do nothing$/, () => {});
17
18Then(/^I should see the title$/, async () => {
19  expect(await page.getTitleText()).to.equal('Welcome to angular-cli-cucumber-demo!');
20});

6. Lancer les tests

Vous pouvez maintenant lancer les tests end-to-end grâce à la commande suivante :

1ng e2e

Conclusion

Dans cet article, nous avons appris à mettre en place Cucumber pour nos tests end-to-end. Le Angular CLI a fait la moitié du travail en créant pour nous la configuration initiale de Protractor.

Vous pourrez trouver Le code source complet de cet article dans ce dépôt Github.