Drupal8 Front-end Automated Testing

  • 607 views
Uploaded on

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.

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
607
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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