Testing Javascript - GOTO › ... › CoreyHaines_TestingYourJavascript.pdf ·...

Click here to load reader

  • date post

    25-Jun-2020
  • Category

    Documents

  • view

    2
  • download

    0

Embed Size (px)

Transcript of Testing Javascript - GOTO › ... › CoreyHaines_TestingYourJavascript.pdf ·...

  • Testing Javascript

    Thursday, December 2, 2010

  • TDD Javascript

    Thursday, December 2, 2010

  • Respect your Javascript

    Thursday, December 2, 2010

  • Corey Haines

    Journeyman Developer

    www.coreyhaines.com

    That’s Me!

    @coreyhaines

    Thursday, December 2, 2010

    http://www.coreyhaines.com http://www.coreyhaines.com http://www.coreyhaines.com http://www.coreyhaines.com

  • Why don’t we test Javascript?

    • History of scripting language • UI-focused • Hard • No good tools

    Thursday, December 2, 2010

  • But Javascript Is Here!

    Thursday, December 2, 2010

  • Javascript Environments

    • Browser • Node.js • Env.js • More and more!

    Out of Browser

    Thursday, December 2, 2010

  • TDD

    • Not tool-specific, concept-specific • Focused, micro-level tests • Design technique!

    Pain in testing means your design has problems

    Thursday, December 2, 2010

  • TDD Tools

    • Jasmine • QUnit • JSUnit • JSpec • Should.js • Lots More!

    Thursday, December 2, 2010

  • BDD

    • Not tool-specific, concept-specific • Feature-level Full Stack tests driving

    Example-level Isolation tests

    • Outside-in

    Thursday, December 2, 2010

  • BDD Tools!

    • Jasmine • QUnit • JSUnit • JSpec • Should.js • Lots More!

    Thursday, December 2, 2010

  • %h1=Total Pay - users = User.where(:invited_at => yesterday) - sorted_users = users.sort_by(&:email) - amount = 0 - users.each do |user| - pay = user.salary - amount = amount + pay %h2=amount

    Would you write this code in your view?

    Thursday, December 2, 2010

  • Why not?

    Thursday, December 2, 2010

  • Separation of Concerns

    Thursday, December 2, 2010

  • So why do we mix presentation-specific code with business

    logic in our javascript?

    Thursday, December 2, 2010

  • var users, pay, display;

    users = $('#users tr'); pay = 0; users.each(function(item){ pay += item.find('td.pay').val().to_i(); }; display = $("#total_pay"); display.text(pay);

    Thursday, December 2, 2010

  • Design Javascript?

    Thursday, December 2, 2010

  • 4 Rules of Simple Design

    Thursday, December 2, 2010

  • Tests Pass

    Of course

    Thursday, December 2, 2010

  • No Duplication (DRY)

    Every piece of knowledge has one and only one

    representation

    Thursday, December 2, 2010

  • Reveals Intent

    Good Names

    Thursday, December 2, 2010

  • Small

    Well, we are in Javascript

    Thursday, December 2, 2010

  • 4 Rules of Simple Design

    Thursday, December 2, 2010

  • Test Pass

    4 Rules of Simple Design

    Thursday, December 2, 2010

  • Test Pass

    No Duplication

    4 Rules of Simple Design

    Thursday, December 2, 2010

  • Test Pass

    No Duplication

    Reveals Intent

    4 Rules of Simple Design

    Thursday, December 2, 2010

  • Test Pass

    No Duplication

    Reveals Intent

    Small

    4 Rules of Simple Design

    Thursday, December 2, 2010

  • SOLID Principles

    Thursday, December 2, 2010

  • Thursday, December 2, 2010

  • Single responsibility

    Thursday, December 2, 2010

  • Single responsibility

    Open-Closed Principle

    Thursday, December 2, 2010

  • Single responsibility

    Open-Closed Principle

    Liskov Substition Principle

    Thursday, December 2, 2010

  • Single responsibility

    Open-Closed Principle

    Liskov Substition Principle

    Interface Segregation

    Thursday, December 2, 2010

  • Single responsibility

    Open-Closed Principle

    Liskov Substition Principle

    Interface Segregation

    Dependency Inversion

    Thursday, December 2, 2010

  • Design guidelines

    Thursday, December 2, 2010

  • Stratified Design

    It is all about the abstractions

    Thursday, December 2, 2010

  • Find a canonical representation

    DRY

    Thursday, December 2, 2010

  • HTML element data-* attributes

    Thursday, December 2, 2010

  • Business Logic

    Event Handlers Dom Wrappers

    1) button.click()

    2) Wrap Dom Elements

    Business Logic

    3) Pass Wrapper Objects

    4) Ajax?

    Isolation Fixtures

    Test Strategies

    js object wrapper

    dom object

    Thursday, December 2, 2010

  • var users, pay, display;

    users = getUsers($('#users tr')); pay = calculatePayFor(users); display = getDisplay('#total_pay'); display.setValue(pay);

    Thursday, December 2, 2010

  • function calculatePay(users) { return users.inject(0, function(sum, user) { sum += user.salary(); return sum; }; }

    Thursday, December 2, 2010

  • Get away of the DOM

    ASAP!!

    Thursday, December 2, 2010

  • Wrap interactions with DOM

    Builders = { ... } Behaviors = { ... }

    Thursday, December 2, 2010

  • Builders

    ball = Builder.createFoo(domElement);

    Object Creation is cheap

    Builder.createFooDom(ball);

    Thursday, December 2, 2010

  • Use same code for js and html rendering

    Thursday, December 2, 2010

  • Wrap based on behavior!

    Interface Segregation

    Thursday, December 2, 2010

  • Updateable Persistable Draggable

    draggableBall = Behaviors.makeDraggable(ball);

    Thursday, December 2, 2010

  • Guideline: Only the top level gets

    to use $() selectors

    Event Handlers Dom Wrappers

    Thursday, December 2, 2010

  • Spies/Stubs not Mocks

    Thursday, December 2, 2010

  • Questions?

    Corey Haines @coreyhaines

    Thanks for your time

    Thursday, December 2, 2010