LiteSun commented on a change in pull request #227: URL: https://github.com/apache/apisix-website/pull/227#discussion_r585328360
########## File path: website/blog/2021-03-02-get-front-end-test-coverage-with-cypress.md ########## @@ -0,0 +1,84 @@ +--- +title: "Get Front-End Test Coverage with Cypress" +author: Yi Sun +authorURL: "https://github.com/LiteSun"; +authorImageURL: "https://avatars.githubusercontent.com/u/31329157?s=400&u=e81b4bb4db2be162c1fcac6d188f5b0f82f71920&v=4"; +--- + +> [@LiteSun](https://github.com/LiteSun), Apache APISIX Committer from [Shenzhen Zhiliu Technology Co.](https://www.apiseven.com/) +> +> Source: +> +> - https://github.com/apache/apisix +> - https://github.com/apache/apisix-dashboard + +## Background + +In the article ["Stable Product Delivery with Cypress"](/blog/2021/02/08/stable-product-delivery-with-cypress), we discussed why we chose Cypress as our E2E testing framework. After spending nearly two months refining the test cases, we needed test coverage to quantify whether the test coverage was sufficient. This article will describe how to use Cypress to get E2E coverage on the front end of APISIX Dashboard. + +## What is code coverage? + +Code coverage is a metric in software testing that describes the proportion and extent to which the source code in a program is tested, and the resulting proportion is called code coverage. Test code coverage reflects the health of the code to a certain extent. + +## Installation Dependencies & Configuration + +To collect test coverage data, we need to put some probes in the original business code for Cypress to collect the data. + +Cypress officially recommends two approaches, the first is to generate a temporary directory via `nyc` and run the code that has been written to the probe to collect test coverage data. The second way is to do the code conversion in real time through the code conversion pipeline, which eliminates the hassle of temporary folders and makes collecting test coverage data relatively refreshing. We choose the second way to collect front-end E2E coverage. + +1. Installing Dependencies + + yarn add babel-plugin-istanbul --dev Review comment: ```suggestion ``` yarn add babel-plugin-istanbul --dev ``` ``` ########## File path: website/blog/2021-03-02-get-front-end-test-coverage-with-cypress.md ########## @@ -0,0 +1,84 @@ +--- +title: "Get Front-End Test Coverage with Cypress" +author: Yi Sun +authorURL: "https://github.com/LiteSun"; +authorImageURL: "https://avatars.githubusercontent.com/u/31329157?s=400&u=e81b4bb4db2be162c1fcac6d188f5b0f82f71920&v=4"; +--- + +> [@LiteSun](https://github.com/LiteSun), Apache APISIX Committer from [Shenzhen Zhiliu Technology Co.](https://www.apiseven.com/) +> +> Source: +> +> - https://github.com/apache/apisix +> - https://github.com/apache/apisix-dashboard + +## Background + +In the article ["Stable Product Delivery with Cypress"](/blog/2021/02/08/stable-product-delivery-with-cypress), we discussed why we chose Cypress as our E2E testing framework. After spending nearly two months refining the test cases, we needed test coverage to quantify whether the test coverage was sufficient. This article will describe how to use Cypress to get E2E coverage on the front end of APISIX Dashboard. + +## What is code coverage? + +Code coverage is a metric in software testing that describes the proportion and extent to which the source code in a program is tested, and the resulting proportion is called code coverage. Test code coverage reflects the health of the code to a certain extent. + +## Installation Dependencies & Configuration + +To collect test coverage data, we need to put some probes in the original business code for Cypress to collect the data. + +Cypress officially recommends two approaches, the first is to generate a temporary directory via `nyc` and run the code that has been written to the probe to collect test coverage data. The second way is to do the code conversion in real time through the code conversion pipeline, which eliminates the hassle of temporary folders and makes collecting test coverage data relatively refreshing. We choose the second way to collect front-end E2E coverage. + +1. Installing Dependencies + + yarn add babel-plugin-istanbul --dev + +2. Install the cypress plug-in + + yarn add @cypress/code-coverage --dev Review comment: ditto. ########## File path: website/blog/2021-03-02-get-front-end-test-coverage-with-cypress.md ########## @@ -0,0 +1,84 @@ +--- +title: "Get Front-End Test Coverage with Cypress" +author: Yi Sun +authorURL: "https://github.com/LiteSun"; +authorImageURL: "https://avatars.githubusercontent.com/u/31329157?s=400&u=e81b4bb4db2be162c1fcac6d188f5b0f82f71920&v=4"; +--- + +> [@LiteSun](https://github.com/LiteSun), Apache APISIX Committer from [Shenzhen Zhiliu Technology Co.](https://www.apiseven.com/) +> +> Source: +> +> - https://github.com/apache/apisix +> - https://github.com/apache/apisix-dashboard + +## Background + +In the article ["Stable Product Delivery with Cypress"](/blog/2021/02/08/stable-product-delivery-with-cypress), we discussed why we chose Cypress as our E2E testing framework. After spending nearly two months refining the test cases, we needed test coverage to quantify whether the test coverage was sufficient. This article will describe how to use Cypress to get E2E coverage on the front end of APISIX Dashboard. + +## What is code coverage? + +Code coverage is a metric in software testing that describes the proportion and extent to which the source code in a program is tested, and the resulting proportion is called code coverage. Test code coverage reflects the health of the code to a certain extent. + +## Installation Dependencies & Configuration + +To collect test coverage data, we need to put some probes in the original business code for Cypress to collect the data. + +Cypress officially recommends two approaches, the first is to generate a temporary directory via `nyc` and run the code that has been written to the probe to collect test coverage data. The second way is to do the code conversion in real time through the code conversion pipeline, which eliminates the hassle of temporary folders and makes collecting test coverage data relatively refreshing. We choose the second way to collect front-end E2E coverage. + +1. Installing Dependencies + + yarn add babel-plugin-istanbul --dev + +2. Install the cypress plug-in + + yarn add @cypress/code-coverage --dev + +3. Configuring babel + + // web/config/config.ts + extraBabelPlugins: [ + ['babel-plugin-istanbul', { + "exclude": ["**/.umi", "**/locales"] + }], + ], + +4. Configuring Cypress code coverage plugin + + // 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'; + +5. Get Test Coverage + +After the configuration is done, we need to run the test case. After the test case is run, Cypress will generate `coverage` and +`.nyc_output` folders, which contain the test coverage reports. + + + +The test coverage information will appear in the console after executing the following command. + + npx nyc report --reporter=text-summary Review comment: ditto. ########## File path: website/blog/2021-03-02-get-front-end-test-coverage-with-cypress.md ########## @@ -0,0 +1,84 @@ +--- +title: "Get Front-End Test Coverage with Cypress" +author: Yi Sun +authorURL: "https://github.com/LiteSun"; +authorImageURL: "https://avatars.githubusercontent.com/u/31329157?s=400&u=e81b4bb4db2be162c1fcac6d188f5b0f82f71920&v=4"; +--- + +> [@LiteSun](https://github.com/LiteSun), Apache APISIX Committer from [Shenzhen Zhiliu Technology Co.](https://www.apiseven.com/) +> +> Source: +> +> - https://github.com/apache/apisix +> - https://github.com/apache/apisix-dashboard + +## Background + +In the article ["Stable Product Delivery with Cypress"](/blog/2021/02/08/stable-product-delivery-with-cypress), we discussed why we chose Cypress as our E2E testing framework. After spending nearly two months refining the test cases, we needed test coverage to quantify whether the test coverage was sufficient. This article will describe how to use Cypress to get E2E coverage on the front end of APISIX Dashboard. Review comment: ```suggestion In the article ["Stable Product Delivery with Cypress"](/blog/2021/02/08/stable-product-delivery-with-cypress), we discussed why we chose Cypress as our E2E testing framework. After spending nearly two months refining the test cases, we needed test coverage to quantify whether the test coverage was sufficient.This article will describe how to get APISIX Dashboard front-end E2E coverage using Cypress. ``` ---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: us...@infra.apache.org
