Drupal8 Front-end Automated Testing

1,049 views
881 views

Published on

Slides from my session at Drupalcamp Spain 2013 about Front-end Automated Testing in Drupal8.

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,049
On SlideShare
0
From Embeds
0
Number of Embeds
84
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Drupal8 Front-end Automated Testing

  1. 1. Front-end Automated Testing #drupal-fat
  2. 2. Ruben Teijeiro I don't know what I like more: Drupal or Beer @rteijeiro
  3. 3. Based on a true history...
  4. 4. Web Development
  5. 5. In collaboration with
  6. 6. Developers I'm ready for website development!
  7. 7. DevOps Almost finished setting up your server. Just one minute...
  8. 8. WTF!!
  9. 9. Designers Just redesigned the website. Now it's shinny, edgy and it pops!!
  10. 10. So, what?
  11. 11. Users In-place Content Authoring
  12. 12. Holy shit!!
  13. 13. Clients Just something And kitten like Facebook! pics. Everyone We need it loves kittens! yesterday... Better in Comic Sans Should work also in IE7
  14. 14. OMG!!
  15. 15. Browsers
  16. 16. Result
  17. 17. Front-end I said: “{float: left;}” !!
  18. 18. Solution
  19. 19. Refactoring Fixed Fixed Fixed Fixed Fixed Fixed Fixed
  20. 20. Oh man!
  21. 21. DEMO
  22. 22. BONUS!
  23. 23. And now I will show you how it looks like in Internet Explorer...
  24. 24. Now what?
  25. 25. FAT
  26. 26. Front-end Automated Testing
  27. 27. Because people like code that works
  28. 28. Continuous Integration
  29. 29. Push Button Receive Bacon
  30. 30. Unit Test
  31. 31. Take one tablet every “git push”
  32. 32. · · · · · · Automated Repeteable Easy to understand Incremental Easy to run Fast Unit Test
  33. 33. Testing Tools BA-K-47
  34. 34. Drupal 8 Modules
  35. 35. Drupal Modules · TestSwarm https://drupal.org/project/testswarm · FAT https://drupal.org/project/fat
  36. 36. Testing Frameworks
  37. 37. · QUnit · CasperJS · PhantomJS · Jasmine Testing Frameworks
  38. 38. TestSwarm module QUnit Tests FAT module
  39. 39. Bacon Module
  40. 40. bacon.module /** * Implements hook_testswarm_tests(). */ function bacon_testswarm_tests() { 'bacon_test' => array( 'module' => 'bacon', 'description' => 'Testing bacon.', 'js' => array( $path . '/tests/bacon.tests.js' => array(), ), 'dependencies' => array( array('testswarm', 'jquery.simulate'), ), 'path' => 'admin/bacon/test', 'permissions' => array('test bacon') ), }
  41. 41. tests/bacon.tests.js /*global Drupal: true, jQuery: true, QUnit:true*/ (function ($, Drupal, window, document, undefined) { "use strict"; Drupal.tests.bacon = { getInfo: function() { return { name: 'Bacon test', description: 'Testing bacon.', group: 'Bacon' }; }, tests: function() { [Insert your QUnit tests here] }, }; })(jQuery, Drupal, this, this.document);
  42. 42. Setup
  43. 43. tests/bacon.tests.js Drupal.tests.bacon = { getInfo: function() { return { name: 'Bacon test', description: 'Testing bacon.', group: 'Bacon' }; }, setup: function() { [Insert your setup code here] }, teardown: function() { [Insert your teardown code here] }, tests: function() { [Insert your QUnit tests here] }, };
  44. 44. QUnit
  45. 45. Assert
  46. 46. Assert ok(state, message) Passes if the first argument is truthy. var bbq_ready = true; QUnit.ok(bbq_ready, 'Barbecue ready!.'); var bbq_ready = false; QUnit.ok(bbq_ready, 'Barbecue ready!.');
  47. 47. Assert equal(actual, expected, message) Simple comparison operator (==) to compare the actual and expected arguments. var bbq = 'Bacon'; QUnit.equal(bbq, 'Bacon', 'Bacon barbecue!'); QUnit.equal(bbq, 'Chicken', 'Chicken barbecue!');
  48. 48. Assert notEqual(actual, expected, message) Simple inverted comparison operator (!=) to compare the actual and expected arguments. var bbq = 'Bacon'; QUnit.notEqual(bbq, 'Salad', 'No salad!'); var bbq = 'Salad'; QUnit.notEqual(bbq, 'Salad', 'No salad!');
  49. 49. Assert deepEqual(actual, expected, message) Just like equal() when comparing objects, such that { key: value } is equal to { key: value }. var bbq = {meat: 'Bacon'}; QUnit.deepEqual(bbq, {meat: 'Bacon'}, 'Bacon barbecue!'); var bbq = {meat: 'Chicken'}; QUnit.deepEqual(bbq, {meat: 'Bacon'}, 'Bacon barbecue!');
  50. 50. Assert notDeepEqual(actual, expected, message) Just like notEqual() when comparing objects, such that { key: value } is not equal to { key: value }. var bbq = {food: 'Bacon'}; QUnit.notDeepEqual(bbq, {food: 'Salad'}, 'No salad!'); var bbq = {food: 'Salad'}; QUnit.notDeepEqual(bbq, {food: 'Salad'}, 'No salad!');
  51. 51. Assert strictEqual(actual, expected, message) Most rigid comparison of type and value with the strict equality operator (===). var bacon = '1'; QUnit.strictEqual(bacon, '1', 'Bacon!'); QUnit.strictEqual(bacon, 1, 'Bacon!');
  52. 52. Assert notStrictEqual(actual, expected, message) Most rigid comparison of type and value with the strict inverted equality operator (!==). var bacon = '1'; QUnit.notStrictEqual(bacon, 1, 'No Bacon!'); QUnit.notStrictEqual(bacon, '1', 'No Bacon!');
  53. 53. Expect
  54. 54. Expect expect(amount) Specify how many assertions are expected to run within a test. If the number of assertions run does not match the expected count, the test will fail. var bbq = 'Bacon'; // Good QUnit.expect(1); QUnit.equal(bbq, 'Bacon', 'Bacon barbecue!'); // Wrong QUnit.expect(1); QUnit.equal(bbq, 'Bacon', 'Bacon barbecue!'); QUnit.notEqual(bbq, 'Chicken', 'Chicken barbecue!');
  55. 55. Synchronous Testing
  56. 56. Synchronous Testing // Number of assertions. QUnit.expect(3); var bbq_ready = true, bbq = 'Bacon'; // Assertions. QUnit.ok(bbq_ready, 'Barbacue is ready!'); QUnit.equal(bbq, 'Bacon', 'Bacon barbecue!'); QUnit.notEqual(bbq, 'Salad', 'No salad!');
  57. 57. Asynchronous Testing
  58. 58. Asynchronous Testing QUnit.expect(2); var bbq_ready = false, bbq = 'Bacon', time = 36000; // Miliseconds. QUnit.stop(); setTimeout(function() { bbq_ready = true; QUnit.ok(bbq_ready, 'Barbacue is ready!'); QUnit.start(); }, time); QUnit.equal(bbq, 'Bacon', 'Bacon barbecue!');
  59. 59. Testing User Actions
  60. 60. Testing User Actions /** * Implements hook_testswarm_tests(). */ function bacon_testswarm_tests() { 'bacon_test' => array( 'module' => 'bacon', 'description' => 'Testing bacon.', 'js' => array( $path . '/tests/bacon.tests.js' => array(), ), 'dependencies' => array( array('testswarm', 'jquery.simulate'), ), 'path' => 'admin/bacon/test', 'permissions' => array('test bacon') ), }
  61. 61. Testing User Actions https://github.com/jquery/jquery-simulate QUnit.expect(1); var bbq_ready = false, bbq = 'Bacon'; bbq_ready.trigger('change'); QUnit.ok(bbq_ready, 'Barbecue ready!');
  62. 62. DEMO
  63. 63. Questions ? rteijeiro@drewpull.com

×