drupal8 front-end automated testing

67
Front-end Automated Testing #drupal-fat

Upload: ruben-teijeiro

Post on 15-Jan-2015

627 views

Category:

Technology


1 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Drupal8 Front-end Automated Testing

Front-end Automated Testing#drupal-fat

Page 2: Drupal8 Front-end Automated Testing

Ruben Teijeiro

@rteijeiro

I don't know what I like

more: Drupal or Beer

Page 3: Drupal8 Front-end Automated Testing

Based on a true history...

Page 4: Drupal8 Front-end Automated Testing

Web Development

Page 5: Drupal8 Front-end Automated Testing

In collaboration with

Page 6: Drupal8 Front-end Automated Testing

Developers

I'm ready for website

development!

Page 7: Drupal8 Front-end Automated Testing
Page 8: Drupal8 Front-end Automated Testing

DevOpsAlmost finished setting up your server. Just one

minute...

Page 9: Drupal8 Front-end Automated Testing

WTF!!

Page 10: Drupal8 Front-end Automated Testing

DesignersJust redesigned the website. Now it's shinny, edgy

and it pops!!

Page 11: Drupal8 Front-end Automated Testing

So, what?

Page 12: Drupal8 Front-end Automated Testing

UsersIn-place Content Authoring

Page 13: Drupal8 Front-end Automated Testing

Holy shit!!

Page 14: Drupal8 Front-end Automated Testing

ClientsJust something like Facebook!

We need it yesterday...

And kitten pics. Everyone loves kittens!

Better in Comic Sans

Should work also in IE7

Page 15: Drupal8 Front-end Automated Testing

OMG!!

Page 16: Drupal8 Front-end Automated Testing

Browsers

Page 17: Drupal8 Front-end Automated Testing
Page 18: Drupal8 Front-end Automated Testing

Result

Page 19: Drupal8 Front-end Automated Testing

Front-endI said: “{float: left;}” !!

Page 20: Drupal8 Front-end Automated Testing

Solution

Page 21: Drupal8 Front-end Automated Testing

Fixed

RefactoringFixed

Fixed

Fixed

Fixed

Fixed Fixed

Page 22: Drupal8 Front-end Automated Testing

Oh man!

Page 23: Drupal8 Front-end Automated Testing

DEMO

Page 24: Drupal8 Front-end Automated Testing
Page 25: Drupal8 Front-end Automated Testing

BONUS!

Page 26: Drupal8 Front-end Automated Testing

And now I will show you how it

looks like in Internet Explorer...

Page 27: Drupal8 Front-end Automated Testing

Now what?

Page 28: Drupal8 Front-end Automated Testing

FAT

Page 29: Drupal8 Front-end Automated Testing

Front-end Automated Testing

Page 30: Drupal8 Front-end Automated Testing

Because people like code that works

Page 31: Drupal8 Front-end Automated Testing

Continuous Integration

Page 32: Drupal8 Front-end Automated Testing

Push Button Receive Bacon

Page 33: Drupal8 Front-end Automated Testing

Unit Test

Page 34: Drupal8 Front-end Automated Testing

Take one tablet every “git push”

Page 35: Drupal8 Front-end Automated Testing

· Automated· Repeteable· Easy to understand· Incremental· Easy to run· Fast

Unit Test

Page 36: Drupal8 Front-end Automated Testing

BA-K-47

Testing Tools

Page 37: Drupal8 Front-end Automated Testing

Drupal 8 Modules

Page 38: Drupal8 Front-end Automated Testing

Drupal Modules

· TestSwarmhttps://drupal.org/project/testswarm

· FAThttps://drupal.org/project/fat

Page 39: Drupal8 Front-end Automated Testing

Testing Frameworks

Page 40: Drupal8 Front-end Automated Testing

· QUnit

· CasperJS

· PhantomJS

· Jasmine

Testing Frameworks

Page 41: Drupal8 Front-end Automated Testing

TestSwarm moduleFAT module

QUnit Tests

Page 42: Drupal8 Front-end Automated Testing

Bacon Module

Page 43: Drupal8 Front-end Automated Testing
Page 44: Drupal8 Front-end Automated Testing

/** * 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') ),}

bacon.module

Page 45: Drupal8 Front-end Automated Testing

/*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);

tests/bacon.tests.js

Page 46: Drupal8 Front-end Automated Testing

Setup

Page 47: Drupal8 Front-end Automated Testing

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

tests/bacon.tests.js

Page 48: Drupal8 Front-end Automated Testing

QUnit

Page 49: Drupal8 Front-end Automated Testing

Assert

Page 50: Drupal8 Front-end Automated Testing

Assert

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

ok(state, message)

Page 51: Drupal8 Front-end Automated Testing

equal(actual, expected, message)Assert

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

Page 52: Drupal8 Front-end Automated Testing

notEqual(actual, expected, message)Assert

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

Page 53: Drupal8 Front-end Automated Testing

deepEqual(actual, expected, message)Assert

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

Page 54: Drupal8 Front-end Automated Testing

notDeepEqual(actual, expected, message)Assert

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

Page 55: Drupal8 Front-end Automated Testing

strictEqual(actual, expected, message)Assert

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

Page 56: Drupal8 Front-end Automated Testing

notStrictEqual(actual, expected, message)Assert

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

Page 57: Drupal8 Front-end Automated Testing

Expect

Page 58: Drupal8 Front-end Automated Testing

expect(amount)Expect

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';

// GoodQUnit.expect(1);QUnit.equal(bbq, 'Bacon', 'Bacon barbecue!');

// WrongQUnit.expect(1);QUnit.equal(bbq, 'Bacon', 'Bacon barbecue!');QUnit.notEqual(bbq, 'Chicken', 'Chicken barbecue!');

Page 59: Drupal8 Front-end Automated Testing

Synchronous Testing

Page 60: Drupal8 Front-end Automated 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!');

Page 61: Drupal8 Front-end Automated Testing

Asynchronous Testing

Page 62: Drupal8 Front-end Automated 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!');

Page 63: Drupal8 Front-end Automated Testing

Testing User Actions

Page 64: Drupal8 Front-end Automated Testing

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

Page 65: Drupal8 Front-end Automated Testing

Testing User Actions

QUnit.expect(1);

var bbq_ready = false, bbq = 'Bacon';

bbq_ready.trigger('change');QUnit.ok(bbq_ready, 'Barbecue ready!');

https://github.com/jquery/jquery-simulate

Page 66: Drupal8 Front-end Automated Testing

DEMO