Lessons Learned with Grunt and Jasmine

My deck from Tamedia:TX

Transcript

1. top-tips learned the hard way with grunt and jasmine (and not selenium) Automating the client-side
5. ALF - א
7. Build-First Architecture
8. grunt jasmine selenium
9. … because
11. marvin accidentally concatenated a string with a number
16. pay your (technical) debts
17. smaller is usually better
18. always roll your own
19. Gruntfile.js module.exports = function(grunt) { 'use strict'; require('./configs/local_options.js').addLocalOptions(grunt); var build_files = grunt.file.readJSON('configs/build_file_list.json'); grunt.config.set('build_files_list', build_files.files); grunt.loadTasks('grunt-tasks'); };
20. module.exports.addLocalOptions = function (grunt){ grunt.config.init({ options: { workingDirectory: 'build', sourceDirectory: 'src', serverDirectory: '/Library/WebServer/Documents/webapp' } }); } local_options.js
21. { "files": [ "twenty.js", "env.js", “data_model.js", "page_mixins.js", "page.js", "components.js", "ads.js", “app.js" ] } build_file_list.json
22. file structure
23. module.exports = function(grunt) { grunt.config('react', { files: { expand: true, cwd: '<%= options.workingDirectory %>/jsx', src: ['components.jsx'], dest: '<%= options.workingDirectory %>/js', ext: '.js' } }); grunt.loadNpmTasks('grunt-react'); }; grunt-configs/react.js
24. module.exports = function(grunt) { grunt.registerTask('tc', 'testComponent: grunt tc --cx=myComponent', function() { var compo = grunt.option('cx'); if(compo) { grunt.config.set('component', compo); } else { grunt.log.writeln("no component specified. This might not work as you were hoping"); grunt.log.writeln("try again like this: grunt tc --cx=myComponent"); return false; } grunt.task.run('testComponent'); }); }; grunt-configs/alias_tasks.js
25. module.exports = function(grunt) { grunt.registerTask('copyComponentFeed','get the right feed', function() { grunt.config.requires('options.workingDirectory'); var fs = require('fs'), sourcefile = 'src/components/' + grunt.config('component') + '/stub.json', wd = grunt.config.get('options.serverDirectory'), destination = wd + '/feed/component.json'; fs.writeFileSync(destination, fs.readFileSync(sourcefile)); }); }; grunt-configs/alias_tasks.js
27. 1. describe("Twenty ", function() { 2. it("exists as a global object", function() { 3. expect(Twenty).toEqual(jasmine.any(Object)); 4. }); 5. describe("Twenty.core", function() { 6. it("exists", function() { 7. expect(Twenty.core).toEqual(jasmine.any(Object)); 8. }); 9. )}; 10.}); jasmine’s three main functions
28. matchers. collect ‘em all .toBe() .toEqual() .toMatch() .toBeDefined() .toBeUndefined() .toBeNull() .toBeTruthy() .toBeFalsy() .toContain() .toBeLessThan() .toBeGreaterThan() .toBeNaN() .toBeCloseTo() .toThrow() x2 .not
29. best-ish practices • don’t comment out tests - delete them • check them in to git • test the interface. Don’t get hung up on every path through the application. • try to make your code better through testing
30. file structure
31. lovely lovely passing tests
32. but
33. thank you (questions?) dev.20min.ch