SlideShare ist ein Scribd-Unternehmen logo
1 von 50
Downloaden Sie, um offline zu lesen
Node.Js Development Workflow Automation
With Grunt.Js
Nadeem Shabir
Hydrahack Birmingham
18th March 2014
~ Paul Irish
“Your job as a developer isn’t to just develop,
it’s to continually learn how to develop
better.”
Automating common tasks
• code quality (jshint)
• beautifying (jsbeautifier)
• live reload (watch)
• Automated Testing
Grunt.js
http://gruntjs.com
http://gulpjs.com
– Shaun Dunne
( https://medium.com/fear-and-coding )
“If you’re doing automation, you’re already
doing something right. It’s not about how you
do it”
Grunt.js
• Javascript based task runner
• automate repetitive tasks
• large ecosystem of plugins (2500+)
• easy to maintain
• simple to learn and use
ANT
GRUNT
Install
npm install -g grunt-cli
cd <your_project_dir>
npm install grunt --save-dev
npm install grunt-contrib-jshint grunt-contrib-watch 
grunt-mocha-test grunt-jsbeautifier --save-dev
gruntfile.js
watch
• runs predefined tasks when files change
• use patterns to indicate which files to watch
jshint
• static code analysis tool
• detect errors & potential problems
• enforce team coding conventions
• every time we change a .js file
jsbeautify
• reformats Javascript source code
• enforces code formatting conventions
• easier to read and understand
• every time we change a .js file
live reload
• monitors changes in files
• preprocesses files as needed
• browser automatically reloads and shows your
changes
• built into grunt-contrib-watch
Automated Testing
!
~ Gerald Weinberg
Weinberg’s Second Law:
!
“If builders built buildings the way
programmers wrote programs, the first wood-
pecker that came along would destroy
civilization”
Test Driven Development
BDD vs TDD
• The gotcha with TDD is that too many developers focused on
the "How" when writing their unit tests, so they ended up
with very brittle tests that did nothing more than confirm
that the system does what it does.
• BDD provides a new vocabulary and thus focus for writing a
unit test. Basically it is a feature driven approach to TDD.
~ Matt Wynne
http://blog.mattwynne.net/2012/11/20/tdd-vs-bdd/
“BDD builds upon TDD by formalising the
good habits of the best TDD practitioners”
Tools
• mocha - (http://visionmedia.github.io/mocha/) BDD, TDD, QUnit
styles via interfaces
• should.js - (https://github.com/visionmedia/should.js/) expressive,
readable, test framework agnostic, assertion
library
• supertest - (https://github.com/visionmedia/supertest) Super-agent
driven library for testing HTTP servers. E2E for
apis.
• Protractor - (https://github.com/angular/protractor) E2E test
framework for Angular apps
… caveat
• This is based on my personal experience and
opinion - YMMV
• I’ve been known to change my mind ;-)
• … BUT these tools and techniques are being
used on a lot of projects successfully.
Mocha
• vs Jasmine - Jasmine is easier to get started –
great all-in-one test framework.
• Mocha is more flexible: you have to piece it
together yourself. i.e. add an assertion
framework, add a spy/mocking framework.
Supports different styles of testing, lots of
reporters (spec, xunit, nyan ;-) ) & disable tests
describe(“my test suite”, function(){!
!
! it(“should test something”, function(done){!
! ! // do some assertions here!
! ! // when your test completes call !
! ! done();!! !
! });!
!
! xit(“this test is skipped”, function(done){!
! ! done();!! !
! });!
!
});
Mocha - BDD
should.js
• nice assertion library. There are lots of others
for example chai which is also very good.
• chainable language to construct assertions
• its api provides lots of assertion methods
• very easy to read
it(“should test something useful”, function(done){!
! !
! var colors = [‘red’, ‘white’, ‘blue’];!
!
! colors.should.include(‘red’);!
! colors.should.not.include(‘yellow’);!
! colors.length.should.equal(3);!
! colors.should.be.an.instanceof(Array);!
! !
! done();!! !
});!
calculator_test.js
models/calc.js
supertest
• great way to test running http apis,
• provides assertions and expectations for http
• when combined with async, makes it easy to
test a series of api calls
• easy to use and makes tests easy to read!
var request = require(“supertest”);!
!
it(“should return some json”, function(done){!
! request(“http://localhost:3000”)!
! .get('/isbns/978000000000X/lists')!
!.set('Accept', 'application/json')!
!.expect('Content-Type', /json/)!
!.expect(200)!
!.end(function(err, res) {!
!! if(err) return done(err);!
!
! ! ! res.body.should.xxxxx!
!
!! done();!
! ! });! !
});!
Protractor
• Browser testing for Angular.js apps, built on
Webdriver.js
• uses selenium-webdriver, tests written in WebDriver
API, communicates with Selenium to control
browsers
• you can run tests locally using Selenium-Standalone
• you can run tests against any service that exposes
Selenium Hub endpoint ( BrowserStack, SauceLabs)
Protractor
it('should greet the named user', function() {!
browser.get('http://www.angularjs.org');!
!
// find the element with ng-model matching 'yourName'!
element(by.model('yourName')).sendKeys('Nadeem');!
!
// find the <h1>Hello {{yourName}}!</h1> element.!
var greeting = element(by.binding('yourName'));!
!
expect(greeting.getText()).toEqual('Hello Nadeem!');!
});
chromeConf.js
Demo
E2E testing pitfalls
• Use Selenium Standalone on local dev machines
• Use Continuous Integration to test range of browsers
on different OS. Nightly builds etc.
• Use BrowserStack / SauceLabs / Other for CI, unless
you have time/£ to set up you’re own infrastructure.
• Tunnelling to test local / internal deployments from
those services can be slow / unreliable; avoid if
possible …
github.com/kiyanwang/
js-workflow-automation
engineering.talis.com
ns@talis.com
@kiyanwang
github/kiyanwang
We are hiring!
http://www.talis.com/jobs
@talis
facebook.com/talisgroup
@talis
facebook.com/talisgroup
+44 (0) 121 374 2740
!
talis.com
info@talis.com
!
48 Frederick Street
Birmingham
B1 3HN

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Avoiding Common Pitfalls in Ember.js
Avoiding Common Pitfalls in Ember.jsAvoiding Common Pitfalls in Ember.js
Avoiding Common Pitfalls in Ember.js
 
Automated Testing with Cucumber, PhantomJS and Selenium
Automated Testing with Cucumber, PhantomJS and SeleniumAutomated Testing with Cucumber, PhantomJS and Selenium
Automated Testing with Cucumber, PhantomJS and Selenium
 
Agile JavaScript Testing
Agile JavaScript TestingAgile JavaScript Testing
Agile JavaScript Testing
 
Better End-to-End Testing with Page Objects Model using Protractor
Better End-to-End Testing with Page Objects Model using ProtractorBetter End-to-End Testing with Page Objects Model using Protractor
Better End-to-End Testing with Page Objects Model using Protractor
 
Cypress Automation
Cypress  AutomationCypress  Automation
Cypress Automation
 
APIs: A Better Alternative to Page Objects
APIs: A Better Alternative to Page ObjectsAPIs: A Better Alternative to Page Objects
APIs: A Better Alternative to Page Objects
 
An Introduction to AngularJS End to End Testing using Protractor
An Introduction to AngularJS End to End Testing using ProtractorAn Introduction to AngularJS End to End Testing using Protractor
An Introduction to AngularJS End to End Testing using Protractor
 
CSS Regression Tests
CSS Regression TestsCSS Regression Tests
CSS Regression Tests
 
Angular UI Testing with Protractor
Angular UI Testing with ProtractorAngular UI Testing with Protractor
Angular UI Testing with Protractor
 
Cypress vs Selenium WebDriver: Better, Or Just Different? -- by Gil Tayar
Cypress vs Selenium WebDriver: Better, Or Just Different? -- by Gil TayarCypress vs Selenium WebDriver: Better, Or Just Different? -- by Gil Tayar
Cypress vs Selenium WebDriver: Better, Or Just Different? -- by Gil Tayar
 
Using protractor to build automated ui tests
Using protractor to build automated ui testsUsing protractor to build automated ui tests
Using protractor to build automated ui tests
 
Protractor training
Protractor trainingProtractor training
Protractor training
 
Selenium Tips & Tricks - StarWest 2015
Selenium Tips & Tricks - StarWest 2015Selenium Tips & Tricks - StarWest 2015
Selenium Tips & Tricks - StarWest 2015
 
Cypress - Best Practices
Cypress - Best PracticesCypress - Best Practices
Cypress - Best Practices
 
Java script unit testing
Java script unit testingJava script unit testing
Java script unit testing
 
Automated interactive testing for i os
Automated interactive testing for i osAutomated interactive testing for i os
Automated interactive testing for i os
 
JavaScript + Jenkins = Winning!
JavaScript + Jenkins = Winning!JavaScript + Jenkins = Winning!
JavaScript + Jenkins = Winning!
 
[123] quality without qa
[123] quality without qa[123] quality without qa
[123] quality without qa
 
How to Use Selenium, Successfully
How to Use Selenium, SuccessfullyHow to Use Selenium, Successfully
How to Use Selenium, Successfully
 
Introduction to Integration Testing With Cypress
Introduction to Integration Testing With CypressIntroduction to Integration Testing With Cypress
Introduction to Integration Testing With Cypress
 

Ähnlich wie Node.js Development Workflow Automation with Grunt.js

Intro to node.js - Ran Mizrahi (28/8/14)
Intro to node.js - Ran Mizrahi (28/8/14)Intro to node.js - Ran Mizrahi (28/8/14)
Intro to node.js - Ran Mizrahi (28/8/14)
Ran Mizrahi
 
Web Development using Ruby on Rails
Web Development using Ruby on RailsWeb Development using Ruby on Rails
Web Development using Ruby on Rails
Avi Kedar
 

Ähnlich wie Node.js Development Workflow Automation with Grunt.js (20)

Browser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.jsBrowser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.js
 
Testing Ext JS and Sencha Touch
Testing Ext JS and Sencha TouchTesting Ext JS and Sencha Touch
Testing Ext JS and Sencha Touch
 
TDD super mondays-june-2014
TDD super mondays-june-2014TDD super mondays-june-2014
TDD super mondays-june-2014
 
KrishnaToolComparisionPPT.pdf
KrishnaToolComparisionPPT.pdfKrishnaToolComparisionPPT.pdf
KrishnaToolComparisionPPT.pdf
 
Continuous Delivery - Automate & Build Better Software with Travis CI
Continuous Delivery - Automate & Build Better Software with Travis CIContinuous Delivery - Automate & Build Better Software with Travis CI
Continuous Delivery - Automate & Build Better Software with Travis CI
 
we45 DEFCON Workshop - Building AppSec Automation with Python
we45 DEFCON Workshop - Building AppSec Automation with Pythonwe45 DEFCON Workshop - Building AppSec Automation with Python
we45 DEFCON Workshop - Building AppSec Automation with Python
 
Intro to node.js - Ran Mizrahi (27/8/2014)
Intro to node.js - Ran Mizrahi (27/8/2014)Intro to node.js - Ran Mizrahi (27/8/2014)
Intro to node.js - Ran Mizrahi (27/8/2014)
 
Intro to node.js - Ran Mizrahi (28/8/14)
Intro to node.js - Ran Mizrahi (28/8/14)Intro to node.js - Ran Mizrahi (28/8/14)
Intro to node.js - Ran Mizrahi (28/8/14)
 
Continuous feature-development
Continuous feature-developmentContinuous feature-development
Continuous feature-development
 
Jest: Frontend Testing richtig gemacht @WebworkerNRW
Jest: Frontend Testing richtig gemacht @WebworkerNRWJest: Frontend Testing richtig gemacht @WebworkerNRW
Jest: Frontend Testing richtig gemacht @WebworkerNRW
 
Testing ASP.NET - Progressive.NET
Testing ASP.NET - Progressive.NETTesting ASP.NET - Progressive.NET
Testing ASP.NET - Progressive.NET
 
Structured Functional Automated Web Service Testing
Structured Functional Automated Web Service TestingStructured Functional Automated Web Service Testing
Structured Functional Automated Web Service Testing
 
Web Development using Ruby on Rails
Web Development using Ruby on RailsWeb Development using Ruby on Rails
Web Development using Ruby on Rails
 
Continous UI testing with Espresso and Jenkins
Continous UI testing with Espresso and JenkinsContinous UI testing with Espresso and Jenkins
Continous UI testing with Espresso and Jenkins
 
Creating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJSCreating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJS
 
Testing mit Codeception: Full-stack testing PHP framework
Testing mit Codeception: Full-stack testing PHP frameworkTesting mit Codeception: Full-stack testing PHP framework
Testing mit Codeception: Full-stack testing PHP framework
 
introduction to node.js
introduction to node.jsintroduction to node.js
introduction to node.js
 
If you want to automate, you learn to code
If you want to automate, you learn to codeIf you want to automate, you learn to code
If you want to automate, you learn to code
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011
 
The MEAN Stack
The MEAN StackThe MEAN Stack
The MEAN Stack
 

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
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 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
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
 
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
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
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...
 
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
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 

Node.js Development Workflow Automation with Grunt.js

  • 1. Node.Js Development Workflow Automation With Grunt.Js Nadeem Shabir Hydrahack Birmingham 18th March 2014
  • 2. ~ Paul Irish “Your job as a developer isn’t to just develop, it’s to continually learn how to develop better.”
  • 3. Automating common tasks • code quality (jshint) • beautifying (jsbeautifier) • live reload (watch) • Automated Testing
  • 6. – Shaun Dunne ( https://medium.com/fear-and-coding ) “If you’re doing automation, you’re already doing something right. It’s not about how you do it”
  • 7. Grunt.js • Javascript based task runner • automate repetitive tasks • large ecosystem of plugins (2500+) • easy to maintain • simple to learn and use
  • 9. Install npm install -g grunt-cli cd <your_project_dir> npm install grunt --save-dev npm install grunt-contrib-jshint grunt-contrib-watch grunt-mocha-test grunt-jsbeautifier --save-dev
  • 11. watch • runs predefined tasks when files change • use patterns to indicate which files to watch
  • 12. jshint • static code analysis tool • detect errors & potential problems • enforce team coding conventions • every time we change a .js file
  • 13. jsbeautify • reformats Javascript source code • enforces code formatting conventions • easier to read and understand • every time we change a .js file
  • 14.
  • 15.
  • 16.
  • 17. live reload • monitors changes in files • preprocesses files as needed • browser automatically reloads and shows your changes • built into grunt-contrib-watch
  • 18.
  • 19.
  • 21. ! ~ Gerald Weinberg Weinberg’s Second Law: ! “If builders built buildings the way programmers wrote programs, the first wood- pecker that came along would destroy civilization”
  • 22.
  • 24. BDD vs TDD • The gotcha with TDD is that too many developers focused on the "How" when writing their unit tests, so they ended up with very brittle tests that did nothing more than confirm that the system does what it does. • BDD provides a new vocabulary and thus focus for writing a unit test. Basically it is a feature driven approach to TDD.
  • 25. ~ Matt Wynne http://blog.mattwynne.net/2012/11/20/tdd-vs-bdd/ “BDD builds upon TDD by formalising the good habits of the best TDD practitioners”
  • 26. Tools • mocha - (http://visionmedia.github.io/mocha/) BDD, TDD, QUnit styles via interfaces • should.js - (https://github.com/visionmedia/should.js/) expressive, readable, test framework agnostic, assertion library • supertest - (https://github.com/visionmedia/supertest) Super-agent driven library for testing HTTP servers. E2E for apis. • Protractor - (https://github.com/angular/protractor) E2E test framework for Angular apps
  • 27. … caveat • This is based on my personal experience and opinion - YMMV • I’ve been known to change my mind ;-) • … BUT these tools and techniques are being used on a lot of projects successfully.
  • 28. Mocha • vs Jasmine - Jasmine is easier to get started – great all-in-one test framework. • Mocha is more flexible: you have to piece it together yourself. i.e. add an assertion framework, add a spy/mocking framework. Supports different styles of testing, lots of reporters (spec, xunit, nyan ;-) ) & disable tests
  • 29. describe(“my test suite”, function(){! ! ! it(“should test something”, function(done){! ! ! // do some assertions here! ! ! // when your test completes call ! ! ! done();!! ! ! });! ! ! xit(“this test is skipped”, function(done){! ! ! done();!! ! ! });! ! }); Mocha - BDD
  • 30. should.js • nice assertion library. There are lots of others for example chai which is also very good. • chainable language to construct assertions • its api provides lots of assertion methods • very easy to read
  • 31. it(“should test something useful”, function(done){! ! ! ! var colors = [‘red’, ‘white’, ‘blue’];! ! ! colors.should.include(‘red’);! ! colors.should.not.include(‘yellow’);! ! colors.length.should.equal(3);! ! colors.should.be.an.instanceof(Array);! ! ! ! done();!! ! });!
  • 33.
  • 34.
  • 35. supertest • great way to test running http apis, • provides assertions and expectations for http • when combined with async, makes it easy to test a series of api calls • easy to use and makes tests easy to read!
  • 36. var request = require(“supertest”);! ! it(“should return some json”, function(done){! ! request(“http://localhost:3000”)! ! .get('/isbns/978000000000X/lists')! !.set('Accept', 'application/json')! !.expect('Content-Type', /json/)! !.expect(200)! !.end(function(err, res) {! !! if(err) return done(err);! ! ! ! ! res.body.should.xxxxx! ! !! done();! ! ! });! ! });!
  • 37.
  • 38. Protractor • Browser testing for Angular.js apps, built on Webdriver.js • uses selenium-webdriver, tests written in WebDriver API, communicates with Selenium to control browsers • you can run tests locally using Selenium-Standalone • you can run tests against any service that exposes Selenium Hub endpoint ( BrowserStack, SauceLabs)
  • 40. it('should greet the named user', function() {! browser.get('http://www.angularjs.org');! ! // find the element with ng-model matching 'yourName'! element(by.model('yourName')).sendKeys('Nadeem');! ! // find the <h1>Hello {{yourName}}!</h1> element.! var greeting = element(by.binding('yourName'));! ! expect(greeting.getText()).toEqual('Hello Nadeem!');! });
  • 42. Demo
  • 43. E2E testing pitfalls • Use Selenium Standalone on local dev machines • Use Continuous Integration to test range of browsers on different OS. Nightly builds etc. • Use BrowserStack / SauceLabs / Other for CI, unless you have time/£ to set up you’re own infrastructure. • Tunnelling to test local / internal deployments from those services can be slow / unreliable; avoid if possible …
  • 44.
  • 45.
  • 50. @talis facebook.com/talisgroup @talis facebook.com/talisgroup +44 (0) 121 374 2740 ! talis.com info@talis.com ! 48 Frederick Street Birmingham B1 3HN