Re: [testdrivendevelopment] How would you TDD a website front-end?

"Alan Baljeu via Groups.Io" <[email protected]> Fri, 3 Jan 2020 15:57:16 +0000 (UTC)
Newsgroups gmane.comp.programming.test-driven-development
Message-ID <[email protected]>
------=_Part_6326716_1146257383.1578067036146
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: quoted-printable

On Friday, January 3, 2020, 04:07:54 a.m. EST, Avi Kessner <akessner@gmail.=
com> wrote:
 >User inputs a value
>Test local model updated with value.
How?=C2=A0 This is interactive and deviates from the normal flow of the pa=
ge.
.... Test server response.=C2=A0OK....>Force response to the model on the =
GUI
>Test the model has been updated correctly.
I read this as, "Test changes the model.=C2=A0 Gui responds.=C2=A0 Test th=
e model has been updated".This doesn't make sense to me.
>Assume GUI updates correctly cause you if you used framework code to alte=
r 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=3Dyahoo.c=
[email protected]> wrote:

The pattern I have is
User inputs a valueForm posts value to serverServer responds with new mode=
l data.Form reconfigures.
"Test changes to the model" then I think means testing the web service.=C2=
=
=A0 So don't test the view?
Alan [email protected]
=20

    On Thursday, January 2, 2020, 06:58:20 p.m. EST, Avi Kessner <akessner=
@gmail.com> wrote:
=20
 Test the changes to the model, not the GUI itself.
On Fri, Jan 3, 2020, 00:26 George Dinwiddie <[email protected]> wrot=
e:

Alan,

Way back, I played with test-driving AWT and Java Swing UIs, starting=20
with just jUnit. Given the availability of web driver libraries, you can=
=20
do similar things much more easily.

In general, I tested the GUI with a test API to make sure things were=20
wired up correctly. I tested the actual API to make sure the system=20
worked correctly.

In=20
https://github.com/gdinwiddie/EquineHoroscope/tree/master/src/test/java/co=
m/gdinwiddie/equinehoroscope/acceptance=20
you can see an example of re-using a test that drove the API creation to=
=20
check the same result from the GUI by injecting a different adapter to=20
talk with the system under test.

=C2=A0 - George

> Alan Baljeu
> [email protected]
>=20
>=20

--=20
=C2=A0 -------------------------------------------------------------------=
---
=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 http://blog.gdinwiddie.com
=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 http://www.idiacomputing.com
=C2=A0 =C2=A0Consultant and Coach
=C2=A0 -------------------------------------------------------------------=
---













-=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 (#35833): https://groups.io/g/testdrivendevelopment/mess=
age/35833
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-


------=_Part_6326716_1146257383.1578067036146
Content-Type: text/html; charset=UTF-8
Content-Transfer-Encoding: quoted-printable

<html><head></head><body><div class=3D"ydpe00ea70ayahoo-style-wrap" style=
=3D"font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-size:16p=
x;"><div><div><span style=3D"color: rgb(38, 40, 42); font-size: 13px;">On F=
riday, January 3, 2020, 04:07:54 a.m. EST, Avi Kessner &lt;[email protected]=
om&gt; wrote:</span><br></div></div></div><div id=3D"ydp228a5738yahoo_quote=
d_8437037032" class=3D"ydp228a5738yahoo_quoted"><div style=3D"font-family:'=
Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;color:#26282a;=
">
                <div>&gt;User inputs a value<br></div><div><div id=3D"ydp2=
28a5738yiv3374776008"><div><div>&gt;Test local model updated with value.</d=
iv><div><br></div><div dir=3D"ltr" data-setdir=3D"false">How?&nbsp; This is=
 interactive and deviates from the normal flow of the page.</div><div><br><=
/div><div dir=3D"ltr" data-setdir=3D"false">.... Test server response.&nbsp=
;</div><div dir=3D"ltr" data-setdir=3D"false">OK.</div><div>...</div><div>&=
gt;Force response to the model on the GUI<br></div><div>&gt;Test the model =
has been updated correctly.</div><div><br></div><div dir=3D"ltr" data-setdi=
r=3D"false">I read this as, "Test changes the model.&nbsp; Gui responds.&nb=
sp; Test the model has been updated".</div><div dir=3D"ltr" data-setdir=3D"=
false">This doesn't make sense to me.</div><div dir=3D"ltr" data-setdir=3D"=
false"><br></div><div>&gt;Assume GUI updates correctly cause you if you use=
d framework code to alter the form.<br></div><div>&gt;Otherwise, test your =
hand written html as if it was a model.<br clear=3D"none"><br>How do you te=
st hand-written HTML?<br><br><br clear=3D"none"><div class=3D"ydp228a5738yi=
v3374776008gmail_quote"><div class=3D"ydp228a5738yiv3374776008gmail_attr" d=
ir=3D"ltr">On Fri, Jan 3, 2020, 03:49 Alan Baljeu via Groups.Io &lt;alanbal=
jeu=3D<a shape=3D"rect" href=3D"mailto:[email protected]" rel=3D"nofollow=
" target=3D"_blank">[email protected]</a>&gt; wrote:<br clear=3D"none"></=
div><blockquote class=3D"ydp228a5738yiv3374776008gmail_quote" style=3D"marg=
in: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:16p=
x;"><div><div dir=3D"ltr">The pattern I have is</div><div dir=3D"ltr"><br c=
lear=3D"none"></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 clear=
=
=3D"none"></div><div dir=3D"ltr">"Test changes to the model" then I think =
means testing the web service.&nbsp; So don't test the view?</div><div><br =
clear=3D"none"></div><div><div style=3D"font-family:Helvetica, Arial, sans-=
serif;font-size:16px;"><span></span><div style=3D"color:rgb(0,0,0);font-fam=
ily:Helvetica, Arial, sans-serif;font-size:16px;"><div>Alan Baljeu</div></d=
iv><div style=3D"color:rgb(0,0,0);font-family:Helvetica, Arial, sans-serif;=
font-size:16px;"><a shape=3D"rect" href=3D"mailto:[email protected]" rel=
=
=3D"nofollow" target=3D"_blank">[email protected]</a></div><div style=
=3D"color:rgb(0,0,0);font-family:Helvetica, Arial, sans-serif;font-size:16=
px;"><br clear=3D"none"></div></div></div></div>
        <div><br clear=3D"none"></div><div><br clear=3D"none"></div>

        </div><div id=3D"ydp228a5738yiv3374776008m_1174070532757893286ydp8=
9e51f5yahoo_quoted_8399920580">
            <div style=3D"font-family:'Helvetica Neue', Helvetica, Arial, =
sans-serif;font-size:13px;color:#26282a;">

                <div>
                    On Thursday, January 2, 2020, 06:58:20 p.m. EST, Avi K=
essner &lt;<a shape=3D"rect" href=3D"mailto:[email protected]" rel=3D"nofo=
llow" target=3D"_blank">[email protected]</a>&gt; wrote:
                </div>
                <div><br clear=3D"none"></div>
                <div><br clear=3D"none"></div>
                <div><div id=3D"ydp228a5738yiv3374776008m_1174070532757893=
286ydp89e51f5yiv9185559269"><div><div>Test the changes to the model, not th=
e GUI itself.</div><br clear=3D"none"><div><div dir=3D"ltr">On Fri, Jan 3, =
2020, 00:26 George Dinwiddie &lt;<a shape=3D"rect" href=3D"mailto:lists@idi=
acomputing.com" rel=3D"nofollow" target=3D"_blank">[email protected]<=
/a>&gt; wrote:<br clear=3D"none"></div><blockquote style=3D"margin:0 0 0 .8=
ex;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" target=3D"_blank">https://github.com/gdinwiddie/EquineHoroscope/tr=
ee/master/src/test/java/com/gdinwiddie/equinehoroscope/acceptance</a> <br c=
lear=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">
&nbsp; - George<br clear=3D"none">
<br clear=3D"none">
&gt; Alan Baljeu<br clear=3D"none">
&gt; <a shape=3D"rect" href=3D"mailto:[email protected]" rel=3D"nofollo=
w" target=3D"_blank">[email protected]</a><br clear=3D"none">
&gt; <br clear=3D"none">
&gt; <br clear=3D"none">
<br clear=3D"none">
-- <br clear=3D"none">
&nbsp; -------------------------------------------------------------------=
---<br clear=3D"none">
&nbsp; &nbsp;* George Dinwiddie *&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;=
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a shape=3D"rect" href=3D"http://blog.g=
dinwiddie.com" rel=3D"nofollow" target=3D"_blank">http://blog.gdinwiddie.co=
m</a><br clear=3D"none">
&nbsp; &nbsp;Software Development&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;=
 &nbsp; &nbsp; &nbsp; &nbsp; <a shape=3D"rect" href=3D"http://www.idiacompu=
ting.com" rel=3D"nofollow" target=3D"_blank">http://www.idiacomputing.com</=
a><br clear=3D"none">
&nbsp; &nbsp;Consultant and Coach<br clear=3D"none">
&nbsp; -------------------------------------------------------------------=
---<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>
        </div></body></html>

<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/35833">View/Reply Online (#35833)</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=3DP=
rivate:%20Re:%20Re%3A%20%5Btestdrivendevelopment%5D%20How%20would%20you%20T=
DD%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>


------=_Part_6326716_1146257383.1578067036146--