Giter Club home page Giter Club logo

spfx-testing-wp's Introduction

SPFx sample project with some predefined unit tests

This is a sample project which contains some predefined React component unit tests. In the project, you find a standard SPFx web part with one addition that it shows a list based on an async call (makes use of the MockHttpClient).

Web part render

The project contains the following tests:

  • Check if the component contains a paragraph
  • Check if the component renders the specified description
  • Check if the component contains a list element
  • Check if the results state is null. This should be the case on first load.
  • Check if the componentDidMount method gets called
  • Check if the component has rendered three items in the list. These items are coming from the MockHttpClient.
  • Check in which the component state gets updated from the test itself and checking if the right number of items are rendered in the list.

When you run the tests, the result should look like this:

Test results

Extra dependencies

As this is a test sample for testing React components, I made use of the following extra testing dependencies:

  • enzyme
  • enzyme-adapter-react-15
  • react-test-renderer
  • react-addons-test-utils

These dependencies are also specified in the package.json file. So, once you run npm install they will automatically get downloaded.

HelloWorld.test.ts file extension change to TSX (JSX templating enabled)

The file extension of the default HelloWorld.test.ts, which comes with the SPFx yeoman generator, is changed to TSX so that the JSX templating syntax is available. This change is necessary to mount components with enzyme. Example: renderedElement = mount(<HelloWorld description={descTxt} />);

How to use it?

  • Clone this repo
  • Run npm install
  • Run gulp test

spfx-testing-wp's People

Contributors

estruyf avatar velingeorgiev avatar

Stargazers

avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar

Forkers

mistatwist velingeorgiev gbminnock iomegak12 olaekdahl

spfx-testing-wp's Issues

How to generate code coverage

How do we generate code coverage?
When we run the command 'gulp test', in console it says ‘writing to [dir]/temp/coverage/js’ but as such no reports get generated , the coverage folder under temp has index.html but when opened shows no data.

ERROR [launcher]: PhantomJS failed 2 times (timeout). Giving up.

Hi Elio,

I've downloaded this repo and ran gulp test but am receiving errors. Am not sure how to get around this?
Thanks,
Gary

c:\Users\user\Downloads\spfx-testing-wp-master>gulp test
Build target: DEBUG
[17:14:01] Using gulpfile c:\Users\user\Downloads\spfx-testing-wp-master\gulpfile.js
[17:14:01] Starting gulp
[17:14:01] Starting 'test'...
[17:14:01] Starting subtask 'configure-sp-build-rig'...
[17:14:01] Finished subtask 'configure-sp-build-rig' after 7.65 ms
[17:14:01] Starting subtask 'pre-copy'...
[17:14:01] Finished subtask 'pre-copy' after 17 ms
[17:14:01] Starting subtask 'copy-static-assets'...
[17:14:01] Starting subtask 'sass'...
[17:14:02] Finished subtask 'copy-static-assets' after 1.08 s
[17:14:02] Finished subtask 'sass' after 1.07 s
[17:14:02] Starting subtask 'tslint'...
[17:14:03] Starting subtask 'typescript'...
[17:14:03] [typescript] TypeScript version: 2.4.2
Warning: no-duplicate-case rule is deprecated. Replace your usage with the TSLint no-duplicate-switch-case rule.
Warning: valid-typeof rule is deprecated. Replace your usage with the TSLint typeof-compare rule.
[17:14:05] Warning - tslint - src\webparts\helloWorld\tests\HelloWorld.test.tsx(31,9): error no-unused-expression: unused expression, expected an assignment or function call
[17:14:05] Warning - tslint - src\webparts\helloWorld\tests\HelloWorld.test.tsx(39,9): error no-unused-expression: unused expression, expected an assignment or function call
[17:14:05] Warning - tslint - src\webparts\helloWorld\tests\HelloWorld.test.tsx(43,9): error no-unused-expression: unused expression, expected an assignment or function call
[17:14:05] Warning - tslint - src\webparts\helloWorld\tests\HelloWorld.test.tsx(61,13): error no-unused-expression: unused expression, expected an assignment or function call
[17:14:05] Warning - tslint - src\webparts\helloWorld\tests\HelloWorld.test.tsx(85,9): error no-unused-expression: unused expression, expected an assignment or function call
[17:14:05] Finished subtask 'tslint' after 3.63 s
[17:14:05] Finished subtask 'typescript' after 2.57 s
[17:14:05] Starting subtask 'ts-npm-lint'...
[17:14:05] Finished subtask 'ts-npm-lint' after 39 ms
[17:14:05] Starting subtask 'api-extractor'...
[17:14:05] Finished subtask 'api-extractor' after 1.18 ms
[17:14:05] Starting subtask 'post-copy'...
[17:14:05] Finished subtask 'post-copy' after 906 μs
[17:14:05] Starting subtask 'collectLocalizedResources'...
[17:14:05] Finished subtask 'collectLocalizedResources' after 5.55 ms
[17:14:05] Starting subtask 'configure-webpack'...
[17:14:06] Finished subtask 'configure-webpack' after 891 ms
[17:14:06] Starting subtask 'webpack'...
(node:10168) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
[17:14:07] Finished subtask 'webpack' after 947 ms
[17:14:07] Starting subtask 'configure-webpack-external-bundling'...
[17:14:07] Finished subtask 'configure-webpack-external-bundling' after 1.35 ms
[17:14:07] Starting subtask 'copy-assets'...
[17:14:07] Finished subtask 'copy-assets' after 13 ms
[17:14:07] Starting subtask 'write-manifests'...
[17:14:08] Finished subtask 'write-manifests' after 942 ms
[17:14:08] Starting subtask 'casperjs-tests'...
[17:14:08] Starting subtask 'karma'...
24 05 2018 17:14:10.299:DEBUG [plugin]: Loading inlined plugin (defining webpackPlugin, preprocessor:webpack, middleware:webpackBlocker).
24 05 2018 17:14:10.299:DEBUG [plugin]: Loading inlined plugin (defining framework:mocha).
24 05 2018 17:14:10.299:DEBUG [plugin]: Loading inlined plugin (defining preprocessor:coverage, reporter:coverage).
24 05 2018 17:14:10.299:DEBUG [plugin]: Loading inlined plugin (defining reporter:mocha-clean).
24 05 2018 17:14:10.299:DEBUG [plugin]: Loading inlined plugin (defining launcher:PhantomJS).
24 05 2018 17:14:10.299:DEBUG [plugin]: Loading inlined plugin (defining framework:sinon-chai).
24 05 2018 17:14:10.299:DEBUG [plugin]: Loading inlined plugin (defining reporter:test-result).
[17:14:10] [casperjs-tests] No casperJS tests found
[17:14:10] Finished subtask 'casperjs-tests' after 1.66 s
24 05 2018 17:14:12.902:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
24 05 2018 17:14:12.921:INFO [launcher]: Starting browser PhantomJS
24 05 2018 17:14:12.922:DEBUG [temp-dir]: Creating temp dir at C:\Users\user\AppData\Local\Temp\karma-8083639
24 05 2018 17:14:12.927:DEBUG [launcher]: C:\Development\SPFX\SPFx\UnitTest\node_modules\phantomjs-prebuilt\lib\phantom\bin\phantomjs.exe C:\Users\user\AppData\Local\Temp\karma-8083639/capture.js
24 05 2018 17:14:15.525:DEBUG [web-server]: serving: c:\Users\user\Downloads\spfx-testing-wp-master\node_modules\karma\static/client.html
24 05 2018 17:14:15.525:DEBUG [web-server]: serving: c:\Users\user\Downloads\spfx-testing-wp-master\node_modules\karma\static/karma.js
24 05 2018 17:14:15.588:DEBUG [karma]: A browser has connected on socket 8QcnkX7F-sP6neq4AAAA
24 05 2018 17:14:22.925:WARN [launcher]: PhantomJS have not captured in 10000 ms, killing.
24 05 2018 17:14:22.986:DEBUG [launcher]: Process PhantomJS exited with code 0
24 05 2018 17:14:22.987:DEBUG [temp-dir]: Cleaning temp dir C:\Users\user\AppData\Local\Temp\karma-8083639
24 05 2018 17:14:22.994:INFO [launcher]: Trying to start PhantomJS again (1/2).
24 05 2018 17:14:22.995:DEBUG [launcher]: Restarting PhantomJS
24 05 2018 17:14:22.995:DEBUG [temp-dir]: Creating temp dir at C:\Users\user\AppData\Local\Temp\karma-8083639
24 05 2018 17:14:22.999:DEBUG [launcher]: C:\Development\SPFX\SPFx\UnitTest\node_modules\phantomjs-prebuilt\lib\phantom\bin\phantomjs.exe C:\Users\user\AppData\Local\Temp\karma-8083639/capture.js C:\Users\user\AppData\Local\Temp\karma-8083639/capture.js
24 05 2018 17:14:25.020:DEBUG [web-server]: serving (cached): c:\Users\user\Downloads\spfx-testing-wp-master\node_modules\karma\static/client.html
24 05 2018 17:14:25.063:DEBUG [web-server]: serving (cached): c:\Users\user\Downloads\spfx-testing-wp-master\node_modules\karma\static/karma.js
24 05 2018 17:14:25.113:DEBUG [karma]: A browser has connected on socket Rs3aAYsTdekzYoa5AAAB
24 05 2018 17:14:32.996:WARN [launcher]: PhantomJS have not captured in 10000 ms, killing.
24 05 2018 17:14:33.016:DEBUG [launcher]: Process PhantomJS exited with code 0
24 05 2018 17:14:33.017:DEBUG [temp-dir]: Cleaning temp dir C:\Users\user\AppData\Local\Temp\karma-8083639
24 05 2018 17:14:33.023:INFO [launcher]: Trying to start PhantomJS again (2/2).
24 05 2018 17:14:33.023:DEBUG [launcher]: Restarting PhantomJS
24 05 2018 17:14:33.024:DEBUG [temp-dir]: Creating temp dir at C:\Users\user\AppData\Local\Temp\karma-8083639
24 05 2018 17:14:33.030:DEBUG [launcher]: C:\Development\SPFX\SPFx\UnitTest\node_modules\phantomjs-prebuilt\lib\phantom\bin\phantomjs.exe C:\Users\user\AppData\Local\Temp\karma-8083639/capture.js C:\Users\user\AppData\Local\Temp\karma-8083639/capture.js C:\Users\user\AppData\Local\Temp\karma-8083639/capture.js
24 05 2018 17:14:35.109:DEBUG [web-server]: serving (cached): c:\Users\user\Downloads\spfx-testing-wp-master\node_modules\karma\static/client.html
24 05 2018 17:14:35.135:DEBUG [web-server]: serving (cached): c:\Users\user\Downloads\spfx-testing-wp-master\node_modules\karma\static/karma.js
24 05 2018 17:14:35.187:DEBUG [karma]: A browser has connected on socket -BvmIZIAL3-OJCLtAAAC
24 05 2018 17:14:43.030:WARN [launcher]: PhantomJS have not captured in 10000 ms, killing.
24 05 2018 17:14:43.065:DEBUG [launcher]: Process PhantomJS exited with code 0
24 05 2018 17:14:43.066:DEBUG [temp-dir]: Cleaning temp dir C:\Users\user\AppData\Local\Temp\karma-8083639
24 05 2018 17:14:43.071:ERROR [launcher]: PhantomJS failed 2 times (timeout). Giving up.

Finished in 0 secs / 0 secs

24 05 2018 17:14:43.074:DEBUG [karma]: Run complete, exiting.
24 05 2018 17:14:43.075:DEBUG [launcher]: Disconnecting all browsers
[17:14:43] Warning - [karma] Error(s) occured during karma.
[17:14:43] Finished subtask 'karma' after 34 s
[17:14:43] Finished 'test' after 42 s
[17:14:43] ==================[ Finished ]==================
Warning - tslint - src/webparts/helloWorld/tests/HelloWorld.test.tsx(31,9): error no-unused-expression: unused expression, expected an assignment or function call
Warning - tslint - src/webparts/helloWorld/tests/HelloWorld.test.tsx(39,9): error no-unused-expression: unused expression, expected an assignment or function call
Warning - tslint - src/webparts/helloWorld/tests/HelloWorld.test.tsx(43,9): error no-unused-expression: unused expression, expected an assignment or function call
Warning - tslint - src/webparts/helloWorld/tests/HelloWorld.test.tsx(61,13): error no-unused-expression: unused expression, expected an assignment or function call
Warning - tslint - src/webparts/helloWorld/tests/HelloWorld.test.tsx(85,9): error no-unused-expression: unused expression, expected an assignment or function call
Warning - [karma] Error(s) occured during karma.
[17:14:44] Project testing version: 0.0.1
[17:14:44] Build tools version: 3.0.5
[17:14:44] Node version: v6.11.2
[17:14:44] Total duration: 46 s
[17:14:44] Task warnings: 6

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.