0
Front-end Automated Testing
#drupal-fat
Ruben Teijeiro
I don't know
what I like
more: Drupal
or Beer

@rteijeiro
Based on a true history...
Web Development
In collaboration with
Developers
I'm ready for
website
development!
DevOps
Almost finished
setting up your
server. Just one
minute...
WTF!!
Designers

Just redesigned
the website. Now
it's shinny, edgy
and it pops!!
So,
what?
Users
In-place Content Authoring
Holy
shit!!
Clients
Just something
And kitten
like Facebook!
pics. Everyone
We need it
loves kittens!
yesterday...

Better in
Comic Sa...
OMG!!
Browsers
Result
Front-end
I said: “{float: left;}” !!
Solution
Refactoring
Fixed

Fixed

Fixed

Fixed
Fixed

Fixed

Fixed
Oh
man!
DEMO
BONUS!
And now I will
show you how it
looks like in
Internet Explorer...
Now
what?
FAT
Front-end Automated Testing
Because people like code that works
Continuous Integration
Push Button

Receive Bacon
Unit Test
Take one tablet every “git push”
·
·
·
·
·
·

Automated
Repeteable
Easy to understand
Incremental
Easy to run
Fast

Unit Test
Testing Tools

BA-K-47
Drupal 8 Modules
Drupal Modules

· TestSwarm
https://drupal.org/project/testswarm

· FAT
https://drupal.org/project/fat
Testing Frameworks
· QUnit
· CasperJS
· PhantomJS
· Jasmine

Testing Frameworks
TestSwarm module

QUnit Tests

FAT module
Bacon Module
bacon.module
/**
* Implements hook_testswarm_tests().
*/
function bacon_testswarm_tests() {
'bacon_test' => array(
'module...
tests/bacon.tests.js
/*global Drupal: true, jQuery: true, QUnit:true*/
(function ($, Drupal, window, document, undefined) ...
Setup
tests/bacon.tests.js
Drupal.tests.bacon = {
getInfo: function() {
return {
name: 'Bacon test',
description: 'Testing bacon...
QUnit
Assert
Assert

ok(state, message)
Passes if the first argument is truthy.

var bbq_ready = true;
QUnit.ok(bbq_ready, 'Barbecue re...
Assert

equal(actual, expected, message)
Simple comparison operator (==) to compare the
actual and expected arguments.

va...
Assert

notEqual(actual, expected, message)
Simple inverted comparison operator (!=) to
compare the actual and expected ar...
Assert

deepEqual(actual, expected, message)
Just like equal() when comparing objects, such
that { key: value } is equal t...
Assert

notDeepEqual(actual, expected, message)
Just like notEqual() when comparing objects, such
that { key: value } is n...
Assert

strictEqual(actual, expected, message)
Most rigid comparison of type and value with the
strict equality operator (...
Assert

notStrictEqual(actual, expected, message)
Most rigid comparison of type and value with the
strict inverted equalit...
Expect
Expect

expect(amount)
Specify how many assertions are expected to run
within a test. If the number of assertions run does...
Synchronous Testing
Synchronous Testing

// Number of assertions.
QUnit.expect(3);
var bbq_ready = true,
bbq = 'Bacon';
// Assertions.
QUnit.o...
Asynchronous Testing
Asynchronous Testing
QUnit.expect(2);
var bbq_ready = false,
bbq = 'Bacon',
time = 36000; // Miliseconds.
QUnit.stop();
se...
Testing User Actions
Testing User Actions
/**
* Implements hook_testswarm_tests().
*/
function bacon_testswarm_tests() {
'bacon_test' => array(...
Testing User Actions

https://github.com/jquery/jquery-simulate
QUnit.expect(1);
var bbq_ready = false,
bbq = 'Bacon';
bbq...
DEMO
Questions

?
rteijeiro@drewpull.com
Drupal8 Front-end Automated Testing
Drupal8 Front-end Automated Testing
Drupal8 Front-end Automated Testing
Drupal8 Front-end Automated Testing
Upcoming SlideShare
Loading in...5
×

Drupal8 Front-end Automated Testing

705

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
705
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×