Actually testing is as important as development and we all want to write code that works. So, why not test our front-end code? To do that we can use some tools as Selenium, Jasmine but I will explain QUnit because it's used in Drupal8 testing. QUnit is a powerful, easy-to-use JavaScript unit testing framework. It's used by the jQuery, jQuery UI, jQuery Mobile projects, also by Drupal, and is capable of testing any generic JavaScript code. Session presented at Drupalcamp Gotemburg 2013 where I explained how to include QUnit testing in our Drupal projects.

1. Front-end Automated TestingFront-end Automated Testing
#drupal-fat#drupal-fat

2. I don't know
what I like
more: Drupal
or Beer
@rteijeiro
Ruben TeijeiroRuben Teijeiro
@rteijeiro

3. Web DevelopmentWeb Development

5. I'm configuring the
server. It will be ready
in a few weeks.
Dev OpsDev Ops

6. WTF!!

7. This design is really
fancy. I made it shiny
and edgy. Now it pops!!
DesignersDesigners

8. So what?

9. Content ManagersContent Managers
In-place Content Authoring

10. Holy shit!

11. We want
something like
Facebook, but we
need it yesterday.
And banners with
kittens. Everyone
loves kittens.
We should use
Comic Sans, it's
such a fancy and
funny font.
CustomersCustomers

12. OMG!!

13. BrowsersBrowsers

15. CSSCSS
I said "float: left"!!!

17. RefactoringRefactoring
Fixed Fixed
Fixed
Fixed
Fixed
Fixed
Fixed

18. Final ResultFinal Result
And now I will show
you how it looks in
Internet Explorer 7

19. Now
what?!!

20. FATFAT

21. Front-end Automated TestingFront-end Automated Testing
Because people likes code that works

22. Continuous IntegrationContinuous Integration

23. ● Automated
● Repeteable
● Easy to understand
● Incremental
● Easy to run
● Fast
Unit TestUnit Test

24. ● QUnit
● Selenium
● Jasmine
● PhantomJS
● YUI Test
Testing ToolsTesting Tools

25. QUnitQUnit

26. getInfo: function() {
return {
name: 'Drupal Test',
description: 'My first Drupal test',
group: 'Tests'
};
}
Test ConfigurationTest Configuration

27. Test ConfigurationTest Configuration
setup: function() {
this.bbq = "Put some bacon here...";
}

28. Test ConfigurationTest Configuration
teardown: function() {
this.bbq = "More bacon for the bbq.";
}

29. ● ok
● equal
● notEqual
● deepEqual
● notDeepEqual
● strictEqual
● notStrictEqual
● throws
AssertionsAssertions

30. this.bbq = true;
QUnit.ok(this.bbq,
Drupal.t('We have barbecue.'));
QUnit.okQUnit.ok

31. this.bbq = 'Bacon';
QUnit.equal(this.bbq, 'Bacon',
Drupal.t('This is a Bacon Barbecue'));
QUnit.equalQUnit.equal

32. this.bbq = 'Bacon';
QUnit.notEqual(this.bbq, 'Chicken',
Drupal.t('This is not a Chicken Barbecue'));
QUnit.notEqualQUnit.notEqual

33. this.bbq = { meat: 'Bacon' };
QUnit.deepEqual(this.bbq, {meat: 'Bacon' },
Drupal.t('This is a Bacon Barbecue'));
QUnit.deepEqualQUnit.deepEqual

34. this.bbq = { meat: 'Chicken' };
QUnit.notDeepEqual(this.bbq, {meat: 'Bacon' },
Drupal.t('This is not a Bacon Barbecue'));
QUnit.notDeepEqualQUnit.notDeepEqual

35. this.bbq = 'Bacon';
QUnit.strictEqual(this.bbq, 'Bacon',
Drupal.t('This is a Bacon Barbecue'));
QUnit.strictEqualQUnit.strictEqual

36. this.bbq = 5;
QUnit.notStrictEqual(this.bbq, '5',
Drupal.t('This is not a Barbecue for 5'));
QUnit.notStrictEqualQUnit.notStrictEqual

37. throws(
function() {
throw "No barbecue."
},
"There is no barbecue."
);
QUnit.throwsQUnit.throws

38. Synchronous CallbacksSynchronous Callbacks
QUnit.expect(3);
this.bbq = 'Bacon';
QUnit.ok(this.bbq = 'Bacon', Drupal.t('Bacon barbecue.'));
QUnit.equal(this.bbq, 'Bacon', Drupal.t('Bacon barbecue.'));
QUnit.deepEqual(this.bbq, 'Bacon', Drupal.t('Bacon
barbecue.'));

39. Asynchronous CallbacksAsynchronous Callbacks
var delay = 1000;
this.bbq = 'Bacon';
QUnit.stop();
setTimeout( function() {
QUnit.ok(this.bbq == 'Bacon', Drupal.t('1 second barbecue.');
QUnit.start();
}, delay);

40. Testing User ActionsTesting User Actions
this.bbq.val('Bacon').trigger('keyup');
QUnit.ok(this.bbq.val == 'Bacon',
Drupal.t('Barbecue with keyup.'));

41. ResourcesResources
http://drupal.org/project/fat

42. TestSwarmTestSwarm
http://drupal.org/project/testswarm

43. BrowserStackBrowserStack
http://www.browserstack.com

44. DemoDemo

45. QuestionsQuestions
?
rteijeiro@drewpull.com