SlideShare a Scribd company logo
1 of 67
Download to read offline
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

More Related Content

What's hot

Drupal + selenium
Drupal + seleniumDrupal + selenium
Drupal + selenium
hernanibf
 
I18n
I18nI18n
I18n
soon
 
Selenium: What Is It Good For
Selenium: What Is It Good ForSelenium: What Is It Good For
Selenium: What Is It Good For
Allan Chappell
 

What's hot (20)

Auto Build
Auto BuildAuto Build
Auto Build
 
Drupal + selenium
Drupal + seleniumDrupal + selenium
Drupal + selenium
 
Performance
PerformancePerformance
Performance
 
Chef-NYC June-2014 - Testing cookbooks on Digital Ocean
Chef-NYC June-2014 - Testing cookbooks on Digital OceanChef-NYC June-2014 - Testing cookbooks on Digital Ocean
Chef-NYC June-2014 - Testing cookbooks on Digital Ocean
 
Hand Crafted Artisanal Chef Resources
Hand Crafted Artisanal Chef ResourcesHand Crafted Artisanal Chef Resources
Hand Crafted Artisanal Chef Resources
 
Introduccion app engine con python
Introduccion app engine con pythonIntroduccion app engine con python
Introduccion app engine con python
 
I18n
I18nI18n
I18n
 
ChefConf 2016 - Writing Compossible Community Cookbooks using Chef Custom Res...
ChefConf 2016 - Writing Compossible Community Cookbooks using Chef Custom Res...ChefConf 2016 - Writing Compossible Community Cookbooks using Chef Custom Res...
ChefConf 2016 - Writing Compossible Community Cookbooks using Chef Custom Res...
 
Modern infrastructure as code with ansible PyTN
Modern infrastructure as code with ansible  PyTNModern infrastructure as code with ansible  PyTN
Modern infrastructure as code with ansible PyTN
 
Breaking Technology Silos with Chef
Breaking Technology Silos with ChefBreaking Technology Silos with Chef
Breaking Technology Silos with Chef
 
RSpec User Stories
RSpec User StoriesRSpec User Stories
RSpec User Stories
 
Selenium: What Is It Good For
Selenium: What Is It Good ForSelenium: What Is It Good For
Selenium: What Is It Good For
 
Frontend testing with Codeception
Frontend testing with CodeceptionFrontend testing with Codeception
Frontend testing with Codeception
 
Cookbook refactoring & abstracting logic to Ruby(gems)
Cookbook refactoring & abstracting logic to Ruby(gems)Cookbook refactoring & abstracting logic to Ruby(gems)
Cookbook refactoring & abstracting logic to Ruby(gems)
 
Continuous Deployment at Scale, PHPConfAsia 2016
Continuous Deployment at Scale, PHPConfAsia 2016Continuous Deployment at Scale, PHPConfAsia 2016
Continuous Deployment at Scale, PHPConfAsia 2016
 
anatomy of a crash
anatomy of a crashanatomy of a crash
anatomy of a crash
 
Put kajakken på hylden - og få sexede windows services
Put kajakken på hylden - og få sexede windows servicesPut kajakken på hylden - og få sexede windows services
Put kajakken på hylden - og få sexede windows services
 
Genre research from canva
Genre research from canvaGenre research from canva
Genre research from canva
 
Selenium sandwich-3: Being where you aren't.
Selenium sandwich-3: Being where you aren't.Selenium sandwich-3: Being where you aren't.
Selenium sandwich-3: Being where you aren't.
 
Testing Microservices with a Citrus twist
Testing Microservices with a Citrus twistTesting Microservices with a Citrus twist
Testing Microservices with a Citrus twist
 

Viewers also liked (6)

Architecting your Frontend
Architecting your FrontendArchitecting your Frontend
Architecting your Frontend
 
Contributing to Drupal 8
Contributing to Drupal 8Contributing to Drupal 8
Contributing to Drupal 8
 
Startup Wars
Startup WarsStartup Wars
Startup Wars
 
Contributing to Drupal 8 - Frankfurt
Contributing to Drupal 8 - FrankfurtContributing to Drupal 8 - Frankfurt
Contributing to Drupal 8 - Frankfurt
 
Drupal
DrupalDrupal
Drupal
 
IPC 2013 - High Performance PHP with HipHop
IPC 2013 - High Performance PHP with HipHopIPC 2013 - High Performance PHP with HipHop
IPC 2013 - High Performance PHP with HipHop
 

More from Ruben Teijeiro

More from Ruben Teijeiro (8)

Headless Drupal 8
Headless Drupal 8Headless Drupal 8
Headless Drupal 8
 
Drupal Heroes
Drupal HeroesDrupal Heroes
Drupal Heroes
 
Front-end Automated Testing
Front-end Automated TestingFront-end Automated Testing
Front-end Automated Testing
 
Drupal Mobile
Drupal MobileDrupal Mobile
Drupal Mobile
 
Twittalicious - Organiza tus Redes Sociales
Twittalicious - Organiza tus Redes SocialesTwittalicious - Organiza tus Redes Sociales
Twittalicious - Organiza tus Redes Sociales
 
Twittalicious - Desarrollo de un Producto con Drupal
Twittalicious - Desarrollo de un Producto con DrupalTwittalicious - Desarrollo de un Producto con Drupal
Twittalicious - Desarrollo de un Producto con Drupal
 
Metodologia de Trabajo en Proyectos con Drupal
Metodologia de Trabajo en Proyectos con DrupalMetodologia de Trabajo en Proyectos con Drupal
Metodologia de Trabajo en Proyectos con Drupal
 
Drush - More Beer, Less Effort
Drush - More Beer, Less EffortDrush - More Beer, Less Effort
Drush - More Beer, Less Effort
 

Recently uploaded

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Recently uploaded (20)

Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 

Drupal8 Front-end Automated Testing