Drupal8 Front-end Automated Testing
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Drupal8 Front-end Automated Testing

on

  • 843 views

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

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

Statistics

Views

Total Views
843
Views on SlideShare
775
Embed Views
68

Actions

Likes
0
Downloads
2
Comments
0

3 Embeds 68

http://2013.drupalcamp.es 52
https://twitter.com 8
http://librosweb.es 8

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Drupal8 Front-end Automated Testing Presentation Transcript

  • 1. Front-end Automated Testing #drupal-fat
  • 2. Ruben Teijeiro I don't know what I like more: Drupal or Beer @rteijeiro
  • 3. Based on a true history...
  • 4. Web Development
  • 5. In collaboration with
  • 6. Developers I'm ready for website development!
  • 7. DevOps Almost finished setting up your server. Just one minute...
  • 8. WTF!!
  • 9. Designers Just redesigned the website. Now it's shinny, edgy and it pops!!
  • 10. So, what?
  • 11. Users In-place Content Authoring
  • 12. Holy shit!!
  • 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. OMG!!
  • 15. Browsers
  • 16. Result
  • 17. Front-end I said: “{float: left;}” !!
  • 18. Solution
  • 19. Refactoring Fixed Fixed Fixed Fixed Fixed Fixed Fixed
  • 20. Oh man!
  • 21. DEMO
  • 22. BONUS!
  • 23. And now I will show you how it looks like in Internet Explorer...
  • 24. Now what?
  • 25. FAT
  • 26. Front-end Automated Testing
  • 27. Because people like code that works
  • 28. Continuous Integration
  • 29. Push Button Receive Bacon
  • 30. Unit Test
  • 31. Take one tablet every “git push”
  • 32. · · · · · · Automated Repeteable Easy to understand Incremental Easy to run Fast Unit Test
  • 33. Testing Tools BA-K-47
  • 34. Drupal 8 Modules
  • 35. Drupal Modules · TestSwarm https://drupal.org/project/testswarm · FAT https://drupal.org/project/fat
  • 36. Testing Frameworks
  • 37. · QUnit · CasperJS · PhantomJS · Jasmine Testing Frameworks
  • 38. TestSwarm module QUnit Tests FAT module
  • 39. Bacon Module
  • 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. 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. Setup
  • 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. QUnit
  • 45. Assert
  • 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. 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. 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. 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. 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. 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. 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. Expect
  • 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. Synchronous Testing
  • 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. Asynchronous Testing
  • 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. Testing User Actions
  • 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. 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. DEMO
  • 63. Questions ? rteijeiro@drewpull.com