dot net notts js unit testing at microlise
TRANSCRIPT
![Page 2: Dot Net Notts Js Unit Testing at Microlise](https://reader034.vdocuments.net/reader034/viewer/2022042522/55a2a9ce1a28ab09798b4831/html5/thumbnails/2.jpg)
Introduction
• Jon Gregory Technical Architect at Microlise, have been working with .Net since 2.0
• Microlise supply vehicle tracking, telematics and proof of delivery solutions.
• Our approach to adopting JS Unit Testing
![Page 3: Dot Net Notts Js Unit Testing at Microlise](https://reader034.vdocuments.net/reader034/viewer/2022042522/55a2a9ce1a28ab09798b4831/html5/thumbnails/3.jpg)
Drivers
• Two Large Web Forms / MVC Hybrid Applications
• Organically grown JavaScript
• Unstructured large JavaScript files
• Increasing use of front end logic
• UX team using bootstrap based UI framework
![Page 4: Dot Net Notts Js Unit Testing at Microlise](https://reader034.vdocuments.net/reader034/viewer/2022042522/55a2a9ce1a28ab09798b4831/html5/thumbnails/4.jpg)
State of JavaScript
![Page 5: Dot Net Notts Js Unit Testing at Microlise](https://reader034.vdocuments.net/reader034/viewer/2022042522/55a2a9ce1a28ab09798b4831/html5/thumbnails/5.jpg)
State of JavaScript
• In-line JavaScript
• Difficult to read unstructured files
• Multiple JQuery versions
• JQuery selectors binding to the view
• Ball of wool design pattern!
![Page 6: Dot Net Notts Js Unit Testing at Microlise](https://reader034.vdocuments.net/reader034/viewer/2022042522/55a2a9ce1a28ab09798b4831/html5/thumbnails/6.jpg)
Unit Testing
![Page 7: Dot Net Notts Js Unit Testing at Microlise](https://reader034.vdocuments.net/reader034/viewer/2022042522/55a2a9ce1a28ab09798b4831/html5/thumbnails/7.jpg)
Unit Testing
• Invested heavily in C# Unit Testing
• Benefits in good design & confidence in code
• We wanted the same for JavaScript!
![Page 8: Dot Net Notts Js Unit Testing at Microlise](https://reader034.vdocuments.net/reader034/viewer/2022042522/55a2a9ce1a28ab09798b4831/html5/thumbnails/8.jpg)
Challenges
• Perception it wouldn't add value
• Wasn't clear what could be tested
• We hadn't looked at what was possible
• Visual Studio didn't provide the tools
![Page 9: Dot Net Notts Js Unit Testing at Microlise](https://reader034.vdocuments.net/reader034/viewer/2022042522/55a2a9ce1a28ab09798b4831/html5/thumbnails/9.jpg)
C# => JS
Friction Free
![Page 10: Dot Net Notts Js Unit Testing at Microlise](https://reader034.vdocuments.net/reader034/viewer/2022042522/55a2a9ce1a28ab09798b4831/html5/thumbnails/10.jpg)
Real World
![Page 11: Dot Net Notts Js Unit Testing at Microlise](https://reader034.vdocuments.net/reader034/viewer/2022042522/55a2a9ce1a28ab09798b4831/html5/thumbnails/11.jpg)
Evaluation
![Page 12: Dot Net Notts Js Unit Testing at Microlise](https://reader034.vdocuments.net/reader034/viewer/2022042522/55a2a9ce1a28ab09798b4831/html5/thumbnails/12.jpg)
Evaluation
• Many tools available
• Community recommended top three
• QUnit, Jasmine and Mocha
• QUnit and Mocha need a mocking framework
![Page 13: Dot Net Notts Js Unit Testing at Microlise](https://reader034.vdocuments.net/reader034/viewer/2022042522/55a2a9ce1a28ab09798b4831/html5/thumbnails/13.jpg)
Test Runner
• Needed to be able to run the tests!
• ReSharper plugin available for Mocha but requires NodeJS
• Chutzpah easier and free Visual Studio plugin
• Chose to look at running in Node as a Phase 2
![Page 14: Dot Net Notts Js Unit Testing at Microlise](https://reader034.vdocuments.net/reader034/viewer/2022042522/55a2a9ce1a28ab09798b4831/html5/thumbnails/14.jpg)
Approach
• File structure convention
• Mocha Controller added to MVC Applications
• Static HTML
• Training and sample applications
• Visual Studio / Resharper Templates
![Page 15: Dot Net Notts Js Unit Testing at Microlise](https://reader034.vdocuments.net/reader034/viewer/2022042522/55a2a9ce1a28ab09798b4831/html5/thumbnails/15.jpg)
File Structure - MVC
/Tests--/app----/ControllerName------/ViewName--------TestFileOne.Tests.js
![Page 16: Dot Net Notts Js Unit Testing at Microlise](https://reader034.vdocuments.net/reader034/viewer/2022042522/55a2a9ce1a28ab09798b4831/html5/thumbnails/16.jpg)
File Structure - Logic
/Scripts--/app----/Maths------Calculator.js
/Tests--/app----/Maths------Calculator.Test.js
![Page 17: Dot Net Notts Js Unit Testing at Microlise](https://reader034.vdocuments.net/reader034/viewer/2022042522/55a2a9ce1a28ab09798b4831/html5/thumbnails/17.jpg)
Code Demo
![Page 18: Dot Net Notts Js Unit Testing at Microlise](https://reader034.vdocuments.net/reader034/viewer/2022042522/55a2a9ce1a28ab09798b4831/html5/thumbnails/18.jpg)
Future
![Page 19: Dot Net Notts Js Unit Testing at Microlise](https://reader034.vdocuments.net/reader034/viewer/2022042522/55a2a9ce1a28ab09798b4831/html5/thumbnails/19.jpg)
Future● Looking at ways of adding into out continuous integration & inspection process
● Work to improve JavaScript coding techniques and writing structured JavaScript
● NCrunch Style continuous runner.
● Continuing to promote and train to increase uptake
![Page 20: Dot Net Notts Js Unit Testing at Microlise](https://reader034.vdocuments.net/reader034/viewer/2022042522/55a2a9ce1a28ab09798b4831/html5/thumbnails/20.jpg)
Useful Links● https://www.syncfusion.com/resources/techportal/ebooks/javascript
● http://www.sonarqube.org/
● PluralSight – Testing ClientSide JavaScript
● Gil Fink – MSDN – Jasmine Talks
![Page 21: Dot Net Notts Js Unit Testing at Microlise](https://reader034.vdocuments.net/reader034/viewer/2022042522/55a2a9ce1a28ab09798b4831/html5/thumbnails/21.jpg)
Questions ?