Re: [testdrivendevelopment] How would you TDD a website front-end?
"Avi Kessner" <[email protected]> Sun, 5 Jan 2020 09:40:22 +0200
| Newsgroups | gmane.comp.programming.test-driven-development |
|---|---|
| Message-ID | <CAGEhWpEKpo3BQeqVTBj9iTvbvaqrwZMUYzEz3VB6EztX8WTSgQ@mail.gmail.com> |
--00000000000079f801059b5fa87f Content-Type: text/plain; charset="UTF-8" Can you provide a concrete example of what you are asking about? Talking about GUI , form and model in the abstract can be confusing. Basically, your GUI should be interacting with some object which I have been calling the model. Your form submission code should be reading from that object and sending the request. You can write normal TDD tests on the functions which change that object. You can assume without unit tests that when the model changes, the GUI changes correctly as well. Test that fact with something like cucumber, or puppeteer, or just do it manually. Make unit tests that change the model as if the server returned data. You don't need an actual server for this. On the server side, there should be some objects which don't "know about" http. Test those apis without making actual http calls. As for testing hand written html, use a things like "getElementByID" On Fri, Jan 3, 2020, 17:57 Alan Baljeu via Groups.Io <alanbaljeu= [email protected]> wrote: > On Friday, January 3, 2020, 04:07:54 a.m. EST, Avi Kessner < > [email protected]> wrote: > >User inputs a value > >Test local model updated with value. > > How? This is interactive and deviates from the normal flow of the page. > > .... Test server response. > OK. > ... > >Force response to the model on the GUI > >Test the model has been updated correctly. > > I read this as, "Test changes the model. Gui responds. Test the model > has been updated". > This doesn't make sense to me. > > >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. > > How do you test hand-written HTML? > > > 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 (#35837): https://groups.io/g/testdrivendevelopment/message/35837 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]] -=-=-=-=-=-=-=-=-=-=-=- --00000000000079f801059b5fa87f Content-Type: text/html; charset="UTF-8" Content-Transfer-Encoding: quoted-printable <div dir=3D"auto">Can you provide a concrete example of what you are asking= about? Talking about GUI , form and model in the abstract can be confusing= .<div dir=3D"auto"><br></div><div dir=3D"auto">Basically, your GUI should b= e interacting with some object which I have been calling the model. Your fo= rm submission code should be reading from that object and sending the reque= st.</div><div dir=3D"auto">You can write normal TDD tests on the functions = which change that object.</div><div dir=3D"auto">You can assume without uni= t tests that when the model changes, the GUI changes correctly as well.</di= v><div dir=3D"auto">Test that fact with something like cucumber, or puppete= er, or just do it manually.</div><div dir=3D"auto"><br></div><div dir=3D"au= to">Make unit tests that change the model as if the server returned data. Y= ou don't need an actual server for this.</div><div dir=3D"auto"><br></d= iv><div dir=3D"auto">On the server side, there should be some objects which= don't "know about" http. Test those apis without making actu= al http calls.</div><div dir=3D"auto"><br></div><div dir=3D"auto"><br></div= ><div dir=3D"auto">As for testing hand written html, use a things like &quo= t;getElementByID"</div></div><br><div class=3D"gmail_quote"><div dir= =3D"ltr" class=3D"gmail_attr">On Fri, Jan 3, 2020, 17:57 Alan Baljeu via G= roups.Io <alanbaljeu=3D<a href=3D"mailto:[email protected]">yahoo.com@= groups.io</a>> wrote:<br></div><blockquote class=3D"gmail_quote" style= =3D"margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div><d= iv style=3D"font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size= :16px"><div><div><span style=3D"color:rgb(38,40,42);font-size:13px">On Frid= ay, January 3, 2020, 04:07:54 a.m. EST, Avi Kessner <<a href=3D"mailto:a= [email protected]" target=3D"_blank" rel=3D"noreferrer">[email protected]<= /a>> wrote:</span><br></div></div></div><div id=3D"m_136843808891141953y= dp228a5738yahoo_quoted_8437037032"><div style=3D"font-family:'Helvetica= Neue',Helvetica,Arial,sans-serif;font-size:13px;color:#26282a"> <div>>User inputs a value<br></div><div><div id=3D"m_13= 6843808891141953ydp228a5738yiv3374776008"><div><div>>Test local model up= dated with value.</div><div><br></div><div dir=3D"ltr">How?=C2=A0 This is i= nteractive and deviates from the normal flow of the page.</div><div><br></d= iv><div dir=3D"ltr">.... Test server response.=C2=A0</div><div dir=3D"ltr">= OK.</div><div>...</div><div>>Force response to the model on the GUI<br><= /div><div>>Test the model has been updated correctly.</div><div><br></di= v><div dir=3D"ltr">I read this as, "Test changes the model.=C2=A0 Gui = responds.=C2=A0 Test the model has been updated".</div><div dir=3D"ltr= ">This doesn't make sense to me.</div><div dir=3D"ltr"><br></div><div>&= gt;Assume GUI updates correctly cause you if you used framework code to alt= er the form.<br></div><div>>Otherwise, test your hand written html as if= it was a model.<br clear=3D"none"><br>How do you test hand-written HTML?<b= r><br><br clear=3D"none"><div><div dir=3D"ltr">On Fri, Jan 3, 2020, 03:49 A= lan Baljeu via Groups.Io <alanbaljeu=3D<a shape=3D"rect" href=3D"mailto:= [email protected]" rel=3D"nofollow noreferrer" target=3D"_blank">yahoo.co= [email protected]</a>> wrote:<br clear=3D"none"></div><blockquote style=3D"mar= gin: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"><br clear= = =3D"none"></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><br clear=3D= "none"></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 clear=3D"none"></div><div><div style=3D"font-family:Helvetica,Ari= al,sans-serif;font-size:16px"><span></span><div style=3D"color:rgb(0,0,0);f= ont-family:Helvetica,Arial,sans-serif;font-size:16px"><div>Alan Baljeu</div= ></div><div style=3D"color:rgb(0,0,0);font-family:Helvetica,Arial,sans-seri= f;font-size:16px"><a shape=3D"rect" href=3D"mailto:[email protected]" re= l=3D"nofollow noreferrer" target=3D"_blank">[email protected]</a></div><= div style=3D"color:rgb(0,0,0);font-family:Helvetica,Arial,sans-serif;font-s= ize:16px"><br clear=3D"none"></div></div></div></div> <div><br clear=3D"none"></div><div><br clear=3D"none"></div> </div><div id=3D"m_136843808891141953ydp228a5738yiv3374776008m_117= 4070532757893286ydp89e51f5yahoo_quoted_8399920580"> <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 shape=3D"rect" href=3D"mailto:[email protected]" rel=3D"nofo= llow noreferrer" target=3D"_blank">[email protected]</a>> wrote: </div> <div><br clear=3D"none"></div> <div><br clear=3D"none"></div> <div><div id=3D"m_136843808891141953ydp228a5738yiv33747760= 08m_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 shape=3D"rect" href= = =3D"mailto:[email protected]" rel=3D"nofollow noreferrer" target=3D"= _blank">[email protected]</a>> wrote:<br clear=3D"none"></div><blo= ckquote style=3D"margin:0 0 0 .8ex;border-left: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> </div></div></div> </div> </p></p></blockquote></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/35837">View/Reply Online (#35837)</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> --00000000000079f801059b5fa87f--