Supercharge Your Development Skills By Mastering Testing and TDD (Test Driven Development) Tailored Specifically for Complex UI Apps Built In Any UI Framework (e.g. React, Angular or Vue)
4-hour training where you will learn to create a testable UI architecture optimised for UI/Frontend engineering application development.
This 4 hour on-demand training class is for UI/Frontend engineers that...
-
Want to learn the TDD process from the beginning the right way
-
Are struggling to understand or practically apply TDD and Testing Strategy to complex UI Apps
-
Need the mental models to make good decisions on how they go about testing
-
Would like to know how to get testing and TDD to scale in complex UI apps in any framework (React, Angular or Vue)
**This course is for experienced engineers who care about code quality!
What Is It?
It's a succinct, jargon free 4-hour training class where you will be guided through testing at scale optimised for UI/Frontend engineering application development.
Why Does It Exist?
Getting high confidence your UI code is crucial for successful scaling your apps. Testing is vital to achieve this. Without proper tests, refactoring code, adding new features, and switching tools and libraries can be very hard!
Testing is often neglected or reduced as the UI code becomes more complex. This occurs because engineers adopt ineffective testing strategies, relying on slow and cumbersome end-to-end testing, fragile snapshot or framework-level/UI testing, or placing too much emphasis on unit testing without validating the app's behaviour upon launch.
The problem lies in the narrow focus on specific types of tests, rather than the overall testing experience and building "testable code." By neglecting this, engineers limit their ability to test because they don't have a good testing experience...
This course addresses the issue by presenting a framework-agnostic approach to scaling testing. It helps students decouple components and frameworks from business logic, enabling effective testing and TDD at scale.
Writing tests at the lowest unit level is suitable for small apps, but as apps grow, the relevance of each test diminishes due to increased coupling with the system's design. This leads to a large and cumbersome test suite that hinders refactoring and extension, contradicting the purpose of testing.
Over time, this discourages the practice of writing tests first (TDD) and diminishes its effectiveness.
This workshop provides the foundational principles to make TDD sustainable in the long term by considering the architecture of your UI app, preventing the decline of this important skill.
Who Is It For?
Frontend/UI (React, Angular, Vue etc) engineers who want to learn TDD or haven't quite mastered TDD (meaning they may struggle to write tests before production code because their code is not easy to test). Or that already know about TDD and Testing but haven't managed to get it working in UI apps.
How Does It Work?
This course offers a simple yet effective approach to implementing a robust, scalable, and efficient "Testable UI Architecture" that keeps engineers productive and focused on every test and scenario during development.
The course assumes no prior knowledge, starting with the foundational theory of tests and their basic structure, specifically unit tests.
Next, engineers will learn how to enhance their unit tests and incorporate testing into their developer workflow by adopting a practical approach to Test Driven Development (TDD).
Lastly, the course teaches engineers how to separate their code from components and identify the appropriate parts of the framework to isolate, ensuring testing is not dependent on the framework. They will discover how to decouple testing from the framework and instead link it to an independent data access or business logic layer.
By separating UI code and "testable code," students can leverage a scalable process that allows them to continuously simplify their code over time, free from the constraints of frameworks, components, or HTML rendering tools.
Syllabus
Lesson 1: An introduction to what a unit test actually is (a code structure) and how it is run inside a (test runner).
Lesson 2: A demonstration of writing a simple unit test and how to use an IDE (in this case CodeSandbox) to run one.
Lesson 3: In this exercise you will create a basic unit test, you will create a simple car as a state machine, and learn how a unit test interacts with it.
Lesson 4: In this conclusion you will learn the basic principles laid out in this module. Get a take-home mental models to help you always know how to write a simple test.
Lesson 1: An introduction to what TDD is including a birds eye view of the process. It's really important to to test, and for that reason we need to have a good testing workflow.
Lesson 2: In this module you see how the TDD process works. Critically we will be focussing on the most useful type of testing strategy to make sure that when you launch your app, it works!
Lesson 3: A demo using a simple algorithm to learn the basics of using TDD. You see how to lift specifications out of a business context and into your test suite. This will help you apply the correct strategy to your testing.
Lesson 4: In this exercise you will create a basic unit test, the extended challenge gets you you to add some more specifications to demo code.
Lesson 5: The conclusion for this module. Get the mental models and process for TDD including Red, Green, Refactor cycle and other TDD strategies to help you get unblocked in your testing.
Lesson 1: A quick introduction explaining how this module will show you the real problems with testing UI apps.
Lesson 2: This module covers the problems with UI testing, in particular the issue with the 'Testing Triangle' inverting forcing you to use more e2e tests which are brittle and difficult to scale.
Lesson 3: Learn the basic theory of separating the framework from the majority of the code you write. Specifically and for all frameworks what we mean is the component layer and it's bindings.
Lesson 4: In this video you see an architectural use-case of how framework separation can help you isolate a system under test. What this means is that you will get massively simpler components as a result.
Lesson 5 (refactoring demo part 1/4): This part of the demo shows you the old way, and begins showing you the new way through refactoring your coupled unit tests, into decoupled framework agnostic tests (that test your app as a whole). You will learn about test doubles and mocking.
Lesson 6 (refactoring demo part 2/4): In this part of the demo we start building out a data access layer where you begin to encapsulate the things that normally go into the component layer. We also start writing tests against the data access layer.
Lesson 7 (refactoring demo part 3/4): In this part of the demo, we start building out our tests and improving them. We use the simple specification style testing the same as you did in TDD module.
Lesson 8 (refactoring demo part 4/4): In the final part of the demo we remove duplication from our tests by refactoring and building re-usable setup code.
Lesson 9: This exercise will challenge you to remove the complex calls from the components and then build a data access layer. The extended challenge will task you with a more complex problem (which we saw in the architectural use-case).
Lesson 10: The conclusion to this module will explain how you saw testing triangle inversion and also how important a testable architecture is for this purpose.
For any UI Engineers who do not have experience with React we are giving you a free course which teaches you how to get up and running with React quickly by learning 6 rules of how it works.
Become an affiliate for Logic Room and get 40% income on on any sales of this course that you sell to your community/network (Full Training Provided On How To Promote It). Our sales proven is proven to help you earn and also grow your network through our high quality referral scheme.
About The Instructor
Pete Heard is the founder of Logic Room. He has been a software engineer, technical lead and coach for over 15 years. He develops Logic Rooms core material on Architecture, Testing and Engineering Leadership.
What You Get
1. The TDD and Test First Process
You will learn a simple repeatable process for practicing TDD and writing unit tests. The process you will learn here is designed to be fun, fast and simple.
2. Battle-Tested Exercises
You will undertake TDD and unit Testing exercises which will help you consolidate what you learned in the theory lessons.
3. Scaling Testing In UI Apps
We look at the problems that happen when trying to scale unit testing/TDD in UI apps. Learn to scale testing in any framework (React, Angular or Vue).
4. Refactoring Guidance
A fully guided code demo and exercise of the sorts of issues you get when trying to scale up your UI tests. This exercise will show you how to begin re-organising your UI code so that it is testable.
Our Reviews...
Take action on our promotion pricing! This is a time LIMITED enrolment option for this course and when we end it WILL revert back to full price!
Frequently Asked Questions
You should have experience with JavaScript (ES8). The samples are in React but you will be given a React quick-start guide. You can use what you learn in this course in any UI Framework.
Yes, if you don't like the training you have 30 days to get a refund on it. We would hope you give us top review on Trustpilot too, so if you don't just fire an email to [email protected] and tell us what to improve!
We use React and Jest in the samples.
Currently we are giving you free, lifetime access to the material!
Yep, once enrolled you can purchase 1 hour blocks with our accredited UI Architecture coaches who can help you if you need it.
"I am seriously blown away by the concepts, it is helping me to write better tests."
Elliot Porter
Consultant Web Developer
"Part 1 of the workshop. I have to say it's bloody amazing!"
