Erhalten Sie Front-End-Testabdeckung mit Cypress

API7.ai

March 2, 2021

Technology

Hintergrund

Im Artikel "Stable Product Delivery with Cypress" haben wir besprochen, warum wir Cypress als unser E2E-Testframework gewählt haben. Nachdem wir fast zwei Monate damit verbracht haben, die Testfälle zu verfeinern, benötigten wir Testabdeckung, um zu quantifizieren, ob die Testabdeckung ausreichend war. Dieser Artikel beschreibt, wie man die E2E-Abdeckung des APISIX Dashboard-Frontends mit Cypress erhält.

Was ist Code-Abdeckung?

Code-Abdeckung ist eine Metrik im Software-Testing, die den Anteil und das Ausmaß beschreibt, in dem der Quellcode eines Programms getestet wird, und der resultierende Anteil wird als Code-Abdeckung bezeichnet. Die Testabdeckung spiegelt in gewissem Maße die Gesundheit des Codes wider.

Installation von Abhängigkeiten & Konfiguration

Um Testabdeckungsdaten zu sammeln, müssen wir einige Sonden in den ursprünglichen Geschäftscode einfügen, damit Cypress die Daten sammeln kann.

Cypress empfiehlt offiziell zwei Ansätze: Der erste besteht darin, ein temporäres Verzeichnis über nyc zu generieren und den Code, der mit den Sonden versehen wurde, auszuführen, um die Testabdeckungsdaten zu sammeln. Der zweite Weg besteht darin, die Code-Transformation in Echtzeit über die Code-Transformationspipeline durchzuführen, was den Aufwand für temporäre Ordner eliminiert und das Sammeln von Testabdeckungsdaten relativ einfach macht. Wir wählen den zweiten Weg, um die Frontend-E2E-Abdeckung zu sammeln.

  1. Installation von Abhängigkeiten
yarn add  babel-plugin-istanbul --dev
  1. Installation des Cypress-Plugins
yarn add  @cypress/code-coverage --dev
  1. Konfiguration von Babel
// web/config/config.ts
extraBabelPlugins: [
    ['babel-plugin-istanbul',  {
      "exclude": ["**/.umi", "**/locales"]
    }],
  ],
  1. Konfiguration des Cypress Code Coverage Plugins
// web/cypress/plugins/index.js
module.exports = (on, config) => {
  require('@cypress/code-coverage/task')(on, config);
  return config;
};

// web/cypress/support/index.js
import '@cypress/code-coverage/support';
  1. Erhalten der Testabdeckung

Nachdem die Konfiguration abgeschlossen ist, müssen wir die Testfälle ausführen. Nachdem die Testfälle ausgeführt wurden, generiert Cypress die Ordner coverage und .nyc_output, die die Testabdeckungsberichte enthalten.

1.png

Die Testabdeckungsinformationen werden in der Konsole angezeigt, nachdem der folgende Befehl ausgeführt wurde.

npx nyc report --reporter=text-summary

2.png

Unter dem Verzeichnis coverage wird eine detailliertere Berichtsseite verfügbar sein, wie hier gezeigt.

3.png

  • Statements gibt an, ob jede Anweisung ausgeführt wurde
  • Branchs gibt an, ob jeder if-Block ausgeführt wurde
  • Functions gibt an, ob jede Funktion aufgerufen wurde
  • Lines gibt an, ob jede Zeile ausgeführt wurde

Zusammenfassung

Die Testabdeckungsrate spiegelt in gewissem Maße die Qualität des Projekts wider. Derzeit hat die E2E-Abdeckung des APISIX Dashboard-Frontends 71,57% erreicht. Wir werden weiterhin mit der Community zusammenarbeiten, um die Testabdeckungsrate zu erhöhen und den Benutzern zuverlässigere und stabilere Produkte zu bieten.

Tags:
APISIX Basics
Testing
Plugin