Difference between revisions of "7CC005 Workshop w6"

From mi-linux
Jump to navigationJump to search
 
(20 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Main Page]] >> [[7CC005|Web Technologies]] >> [[7CC005_-_Workbook|Workbook]] >> Week 07 - 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 ==
 +
[https://jestjs.io/ Jest] is a delightful JavaScript Testing Framework with a focus on simplicity.
  
The main Angular testing guide is located here:
+
You can follow the Testing React Apps tutorial, here:
* [https://angular.io/docs/ts/latest/guide/testing.html https://angular.io/docs/ts/latest/guide/testing.html]
+
https://jestjs.io/docs/tutorial-react
  
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.
+
== Testing your REST API with Postman ==
  
== Adding PhantomJS into the mix ==
+
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]
  
This is how to get the QuickStart project to work with Karma and PhantomJS.
+
== Going further ==
  
=== Clone the repository ===
+
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]
First you need to get the quickstart project:
 
 
 
<pre>
 
$ git clone https://github.com/angular/quickstart.git
 
$ cd quickstart
 
</pre>
 
 
 
'''Important:''' Obviously don't do this again if you already have it.
 
 
 
=== Install phantomjs and phantomjs launcher ===
 
 
 
<pre>
 
$ npm install --save-dev phantomjs
 
$ npm install --save-dev karma-phantomjs-launcher
 
</pre>
 
 
 
=== Change karma.conf.js ===
 
 
 
<pre>
 
// First change
 
require('karma-chrome-launcher') => require('karma-phantomjs-launcher')
 
 
 
// Second change
 
browsers: ['Chrome'] => browsers: ['PhantomJS']
 
</pre>
 
 
 
=== Install Quickstart App ===
 
$ npm install
 
 
 
=== Run tests ===
 
$ npm test
 
 
 
=== 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:
 
 
 
<pre>
 
files: [
 
  // System.js for module loading
 
  'node_modules/systemjs/dist/system.src.js',
 
  'node_modules/systemjs/dist/system-polyfills.js',
 
</pre>
 

Latest revision as of 11:37, 10 January 2025

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

Testing with React.js

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

You can follow the Testing React Apps tutorial, here: https://jestjs.io/docs/tutorial-react

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. 💡