Front-end Automated TestingFront-end Automated Testing#drupal-fat#drupal-fat
I dont knowwhat I likemore: Drupalor Beer@rteijeiroRuben TeijeiroRuben Teijeiro@rteijeiro
Web DevelopmentWeb Development
Im configuring theserver. It will be readyin a few weeks.Dev OpsDev Ops
WTF!!
This design is reallyfancy. I made it shinyand edgy. Now it pops!!DesignersDesigners
So what?
Content ManagersContent ManagersIn-place Content Authoring
Holy shit!
We wantsomething likeFacebook, but weneed it yesterday.And banners withkittens. Everyoneloves kittens.We should useComic S...
OMG!!
BrowsersBrowsers
CSSCSSI said "float: left"!!!
RefactoringRefactoringFixed FixedFixedFixedFixedFixedFixed
Final ResultFinal ResultAnd now I will showyou how it looks inInternet Explorer 7
Nowwhat?!!
FATFAT
Front-end Automated TestingFront-end Automated TestingBecause people likes code that works
Continuous IntegrationContinuous Integration
● Automated● Repeteable● Easy to understand● Incremental● Easy to run● FastUnit TestUnit Test
● QUnit● Selenium● Jasmine● PhantomJS● YUI TestTesting ToolsTesting Tools
QUnitQUnit
getInfo: function() {return {name: Drupal Test,description: My first Drupal test,group: Tests};}Test ConfigurationTest Con...
Test ConfigurationTest Configurationsetup: function() {this.bbq = "Put some bacon here...";}
Test ConfigurationTest Configurationteardown: function() {this.bbq = "More bacon for the bbq.";}
● ok● equal● notEqual● deepEqual● notDeepEqual● strictEqual● notStrictEqual● throwsAssertionsAssertions
this.bbq = true;QUnit.ok(this.bbq,Drupal.t(We have barbecue.));QUnit.okQUnit.ok
this.bbq = Bacon;QUnit.equal(this.bbq, Bacon,Drupal.t(This is a Bacon Barbecue));QUnit.equalQUnit.equal
this.bbq = Bacon;QUnit.notEqual(this.bbq, Chicken,Drupal.t(This is not a Chicken Barbecue));QUnit.notEqualQUnit.notEqual
this.bbq = { meat: Bacon };QUnit.deepEqual(this.bbq, {meat: Bacon },Drupal.t(This is a Bacon Barbecue));QUnit.deepEqualQUn...
this.bbq = { meat: Chicken };QUnit.notDeepEqual(this.bbq, {meat: Bacon },Drupal.t(This is not a Bacon Barbecue));QUnit.not...
this.bbq = Bacon;QUnit.strictEqual(this.bbq, Bacon,Drupal.t(This is a Bacon Barbecue));QUnit.strictEqualQUnit.strictEqual
this.bbq = 5;QUnit.notStrictEqual(this.bbq, 5,Drupal.t(This is not a Barbecue for 5));QUnit.notStrictEqualQUnit.notStrictE...
throws(function() {throw "No barbecue."},"There is no barbecue.");QUnit.throwsQUnit.throws
Synchronous CallbacksSynchronous CallbacksQUnit.expect(3);this.bbq = Bacon;QUnit.ok(this.bbq = Bacon, Drupal.t(Bacon barbe...
Asynchronous CallbacksAsynchronous Callbacksvar delay = 1000;this.bbq = Bacon;QUnit.stop();setTimeout( function() {QUnit.o...
Testing User ActionsTesting User Actionsthis.bbq.val(Bacon).trigger(keyup);QUnit.ok(this.bbq.val == Bacon,Drupal.t(Barbecu...
ResourcesResourceshttp://drupal.org/project/fat
TestSwarmTestSwarmhttp://drupal.org/project/testswarm
BrowserStackBrowserStackhttp://www.browserstack.com
DemoDemo
QuestionsQuestions?rteijeiro@drewpull.com
Front-end Automated Testing
Front-end Automated Testing
Front-end Automated Testing
Upcoming SlideShare
Loading in …5
×

Front-end Automated Testing

4,202 views

Published on

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.

Published in: Technology, Self Improvement
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,202
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Front-end Automated Testing

  1. 1. Front-end Automated TestingFront-end Automated Testing#drupal-fat#drupal-fat
  2. 2. I dont knowwhat I likemore: Drupalor Beer@rteijeiroRuben TeijeiroRuben Teijeiro@rteijeiro
  3. 3. Web DevelopmentWeb Development
  4. 4. Im configuring theserver. It will be readyin a few weeks.Dev OpsDev Ops
  5. 5. WTF!!
  6. 6. This design is reallyfancy. I made it shinyand edgy. Now it pops!!DesignersDesigners
  7. 7. So what?
  8. 8. Content ManagersContent ManagersIn-place Content Authoring
  9. 9. Holy shit!
  10. 10. We wantsomething likeFacebook, but weneed it yesterday.And banners withkittens. Everyoneloves kittens.We should useComic Sans, itssuch a fancy andfunny font.CustomersCustomers
  11. 11. OMG!!
  12. 12. BrowsersBrowsers
  13. 13. CSSCSSI said "float: left"!!!
  14. 14. RefactoringRefactoringFixed FixedFixedFixedFixedFixedFixed
  15. 15. Final ResultFinal ResultAnd now I will showyou how it looks inInternet Explorer 7
  16. 16. Nowwhat?!!
  17. 17. FATFAT
  18. 18. Front-end Automated TestingFront-end Automated TestingBecause people likes code that works
  19. 19. Continuous IntegrationContinuous Integration
  20. 20. ● Automated● Repeteable● Easy to understand● Incremental● Easy to run● FastUnit TestUnit Test
  21. 21. ● QUnit● Selenium● Jasmine● PhantomJS● YUI TestTesting ToolsTesting Tools
  22. 22. QUnitQUnit
  23. 23. getInfo: function() {return {name: Drupal Test,description: My first Drupal test,group: Tests};}Test ConfigurationTest Configuration
  24. 24. Test ConfigurationTest Configurationsetup: function() {this.bbq = "Put some bacon here...";}
  25. 25. Test ConfigurationTest Configurationteardown: function() {this.bbq = "More bacon for the bbq.";}
  26. 26. ● ok● equal● notEqual● deepEqual● notDeepEqual● strictEqual● notStrictEqual● throwsAssertionsAssertions
  27. 27. this.bbq = true;QUnit.ok(this.bbq,Drupal.t(We have barbecue.));QUnit.okQUnit.ok
  28. 28. this.bbq = Bacon;QUnit.equal(this.bbq, Bacon,Drupal.t(This is a Bacon Barbecue));QUnit.equalQUnit.equal
  29. 29. this.bbq = Bacon;QUnit.notEqual(this.bbq, Chicken,Drupal.t(This is not a Chicken Barbecue));QUnit.notEqualQUnit.notEqual
  30. 30. this.bbq = { meat: Bacon };QUnit.deepEqual(this.bbq, {meat: Bacon },Drupal.t(This is a Bacon Barbecue));QUnit.deepEqualQUnit.deepEqual
  31. 31. this.bbq = { meat: Chicken };QUnit.notDeepEqual(this.bbq, {meat: Bacon },Drupal.t(This is not a Bacon Barbecue));QUnit.notDeepEqualQUnit.notDeepEqual
  32. 32. this.bbq = Bacon;QUnit.strictEqual(this.bbq, Bacon,Drupal.t(This is a Bacon Barbecue));QUnit.strictEqualQUnit.strictEqual
  33. 33. this.bbq = 5;QUnit.notStrictEqual(this.bbq, 5,Drupal.t(This is not a Barbecue for 5));QUnit.notStrictEqualQUnit.notStrictEqual
  34. 34. throws(function() {throw "No barbecue."},"There is no barbecue.");QUnit.throwsQUnit.throws
  35. 35. Synchronous CallbacksSynchronous CallbacksQUnit.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(Baconbarbecue.));
  36. 36. Asynchronous CallbacksAsynchronous Callbacksvar delay = 1000;this.bbq = Bacon;QUnit.stop();setTimeout( function() {QUnit.ok(this.bbq == Bacon, Drupal.t(1 second barbecue.);QUnit.start();}, delay);
  37. 37. Testing User ActionsTesting User Actionsthis.bbq.val(Bacon).trigger(keyup);QUnit.ok(this.bbq.val == Bacon,Drupal.t(Barbecue with keyup.));
  38. 38. ResourcesResourceshttp://drupal.org/project/fat
  39. 39. TestSwarmTestSwarmhttp://drupal.org/project/testswarm
  40. 40. BrowserStackBrowserStackhttp://www.browserstack.com
  41. 41. DemoDemo
  42. 42. QuestionsQuestions?rteijeiro@drewpull.com

×