Re: [testdrivendevelopment] How would you TDD a website front-end?
"Ken Mccormack" <[email protected]> Sat, 04 Jan 2020 03:57:05 -0800
| Newsgroups | gmane.comp.programming.test-driven-development |
|---|---|
| Message-ID | <[email protected]> |
--iR5zvpm5IoNWKDgSjW7U Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: quoted-printable You need to split functions into separate categories - orthogonal concerns = - not confuse/couple them by end to end flow tests. TBH a lot depends on the=C2=A0kind of quality outcomes you are looking for= , the complexity of your UI-side logic, and the tech skills of your team. My guess with Blazor is that this is just standard nunit tests running aga= inst C# models.=C2=A0 For the most part, I'd write non-200 tests here, e.g.= a stubs will cover un-happy paths, malformed responses, all classes API er= rors, but also things like already created.=C2=A0 Other concerns would be t= ested using functional tests, probably, rather than repeat the same coverag= e in multiple places. But it depends. What is your app about?=C2=A0 What is its most complex pie= ce?=C2=A0 Why Blazor, rather than React?=C2=A0 Why silo front end tests, do= you have a separate API team?=C2=A0 What are your QA processes? The typical set of application tests might be - 1. unit tests to cover=C2=A0 UI model logic, and in particular, to emulate= error and fault cases 2. API tests - if you're in a silo, you should be throwing a set of consum= er tests across each API release, to ensure that your basic assumptions are= n't broken - if the api code is released independently from the front end (= eg a microservices architecture) you need to pin down your contract by pass= ing the API team a set of tests to litmus check your expectations are being= met (PACT is one approach that you might try, but frameworks in .net weren= 't very mature and tbh it's easier to roll your own approach, often) 3. UI automation - a journey test that hits each API once in an end to end= flow (eg. place an order) The Cohn test pyramid is often used to describe the above - but it is also= naively misquoted and rarely deeply understood - it says *you have to test= at all (composition) levels*, and so the pyramid is a reflection of a typi= cal OO composition style (i.e. not all apps will have their tests resemble = a pyramid, many apps use functional tests, and unit test only negative case= s. Doing more advanced CD, for example, requires some system design, i.e. con= trol and observation code, or the ability to run synthetic transactions aga= inst production.=C2=A0 I'd rather do that first than unit test happy paths.= In that situation a simple stub/mockist TDD approach doesn't cut it - but = how far you go depends upon the quality outcomes you're looking to achieve = in terms of deploys per developer per day. Kennos 3, 2020 at 01:07 AM, Avi Kessner wrote: >=20 > I would do it like this: >=20 > User inputs a value > Test local model updated with value. > Form posts model to server. > Test server handles form model and returns expected model. > Force response to the model on the GUI > Test the model has been updated correctly. > Assume GUI updates correctly cause you if you used framework code to alt= er > the form. > Otherwise, test your hand written html as if it was a model. >=20 > On Fri, Jan 3, 2020, 03:49 Alan Baljeu via Groups.Io <alanbaljeu=3D yaho= [email protected] > > wrote: >=20 >> The pattern I have is >>=20 >> User inputs a value >> Form posts value to server >> Server responds with new model data. >> Form reconfigures. >>=20 >> "Test changes to the model" then I think means testing the web service.= = =C2=A0 >> So don't test the view? >>=20 >> Alan Baljeu >> [email protected] >>=20 >>=20 >>=20 >> On Thursday, January 2, 2020, 06:58:20 p.m. EST, Avi Kessner < akessner= @gmail.com >> > wrote: >>=20 >>=20 >> Test the changes to the model, not the GUI itself. >>=20 >> On Fri, Jan 3, 2020, 00:26 George Dinwiddie < [email protected] > >> wrote: >>=20 >>> Alan, >>>=20 >>> Way back, I played with test-driving AWT and Java Swing UIs, starting >>> with just jUnit. Given the availability of web driver libraries, you c= an >>> do similar things much more easily. >>>=20 >>> In general, I tested the GUI with a test API to make sure things were >>> wired up correctly. I tested the actual API to make sure the system >>> worked correctly. >>>=20 >>> In >>> https://github.com/gdinwiddie/EquineHoroscope/tree/master/src/test/jav= a/com/gdinwiddie/equinehoroscope/acceptance >>>=20 >>> you can see an example of re-using a test that drove the API creation = to >>> check the same result from the GUI by injecting a different adapter to >>> talk with the system under test. >>>=20 >>> - George >>>=20 >>> > Alan Baljeu >>> > [email protected] >>> > >>> > >>>=20 >>> -- >>> ---------------------------------------------------------------------- >>> * George Dinwiddie * http://blog.gdinwiddie.com >>> Software Development http://www.idiacomputing.com >>> Consultant and Coach >>> ---------------------------------------------------------------------- >>>=20 >>>=20 >>>=20 >>>=20 >>>=20 >>=20 >>=20 >>=20 >>=20 >>=20 >>=20 >>=20 >>=20 >>=20 >>=20 >>=20 >=20 >=20 > -=3D-=3D-=3D-=3D-=3D-=3D-=3D-=3D-=3D-=3D-=3D- Groups.io Links: You receive all messages sent to this group. View/Reply Online (#35834): https://groups.io/g/testdrivendevelopment/mess= age/35834 Mute This Topic: https://groups.io/mt/69387056/3268755 Group Owner: [email protected] Unsubscribe: https://groups.io/g/testdrivendevelopment/leave/6156322/74455= 6386/xyzzy [[email protected]] -=3D-=3D-=3D-=3D-=3D-=3D-=3D-=3D-=3D-=3D-=3D- --iR5zvpm5IoNWKDgSjW7U Content-Type: text/html; charset="utf-8" Content-Transfer-Encoding: quoted-printable You need to split functions into separate categories - orthogonal concerns = - not confuse/couple them by end to end flow tests. <br /> <br />= TBH a lot depends on the kind of quality outcomes you are looking for,= the complexity of your UI-side logic, and the tech skills of your team.<br= /><br />My guess with Blazor is that this is just standard nunit tests run= ning against C# models. For the most part, I'd write non-200 tests he= re, e.g. a stubs will cover un-happy paths, malformed responses, all classe= s API errors, but also things like already created. Other concerns wo= uld be tested using functional tests, probably, rather than repeat the same= coverage in multiple places.<br /><br />But it depends. What is your app a= bout? What is its most complex piece? Why Blazor, rather than R= eact? Why silo front end tests, do you have a separate API team? = ; What are your QA processes?<br /><br />The typical set of application tes= ts might be -<br /><br />1. unit tests to cover UI model logic, and i= n particular, to emulate error and fault cases <br />2. API tests - if= you're in a silo, you should be throwing a set of consumer tests across ea= ch API release, to ensure that your basic assumptions aren't broken - if th= e api code is released independently from the front end (eg a microservices= architecture) you need to pin down your contract by passing the API team a= set of tests to litmus check your expectations are being met (PACT is one = approach that you might try, but frameworks in .net weren't very mature and= tbh it's easier to roll your own approach, often)<br />3. UI automation - = a journey test that hits each API once in an end to end flow (eg. place an = order)<br /><br />The Cohn test pyramid is often used to describe the above= - but it is also naively misquoted and rarely deeply understood - it says = *you have to test at all (composition) levels*, and so the pyramid is a ref= lection of a typical OO composition style (i.e. not all apps will have thei= r tests resemble a pyramid, many apps use functional tests, and unit test o= nly negative cases.<br /><br />Doing more advanced CD, for example, require= s some system design, i.e. control and observation code, or the ability to = run synthetic transactions against production. I'd rather do that fir= st than unit test happy paths. In that situation a simple stub/mockist TDD = approach doesn't cut it - but how far you go depends upon the quality outco= mes you're looking to achieve in terms of deploys per developer per day.&nb= sp;<br /><br />Kennos<br /><br />3, 2020 at 01:07 AM, Avi Kessner wrote:<br= /> <blockquote> <div dir=3D"auto"> <div dir=3D"auto">I would do it like this:</div> <div dir=3D"auto"> </div> <div>User inputs a value</div> <div dir=3D"auto">Test local model updated with value.</div> <div dir=3D"auto">Form posts model to server.</div> <div dir=3D"auto">Test server handles form model and returns expected mode= l.</div> <div dir=3D"auto">Force response to the model on the GUI</div> <div dir=3D"auto">Test the model has been updated correctly.</div> <div dir=3D"auto">Assume GUI updates correctly cause you if you used frame= work code to alter the form.</div> <div dir=3D"auto">Otherwise, test your hand written html as if it was a mo= del.<br /><br /> <div class=3D"gmail_quote" dir=3D"auto"> <div class=3D"gmail_attr" dir=3D"ltr">On Fri, Jan 3, 2020, 03:49 Alan Balj= eu via Groups.Io <alanbaljeu=3D<a href=3D"mailto:[email protected]">ya= [email protected]</a>> wrote:</div> <blockquote class=3D"gmail_quote" style=3D"margin: 0 0 0 .8ex; border-left= : 1px #ccc solid; padding-left: 1ex;"> <div> <div style=3D"font-family: Helvetica Neue,Helvetica,Arial,sans-serif; font= -size: 16px;"> <div> <div dir=3D"ltr">The pattern I have is</div> <div dir=3D"ltr"> </div> <div dir=3D"ltr">User inputs a value</div> <div dir=3D"ltr">Form posts value to server</div> <div dir=3D"ltr">Server responds with new model data.</div> <div dir=3D"ltr">Form reconfigures.</div> <div> </div> <div dir=3D"ltr">"Test changes to the model" then I think means testing th= e web service. So don't test the view?</div> <div> </div> <div> <div style=3D"font-family: Helvetica,Arial,sans-serif; font-size: 16px;"> <div style=3D"color: #000000; font-family: Helvetica,Arial,sans-serif; fon= t-size: 16px;"> <div>Alan Baljeu</div> </div> <div style=3D"color: #000000; font-family: Helvetica,Arial,sans-serif; fon= t-size: 16px;"><a href=3D"mailto:[email protected]" target=3D"_blank" re= l=3D"noopener noreferrer">[email protected]</a></div> <div style=3D"color: #000000; font-family: Helvetica,Arial,sans-serif; fon= t-size: 16px;"> </div> </div> </div> </div> <div> </div> <div> </div> </div> <div id=3D"m_1174070532757893286ydp89e51f5yahoo_quoted_8399920580"> <div style=3D"font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; fo= nt-size: 13px; color: #26282a;"> <div>On Thursday, January 2, 2020, 06:58:20 p.m. EST, Avi Kessner <<a h= ref=3D"mailto:[email protected]" target=3D"_blank" rel=3D"noopener norefer= rer">[email protected]</a>> wrote:</div> <div> </div> <div> </div> <div> <div id=3D"m_1174070532757893286ydp89e51f5yiv9185559269"> <div> <div>Test the changes to the model, not the GUI itself.</div> <br clear=3D"none" /> <div> <div dir=3D"ltr">On Fri, Jan 3, 2020, 00:26 George Dinwiddie <<a href= =3D"mailto:[email protected]" target=3D"_blank" rel=3D"nofollow noop= ener noreferrer" shape=3D"rect">[email protected]</a>> wrote:</div= > <blockquote style=3D"margin: 0 0 0 .8ex; border-left: 1px #ccc solid; padd= ing-left: 1ex;">Alan,<br clear=3D"none" /><br clear=3D"none" />Way back, I = played with test-driving AWT and Java Swing UIs, starting <br clear=3D"none= " />with just jUnit. Given the availability of web driver libraries, you ca= n <br clear=3D"none" />do similar things much more easily.<br clear=3D"none= " /><br clear=3D"none" />In general, I tested the GUI with a test API to ma= ke sure things were <br clear=3D"none" />wired up correctly. I tested the a= ctual API to make sure the system <br clear=3D"none" />worked correctly.<br= clear=3D"none" /><br clear=3D"none" />In <br clear=3D"none" /><a href=3D"h= ttps://github.com/gdinwiddie/EquineHoroscope/tree/master/src/test/java/com/= gdinwiddie/equinehoroscope/acceptance" target=3D"_blank" rel=3D"nofollow no= opener noreferrer" shape=3D"rect">https://github.com/gdinwiddie/EquineHoros= cope/tree/master/src/test/java/com/gdinwiddie/equinehoroscope/acceptance</a= > <br clear=3D"none" />you can see an example of re-using a test that drove= the API creation to <br clear=3D"none" />check the same result from the GU= I by injecting a different adapter to <br clear=3D"none" />talk with the sy= stem under test.<br clear=3D"none" /><br clear=3D"none" /> - George<b= r clear=3D"none" /><br clear=3D"none" />> Alan Baljeu<br clear=3D"none" = />> <a href=3D"mailto:[email protected]" target=3D"_blank" rel=3D"nof= ollow noopener noreferrer" shape=3D"rect">[email protected]</a><br clear= = =3D"none" />> <br clear=3D"none" />> <br clear=3D"none" /><br clear= =3D"none" />-- <br clear=3D"none" /> -------------------------------= ---------------------------------------<br clear=3D"none" /> * = George Dinwiddie * &= nbsp; <a href=3D"http://blog.gdinwiddie.com" target=3D"_blank= " rel=3D"nofollow noopener noreferrer" shape=3D"rect">http://blog.gdinwiddi= e.com</a><br clear=3D"none" /> Software Development  = ; <a href=3D"http:/= /www.idiacomputing.com" target=3D"_blank" rel=3D"nofollow noopener noreferr= er" shape=3D"rect">http://www.idiacomputing.com</a><br clear=3D"none" />&nb= sp; Consultant and Coach<br clear=3D"none" /> -----------------= -----------------------------------------------------<br clear=3D"none" /><= br clear=3D"none" /><br clear=3D"none" /><br clear=3D"none" /><br clear=3D"= none" /></blockquote> </div> </div> </div> </div> </div> </div> </div> <p> </p> <p> </p> </blockquote> </div> </div> </div> </blockquote> <div width=3D"1" style=3D"color:white;clear:both">_._,_._,_</div> <hr> Groups.io Links:<p> You receive all messages sent to this group. <p> <a target=3D"_blank" href=3D"https://groups.io/g/testdrivendevelopment/mes= sage/35834">View/Reply Online (#35834)</a> | <a target=3D"_blank" href=3D"mailto:[email protected]?subj= ect=3DRe:%20Re%3A%20%5Btestdrivendevelopment%5D%20How%20would%20you%20TDD%2= 0a%20website%20front-end%3F">Reply To Group</a> | <a target=3D"_blank" href=3D"mailto:[email protected]?subject= =3DPrivate:%20Re:%20Re%3A%20%5Btestdrivendevelopment%5D%20How%20would%20yo= u%20TDD%20a%20website%20front-end%3F">Reply To Sender</a> | <a target=3D"_blank" href=3D"https://groups.io/mt/69387056/3268755">Mu= te This Topic</a> | <a href=3D"https://groups.io/g/testdrivendevelopment/post">New Topic</a>= <br> <br> <a href=3D"https://groups.io/g/testdrivendevelopment/editsub/3268755">Your= Subscription</a> | <a href=3D"mailto:[email protected]">Contact Group Own= er</a> | <a href=3D"https://groups.io/g/testdrivendevelopment/leave/6156322/7445563= 86/xyzzy">Unsubscribe</a> [[email protected]]<br> <div width=3D"1" style=3D"color:white;clear:both">_._,_._,_</div> --iR5zvpm5IoNWKDgSjW7U--