Test-Driven Development (TDD) for CSS
Would someone point me in the direction of these techniques?
64 Replies
starting resources are sites like codepen:
https://codepen.io/
--> just enter some code to test it is working. @Kevin mentions developer tools often in his videos, like the firefox developer tools; they help by mentioning valid CSS use
TDD refers to a development methodology where you write automated tests that describe what your code should do, then implement the code that's needed for the automated tests to pass. The idea is that you end up with a project with a high test coverage, which in theory means it's harder to introduce bugs and regressions, because every change is tested against all the tests that already exist.
In practice in my experience, it's often a lot of work for not a lot of actual benefit. Writing tests is hard, writing good tests is almost impossible.
I agree with @Jochem, if you're newer to CSS, don't worry about CSS regression testing. Most browsers handle CSS errors it seems. when it's broken, it's maybe not an area that's too much worry for concern.
this will not apply to sites that have PII, security concerns, health information.... of sorts.
as for the original question, I'm afraid I don't have any experience with automated tests for CSS. I know there's some ways to test CSS though. One I hear mentioned occasionally is visual regression testing, where effectively a tool takes a screenshot of your functional project or component, and then compares new code to see if it produces the same output.
I've heard mixed things about it though.
this entire thing raises 1 question: can you even test css?
i thought for a long time, and can't come up with a conclusion
i can see that failing spectacularly
but it sounds really cool, not gonna lie
use "Lighthouse" tab in dev tools if you haven't already. It mentions good practices and finds and highlights bad practices
that doesn't fix a div having the wrong z-index, or the layout completely breaking at 420px
hah, really? Still, it's a good tool
TDD isn't based on manually testing though, @reddogg476
that's just ... development
the idea of it is to write the tests, and they just happen
you check the result and fix stuff
maybe google had source on it? I believe they own lighthouse
but the thing is: you write the tests first, then you write the code until it stops erroring
that's not "test driven development"
that's "checking how bad my stuff is"
and it's a process you manually start
i learned alot of rules checked that way. it was basically test-driving development for me 😄
Test Driven Development is a specific thing though, it doesn't have anything to do with manually testing your code, but specifically with automating the testing before you write the code so that when you're three months into the project and you change something, you'll notice it broke because a test is now failing. It's a technique to write maintainable software with a larger code base where manually testing everything isn't practical and usually used in larger teams
https://github.com/GoogleChrome/lighthouse/?tab=readme-ov-file#tests
Lighthouse Tests. There ya go.
GitHub
GitHub - GoogleChrome/lighthouse: Automated auditing, performance m...
Automated auditing, performance metrics, and best practices for the web. - GoogleChrome/lighthouse
in short:
- write tests
- test code
- fix broken tests
- repeat
did you wrote the tests?
that's under the "development" header, it's to run automated tests on the Lighthouse code for people working on Lighthouse itself
yeah, i didn't see that. we're not wanting to improve lighthouse, we want to use it
this one....
https://github.com/GoogleChrome/lighthouse/blob/main/docs/readme.md#using-programmatically
GitHub
lighthouse/docs/readme.md at main · GoogleChrome/lighthouse
Automated auditing, performance metrics, and best practices for the web. - GoogleChrome/lighthouse
add lighthouse as node element
then run reports
Develop --> Test --> Fix --> Repeat
well, specifically test, develop, fix, repeat
testing comes first
otherwise, again, it's just development
Powerful
the idea is to write the tests before you write the code
it's like writting lighthouse, then running it on an empty html file
using this would write the code and test it.... it's not TDD but it's near it
and then you create the site based on the errors that lighthouse gives you
but the idea is to write tests first
lighthouse won't say "your logo is missing"
plus you only get the lighthouse tests
as test driven development would
any custom tests would need developed
lighthouse will say "your logo is too big"
it will say all the images are the wrong size
but you have to have the images there
and the app is not PWA, when it is, just not good one
or it won't say anything
you have to write the code first, to try to load the images
you code first, then test it
which makes it pointless as a TDD tool. The idea of TDD, again, is that you write tests for a feature you want and then write the code to pass those tests. if you can't write the tests, it's not TDD
that's not test driven development
I agree
it's code first testing
CFT
XD
which isn't what the question asker asked for at all
you're right. but it is better than a blank response
well, it's akin of saying that you can use wheels to move the car, when someone asks how the engine fits in the engine bay
before the engine is ever made
or, how do I hang the mona lisa at the musuem and the answer is stick a nail in the wall
incomplete
no, it's not incomplete
it's tangently related, but that's it
may as well stick a nail in the floor and take the picture at 90 angle
let's stop arguing about metaphors, it's very off topic
it is
:yes:
but yeah, i can't think of good ways to do test driven development with css
to get back on topic: If anyone knows of any good, workable testing solution for CSS that could be used specifically for TDD, please do share!
even the option to screenshot everything has it's issues
this is funny:
https://css-tricks.com/stylelint/#aa-what-you-really-need-is-a-mistake-preventing-machine
David Clark
CSS-Tricks
Lint your CSS with stylelint | CSS-Tricks
You write CSS. Probably a lot of CSS. And you make mistakes. Probably a lot of mistakes. Somebody needs to stop you from making mistakes in your CSS.
linters will be test-driven. the CSS, having been written, needs to be parsed and checked. linting can apply the verbs to a state machine to check if valid
there's one I recently flipped through for HTML5
https://github.com/linthtml/linthtml
GitHub
GitHub - linthtml/linthtml: The html5 linter and validator.
The html5 linter and validator. Contribute to linthtml/linthtml development by creating an account on GitHub.
https://www.chromatic.com/ <-- maybe try this?
but there I go on a tangent
if you can push the absurdly high price to a company, chromatic may be a solution
the free plan is hidden
but seems to offer just enough
once again, linting is not testing. Please stay on topic
no, the idea is to use the linter as core to the tests.
The tests can run the linter and based on what portion of code you're testing, there's either no linting error or a linting error.
No linting error means continue writing the test
but if you don't write any css, the linter won't say that you forgot to style the buttons
making it a very terrible tool for test driven development
that's not testing anything useful though. Linting just checks against valid syntax, which is not sufficient for testing
but it's an amazing tool for development
the linter is open source, if you're wanting a custom TDD
https://github.com/stylelint/stylelint
GitHub
GitHub - stylelint/stylelint: A mighty CSS linter that helps you av...
A mighty CSS linter that helps you avoid errors and enforce conventions. - stylelint/stylelint
like a starting playground
a linter is the equivalemnt of someone looking at your code and saying "dude, your code is ugly"
test driven development is like someone saying "where's the button i told you about?"
before you even write any code about any button