125 lines
1.4 KiB
ReStructuredText
125 lines
1.4 KiB
ReStructuredText
|
Automated JavaScript Testing
|
||
|
============================
|
||
|
|
||
|
Disclaimer:
|
||
|
|
||
|
!I'm not a Frontend Developer!
|
||
|
|
||
|
Topics:
|
||
|
|
||
|
* Why
|
||
|
|
||
|
* How
|
||
|
|
||
|
* Our Setup
|
||
|
|
||
|
* Before / after
|
||
|
|
||
|
* The testing framework
|
||
|
|
||
|
* Hands on
|
||
|
|
||
|
* Some further info
|
||
|
|
||
|
~~~~
|
||
|
|
||
|
Why
|
||
|
---
|
||
|
|
||
|
1. Manual testing is boring
|
||
|
|
||
|
2. Manual testing is taking to much time
|
||
|
|
||
|
3. Manual testing will not test all features
|
||
|
|
||
|
4. …
|
||
|
|
||
|
~~~~
|
||
|
|
||
|
How
|
||
|
---
|
||
|
|
||
|
How do we automated JavaScript testing?
|
||
|
|
||
|
This is not about:
|
||
|
|
||
|
* Frontend tests
|
||
|
|
||
|
* Acceptance tests
|
||
|
|
||
|
This is about:
|
||
|
|
||
|
* Unit testing
|
||
|
|
||
|
* Functional testing
|
||
|
|
||
|
~~~~
|
||
|
|
||
|
How - Our Setup
|
||
|
^^^^^^^^^^^^^^^
|
||
|
|
||
|
Yarn
|
||
|
As package manager (instead of npm)
|
||
|
|
||
|
TypeScript
|
||
|
As pre compiler
|
||
|
|
||
|
Allows to have strict types and autocompletion
|
||
|
|
||
|
Gulp
|
||
|
As task runner to compile and lint
|
||
|
|
||
|
Jest
|
||
|
As testing framework
|
||
|
|
||
|
Substitute
|
||
|
As mocking library
|
||
|
|
||
|
~~~~
|
||
|
|
||
|
How - Before / after
|
||
|
^^^^^^^^^^^^^^^^^^^^
|
||
|
|
||
|
Before
|
||
|
Like most FE projects:
|
||
|
* jQuery
|
||
|
|
||
|
* spaghetti code
|
||
|
|
||
|
* dead code
|
||
|
|
||
|
After
|
||
|
TDD developed object oriented modularized code base
|
||
|
|
||
|
~~~~
|
||
|
|
||
|
Hands on
|
||
|
--------
|
||
|
|
||
|
1. Execute tests
|
||
|
|
||
|
2. Test coverage
|
||
|
|
||
|
3. Deeper look at code base
|
||
|
|
||
|
Example: Resources/Private/TypeScript/Src/Libs/Options.ts
|
||
|
|
||
|
4. Deeper look at test base
|
||
|
|
||
|
Example: Resources/Private/TypeScript/Tests/Libs/Options.test.ts
|
||
|
|
||
|
5. Execute tests:
|
||
|
|
||
|
yarn run test
|
||
|
|
||
|
yarn run test-verbose
|
||
|
|
||
|
yarn run test-coverage
|
||
|
|
||
|
~~~~
|
||
|
|
||
|
Thanks
|
||
|
------
|
||
|
|
||
|
Thank you ♥
|