Keyboard Shortcuts
ctrl + shift + ? :
Show all keyboard shortcuts
ctrl + g :
Navigate to a group
ctrl + shift + f :
Find
ctrl + / :
Quick actions
esc to dismiss
Likes
Search
Re: How would you TDD a website front-end?
I insisted on "what" because it's not so obvious as it seems. I was doing web pages before all these frameworks show up (omg I feel old), so in my old time :-) we were taught that web pages have 3 concerns: structure and semantic with html, style with css, and behaviour with javascript.1 - Structure and semantic of content can you test semantic and structure ? -> yes can these tests help you to design your content structure and semantic? -> why not ? Content is not necessarily coupled to structure but I think it's ok to bind it, some examples: Imagine you write a blog article on TDD, you collect all the questions you find on forums with the keywords: emergent design, TDD, BDD, refactoring... (or you simply talk with beginners... whatever) You regroup these questions and priorize them, and you organize your article within this priority. It is quite similar to writing software, your readers have needs and you provide a set of features (contents) that try to respond to their needs. In this context it may have sense to drive the wrtting of your content with tests. Concretly, if your subject is TDD, you'll merely have a big title h1 which contains the keyword "TDD", you also may have one h2 title with the keyword "red", one with "green" and one with "refactor" or you may have a h2 title with the 3 keywords "red", "green", "refactor", followed by 3 paragraphs with a h3 title with one of these keywords.... Also because of seo and accessibility it's interesting to bind the content to structure and semantic. Seo provides some tools to measure if your content is relevant like counting words, givinfg more importance to titles, links... 2 - style with css can you test style ? -> yes can these tests help you to design your page style ? -> why not ? I'm not graphist and can't precisely answer on the utility of these tests but this is some leads that may help. The style provide infomation to the user about what he can do, this is what I would test. for example when a user fly over a button, the button background color can enlight to 20% to alert him an action is possible, otherwise if action is blocked the background color may dim by 50% There's intrinsically some rules in web pages like "underlined text is reserved to link", "h1 title font size is bigger than h2 size"... I imagine a graphist use more complex rules, and TDD can help. 3 - behaviour with javascript Some have said you test user input, in this context of frontend it may not be totally exact. In a javascript script the input is the webpage, you respond to event of the webpage not just user, for ex. user is writing in an input field, in the point of view of js, this is the input field which is emitting "change" event. You can have push events form the server... it's not restricted to user input. A priori you have to test events, and idk if it can really lead your design in all cases. To conclude (and show I'm not so old than it seems :-)), we can take the example of a web component like if it's a small web page with the 3 concerns. Our web component is a shortened description, about structure and semantic concern I would test if it contains a "summary" and "details", about style we can test if details are hidden in normal state and visible in expanded state, in behaviour we can test if when we click on summary the normal/expanded state is switching. <shorteneddesc><summary>being conscious of what you're testing is fundamental</summary><details>you can loose yourself in useless details if it's not clear in your mind ;-)</details></shorteneddesc> wish you the best for this new year, regards, ³Ò°ù¨¦²µ´Ç°ù²â Le?dim. 5 janv. 2020 ¨¤?03:09, Russell Gold <russ@...> a ¨¦crit?:
|
to navigate to use esc to dismiss