Did you know that a unit test should have three basic blocks?

1. Arrange / Given
2. Act / When
3. Assert / Then

Let's quickly go over them so you get a better idea.

A thread.
1. Arrange / Given

This is where you set up everything you need to trigger the logic you want to test.

No matter whether you initialize input variables or specify the result you later expect. This is where this logic belongs.

1/10
'Given' is a term coming from behavior-driven design where human-readable "user stories" are used to describe your expectations.

You can read it as: "Given this input or setup...".

2/10
2. Act / When

This is the block where you actually call the logic you want to test.

Calling a function or a method on a class and storing the result (if necessary) belongs here.

This block should usually be pretty short.

If it's too long, your test might do too much.

3/10
'When' as a term also comes from behavior-driven design.

You can read it as: "When a user triggers this logic...".

4/10
3. Assert / Then

This is the block where you test your expectations.

The name of the block already describes that you will see assertions here.

This is also the block where exceptions should arise if a test fails.

5/10
'Then' is also a term from behavior-driven design.

You can read it as: "Then this is what should happen...".

6/10
4. Why test structure matters

-> Readability and somehow a form of standardization <-

If all unit tests are structured similarly, it is way easier for you to understand what exactly goes on within a specific test case.

7/10
We, as humans, tend to love patterns. We can recognize patterns, and we like to remember them because they make our lives easier.

If you structure all your tests this way, or even your whole team does it, you'll have an easier time reading your tests.

8/10
And tests have one important trait: They are great for understanding the code they actually test.

Tests usually show usage of functions, methods, APIs, or whatever it is.

They are a form of documentation.

Taking care of this documentation definitely benefits you.

9/10
5. Thread end

That's it for this thread.

I hope you found something useful! 🙏🏼

If there is anything you'd like to add, please respond to the first tweet so more people can see it.

And if you like content like this, consider following me (@oliverjumpertz) for more! 💛

10/10

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Oliver Jumpertz

Oliver Jumpertz Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @oliverjumpertz

15 Jul
"Are there any questions left we can answer?"

"No, not right now, thank you."

Have you ever encountered this situation in an interview and responded like above?

I'm sorry, but you've given away an awesome opportunity to make a lasting impression.

A thread.
0. Foreword

I've been on both sides of the interview table for a few years now.

I've interviewed for positions, and I've interviewed quite a few awesome engineers.

I can only give you my perspective and opinion. It does not necessarily need to be fitting each situation.

1/32
1. Why this question is an opportunity

Although there is a shortage of software developers right and left, many companies still want to make sure they hire the right people.

Even the best engineers may not be the best fit for a company and its culture.

2/32
Read 34 tweets
14 Jul
Testing JavaScript can be difficult.

It sometimes can be hard to write excellent tests that assert that what you developed really works.

To support you, I compiled some beginner-friendly JavaScript testing resources for you.

A thread.
1. JavaScript testing for beginners

This is a course that delivers one lesson each day to your inbox.

You can do it at your own pace.

Perfect for beginners, with some great advice.

marclittlemore.com/javascript-tes…

1/9
2. Introduction To JavaScript Unit Testing

This article is a great guide for beginners.

It walks you from your code as it might be, over making it actually testable, to finally covering it with tests.

smashingmagazine.com/2012/06/introd…

2/9
Read 10 tweets
13 Jul
Let's be honest, CSS can be pretty difficult.

I had a hard time learning it, but there are a few resources that can definitely help you to understand the style language of the web.

Here is a collection of my favorite ones.

A thread.
1. codrops

An extensive CSS reference that will serve you even better than MDN.

Definitely, my go-to resource when I want to look something up.

tympanus.net/codrops/css_re…

1/11
2. The box model

Everything in HTML and CSS has something to do with a box. Some elements are block elements, others are inline elements.

This concept can actually be pretty difficult to understand.

This article on MDN makes it clear for you.

developer.mozilla.org/en-US/docs/Lea…

2/11
Read 15 tweets
12 Jul
I've created many more visual tips and explanations since I posted my last collection in June.

This is a new collection of visual tips and explanations for JavaScript that can help web developers of any skill level with even more content!

A thread.
1. The Anatomy Of A For-Loop In JavaScript .
2. The Anatomy Of A Do-While-Loop In JavaScript .
Read 40 tweets
6 Jul
Initially, coming from a class-based React context, I had a hard time understanding hooks.

And the hook I had the hardest time with was useEffect.

Gladly, I understood it, and I now want to show you what useEffect is and how you can use it.

A thread.
0. A quick hook introduction

Hooks were added to React in 16.8 and enable us to write functional components while still using state and other React features like lifecycle methods without a need for classes.

1/15
Some hooks also enable you to set state in functional components.

This doesn't sound like much, but unlike class components, where you had to modify your component's state for React to notice, you need to tell React when something changed in functional components, too.

2/15
Read 16 tweets
5 Jul
I found some awesome resources that teach you about blockchain technology.

They are short videos explaining blockchain technology to you in simple words.

A thread.
1. Asymmetric encryption

Encryption is one of the foundational building blocks of a blockchain. Knowing what it is and understanding how it works is definitely beneficial.



1/6
2. Zero Knowledge Proof

Blockchains are public databases.

Everyone decides what the truth is, and this video explains to you how it works.



2/6
Read 7 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!

:(