-
Notifications
You must be signed in to change notification settings - Fork 3.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adds SPFx React Jest Testing sample (#507)
- Loading branch information
1 parent
13954cc
commit e415148
Showing
52 changed files
with
24,233 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
# EditorConfig helps developers define and maintain consistent | ||
# coding styles between different editors and IDEs | ||
# editorconfig.org | ||
|
||
root = true | ||
|
||
|
||
[*] | ||
|
||
# change these settings to your own preference | ||
indent_style = space | ||
indent_size = 2 | ||
|
||
# we recommend you to keep these unchanged | ||
end_of_line = lf | ||
charset = utf-8 | ||
trim_trailing_whitespace = true | ||
insert_final_newline = true | ||
|
||
[*.md] | ||
trim_trailing_whitespace = false | ||
|
||
[{package,bower}.json] | ||
indent_style = space | ||
indent_size = 2 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
# Logs | ||
logs | ||
*.log | ||
npm-debug.log* | ||
|
||
# Dependency directories | ||
node_modules | ||
|
||
# Build generated files | ||
dist | ||
lib | ||
solution | ||
temp | ||
*.sppkg | ||
|
||
# Coverage directory used by tools like istanbul | ||
coverage | ||
|
||
# OSX | ||
.DS_Store | ||
|
||
# Visual Studio files | ||
.ntvs_analysis.dat | ||
.vs | ||
bin | ||
obj | ||
|
||
# Resx Generated Code | ||
*.resx.ts | ||
|
||
# Styles Generated Code | ||
*.scss.ts |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
{ | ||
"@microsoft/generator-sharepoint": { | ||
"version": "1.4.1", | ||
"libraryName": "react-jest-testing", | ||
"libraryId": "9e16e13b-8d8c-4b89-8de4-dd654c5b6740", | ||
"environment": "spo" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,119 @@ | ||
# SharePoint Framework React Jest Testing sample # | ||
|
||
## SPFx-Jest-Enzyme-Sinon unit testing starter kit | ||
|
||
## Summary | ||
|
||
This sample uses the popular [Jest Testing Framework](https://facebook.github.io/jest/) with a SPFx client side solution. It is a SPFx-Jest-Enzyme-Sinon starter kit so you can start writing and debugging unit tests in typescript for your SPFx solution. | ||
The setup includes unit tests examples, code coverage reports in different formats, visual studio code unit test debug configurations for typescript, setting a coverage threshold (gates) for continuous integration and continuous deployment scenarios. | ||
|
||
## Visual Studio Code Typescript debugging support for the Jest unit tests | ||
|
||
The Visual Studio Code launch.json has all the debug configurations needed to start debugging the unit tests for your SPFx solution. | ||
There is a _Jest All_ configuration that will execute all the tests on demand. | ||
There is also a _Jest Watch_ (watcher) configuration that **will let live execution or debugging only on the affected by a change unit tests** (if the solution is part of hg/git repo) and will provide immediate feedback if a test passes or fails on component code change. This is good option for Test Driven Development scenarios. | ||
|
||
![SharePoint Framework Jest Visual Studio Code - debugging unit test](./assets/Jest-Typescript-VSCode-debugging.png) | ||
|
||
## Sinonjs is included as mocking framework for the SPFx solution | ||
|
||
The solution also includes [Sinonjs](http://sinonjs.org/) that can be used to spawn spies, stubs and mocks. | ||
|
||
## Enzyme is included to extend to unit tests support for React Components | ||
|
||
Enzyme is a testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output. | ||
|
||
## Basic unit tests scenarios included to demonstrate how Jest, Sinon and Enzyme can be used to test the SPFx React components | ||
|
||
I wrote several unit tests to demonstrate how all testing libraries can be used together to test a React component with business logic and external dependencies included. Examples for mocking promises, pnpjs calls, https calls and spying on methods included for a quick start in unit testing your SPFx solution. | ||
|
||
## Built-in Jest code coverage | ||
|
||
Jest uses [Istanbul](https://github.com/gotwarlost/istanbul) under the hood to produce various code coverage reports including live VS code terminal output. Such reports can be integrated in CI tools like VSTS (Visual Studio Team Services) or Jenkins. | ||
|
||
![SharePoint Framework Jest tests code coverage reports](./assets/SPFx-jest-coverage.png) | ||
|
||
### Jest coverage threshold for continuous deployment pipeline setups | ||
|
||
Jest coverage thresholds are set to yield error and potentially fail a build or pre-build if there isn't 100% coverage on branches, functions, lines and statements together. The thresholds can be changed by altering the solution packages.json file where the Jest configuration is. | ||
|
||
```JavaScript | ||
"coverageThreshold": { | ||
"global": { | ||
"branches": 100, | ||
"functions": 100, | ||
"lines": 100, | ||
"statements": 100 | ||
} | ||
} | ||
``` | ||
|
||
### Generates summary report in JUnit xml format so it can be integrated with VSTS and Jenkins | ||
|
||
After the execution of the unit tests a summary report will be generated under the `./jest/summary-jest-junit.xml` path. Because it uses junit xml formatting most of the CI tools can show the summary on a dashboard. Having that is useful for reporting. That summary is generated by [jest-junit (npm module)](https://www.npmjs.com/package/jest-junit). | ||
|
||
## Unit tests support for SPFx extensions | ||
|
||
The sample uses SPFx web part, but the same setup applies for SPFx extensions and they can simply be added to the solution and unit tested the same way. | ||
|
||
|
||
## Used SharePoint Framework Version | ||
![drop](https://img.shields.io/badge/drop-1.4.1-green.svg) | ||
|
||
## Applies to | ||
|
||
* [SharePoint Framework](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview) | ||
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant) | ||
|
||
## Prerequisites | ||
|
||
- Office 365 subscription with SharePoint Online. | ||
- SharePoint Framework [development environment](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment) already set up. | ||
|
||
## Solution | ||
|
||
Solution|Author(s) | ||
--------|--------- | ||
react-jest-testing | Velin Georgiev ( [@VelinGeorgiev](https://twitter.com/velingeorgiev) ) | ||
|
||
## Version history | ||
|
||
Version|Date|Comments | ||
-------|----|-------- | ||
0.0.1|May 9, 2018 | Initial commit | ||
|
||
## Disclaimer | ||
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** | ||
|
||
--- | ||
|
||
## Minimal Path to Awesome | ||
|
||
- Clone this repository. | ||
- Open the command line, navigate to the web part folder and execute: | ||
- `npm i` | ||
- `npm test` **(NOT gulp test)** | ||
|
||
## Features | ||
|
||
This Web Part illustrates the following concepts on top of the SharePoint Framework: | ||
|
||
- Using React for building SharePoint Framework client-side web parts. | ||
- Using Jest Testing Framework for SPFx unit tests. | ||
- Unit tests included to demonstrate how spies, mocks can be used. | ||
- The use of Enzyme to speed up React unit test productivity. | ||
- The use of [SharePoint Patterns and Practices Reusable Client-side Libraries (PnP Js)](https://github.com/pnp/pnpjs). | ||
- Generating unit test code coverage reports for continious integreation tools such as VSTS | ||
- Generating unit test summary reports for continious integreation tools such as VSTS | ||
|
||
## Usefull links | ||
|
||
- [Jest](https://facebook.github.io/jest/) | ||
- [Jest cheatsheet](https://devhints.io/jest) | ||
- [Sinonjs](http://sinonjs.org/) | ||
- [Enzyme](http://airbnb.io/enzyme/) | ||
|
||
|
||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-jest-testing" /> | ||
|
||
|
Binary file added
BIN
+85.1 KB
samples/react-jest-testing/assets/Jest-Typescript-VSCode-debugging.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
{ | ||
"$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json", | ||
"version": "2.0", | ||
"bundles": { | ||
"ice-cream-shop-web-part": { | ||
"components": [ | ||
{ | ||
"entrypoint": "./lib/webparts/iceCreamShop/IceCreamShopWebPart.js", | ||
"manifest": "./src/webparts/iceCreamShop/IceCreamShopWebPart.manifest.json" | ||
} | ||
] | ||
} | ||
}, | ||
"externals": {}, | ||
"localizedResources": { | ||
"IceCreamShopWebPartStrings": "lib/webparts/iceCreamShop/loc/{locale}.js" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
"$schema": "https://dev.office.com/json-schemas/spfx-build/copy-assets.schema.json", | ||
"deployCdnPath": "temp/deploy" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
{ | ||
"$schema": "https://dev.office.com/json-schemas/spfx-build/deploy-azure-storage.schema.json", | ||
"workingDir": "./temp/deploy/", | ||
"account": "<!-- STORAGE ACCOUNT NAME -->", | ||
"container": "react-jest-testing", | ||
"accessKey": "<!-- ACCESS KEY -->" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
{ | ||
"$schema": "https://dev.office.com/json-schemas/spfx-build/package-solution.schema.json", | ||
"solution": { | ||
"name": "react-jest-testing-client-side-solution", | ||
"id": "9e16e13b-8d8c-4b89-8de4-dd654c5b6740", | ||
"version": "1.0.0.0", | ||
"includeClientSideAssets": true, | ||
"skipFeatureDeployment": true | ||
}, | ||
"paths": { | ||
"zippedPackage": "solution/react-jest-testing.sppkg" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
{ | ||
"$schema": "https://dev.office.com/json-schemas/core-build/serve.schema.json", | ||
"port": 4321, | ||
"https": true, | ||
"initialPage": "https://localhost:5432/workbench", | ||
"api": { | ||
"port": 5432, | ||
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
{ | ||
"$schema": "https://dev.office.com/json-schemas/core-build/tslint.schema.json", | ||
// Display errors as warnings | ||
"displayAsWarning": true, | ||
// The TSLint task may have been configured with several custom lint rules | ||
// before this config file is read (for example lint rules from the tslint-microsoft-contrib | ||
// project). If true, this flag will deactivate any of these rules. | ||
"removeExistingRules": true, | ||
// When true, the TSLint task is configured with some default TSLint "rules.": | ||
"useDefaultConfigAsBase": false, | ||
// Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules | ||
// which are active, other than the list of rules below. | ||
"lintConfig": { | ||
// Opt-in to Lint rules which help to eliminate bugs in JavaScript | ||
"rules": { | ||
"class-name": false, | ||
"export-name": false, | ||
"forin": false, | ||
"label-position": false, | ||
"member-access": true, | ||
"no-arg": false, | ||
"no-console": false, | ||
"no-construct": false, | ||
"no-duplicate-case": true, | ||
"no-duplicate-variable": true, | ||
"no-eval": false, | ||
"no-function-expression": true, | ||
"no-internal-module": true, | ||
"no-shadowed-variable": true, | ||
"no-switch-case-fall-through": true, | ||
"no-unnecessary-semicolons": true, | ||
"no-unused-expression": true, | ||
"no-use-before-declare": true, | ||
"no-with-statement": true, | ||
"semicolon": true, | ||
"trailing-comma": false, | ||
"typedef": false, | ||
"typedef-whitespace": false, | ||
"use-named-parameter": true, | ||
"valid-typeof": true, | ||
"variable-name": false, | ||
"whitespace": false | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
"$schema": "https://dev.office.com/json-schemas/spfx-build/write-manifests.schema.json", | ||
"cdnBasePath": "<!-- PATH TO CDN -->" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
'use strict'; | ||
|
||
const gulp = require('gulp'); | ||
const build = require('@microsoft/sp-build-web'); | ||
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`); | ||
|
||
build.initialize(gulp); |
Oops, something went wrong.