![– for the open minded
Creating Mocks
Mock files are located in:
/src/test/resources/[GET/POST/PUT/
DELETE]
The connect web server + a middleware to redirect
request to it.
Need to mock /info/me.json for GET request?
Simply add a file called me.json in
/src/test/resources/GET/info/me.json](https://image.slidesharecdn.com/bnlefgpqmkwkbwmmhfva-signature-c0714368f4d0458ee31ac44e728c007a5df637bd01aa1fc7fb27c8d1f03cec09-poli-150328034754-conversion-gate01/85/Opencast-Admin-UI-Tools-and-development-setup-26-320.jpg)
Opencast Admin UI - Tools and development setup
- 1. Admin UI Tools and development setup Xavier Butty Software Engineer for the open minded
- 2. First name, Last name Position for the open mindedfor the open minded How did we develop the new Admin UI? 01
- 3. – for the open minded Development process Design UI and API Integration API Backend implementation MocksFrontend implementation JS
- 4. First name, Last name Position for the open mindedfor the open minded 02 The right tools for the job
- 5. – for the open minded Code quality checker CSS extension / compiler Javascript framework Task runner Testing framework Lightweight http server - Mocks Test runner Minification Template pre-compilation Compress img
- 6. – for the open minded Code quality The checkstyle tool for Javascript Adaptable to code convention Much more flexible than JSLint JS Hint
- 7. – for the open minded Demo JSHint http://jshint.com/
- 8. – for the open minded CSS extension Enhance the stylesheet creation Reusable component Cascading Mixins LESS is currently used in the new Admin UI, but an update to SASS coming soon Better scalability Larger community More resources available
- 9. – for the open minded Demo Less http://less2css.org/
- 10. – for the open minded Javascript Framework Most popular javascript MVW framework actually Widely used Large community supporting it Powered by Google Lots of valuable resources available online Scalable Short introduction coming at 11h30
- 11. – for the open minded Testing frameworks Behaviour driven unit tests frameworks Most popular unit test solution for AngularJS ngMocks AngularJS Module provides mocking for the tests
- 12. – for the open minded Test runner Spawn a web server which loads your application's source code and executes your tests Highly configurable De facto test runner for AngularJS Existing Adapter for Jasmine
- 13. – for the open minded Lightweight HTTP server Connect Extensible HTTP server framework Used for development Allow to use middleware for mocking the REST endpoints. Livereload
- 14. – for the open minded Task runner Javascript Task runner working on Node.js Large choice of plugins for all the popular frontend tools The “Gruntfile” is what the “pom” is to Maven GRUNT
- 15. First name, Last name Position for the open mindedfor the open minded 03 Automate the tasks
- 16. – for the open minded What has to be automated? Refresh page Run unit tests Check code quality Start web server Compile CSS Copy source to web server Copy sources to target folder When developing? When building?
- 17. – for the open minded Creating profiles JSHint Code quality CSS compilation Development profile Copy src to WEBAPP Build profile Create/Clean WEBAPP folder Webserver WatchJS JSHint Code quality Copy src to WEBAPP WatchCSS Karma: unit tests CSS compilation Copy src to WEBAPP CSS compilation JSHint Code quality Karma: unit tests Copy to target folder with skipTests option
- 18. – for the open minded Integration in Maven pom.xml Install Dependancies Run build profile
- 19. First name, Last name Position for the open mindedfor the open minded Setup 04
- 20. – for the open minded Module files structure Web app sources Tests sources + Mock files Grunt profiles Grunt dependancies
- 21. – for the open minded Web app files structure Components used in different context Components related to specific pages
- 22. – for the open minded Tools configuration JSHint Convention > jshint.json Grunt Profiles > Gruntfile.js Dependancies > package.json Karma Configuration > src/tests/resources/karma.conf.js
- 23. First name, Last name Position for the open mindedfor the open minded 05 Some practice
- 24. – for the open minded Prerequisites Only Grunt… that itself requires: > Node.js and its package manager npm > Install project dependencies: cd $MATTERHORN_HOME/modules/matterhorn-admin-ui-ng/ npm install > Ready!
- 25. – for the open minded Let’s run it Css compilation Code qualityJSHint Copy Web server Test runner Unit tests
- 26. – for the open minded Creating Mocks Mock files are located in: /src/test/resources/[GET/POST/PUT/ DELETE] The connect web server + a middleware to redirect request to it. Need to mock /info/me.json for GET request? Simply add a file called me.json in /src/test/resources/GET/info/me.json
- 27. First name, Last name Position for the open mindedfor the open minded 06 Next steps
- 28. – for the open minded What’s next e2e tests with Protractor Compilation of the whole as an AngularJS app use Bower for Javascript dependencies Define Javascript convention for the community
- 29. thanks for you attention Xavier Butty Software Engineer for the open minded Questions? http://entwinemedia.com @entwinemedia