Modern Web DevelopmentTestable WebForms with Model V iew Presenter

Modern Web DevelopmentTestable WebForms with Model V iew Presenter

Please help us!Thank our Sponsors:

Caleb

Rachel NoahEmily

Kaitlyn

Abigail

Caleb

developingUX.comspeakermix.com/calebjenkins

@calebjenkins#ttf2014

why

TestableRepeatable

Maintainable Reliable-able

ScalableExtensible

Deliverable

Workable

Development

Object Orientation

SOLID

Patterns

Secure Coding

Building teams that engineer better software

D e v e l o p m e n t ∙ E n g i n e e r i n g ∙ P r o c e s s

http://developingUX.com/TulsaTech2014/

1:30pm

3:00pm

4:00pm

#ttf2014

write better code

modern web!

back to…

15

what are the 4 big parts of unit tests?what are the 4 big parts of unit tests?

16

Test Framework Test Runner

Code Testsyour applicationwhat you want to test

your test codethe code that tests the

code that you wrote or are going to write

attributes and assertsthe framework provides

the attributes and asserts so we know what the tests

are doing. Examples: nUnit jUnit

cppUnit

runs the testsoften associated with the

test framework; is distinctly separate.

sometime integrated in IDE, CI Server or stand

alone exe

17

Test Runner

Code

Test

Fra

mew

orkTests

Tests

Tests

Tests

Tests

18

Test Runners

nUnit Test RunnerVisual Studio (VS Test)

CodeRush / ReSharperContinuous Integration (Team City)

the problem with edges

UI DataBusiness

Edges areHard to Test

Testing edges can be like

testing to see if you’re good at cliff jumping

That’s not me

..or you’restuff on a rock.

You’re either an expert and it works…

UI DataDataLogic

UILogicBusiness

Edges areHard to Test

Edges are stillHard to Test

by separating UI/Data edges fromUI/Data logic we’re increasing the testable area

we’ve also made it easier to implementvarious UI and Data platforms

without affecting the application logic

MVP, MVC

or MVVM

Patterns

Repository

Pattern

25

Model View Controller (MVC)•All input is routed to a controller•Example Web Scenarios•ASP.NET MVC Framework

Model View Presenter (MVP)• View initiates Presenter• UI Logic is contained in Presenter• Example WinForms & ASP.NET Webform apps

Model View ViewModel (MVVM)• ViewModel is a view specific model• VM is can mash up application models• UI logic contained in ViewModel• Example Rich Data binding Scenarios

(WPF / Silverlight / XAML / JS)

UI Patterns for

Testability

Keep Views Dumb

Each Pattern has a

testable part

View

Controller

Presenter (UI Logic)

Model (Data)

You!

Definitions

(IView)

V

P

MMVP

Request

RendersEvents

Updates

Gets

Updates

V

C

MMVC

Request

Up

dates

Reflects

Ren

ders

V

MM-V-VM

Request

RendersEvents

Updates

Gets/Updates

VM

P

M (Customer)

With MVP

Request

Renders

the Presenter “knows” about every field.

FirstName

LastName

GenderMobileNumber

BirthDayEmail

WebpagePhotoAboutM

(OrderHistory)OrderDetails[ ]

M (Customer)

In a MVVM

Request

Renders

M (OrderHistory)

the View “binds” to the ViewModel

VM

angularJS.org

handelbarsJS.comknockoutJS.com

knockoutMVC.com ToDoMVC.com

WebForms -> MVP

WebForms -> MVP

interface IMyPageView

MyPage.aspx class MyPage : Page, IMyPageView

event Loadbool isPostBackstring MyTextevent ButtonPressed

class MyPagePresenterMyPagePresenter (IMyPageView view)

wire these up!

Determine View Interactions

1

implement View in Page

2

wire View in Presenter

3

Test Presenter

4

Did you sayTestable WebForms?

Resources & Frameworks

BDDhttp://neelnarayan.blogspot.com/2010/07/bdd-is-more-than-tdd-done-right.html

more than TDD done right

http://dannorth.net/introducing-bdd/

introducing BDD

http://lucisferre.net/2011/02/05/behavior-driven-test-driven-domain-driven-design/

behavior driven, test driven, domain driven

nBehave, nSpec, SpecFlow, StoryQ, mSpec, StorEvil

Handle your dependencies

Dependencies“The single greatest thing that you can do to make your code more testable and healthy is to start taking a Dependency Injection approach to writing software”

Dependencies“The single greatest thing that you can do to make your code more testable and healthy is to start taking a Dependency Injection approach to writing software”

- Real World .NET, C# and SilverlightWrox Press 2012

Caleb Jenkins

- Real World .NET, C# and SilverlightWrox Press 2012

Caleb Jenkins

?Data Access

Data Logic

Integration Service Proxy

App Domain Domain Validation

UI Logic

UI

How do you test this

with thesedependencies

Data Access

Data Logic

Integration Service Proxy

App Domain Domain Validation

UI Logic

UI

Test Runner

Test Code

Integration Service Proxy

App Domain Domain Validation

UI LogicFaked Input

Faked

Dependencies

Dependency Injection + InterfacesFaked dependencies to increase unit isolationLeverage mocking frameworks makes life better

Note:Dependency InjectionNote:Dependency Injection

will turn you in to a complete coding Ninja, however the full scope of DI with any of the many DI frameworks is beyond the scope of this talk

will turn you in to a complete coding Ninja, however the full scope of DI with any of the many DI frameworks is beyond the scope of this talk

http://developingUX.com/DI/

- Real World .NET, C# and SilverlightWrox Press 2012

Caleb Jenkins

- Real World .NET, C# and SilverlightWrox Press 2012

Caleb Jenkins

Mocking Framework“A mocking framework allows you to create fake classes on the fly in-line with your test code. That is a bit of a simplification, mocking frameworks use a combination of emits, reflection and generics to create run-time instance implementations of .NET Interfaces – whew, that’s a mouthful - it’s a whole lot easier to say that they create fake classes on the fly!”

Mocking Framework“A mocking framework allows you to create fake classes on the fly in-line with your test code. That is a bit of a simplification, mocking frameworks use a combination of emits, reflection and generics to create run-time instance implementations of .NET Interfaces – whew, that’s a mouthful - it’s a whole lot easier to say that they create fake classes on the fly!”

Mocking in .NETMicrosoft.Fakes

Bringing DI togetherBringing DI together

IData mockData = MockRepository.GenerateMock<IData>();

mockData.Expect(x => x.getAll<account>()).Return(sampleAccounts).Repeat.Once();

IAccountServices accountService= new AcmeAccountService(mockData);

var act = accountService.GetAccount(known_account_id);

mockData.VerifyAllExpectations();

using Rhino.MocksExpectations

DIaction

asserts

WebForms -> MVP

MyPage.aspxMyPagePresenter

Leverage DI from Here!Thin with no UI logic!Non-Platform Specific in View Interface

WebForms -> MVP

Test the Presenter!

DI + Mocks == Awesome!

Wire Up DI

5

Consider WebFormsMVP

6

6 http://WebFormsMVP.com

http://WebFormsMVP.com

Special Thanks!

http://developingUX.com/

psa

PROACTION

M E N T O R S

http://www.flickr.com/photos/jforth/5768064504/

http://www.flickr.com/photos/laughingsquid/255915238/

http://www.flickr.com/photos/dieselbug2007/370557683/

http://www.flickr.com/photos/m0php/530526644/

Photo Creditshttp://www.flickr.com/photos/lowfatbrains/80542761/

PROACTION

M E N T O R S

http://www.flickr.com/photos/georgivar/4974112941/

http://www.flickr.com/photos/redbettyblack/395899686/sizes/

http://www.flickr.com/photos/goldberg/815408116/

http://www.flickr.com/photos/fudj/122371431/

http://www.flickr.com/photos/yardsale/4524101944/

http://www.flickr.com/photos/38738277@N04/3652658961/

PROACTION

M E N T O R S

http://www.flickr.com/photos/utslibrary/6776175796/

http://www.flickr.com/photos/48725518@N03/4478990651/Copyright © Merriswheel – Used without permission

http://www.flickr.com/photos/mworrell/266913194/

https://www.flickr.com/photos/sprengben/4419536377/

PROACTION

M E N T O R S

Please Complete An Evaluation FormYour input is important!

You can access Evaluation Forms at:

http://TulsaTechFest.com

Fill them out!

You can win additional prizes!

Like a $50 Best Buy Gift Card!!

Winner drawn – Midnight, Sun Aug 17th!

PROACTION

M E N T O R S

Please help us!Thank our Sponsors:

Thank

you!

developingUX.comspeakermix.com/calebjenkins

@calebjenkins

Awesome

Reviews go

here!

I t ’s t ime for quest ions now

75

Test Code … 3 A’s

Arrange– Set up the scenario and the initial input values.

Often in a common [TestFixtureSetup] or [Setup] method

Act - Action that creates the outcome that is being tests,

usually calling some method in your code to test the result.

Assert – Is a boolean statement to your testing framework

to declare the expected outcome. Results in Pass or Fail

Arrange Act Assert

Data Access

Data Logic

Integration Service Proxy

App Domain Domain Validation

UI Logic

UI

Building better Lego’s

Tests are small

Tests are fast

Tests focus on one thing

Red

GreenRefactor

Test Runner

Simple Tests (return values) with no dependencies…

App Domain Domain Validation

UI Logic

Test Code

Faked Input

Unit Tests focus on a UnitTest a unit in isolation from other unitsControl input => Testable output

as a <role>,I will <function>so that <value>

Defining Behavior

Look

Familiar?

Discussion

what if our “tests”

given <class> to test

when <setup> scenario

then <test> outcome

matched ourlanguage?

Discussion

Discussion

BDD