Difference between revisions of "7CC005 Workshop w6"

From mi-linux
Jump to navigationJump to search
 
(5 intermediate revisions by one other user not shown)
Line 1: Line 1:
 
[[Main Page]] >> [[7CC005|Web Technologies]] >> [[7CC005_-_Workbook|Workbook]] >> Week 06 - Automated Web Testing
 
[[Main Page]] >> [[7CC005|Web Technologies]] >> [[7CC005_-_Workbook|Workbook]] >> Week 06 - Automated Web Testing
  
== Official Google Angular testing guide ==
+
== Testing with React.js ==
 +
You can test React components similar to testing other JavaScript code.
 +
* [https://reactjs.org/docs/testing.html Testing Overview]
  
The main Angular testing guide is located here:
+
===Recommended Tools===
* [https://angular.io/docs/ts/latest/guide/testing.html https://angular.io/docs/ts/latest/guide/testing.html]
+
Jest is a JavaScript test runner that lets you access the DOM via jsdom. While jsdom is only an approximation of how the browser works, it is often good enough for testing React components. Jest provides a great iteration speed combined with powerful features like mocking modules and timers so you can have more control over how the code executes.
  
You should probably read up to "Test a component with an async service". Please note that there are links to all live working examples near the beginning of the tutorial.
+
React Testing Library is a set of helpers that let you test React components without relying on their implementation details. This approach makes refactoring a breeze and also nudges you towards best practices for accessibility. Although it doesn’t provide a way to “shallowly” render a component without its children, a test runner like Jest lets you do this by mocking.
  
== Adding PhantomJS into the mix ==
+
== Testing your REST API with Postman ==
  
This is how to get the QuickStart/testing project to work with Karma and PhantomJS.
+
You can send requests in Postman to connect to APIs you are working with. Your requests can retrieve, add, delete, and update data. Whether you are building or testing your own API, or integrating with a third-party API, you can try out your requests in Postman. Your requests can send parameters, authorization details, and any body data you require.
 +
* [https://www.postman.com/ https://www.postman.com/]
 +
* [https://learning.postman.com/docs/sending-requests/requests/ Building requests]
 +
* [https://learning.postman.com/docs/writing-scripts/test-scripts/ Write API test scripts in Postman]
  
=== Set a project up ===
+
== Going further ==
  
Either clone a fresh Quickstart project:
+
In this tutorial, we will set up a small project with automated visual tests using Puppeteer, Jest and VisWiz.io. 💡
 
+
* [https://www.viswiz.io/help/tutorials/puppeteer Visual Regression Testing with Puppeteer & Jest]
<pre>
 
$ git clone https://github.com/angular/quickstart.git
 
$ cd quickstart
 
</pre>
 
 
 
Or grab a copy of the testing project with all associated test cases:
 
* [https://angular.io/resources/zips/testing/app-specs.testing.zip https://angular.io/resources/zips/testing/app-specs.testing.zip]
 
 
 
You will need to unzip the above and upload via FTP to your public_html folder on mi-linux.
 
 
 
=== Install phantomjs and phantomjs launcher ===
 
 
 
First, you need to install PhantomJS, using a couple of npm commands:
 
 
 
<pre>
 
$ npm install --save-dev phantomjs
 
$ npm install --save-dev karma-phantomjs-launcher
 
</pre>
 
 
 
=== Change karma.conf.js ===
 
 
 
Once PhantomJS is installed, you need to tell Karma (the test runner) to use PhantomJS instead of Chrome (the default browser in the config file karma.conf.js):
 
 
 
<pre>
 
// First change
 
// require('karma-chrome-launcher')
 
require('karma-phantomjs-launcher')
 
 
 
// Second change
 
//browsers: ['Chrome']
 
browsers: ['PhantomJS']
 
</pre>
 
 
 
=== Install App ===
 
Then you need to install the app (as cloned/downloaded in step 1) by running the usual command:
 
 
 
<pre>
 
$ npm install
 
</pre>
 
 
 
'''Important:''' again, you don't need to do this if your app is already up and running.
 
 
 
=== Run tests ===
 
And to run your tests, type this instead of "npm start":
 
 
 
<pre>
 
$ npm test
 
</pre>
 
 
 
=== TypeError: undefined is not a function error ===
 
 
 
If you get this error:
 
 
 
<pre>
 
PhantomJS 2.1.1 (Linux 0.0.0) ERROR
 
TypeError: undefined is not a function (evaluating 'System.config')
 
at karma-test-shim.js:30
 
</pre>
 
 
 
Append '''system-polyfills.js''' to karma.conf.js, here:
 
 
 
<pre>
 
files: [
 
  // System.js for module loading
 
  'node_modules/systemjs/dist/system.src.js',
 
  'node_modules/systemjs/dist/system-polyfills.js',
 
</pre>
 
 
 
=== Web server 404 errors ===
 
 
 
If you get this error:
 
 
 
<pre>
 
[1] 06 03 2017 14:57:03.905:WARN [web-server]: 404: /base/src/app/1st.spec.js.ts
 
[1] 06 03 2017 14:57:03.907:WARN [web-server]: 404: /base/src/app/app.component.spec.js.ts
 
</pre>
 
 
 
Notice that the "base" folder shouldn't be there, as we haven't got it in our set-up.
 
 
 
You can remove it in the '''karma-test-shim.js''' file, here:
 
 
 
<pre>
 
// builtPaths: root paths for output ("built") files
 
// get from karma.config.js, then prefix with '/base/' (default is 'src/')
 
var builtPaths = (__karma__.config.builtPaths || ['src/'])
 
                //.map(function(p) { return '/base/'+p;});
 
                .map(function(p) { return '/'+p;});
 
</pre>
 
 
 
See bottom line.
 

Latest revision as of 11:36, 17 January 2024

Main Page >> Web Technologies >> Workbook >> Week 06 - Automated Web Testing

Testing with React.js

You can test React components similar to testing other JavaScript code.

Recommended Tools

Jest is a JavaScript test runner that lets you access the DOM via jsdom. While jsdom is only an approximation of how the browser works, it is often good enough for testing React components. Jest provides a great iteration speed combined with powerful features like mocking modules and timers so you can have more control over how the code executes.

React Testing Library is a set of helpers that let you test React components without relying on their implementation details. This approach makes refactoring a breeze and also nudges you towards best practices for accessibility. Although it doesn’t provide a way to “shallowly” render a component without its children, a test runner like Jest lets you do this by mocking.

Testing your REST API with Postman

You can send requests in Postman to connect to APIs you are working with. Your requests can retrieve, add, delete, and update data. Whether you are building or testing your own API, or integrating with a third-party API, you can try out your requests in Postman. Your requests can send parameters, authorization details, and any body data you require.

Going further

In this tutorial, we will set up a small project with automated visual tests using Puppeteer, Jest and VisWiz.io. 💡