Re: [testdrivendevelopment] How would you TDD a website front-end?
"Avi Kessner" <[email protected]> Fri, 3 Jan 2020 11:07:37 +0200
| Newsgroups | gmane.comp.programming.test-driven-development |
|---|---|
| Message-ID | <CAGEhWpFZZ_kALVV0Q89p+iZiMvpZvKYaDqxxKp8jNAVR684drg@mail.gmail.com> |
--000000000000d63f0c059b38a4f5 Content-Type: text/plain; charset="UTF-8" I would do it like this: 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 alter the form. Otherwise, test your hand written html as if it was a model. On Fri, Jan 3, 2020, 03:49 Alan Baljeu via Groups.Io <alanbaljeu= [email protected]> wrote: > The pattern I have is > > User inputs a value > Form posts value to server > Server responds with new model data. > Form reconfigures. > > "Test changes to the model" then I think means testing the web service. > So don't test the view? > > Alan Baljeu > [email protected] > > > > On Thursday, January 2, 2020, 06:58:20 p.m. EST, Avi Kessner < > [email protected]> wrote: > > > Test the changes to the model, not the GUI itself. > > On Fri, Jan 3, 2020, 00:26 George Dinwiddie <[email protected]> > wrote: > > Alan, > > Way back, I played with test-driving AWT and Java Swing UIs, starting > with just jUnit. Given the availability of web driver libraries, you can > do similar things much more easily. > > 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. > > In > > https://github.com/gdinwiddie/EquineHoroscope/tree/master/src/test/java/com/gdinwiddie/equinehoroscope/acceptance > 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. > > - George > > > Alan Baljeu > > [email protected] > > > > > > -- > ---------------------------------------------------------------------- > * George Dinwiddie * http://blog.gdinwiddie.com > Software Development http://www.idiacomputing.com > Consultant and Coach > ---------------------------------------------------------------------- > > > > > > > -=-=-=-=-=-=-=-=-=-=-=- Groups.io Links: You receive all messages sent to this group. View/Reply Online (#35832): https://groups.io/g/testdrivendevelopment/message/35832 Mute This Topic: https://groups.io/mt/69387056/3268755 Group Owner: [email protected] Unsubscribe: https://groups.io/g/testdrivendevelopment/leave/6156322/744556386/xyzzy [[email protected]] -=-=-=-=-=-=-=-=-=-=-=- --000000000000d63f0c059b38a4f5 Content-Type: text/html; charset="UTF-8" Content-Transfer-Encoding: quoted-printable <div dir=3D"auto"><div dir=3D"auto">I would do it like this:</div><div dir= =3D"auto"><br></div><div>User inputs a value</div><div dir=3D"auto">Test l= ocal model updated with value.</div><div dir=3D"auto">Form posts model to s= erver.</div><div dir=3D"auto">Test server handles form model and returns ex= pected model.</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><di= v dir=3D"auto">Assume GUI updates correctly cause you if you used framework= code to alter the form.</div><div dir=3D"auto">Otherwise, test your hand w= ritten html as if it was a model.<br><br><div class=3D"gmail_quote" dir=3D"= auto"><div dir=3D"ltr" class=3D"gmail_attr">On Fri, Jan 3, 2020, 03:49 Alan= Baljeu via Groups.Io <alanbaljeu=3D<a href=3D"mailto:[email protected]= o">[email protected]</a>> wrote:<br></div><blockquote class=3D"gmail_q= uote" style=3D"margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1e= x"><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"><br></div><div dir=3D"ltr">User inputs a value</div><div dir=3D"l= tr">Form posts value to server</div><div dir=3D"ltr">Server responds with n= ew model data.</div><div dir=3D"ltr">Form reconfigures.</div><div><br></div= ><div dir=3D"ltr">"Test changes to the model" then I think means = testing the web service.=C2=A0 So don't test the view?</div><div><br></= div><div><div style=3D"font-family:Helvetica,Arial,sans-serif;font-size:16p= x"><span><div style=3D"color:rgb(0,0,0);font-family:Helvetica,Arial,sans-se= rif;font-size:16px"><div>Alan Baljeu</div></div><div style=3D"color:rgb(0,0= ,0);font-family:Helvetica,Arial,sans-serif;font-size:16px"><a href=3D"mailt= o:[email protected]" target=3D"_blank" rel=3D"noreferrer">alanbaljeu@yah= oo.com</a></div><div style=3D"color:rgb(0,0,0);font-family:Helvetica,Arial,= sans-serif;font-size:16px"><br></div></span></div></div></div> <div><br></div><div><br></div> </div><div id=3D"m_1174070532757893286ydp89e51f5yahoo_quoted_83999= 20580"> <div style=3D"font-family:'Helvetica Neue',Helvetica,A= rial,sans-serif;font-size:13px;color:#26282a"> <div> On Thursday, January 2, 2020, 06:58:20 p.m. EST, Avi K= essner <<a href=3D"mailto:[email protected]" target=3D"_blank" rel=3D"n= oreferrer">[email protected]</a>> wrote: </div> <div><br></div> <div><br></div> <div><div id=3D"m_1174070532757893286ydp89e51f5yiv91855592= 69"><div><div>Test the changes to the model, not the GUI itself.</div><br c= lear=3D"none"><div><div dir=3D"ltr">On Fri, Jan 3, 2020, 00:26 George Dinwi= ddie <<a shape=3D"rect" href=3D"mailto:[email protected]" rel=3D"n= ofollow noreferrer" target=3D"_blank">[email protected]</a>> wrote= :<br clear=3D"none"></div><blockquote style=3D"margin:0 0 0 .8ex;border-lef= t:1px #ccc solid;padding-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 can <= 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 make sure things were <br = clear=3D"none"> wired up correctly. I tested the actual API to make sure the system <br cl= ear=3D"none"> worked correctly.<br clear=3D"none"> <br clear=3D"none"> In <br clear=3D"none"> <a shape=3D"rect" href=3D"https://github.com/gdinwiddie/EquineHoroscope/tr= ee/master/src/test/java/com/gdinwiddie/equinehoroscope/acceptance" rel=3D"n= ofollow noreferrer" target=3D"_blank">https://github.com/gdinwiddie/EquineH= oroscope/tree/master/src/test/java/com/gdinwiddie/equinehoroscope/acceptanc= e</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 GUI by injecting a different adapter to <br= clear=3D"none"> talk with the system under test.<br clear=3D"none"> <br clear=3D"none"> =C2=A0 - George<br clear=3D"none"> <br clear=3D"none"> > Alan Baljeu<br clear=3D"none"> > <a shape=3D"rect" href=3D"mailto:[email protected]" rel=3D"nofollo= w noreferrer" target=3D"_blank">[email protected]</a><br clear=3D"none"> > <br clear=3D"none"> > <br clear=3D"none"> <br clear=3D"none"> -- <br clear=3D"none"> =C2=A0 -------------------------------------------------------------------= ---<br clear=3D"none"> =C2=A0 =C2=A0* George Dinwiddie *=C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0= =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 <a shape=3D"rect" href=3D"http://blog.g= dinwiddie.com" rel=3D"nofollow noreferrer" target=3D"_blank">http://blog.gd= inwiddie.com</a><br clear=3D"none"> =C2=A0 =C2=A0Software Development=C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0= =C2=A0 =C2=A0 =C2=A0 =C2=A0 <a shape=3D"rect" href=3D"http://www.idiacompu= ting.com" rel=3D"nofollow noreferrer" target=3D"_blank">http://www.idiacomp= uting.com</a><br clear=3D"none"> =C2=A0 =C2=A0Consultant and Coach<br clear=3D"none"> =C2=A0 -------------------------------------------------------------------= ---<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> <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/35832">View/Reply Online (#35832)</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=3DPri= vate:%20Re:%20Re%3A%20%5Btestdrivendevelopment%5D%20How%20would%20you%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> --000000000000d63f0c059b38a4f5--