You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/spfx/toolchain/implement-ci-cd-with-azure-devops.md
+71-63Lines changed: 71 additions & 63 deletions
Original file line number
Diff line number
Diff line change
@@ -19,14 +19,15 @@ Continuous Integration (CI) helps developers integrate code into a shared reposi
19
19
Setting up Azure DevOps for Continuous Integration with a SharePoint Framework solution requires the following steps:
20
20
21
21
1. Creating the Build Definition
22
-
2. Installing NodeJS
23
-
3. Restoring dependencies
24
-
4. Executing Unit Tests
25
-
5. Importing code coverage information
26
-
6. Bundling the solution
27
-
7. Packaging the solution
28
-
8. Preparing the artifacts
29
-
9. Publishing the artifacts
22
+
1. Installing NodeJS
23
+
1. Restoring dependencies
24
+
1. Executing Unit Tests
25
+
1. Importing test results
26
+
1. Importing code coverage information
27
+
1. Bundling the solution
28
+
1. Packaging the solution
29
+
1. Preparing the artifacts
30
+
1. Publishing the artifacts
30
31
31
32
### Creating the Build Definition
32
33
The Build Definition, as its name suggests, includes all the definitions and their configurations for the build. Start setting up your Continuous Integration by creating a new build definition and link it to your repository.
@@ -49,70 +50,77 @@ Because third party dependencies are not stored in the source control, you need
49
50
50
51
### Executing Unit Tests
51
52
52
-
The SharePoint Framework supports writing unit tests using KarmaJS, Mocha, Chai and Sinon. These modules are already referenced for you and it is highly recommended at a minimum to test the business logic of your code to get feedback on any potential issues or regressions as soon as possible. To have Azure DevOps execute your unit tests, add a `gulp` task. Set the path to the `gulpfile` file and set the `Gulp Tasks` option to `test`.
53
+
The SharePoint Framework does not provide a testing framework by default (since 1.8.0), we will leverage Jest with this sample. These modules will be installed in a later step and it is highly recommended at a minimum to test the business logic of your code to get feedback on any potential issues or regressions as soon as possible. To have Azure DevOps execute your unit tests, add a `npm` task. Set the `command` to `custom` and `custom command` field, enter `test`. Then set the `Working Directory` option to `$(Build.SourcesDirectory)`.
53
54
54
55
55
56
56
-
> [!NOTE]
57
-
> Make sure you check `Publish to TFS/Team Services` under the `JUnit Test Results` section and set the `Test Result Files` to `**/test-*.xml`. This will instruct the task to report results with the build status in Azure DevOps.
58
57
59
-
#### Configuring KarmaJS
58
+
#### Configuring Jest
60
59
61
-
By default SharePoint Framework projects do not include a reporter for JUnit. Reporters are plugins for KarmaJS that export the test results in a certain format. To install the necessary reporters, run the following commands in your project.
60
+
By default SharePoint Framework projects does not include a testing Framework. We will leverage Jest in this sample.
npm i [email protected] jest jest-junit @voitanos/jest-preset-spfx-react16 -D
65
64
```
66
65
67
-
You also need to configure KarmaJS to load and use the reporter, to do so create a file `config/karma.config.js` and add the following content.
68
-
69
-
```JS
70
-
"use strict";
71
-
var existingKarmaConfig =require('@microsoft/sp-build-web/lib/karma/karma.config');
72
-
var junitReporter =require('karma-junit-reporter');
73
-
74
-
module.exports=function (config) {
75
-
existingKarmaConfig(config);
76
-
config.reporters.push('junit');
66
+
You also need to configure Jest, to do so create a file `config/jest.config.json` and add the following content.
67
+
68
+
```JSON
69
+
{
70
+
"preset": "@voitanos/jest-preset-spfx-react16",
71
+
"rootDir": "../src",
72
+
"coverageReporters": [
73
+
"text",
74
+
"json",
75
+
"lcov",
76
+
"text-summary",
77
+
"cobertura"
78
+
],
79
+
"reporters": [
80
+
"default",
81
+
"jest-junit"
82
+
]
83
+
}
84
+
```
85
+
You also need to configure your project to leverage jest when typing commands. To do so edit the `package.json` file and add/replace these two `scripts` with the following values:
Finally you need to modify the `package.json` to configure the reporter. Reporters are plugins that provide new export formats for test results to test runners. To do so edit `package.json` and add these lines after the `scripts` property.
77
91
78
-
config.set({
79
-
basePath:'./..',
92
+
```JSON
93
+
"jest-junit": {
94
+
"output": "temp/test/junit/junit.xml",
95
+
"usePathForSuiteName": "true"
96
+
}
97
+
```
98
+
#### Writing a unit test
99
+
To write your first unit test, create a new file `src/webparts/webPartName/tests/webPartName.spec.ts` and add the following content:
100
+
```TS
101
+
/// <referencetypes="mocha" />
102
+
import {assert, expect} from'chai';
103
+
104
+
describe("webPartName", () => {
105
+
it("should do something", () => {
106
+
assert.ok(true, 'should be true');
80
107
});
81
-
82
-
config.junitReporter= {
83
-
outputDir:'temp/', // results will be saved as $outputDir/$browserName.xml
84
-
outputFile:'test-results.xml', // if included, results will be saved as $outputDir/$browserName/$outputFile
85
-
suite:'karma', // suite will become the package name attribute in xml testsuite element
86
-
useBrowserName:true, // add browser name to report and classes names
> You can learn more about writing unit tests using Jest and Chai [here](https://jestjs.io/docs/en/getting-started.html).
101
116
102
-
Finally you need to modify the gulpfile to instruct it to leverage this new configuration. To do so edit `gulpfile.js` and add these lines after `build.initialize(gulp);`.
103
-
104
-
```JS
105
-
var buildConfig =build.getConfig();
106
-
var karmaTaskCandidates =buildConfig.uniqueTasks.filter((t) =>t.name==='karma');
In order to get test results information attached with the build results, you need to import these test results from the test runner into Azure DevOps. To do so, add a new `Publish Test Results` task. Set the `Test results files` field to `temp/test/junit/junit.xml` and the `Search folder` to `$(Build.SourcesDirectory)`.
119
+
112
120
113
121
### Importing code coverage information
114
122
115
-
In order to get code coverage reported with the build status you need to add a task to import that information. To configure the code coverage information, add the `publish code coverage results` tasks. Make sure you set the tool to `Cobertura`, `Summary files` to `$(Build.SourcesDirectory)/temp/coverage/cobertura/cobertura.xml` and `Report Directory` to `$(Build.SourcesDirectory)/temp/coverage/cobertura`.
123
+
In order to get code coverage reported with the build status you need to add a task to import that information. To configure the code coverage information, add the `publish code coverage results` tasks. Make sure you set the tool to `Cobertura`, `Summary files` to `$(Build.SourcesDirectory)/temp/test/cobertura-coverage.xml` and `Report Directory` to `$(Build.SourcesDirectory)/temp/test`.
0 commit comments