EXTREME test-first - Let's code an editor P2 - FunFunFunction #60
Key Takeaways
Implements test-first development for a message bus in a code editor using create-react-app and Firebase
Original Description
💖 Support the show by becoming a Patreon
https://www.patreon.com/funfunfunction
Follow along in this series while I code an editor (well, a fiddle, really) using create-react app and firebase, unit testing using enzyme. In this episode, we use by-the-book TDD to write a message bus.
⏯ Highlights
01:59 The purpose of a messaging bus, explanation of global mocking vs injection vs messaging
12:28 Goal of episode: Rewrite the messaging bus using TDD
20:40 Insight: Test first gives you step by step errors that help you make progress
24:49 When tests a green, that is a great point to commit to version control
26:26 Red-Green-Refactor explained
31:30 Getting caught up in tweaking tooling instead of making progress
39:34 Don't get stuck on naming variables, wait with refactoring until the test is green.
40:18 Focus on a single test using .only to keep focused
48:45 Mulled wine break and Whale question
57:16 Why red-first and test first keeps you from writing incorrect tests
1:06:40 Wait for at least three cases of duplication before removing it
🔗 Last weeks episode (Let's code an editor P1)
https://www.youtube.com/watch?v=6HfAdeoq97k&list=PL0zVEGEvSaeHgdv6t242ukQNIOtHNgzOJ&index=8
🔗 MPJ's Musings playlist
https://www.youtube.com/playlist?list=PL0zVEGEvSaeH21VDycWYNWU7VKUA-xLzg
🔗 Functional programming in JavaScript
https://www.youtube.com/watch?v=BMUiFMZr7vk&list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84&index=1
💛 Wallaby (Show sponsor)
Wallaby.js runs your JavaScript tests immediately as you type and displays execution results in your code editor. It is insanely fast, because it only executes tests affected by your code changes and runs tests in parallel. Let them know you came from us by using this link:
http://wallaby.funfunfunction.com
🔗 mpj on Twitter
https://twitter.com/mpjme
🔗 mpj on the video Q&A app 🐳
https://askwhale.com/add/mpjme
🔗 Enzyme (tool for React testing)
https://github.com/airbnb/enzyme
🔗 create-react-app (React apps with no build confi
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from Fun Fun Function · Fun Fun Function · 0 of 60
← Previous
Next →
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Higher-order functions - Part 1 of Functional Programming in JavaScript
Fun Fun Function
Map - Part 2 of Functional Programming in JavaScript
Fun Fun Function
Reduce basics - Part 3 of Functional Programming in JavaScript
Fun Fun Function
Destructuring: What, Why and How - Part 1 of ES6 JavaScript Features
Fun Fun Function
Reduce Advanced - Part 4 of Functional Programming in JavaScript
Fun Fun Function
Closures - Part 5 of Functional Programming in JavaScript
Fun Fun Function
Too many tools and frameworks!
Fun Fun Function
Currying - Part 6 of Functional Programming in JavaScript
Fun Fun Function
Recursion - Part 7 of Functional Programming in JavaScript
Fun Fun Function
Promises - Part 8 of Functional Programming in JavaScript
Fun Fun Function
Staying relevant as a programmer
Fun Fun Function
Factory Functions in JavaScript
Fun Fun Function
Composition over Inheritance
Fun Fun Function
Software needs to be better - FunFunFunction #1
Fun Fun Function
Unit testing: How to get your team started - FunFunFunction #2
Fun Fun Function
Straight-line code over functions - FunFunFunction #3
Fun Fun Function
Clojure - FunFunFunction #5
Fun Fun Function
The growth stages of a programmer - FunFunFunction #6
Fun Fun Function
5 tips to quickly understand a new code base - FunFunFunction #7
Fun Fun Function
Semicolons cannot save you! - FunFunFunction #9
Fun Fun Function
Functors - FunFunFunction #10
Fun Fun Function
Functors: I was WRONG! - FunFunFunction #11
Fun Fun Function
Questions and Answers - FunFunFunction #12
Fun Fun Function
Streams - FunFunFunction #13
Fun Fun Function
Prototypes in JavaScript - FunFunFunction #16
Fun Fun Function
Fast or Flexible? - FunFunFunction #17
Fun Fun Function
Coders are herd animals - FunFunFunction #18
Fun Fun Function
Weekend Kubernetes Shenanigans - FunFunFunction #19
Fun Fun Function
Monad - FunFunFunction #21
Fun Fun Function
Moar Weekend Shenanigans - FunFunFunction #23
Fun Fun Function
Questions and Answers - FunFunFunction #24
Fun Fun Function
Losing motivation - FunFunFunction #25
Fun Fun Function
LONGEST KUBERNETES SHENANIGANS! - FunFunFunction #26
Fun Fun Function
Fast code is NOT important - FunFunFunction #27
Fun Fun Function
Pair Programming a Facebook Messenger Bot - FunFunFunction #28
Fun Fun Function
Writing unit tests for personal projects? - FunFunFunction #29
Fun Fun Function
Let's Code a Pomodoro Button - FunFunFunction #30
Fun Fun Function
What editor do you use? - FunFunFunction #31
Fun Fun Function
Arrow functions in JavaScript - What, Why and How - FunFunFunction #32
Fun Fun Function
Is Programming Art? - MPJ's Musings - FunFunFunction #33
Fun Fun Function
Generators in JavaScript - What, Why and How - FunFunFunction #34
Fun Fun Function
Haskell Basics - FunFunFunction #35
Fun Fun Function
Haskell - Baby's first functions - FunFunFunction #36
Fun Fun Function
Is Big O relevant to you? - Q&A Part 1 - FunFunFunction #37
Fun Fun Function
How much are you allowed to Google? - Q&A Part 2 - FunFunFunction #38
Fun Fun Function
Haskell lists - FunFunFunction #39
Fun Fun Function
var, let and const - What, why and how - ES6 JavaScript Features
Fun Fun Function
Why are some programming languages popular? - MPJ's Musings - FunFunFunction #41
Fun Fun Function
Does a developer need to be nice? - MPJ's Musings - FunFunFunction #42
Fun Fun Function
bind and this - Object Creation in JavaScript P1 - FunFunFunction #43
Fun Fun Function
Examples of this and bind - Object Creation in JavaScript P2 - FunFunFunction #44
Fun Fun Function
Prototype basics - Object Creation in JavaScript P3 - FunFunFunction #46
Fun Fun Function
Separation of concerns RANT - MPJ's Musings - FunFunFunction #47
Fun Fun Function
Cellular Automata - Pair Programming - FunFunFunction #49
Fun Fun Function
The 'new' keyword - Object Creation in JavaScript P4 - FunFunFunction #50
Fun Fun Function
__proto__ vs prototype - Object Creation in JavaScript P5 - FunFunFunction #52
Fun Fun Function
Unity game pair programming - Let's code - FunFunFunction #53
Fun Fun Function
Throw out your tools - MPJ's Musings - FunFunFunction #54
Fun Fun Function
Unit tests vs. Integration tests - MPJ's Musings - FunFunFunction #55
Fun Fun Function
Object.create - Object Creation in JavaScript P6 - FunFunFunction #57
Fun Fun Function
More on: React
View skill →
Related Reads
📰
📰
📰
📰
React Explained: JSX, Components, Virtual DOM & Diffing Algorithm
Dev.to · Saravanan Lakshmanan
The “Wiz” Merger: How Google’s Internal Framework is Rewriting Angular
Medium · JavaScript
Day-3 of Posting blog (Lists in html)
Dev.to · antony stark
I Built a 100% Free, Frictionless Resume Builder with Direct PDF/Word Exports
Dev.to · Solangi Waqas
Chapters (11)
1:59
The purpose of a messaging bus, explanation of global mocking vs injection vs me
12:28
Goal of episode: Rewrite the messaging bus using TDD
20:40
Insight: Test first gives you step by step errors that help you make progress
24:49
When tests a green, that is a great point to commit to version control
26:26
Red-Green-Refactor explained
31:30
Getting caught up in tweaking tooling instead of making progress
39:34
Don't get stuck on naming variables, wait with refactoring until the test is gre
40:18
Focus on a single test using .only to keep focused
48:45
Mulled wine break and Whale question
57:16
Why red-first and test first keeps you from writing incorrect tests
1:06:40
Wait for at least three cases of duplication before removing it
🎓
Tutor Explanation
DeepCamp AI