Front-end Automated Testing #drupal-fat

Transcription

1 Front-end Automated Testing #drupal-fat

2 Ruben Teijeiro I don't know what I like more: Drupal or

3 Based on a true history...

4 Web Development

5 In collaboration with

6 Developers I'm ready for website development!

7

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

17

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

24

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 FAT

39 Testing Frameworks

40 QUnit CasperJS PhantomJS Jasmine Testing Frameworks

41 TestSwarm module QUnit Tests FAT module

42 Bacon Module

43

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 QUnit.expect(1); var bbq_ready = false, bbq = 'Bacon'; bbq_ready.trigger('change'); QUnit.ok(bbq_ready, 'Barbecue ready!');

66 DEMO

67 Questions?