|
|
| 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 == |
| | + | * [https://reactjs.org/docs/testing.html Testing Overview] |
| | | | |
| − | The main Angular testing guide is located here:
| + | == Testing your REST API with Postman == |
| − | * [https://angular.io/docs/ts/latest/guide/testing.html https://angular.io/docs/ts/latest/guide/testing.html] | + | * [https://www.postman.com/ https://www.postman.com/] |
| | | | |
| − | 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.
| + | == Going further == |
| − | | + | * [https://www.viswiz.io/help/tutorials/puppeteer Visual Regression Testing with Puppeteer & Jest] |
| − | == Adding PhantomJS into the mix == | |
| − | | |
| − | This is how to get the QuickStart/testing project to work with Karma and PhantomJS.
| |
| − | | |
| − | === Set a project up ===
| |
| − | | |
| − | Either clone a fresh Quickstart project:
| |
| − | | |
| − | <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.
| |
