SlideShare ist ein Scribd-Unternehmen logo
1 von 21
Downloaden Sie, um offline zu lesen
Reinforcing your Backbone.js app
                with tests
                Mark Roseboom
                  Crashlytics


1               CRASHLYTICS CONFIDENTIAL   © 2013. All rights reserved
Backbone testing
Tests are for real engineers...

           I work on the front end,
              I don’t need tests.




3                 CRASHLYTICS CONFIDENTIAL   © 2012. All rights reserved
Testing matters for front end

    ‣ Maintain structure and reliability
    ‣ Insulate from 3rd parties

    ‣ Minimize team development concerns

    ‣ Spot-check poorly written code




4                     CRASHLYTICS CONFIDENTIAL   © 2012. All rights reserved
Lets break it down
            Unit       Integration                          Feature
                                                                Clear
             Fast         Env Specific
                                                              Definitions
    Pros




            Easy to          System                               User
            Debug         Interactions                          Focused




            Isolated                               Slow
    Cons




                                                  Hard to
                                                  Debug


5                      CRASHLYTICS CONFIDENTIAL             © 2012. All rights reserved
Unit tests for Backbone.js




6               CRASHLYTICS CONFIDENTIAL   © 2012. All rights reserved
What is Jasmine?




7       CRASHLYTICS CONFIDENTIAL   ©2013. All rights reserved
Standalone unit testing library
          ‣   Suites - Describe behavior
          ‣   Specs - Assert expectations
          ‣   Matchers - Boolean Comparison
    describe 'test suite', ->

      it 'has a spec, with an expectation', -> expect(true).toBe true

      describe 'nested suite', ->

        it 'has many matchers', ->
          foo = bar : 'bar', baz : null
          expect(foo).not.toEqual 'qux'
          expect(foo.bar).toBeDefined()
          expect(foo.baz).toBeNull()




8                               CRASHLYTICS CONFIDENTIAL     © 2012. All rights reserved
Stubbing and mocking methods

    describe 'spies', ->
      it 'can stub existing object methods', ->
        foo = bar : (value) -> console.log value
        spyOn foo, 'bar'
        foo.bar 'a value'
        expect(foo.bar).toHaveBeenCalled()

      describe 'mocking new methods', ->

        it 'can create new spies', ->
          spy = jasmine.createSpy 'spy'
          spy 'an argument'
          expect(spy).toHaveBeenCalledWith 'an argument'

        it 'can create a mock with multiple spies', ->
          spyObj = jasmine.createSpyObj 'spyObj', ['method']
          spyObj.method()
          expect(spyObj.method).toHaveBeenCalled()




9                             CRASHLYTICS CONFIDENTIAL     © 2012. All rights reserved
Controlling spy behavior

     describe 'spy behavior', ->
      beforeEach -> @foo = bar : (value) -> value
      beforeEach -> spyOn @foo, 'bar'

      it 'can delegate the actual implementation', ->
        @foo.bar.andCallThrough()
        result = @foo.bar 'a value'
        expect(@foo.bar).toHaveBeenCalled()
        expect(result).toEqual 'a value'

      it 'can return a specified value', ->
        @foo.bar.andReturn 'another value'
        result = @foo.bar 'a value'
        expect(result).toEqual 'another value'


      it 'can delegate to a callback', ->
        @foo.bar.andCallFake console.log
        @foo.bar 'a value'
        # console output: 'a value'




10                             CRASHLYTICS CONFIDENTIAL   © 2012. All rights reserved
Tailoring Jasmine for Backbone.js




11                CRASHLYTICS CONFIDENTIAL   ©2013. All rights reserved
Jasmine-given

     describe 'spy behavior', ->
       beforeEach -> @foo = bar : (value) -> value
       beforeEach -> spyOn @foo, 'bar'

       it 'can delegate the actual implementation', ->
         @foo.bar.andCallThrough()
         result = @foo.bar 'a value'
         expect(@foo.bar).toHaveBeenCalled()
         expect(result).toEqual 'a value'
                                      Text




     describe 'spy behavior', ->

       Given -> @foo = bar : (value) -> value
       Given -> spyOn(@foo, 'bar').andCallThrough()
       When -> @result = @foo.bar 'a value'
       Then -> expect(@foo.bar).toHaveBeenCalled()
       Then -> expect(@result).toEqual 'a value'




12                                 CRASHLYTICS CONFIDENTIAL   © 2012. All rights reserved
Jasmine-jQuery

     class Profile extends Backbone.View
       id : 'profile'

       showEmail : -> @$el.addClass 'show'




       describe 'showEmail', ->
         Given -> @view = new Profile()
         When -> @view.showEmail()
         Then -> expect(@view.$el.hasClass 'show').toBe true




       describe 'showEmail', ->
         Given -> @view = new Profile()
         When -> @view.showEmail()
         Then -> expect(@view.$el).hasClass 'show'




13                                CRASHLYTICS CONFIDENTIAL     © 2012. All rights reserved
Start testing your app




14          CRASHLYTICS CONFIDENTIAL   ©2013. All rights reserved
Backbone View - Todo MVC




15             CRASHLYTICS CONFIDENTIAL   © 2012. All rights reserved
Backbone View - Todo MVC




16             CRASHLYTICS CONFIDENTIAL   © 2012. All rights reserved
Backbone View - Todo MVC




17             CRASHLYTICS CONFIDENTIAL   © 2012. All rights reserved
What’s next...




18      CRASHLYTICS CONFIDENTIAL   ©2013. All rights reserved
Bigger picture




         Feature and integration tests
           Continuous integration

19                 CRASHLYTICS CONFIDENTIAL   © 2012. All rights reserved
Resources

     ‣   Jasmine - http://pivotal.github.com/jasmine/
     ‣   Jasmine-Given - https://github.com/searls/jasmine-given
     ‣   Jasmine-jQuery - https://github.com/velesin/jasmine-jquery
     ‣   Jasmine-Stealth - https://github.com/searls/jasmine-stealth




20                              CRASHLYTICS CONFIDENTIAL   © 2012. All rights reserved
Thank You
       (we’re hiring)
              Mark Roseboom
                Crashlytics




21      CRASHLYTICS CONFIDENTIAL   © 2013. All rights reserved

Weitere ähnliche Inhalte

Was ist angesagt?

Paying off technical debt with PHPSpec
Paying off technical debt with PHPSpecPaying off technical debt with PHPSpec
Paying off technical debt with PHPSpecLewis Wright
 
AngularJS Tips&Tricks
AngularJS Tips&TricksAngularJS Tips&Tricks
AngularJS Tips&TricksPetr Bela
 
AngularJS in practice
AngularJS in practiceAngularJS in practice
AngularJS in practicejhoguet
 
Functional Structures in PHP
Functional Structures in PHPFunctional Structures in PHP
Functional Structures in PHPMarcello Duarte
 
Proposed PHP function: is_literal()
Proposed PHP function: is_literal()Proposed PHP function: is_literal()
Proposed PHP function: is_literal()Craig Francis
 
ngMess: AngularJS Dependency Injection
ngMess: AngularJS Dependency InjectionngMess: AngularJS Dependency Injection
ngMess: AngularJS Dependency InjectionDzmitry Ivashutsin
 
Things to consider for testable Code
Things to consider for testable CodeThings to consider for testable Code
Things to consider for testable CodeFrank Kleine
 
Javascript Testing with Jasmine 101
Javascript Testing with Jasmine 101Javascript Testing with Jasmine 101
Javascript Testing with Jasmine 101Roy Yu
 
Asp.net mvc internals & extensibility
Asp.net mvc internals & extensibilityAsp.net mvc internals & extensibility
Asp.net mvc internals & extensibilityEyal Vardi
 
Čtvrtkon #53 - Štěpán Zikmund
Čtvrtkon #53 - Štěpán ZikmundČtvrtkon #53 - Štěpán Zikmund
Čtvrtkon #53 - Štěpán ZikmundPéhápkaři
 
Sqladria 2009 SRC
Sqladria 2009 SRCSqladria 2009 SRC
Sqladria 2009 SRCtepsum
 
(국비지원학원/재직자교육/실업자교육/IT실무교육_탑크리에듀)#4.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)
(국비지원학원/재직자교육/실업자교육/IT실무교육_탑크리에듀)#4.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)(국비지원학원/재직자교육/실업자교육/IT실무교육_탑크리에듀)#4.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)
(국비지원학원/재직자교육/실업자교육/IT실무교육_탑크리에듀)#4.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)탑크리에듀(구로디지털단지역3번출구 2분거리)
 
AMD & Require.js
AMD & Require.jsAMD & Require.js
AMD & Require.jsEyal Vardi
 
Deadly Code! (seriously) Blocking & Hyper Context Switching Pattern
Deadly Code! (seriously) Blocking & Hyper Context Switching PatternDeadly Code! (seriously) Blocking & Hyper Context Switching Pattern
Deadly Code! (seriously) Blocking & Hyper Context Switching Patternchibochibo
 

Was ist angesagt? (19)

Paying off technical debt with PHPSpec
Paying off technical debt with PHPSpecPaying off technical debt with PHPSpec
Paying off technical debt with PHPSpec
 
AngularJS Tips&Tricks
AngularJS Tips&TricksAngularJS Tips&Tricks
AngularJS Tips&Tricks
 
AngularJS in practice
AngularJS in practiceAngularJS in practice
AngularJS in practice
 
Functional Structures in PHP
Functional Structures in PHPFunctional Structures in PHP
Functional Structures in PHP
 
Frontin like-a-backer
Frontin like-a-backerFrontin like-a-backer
Frontin like-a-backer
 
Solid principles
Solid principlesSolid principles
Solid principles
 
Proposed PHP function: is_literal()
Proposed PHP function: is_literal()Proposed PHP function: is_literal()
Proposed PHP function: is_literal()
 
ngMess: AngularJS Dependency Injection
ngMess: AngularJS Dependency InjectionngMess: AngularJS Dependency Injection
ngMess: AngularJS Dependency Injection
 
Things to consider for testable Code
Things to consider for testable CodeThings to consider for testable Code
Things to consider for testable Code
 
Javascript Testing with Jasmine 101
Javascript Testing with Jasmine 101Javascript Testing with Jasmine 101
Javascript Testing with Jasmine 101
 
Asp.net mvc internals & extensibility
Asp.net mvc internals & extensibilityAsp.net mvc internals & extensibility
Asp.net mvc internals & extensibility
 
Download It
Download ItDownload It
Download It
 
Čtvrtkon #53 - Štěpán Zikmund
Čtvrtkon #53 - Štěpán ZikmundČtvrtkon #53 - Štěpán Zikmund
Čtvrtkon #53 - Štěpán Zikmund
 
Factory Girl
Factory GirlFactory Girl
Factory Girl
 
Sqladria 2009 SRC
Sqladria 2009 SRCSqladria 2009 SRC
Sqladria 2009 SRC
 
(국비지원학원/재직자교육/실업자교육/IT실무교육_탑크리에듀)#4.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)
(국비지원학원/재직자교육/실업자교육/IT실무교육_탑크리에듀)#4.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)(국비지원학원/재직자교육/실업자교육/IT실무교육_탑크리에듀)#4.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)
(국비지원학원/재직자교육/실업자교육/IT실무교육_탑크리에듀)#4.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)
 
AMD & Require.js
AMD & Require.jsAMD & Require.js
AMD & Require.js
 
Automated Refactoring With IntelliJ IDEA
Automated Refactoring With IntelliJ IDEA Automated Refactoring With IntelliJ IDEA
Automated Refactoring With IntelliJ IDEA
 
Deadly Code! (seriously) Blocking & Hyper Context Switching Pattern
Deadly Code! (seriously) Blocking & Hyper Context Switching PatternDeadly Code! (seriously) Blocking & Hyper Context Switching Pattern
Deadly Code! (seriously) Blocking & Hyper Context Switching Pattern
 

Ähnlich wie Backbone testing

Crossing the Bridge: Connecting Rails and your Front-end Framework
Crossing the Bridge: Connecting Rails and your Front-end FrameworkCrossing the Bridge: Connecting Rails and your Front-end Framework
Crossing the Bridge: Connecting Rails and your Front-end FrameworkDaniel Spector
 
Security testing of YUI powered applications
Security testing of YUI powered applicationsSecurity testing of YUI powered applications
Security testing of YUI powered applicationsdimisec
 
Java, Up to Date
Java, Up to DateJava, Up to Date
Java, Up to Date輝 子安
 
Industrial Strength Groovy - Tools for the Professional Groovy Developer: Pau...
Industrial Strength Groovy - Tools for the Professional Groovy Developer: Pau...Industrial Strength Groovy - Tools for the Professional Groovy Developer: Pau...
Industrial Strength Groovy - Tools for the Professional Groovy Developer: Pau...Paul King
 
Javascript tdd byandreapaciolla
Javascript tdd byandreapaciollaJavascript tdd byandreapaciolla
Javascript tdd byandreapaciollaAndrea Paciolla
 
A gently introduction to AngularJS
A gently introduction to AngularJSA gently introduction to AngularJS
A gently introduction to AngularJSGregor Woiwode
 
Introduction to Backbone.js & Marionette.js
Introduction to Backbone.js & Marionette.jsIntroduction to Backbone.js & Marionette.js
Introduction to Backbone.js & Marionette.jsReturn on Intelligence
 
Java EE 7 - Novidades e Mudanças
Java EE 7 - Novidades e MudançasJava EE 7 - Novidades e Mudanças
Java EE 7 - Novidades e MudançasBruno Borges
 
JavaScript Cheatsheets with easy way .pdf
JavaScript Cheatsheets with easy way .pdfJavaScript Cheatsheets with easy way .pdf
JavaScript Cheatsheets with easy way .pdfranjanadeore1
 
AngularJS intro
AngularJS introAngularJS intro
AngularJS introdizabl
 
The vJUG talk about jOOQ: Get Back in Control of Your SQL
The vJUG talk about jOOQ: Get Back in Control of Your SQLThe vJUG talk about jOOQ: Get Back in Control of Your SQL
The vJUG talk about jOOQ: Get Back in Control of Your SQLLukas Eder
 
ForwardJS 2017 - Fullstack end-to-end Test Automation with node.js
ForwardJS 2017 -  Fullstack end-to-end Test Automation with node.jsForwardJS 2017 -  Fullstack end-to-end Test Automation with node.js
ForwardJS 2017 - Fullstack end-to-end Test Automation with node.jsMek Srunyu Stittri
 
GlassFish REST Administration Backend at JavaOne India 2012
GlassFish REST Administration Backend at JavaOne India 2012GlassFish REST Administration Backend at JavaOne India 2012
GlassFish REST Administration Backend at JavaOne India 2012Arun Gupta
 
Javascript unit testing, yes we can e big
Javascript unit testing, yes we can   e bigJavascript unit testing, yes we can   e big
Javascript unit testing, yes we can e bigAndy Peterson
 
Connecting with the enterprise - The how and why of connecting to Enterprise ...
Connecting with the enterprise - The how and why of connecting to Enterprise ...Connecting with the enterprise - The how and why of connecting to Enterprise ...
Connecting with the enterprise - The how and why of connecting to Enterprise ...Kevin Poorman
 
In The Future We All Use Symfony2
In The Future We All Use Symfony2In The Future We All Use Symfony2
In The Future We All Use Symfony2Brent Shaffer
 
JRuby + Rails = Awesome Java Web Framework at Jfokus 2011
JRuby + Rails = Awesome Java Web Framework at Jfokus 2011JRuby + Rails = Awesome Java Web Framework at Jfokus 2011
JRuby + Rails = Awesome Java Web Framework at Jfokus 2011Nick Sieger
 

Ähnlich wie Backbone testing (20)

Crossing the Bridge: Connecting Rails and your Front-end Framework
Crossing the Bridge: Connecting Rails and your Front-end FrameworkCrossing the Bridge: Connecting Rails and your Front-end Framework
Crossing the Bridge: Connecting Rails and your Front-end Framework
 
Security testing of YUI powered applications
Security testing of YUI powered applicationsSecurity testing of YUI powered applications
Security testing of YUI powered applications
 
Deep dive into Oracle ADF
Deep dive into Oracle ADFDeep dive into Oracle ADF
Deep dive into Oracle ADF
 
Java, Up to Date
Java, Up to DateJava, Up to Date
Java, Up to Date
 
Sightly_techInsight
Sightly_techInsightSightly_techInsight
Sightly_techInsight
 
Industrial Strength Groovy - Tools for the Professional Groovy Developer: Pau...
Industrial Strength Groovy - Tools for the Professional Groovy Developer: Pau...Industrial Strength Groovy - Tools for the Professional Groovy Developer: Pau...
Industrial Strength Groovy - Tools for the Professional Groovy Developer: Pau...
 
Javascript tdd byandreapaciolla
Javascript tdd byandreapaciollaJavascript tdd byandreapaciolla
Javascript tdd byandreapaciolla
 
Hybrid Applications
Hybrid ApplicationsHybrid Applications
Hybrid Applications
 
A gently introduction to AngularJS
A gently introduction to AngularJSA gently introduction to AngularJS
A gently introduction to AngularJS
 
Introduction to Backbone.js & Marionette.js
Introduction to Backbone.js & Marionette.jsIntroduction to Backbone.js & Marionette.js
Introduction to Backbone.js & Marionette.js
 
Java EE 7 - Novidades e Mudanças
Java EE 7 - Novidades e MudançasJava EE 7 - Novidades e Mudanças
Java EE 7 - Novidades e Mudanças
 
JavaScript Cheatsheets with easy way .pdf
JavaScript Cheatsheets with easy way .pdfJavaScript Cheatsheets with easy way .pdf
JavaScript Cheatsheets with easy way .pdf
 
AngularJS intro
AngularJS introAngularJS intro
AngularJS intro
 
The vJUG talk about jOOQ: Get Back in Control of Your SQL
The vJUG talk about jOOQ: Get Back in Control of Your SQLThe vJUG talk about jOOQ: Get Back in Control of Your SQL
The vJUG talk about jOOQ: Get Back in Control of Your SQL
 
ForwardJS 2017 - Fullstack end-to-end Test Automation with node.js
ForwardJS 2017 -  Fullstack end-to-end Test Automation with node.jsForwardJS 2017 -  Fullstack end-to-end Test Automation with node.js
ForwardJS 2017 - Fullstack end-to-end Test Automation with node.js
 
GlassFish REST Administration Backend at JavaOne India 2012
GlassFish REST Administration Backend at JavaOne India 2012GlassFish REST Administration Backend at JavaOne India 2012
GlassFish REST Administration Backend at JavaOne India 2012
 
Javascript unit testing, yes we can e big
Javascript unit testing, yes we can   e bigJavascript unit testing, yes we can   e big
Javascript unit testing, yes we can e big
 
Connecting with the enterprise - The how and why of connecting to Enterprise ...
Connecting with the enterprise - The how and why of connecting to Enterprise ...Connecting with the enterprise - The how and why of connecting to Enterprise ...
Connecting with the enterprise - The how and why of connecting to Enterprise ...
 
In The Future We All Use Symfony2
In The Future We All Use Symfony2In The Future We All Use Symfony2
In The Future We All Use Symfony2
 
JRuby + Rails = Awesome Java Web Framework at Jfokus 2011
JRuby + Rails = Awesome Java Web Framework at Jfokus 2011JRuby + Rails = Awesome Java Web Framework at Jfokus 2011
JRuby + Rails = Awesome Java Web Framework at Jfokus 2011
 

Kürzlich hochgeladen

Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 

Kürzlich hochgeladen (20)

Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 

Backbone testing

  • 1. Reinforcing your Backbone.js app with tests Mark Roseboom Crashlytics 1 CRASHLYTICS CONFIDENTIAL © 2013. All rights reserved
  • 3. Tests are for real engineers... I work on the front end, I don’t need tests. 3 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  • 4. Testing matters for front end ‣ Maintain structure and reliability ‣ Insulate from 3rd parties ‣ Minimize team development concerns ‣ Spot-check poorly written code 4 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  • 5. Lets break it down Unit Integration Feature Clear Fast Env Specific Definitions Pros Easy to System User Debug Interactions Focused Isolated Slow Cons Hard to Debug 5 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  • 6. Unit tests for Backbone.js 6 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  • 7. What is Jasmine? 7 CRASHLYTICS CONFIDENTIAL ©2013. All rights reserved
  • 8. Standalone unit testing library ‣ Suites - Describe behavior ‣ Specs - Assert expectations ‣ Matchers - Boolean Comparison describe 'test suite', -> it 'has a spec, with an expectation', -> expect(true).toBe true describe 'nested suite', -> it 'has many matchers', -> foo = bar : 'bar', baz : null expect(foo).not.toEqual 'qux' expect(foo.bar).toBeDefined() expect(foo.baz).toBeNull() 8 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  • 9. Stubbing and mocking methods describe 'spies', -> it 'can stub existing object methods', -> foo = bar : (value) -> console.log value spyOn foo, 'bar' foo.bar 'a value' expect(foo.bar).toHaveBeenCalled() describe 'mocking new methods', -> it 'can create new spies', -> spy = jasmine.createSpy 'spy' spy 'an argument' expect(spy).toHaveBeenCalledWith 'an argument' it 'can create a mock with multiple spies', -> spyObj = jasmine.createSpyObj 'spyObj', ['method'] spyObj.method() expect(spyObj.method).toHaveBeenCalled() 9 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  • 10. Controlling spy behavior describe 'spy behavior', -> beforeEach -> @foo = bar : (value) -> value beforeEach -> spyOn @foo, 'bar' it 'can delegate the actual implementation', -> @foo.bar.andCallThrough() result = @foo.bar 'a value' expect(@foo.bar).toHaveBeenCalled() expect(result).toEqual 'a value' it 'can return a specified value', -> @foo.bar.andReturn 'another value' result = @foo.bar 'a value' expect(result).toEqual 'another value' it 'can delegate to a callback', -> @foo.bar.andCallFake console.log @foo.bar 'a value' # console output: 'a value' 10 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  • 11. Tailoring Jasmine for Backbone.js 11 CRASHLYTICS CONFIDENTIAL ©2013. All rights reserved
  • 12. Jasmine-given describe 'spy behavior', -> beforeEach -> @foo = bar : (value) -> value beforeEach -> spyOn @foo, 'bar' it 'can delegate the actual implementation', -> @foo.bar.andCallThrough() result = @foo.bar 'a value' expect(@foo.bar).toHaveBeenCalled() expect(result).toEqual 'a value' Text describe 'spy behavior', -> Given -> @foo = bar : (value) -> value Given -> spyOn(@foo, 'bar').andCallThrough() When -> @result = @foo.bar 'a value' Then -> expect(@foo.bar).toHaveBeenCalled() Then -> expect(@result).toEqual 'a value' 12 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  • 13. Jasmine-jQuery class Profile extends Backbone.View id : 'profile' showEmail : -> @$el.addClass 'show' describe 'showEmail', -> Given -> @view = new Profile() When -> @view.showEmail() Then -> expect(@view.$el.hasClass 'show').toBe true describe 'showEmail', -> Given -> @view = new Profile() When -> @view.showEmail() Then -> expect(@view.$el).hasClass 'show' 13 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  • 14. Start testing your app 14 CRASHLYTICS CONFIDENTIAL ©2013. All rights reserved
  • 15. Backbone View - Todo MVC 15 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  • 16. Backbone View - Todo MVC 16 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  • 17. Backbone View - Todo MVC 17 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  • 18. What’s next... 18 CRASHLYTICS CONFIDENTIAL ©2013. All rights reserved
  • 19. Bigger picture Feature and integration tests Continuous integration 19 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  • 20. Resources ‣ Jasmine - http://pivotal.github.com/jasmine/ ‣ Jasmine-Given - https://github.com/searls/jasmine-given ‣ Jasmine-jQuery - https://github.com/velesin/jasmine-jquery ‣ Jasmine-Stealth - https://github.com/searls/jasmine-stealth 20 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved
  • 21. Thank You (we’re hiring) Mark Roseboom Crashlytics 21 CRASHLYTICS CONFIDENTIAL © 2013. All rights reserved