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

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!

8. DevOps
Almost finished
setting up your
server. Just one
minute...

9. WTF!!

10. Designers
Just redesigned
the website. Now
it's shinny, edgy
and it pops!!

11. So,
what?

12. Users
In-place Content Authoring

13. Holy
shit!!

14. Clients
Just something
And kitten
like Facebook!
pics. Everyone
We need it
loves kittens!
yesterday...
Better in
Comic Sans
Should work
also in IE7

15. OMG!!

16. Browsers

18. Result

19. Front-end
I said: “{float: left;}” !!

20. Solution

21. Refactoring
Fixed
Fixed
Fixed
Fixed
Fixed
Fixed
Fixed

22. Oh
man!

23. DEMO

25. BONUS!

26. And now I will
show you how it
looks like in
Internet Explorer...

27. Now
what?

28. FAT

29. Front-end Automated Testing

30. Because people like code that works

31. Continuous Integration

32. Push Button
Receive Bacon

33. Unit Test

34. Take one tablet every “git push”

35. ·
·
·
·
·
·
Automated
Repeteable
Easy to understand
Incremental
Easy to run
Fast
Unit Test

36. Testing Tools
BA-K-47

37. Drupal 8 Modules

38. Drupal Modules
· TestSwarm
https://drupal.org/project/testswarm
· FAT
https://drupal.org/project/fat

39. Testing Frameworks

40. · QUnit
· CasperJS
· PhantomJS
· Jasmine
Testing Frameworks

41. TestSwarm module
QUnit Tests
FAT module

42. Bacon Module

44. 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')
),
}

45. 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);

46. Setup

47. 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]
},
};

48. QUnit

49. Assert

50. 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!.');

51. 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!');

52. 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!');

53. 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!');

54. 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!');

55. 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!');

56. 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!');

57. Expect

58. 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!');

59. Synchronous Testing

60. 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!');

61. Asynchronous Testing

62. 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!');

63. Testing User Actions

64. 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')
),
}

65. 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!');

66. DEMO

67. Questions
?
rteijeiro@drewpull.com