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

--000000000000bf7f1e059b33afd4
Content-Type: text/plain; charset="UTF-8"
Content-Transfer-Encoding: quoted-printable

I=E2=80=99ve struggled a bit with this in 2019.  I think George is right.

With React and with Angular, it seems that a lot of the =E2=80=9Ccode=E2=
=80=9D is css and
html and some declarative bits here and there. Many microtests around thos=
e
things feels like =E2=80=9Ctesting the compiler=E2=80=9D and so they=E2=80=
=
=99re not very
interesting. Mocking the back-end feels wrong too.

So it may be good to ensure that crucial bits of the JSON request are buil=
t
correctly or that lookups of urls are done, and such, but for the most par=
t
i think the logic behind needs to be tested and only rather interesting
bits of the front end (decision-making functions, separated from
document-model manipulation stuff).

I have seen a lot of testing done on these UI bits, but not to good effect=
.
It was always more like something a person done and had made it work rathe=
r
than something that worked for the developers. Often the tests got in the
way of refactoring instead of supporting it.

So... yeah. I don=E2=80=99t have answers, but what George says sounds righ=
t.

Tim

I would test the business logic of the model/web service.
> I would also have a few tests that make sure the view is wired correctly
> to the model/web service. Not many of these.
> I might also have tests that provide model data to the view and make
> verifications that it handles them correctly. This can be hard.
>
>   - George
>
--=20
Peace,
Tim
-------------------------------------
http://www.industriallogic.com/
http://agileotter.blogspot.com/

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


--000000000000bf7f1e059b33afd4
Content-Type: text/html; charset="UTF-8"
Content-Transfer-Encoding: quoted-printable

<div><div dir=3D"auto">I=E2=80=99ve struggled a bit with this in 2019.=C2=
=A0 I think George is right.=C2=A0</div></div><div dir=3D"auto"><br></div>=
<div dir=3D"auto">With React and with Angular, it seems that a lot of the =
=E2=80=9Ccode=E2=80=9D is css and html and some declarative bits here and =
there. Many microtests around those things feels like =E2=80=9Ctesting the =
compiler=E2=80=9D and so they=E2=80=99re not very interesting. Mocking the =
back-end feels wrong too.=C2=A0</div><div dir=3D"auto"><br></div><div dir=
=3D"auto">So it may be good to ensure that crucial bits of the JSON reques=
t are built correctly or that lookups of urls are done, and such, but for t=
he most part i think the logic behind needs to be tested and only rather in=
teresting bits of the front end (decision-making functions, separated from =
document-model manipulation stuff).=C2=A0</div><div dir=3D"auto"><br></div>=
<div dir=3D"auto">I have seen a lot of testing done on these UI bits, but n=
ot to good effect. It was always more like something a person done and had =
made it work rather than something that worked for the developers. Often th=
e tests got in the way of refactoring instead of supporting it.</div><div d=
ir=3D"auto"><br></div><div dir=3D"auto">So... yeah. I don=E2=80=99t have an=
swers, but what George says sounds right.=C2=A0</div><div dir=3D"auto"><br>=
</div><div dir=3D"auto">Tim</div><div><br><div class=3D"gmail_quote"><block=
quote class=3D"gmail_quote" style=3D"margin:0 0 0 .8ex;border-left:1px #ccc=
 solid;padding-left:1ex">I would test the business logic of the model/web s=
ervice.<br>
I would also have a few tests that make sure the view is wired correctly <=
br>
to the model/web service. Not many of these.<br>
I might also have tests that provide model data to the view and make <br>
verifications that it handles them correctly. This can be hard.<br>
<br>
=C2=A0 - George<br></blockquote></div></div>-- <br><div dir=3D"ltr" class=
=3D"gmail_signature" data-smartmail=3D"gmail_signature"><div dir=3D"ltr"><=
div><div dir=3D"ltr"><div><div dir=3D"ltr">Peace,</div><div dir=3D"ltr">Tim=
<br>-------------------------------------<br><a href=3D"http://www.industri=
allogic.com/" target=3D"_blank">http://www.industriallogic.com/</a><br><a h=
ref=3D"http://agileotter.blogspot.com/" target=3D"_blank">http://agileotter=
.blogspot.com/</a><br></div></div></div></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/35830">View/Reply Online (#35830)</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>


--000000000000bf7f1e059b33afd4--