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

Drupal8 Front-end Automated Testing

on

  • 755 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
755
Views on SlideShare
687
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 Drupal8 Front-end Automated Testing Presentation Transcript

  • 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 Sans Should work also in IE7
  • 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' => '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') ), }
  • 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);
  • Setup
  • 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] }, };
  • QUnit
  • Assert
  • 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!.');
  • 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!');
  • 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!');
  • 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!');
  • 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!');
  • 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!');
  • 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!');
  • Expect
  • 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!');
  • Synchronous Testing
  • 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!');
  • Asynchronous Testing
  • 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!');
  • Testing User Actions
  • 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') ), }
  • 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!');
  • DEMO
  • Questions ? rteijeiro@drewpull.com