I'm drafting a diagram to explain how before/after hooks work in unit tests.

They tend to work the same way across test frameworks, so it's not unique to QUnit. But, new devs will learn this for the first time, so I think it's worth explaining.

Page:
https://qunitjs.com/api/QUnit/module/#hooks

Issue tracker:
https://github.com/qunitjs/qunit/issues/1358#issuecomment-2614663327

What do you think?

#qunit #WriteTheDocs #TechnicalWriting #SoftwareDocumentation #documentation #devex #TDD

QUnit.module()

Group related tests under a common label.

@qunit @krinkle that looks very useful and clear to me!

if this was an article and I was the editor, I'd only suggest reducing noise: IMHO you want to explain the concept more than executable code, so you don't need to spell out the complete function name here

I've allowed myself to tweak your diagram in order to illustrate this, just as an approximation though: I'm not visually competent

@FND @qunit

Ah, that's quite a bit more harmonious indeed. It feels less complex that way.

Thanks, I'll incorporate that!

I think including clear diagrams is a great idea, especially for visual learners. It will definitely help new devs grasp the flow of hooks more intuitively.