Real-World Typescript Unit Testing

Create unit tests for real world typescript system with few modules using vitest or jest

What you'll learn

Create unit tests for real world typescript client and or server applications using vitest or jest

Write better typescript code with less bugs

Ship code to production quickly and confidently

Represent your system using advanced diagrams : block diagram ,UML sequence diagram and UML class diagram

Write unit testing of pure logic code using test and expect

Invoke test coverage tool like istanbul

Write unit testing for code with side effect using spyOn , fn and mock

Use advanced concepts for unit testing : refactoring , debugging , filtering

Use isolated test and sociable test for unit test with module interaction

Create unit testing involving real and fake timer such as in sinonjs/fake-timers

Create unit testing for frontend vanilla UI using jsdom : document , querySelector

Create unit testing for frontend vanilla UI using dom testing library : getByText , getByRole , waitFor

Create unit testing for frontend react UI using react testing library : render , screen

Use advanced typescript for better code : union , enum , type any and unknown , polymorphism using inheritance , class diagram

Create unit tests using vitest and jest and compare between these tools

Requirements

Knowledge of typescript is required

Description

You’re here because you know typescript and want to write better code with fewer bugs using unit tests.I am here because I can help you accomplish your mission. I have B.s.c + M.s.c in mechanical engineering. I have been making software applications for over 20 years in the Hi-Tec industry and have much teaching experience. You can trust me and my teaching methods. I have learned many technologies in the past (check my LinkedIn profile), and I know exactly what is needed to learn and how.In this course, I teach you everything you need about unit tests, and I use a real-world system, typescript, vitest, and jest.The task of writing a unit test is not simple because there are many moving parts:- Unit test of logic code- Unit test of code with side effects like accessing the web - Unit test of a module that uses another module - Mocks - Timers- Unit test of UI- Unit test of code that runs on the server - Jsdom, testing library, react testing library- Some tools like jest need a nontrivial setup to work with typescript and ES module- New competitor to jest, e.g., vitest- Coverage testThis ocean is very hard to swim without first learning it properly, and this is done in this course.Learning in this course is not just video lessons; there are other important learning materials that most courses do not provide as a whole :- Quiz after EVERY lesson- Coding exercise at the end of EVERY coding section- pdf file with all the lectures- pdf file with a dictionary of all the material that I teach in this course

Overview

Section 1: Getting started

Lecture 1 Welcome to my course

Lecture 2 Setup simple unit test project

Lecture 3 Create your first unit test

Lecture 4 Coding Excercise 1

Lecture 5 Coding Excercise 1 solution

Section 2: Testing concepts and tools

Lecture 6 Section Intro

Lecture 7 What is testing

Lecture 8 Unit test vs integration test vs e2e test

Lecture 9 Side effects

Lecture 10 Properties of a good unit test

Lecture 11 Manual test vs automatic test

Lecture 12 Motivation for automatic testing

Lecture 13 Should you test all your code

Lecture 14 Unit testing best practices

Lecture 15 Unit testing modes

Lecture 16 Unit testing framework : vitest and jest

Lecture 17 Vitest

Lecture 18 Jest

Section 3: Task queue manager- the system we will unit test

Lecture 19 Section Intro

Lecture 20 Simple system UI

Lecture 21 Block diagram

Lecture 22 Sequence diagram

Lecture 23 Source code

Lecture 24 Motivation

Lecture 25 Specification

Lecture 26 Project structure

Section 4: Unit test of pure logic code - TaskQueue

Lecture 27 Section intro

Lecture 28 Directory final setup

Lecture 29 Unit test of an object or a class

Lecture 30 Choosing the first module to unit test

Lecture 31 Setup unit test for TaskQueue

Lecture 32 TaskQueue - test for empty queue

Lecture 33 TaskQueue - test for non empty queue

Lecture 34 Fix the test using beforeEach and add clear function to TaskQueue

Lecture 35 Code at section end

Lecture 36 Coding Excercise 2

Lecture 37 Coding Excercise 2 - solution

Section 5: Code coverage

Lecture 38 Section intro

Lecture 39 Code coverage meaning and motivation

Lecture 40 Do we need 100% code coverage

Lecture 41 Inatallation

Lecture 42 Usage

Lecture 43 Coding Excercise 3

Lecture 44 Coding Excercise 3 - solution

Section 6: Unit testing of pure logic code - TaskDispatcher

Lecture 45 Section intro

Lecture 46 Choose the second module to unit test

Lecture 47 Dive into TaskDispatch code

Lecture 48 Prepare the test file

Lecture 49 Unit test empty map - dispatch throw

Lecture 50 Unit test task not found - dispatch throw

Lecture 51 Function type as function argument issue

Lecture 52 Refactor types

Lecture 53 Test dispatch status is ok

Lecture 54 Test reveal bug in dispatch -> debug and fix

Lecture 55 Test dispatch result is ok for add function

Lecture 56 Check code coverge

Lecture 57 How to filter tests

Lecture 58 Code at section end

Lecture 59 Coding Excercise 4

Lecture 60 Coding Excercise 4 - solution

Section 7: Introduction to unit testing of code with side effects and module interaction

Lecture 61 Section intro

Lecture 62 What is a side effect

Lecture 63 What is a mock

Lecture 64 Motivation for mocks

Lecture 65 API for mocks

Lecture 66 Modules with side effects and module interaction

Lecture 67 Solitary (isolated) test vs sociable test

Section 8: Unit test of persist with side effect

Lecture 68 Unit test using jsdom

Lecture 69 Unit test with console.log and spyOn()

Lecture 70 Unit test with Storage.prototype and spyOn()

Lecture 71 Code at section end

Lecture 72 Coding Excercise 5

Lecture 73 Coding Excercise 5 - solution

Section 9: Unit test of TaskQueue with persist module interaction

Lecture 74 Unit test using sociable test

Lecture 75 Motivation for unit test using isolated (solitary) test

Lecture 76 Using mock() and fn() for persist using isolated (solitary) test for TaskQueue

Lecture 77 Refactor taskQueue to a class

Lecture 78 Add persist related test cases and use sociable test for TaskQueue

Lecture 79 Use isolated (solitary) test for added test cases

Lecture 80 Should you use sociable or isolated (solitary) test

Lecture 81 Code at section end

Lecture 82 Coding Excercise 6

Lecture 83 Coding Excercise 6 - solution

Section 10: Unit test of TaskScheduler with fake timer and module interaction

Lecture 84 Test plan

Lecture 85 Use fake timers in unit test

Lecture 86 Test for result and add callback in TaskScheduler

Lecture 87 Finish the unit test

Lecture 88 Summary unit test of TaskScheduler

Lecture 89 Code at section end

Lecture 90 Coding Excercise 7

Lecture 91 Coding Excercise 7 - solution

Section 11: Introduction to frontend unit testing

Lecture 92 Section intro - Where are we now and how to continue

Lecture 93 Dom unit testing tools

Lecture 94 Download and invoke the UI

Lecture 95 Code at section end

Section 12: Frontend unit testing with jsdom

Lecture 96 Jsdom setup and simple unit test for h1 text

Lecture 97 Unit test for buttons count and text

Lecture 98 Elegant unit test for buttons using enum and loop

Lecture 99 Powerful unit test for 'enqueue add(1,2)' button

Lecture 100 Unit test with spyOn to test 'queue length' buttton

Lecture 101 Use spyOn to test for failure to appear in the UI

Lecture 102 More jsdom unit test to get 100% coverage

Lecture 103 Code at section end

Lecture 104 Coding Excercise 8

Lecture 105 Coding Excercise 8 - solution

Section 13: Frontend unit testing with dom testing library

Lecture 106 Introduction and motivation for testing library

Lecture 107 Setup for dom testing library

Lecture 108 Flexible unit test for heading using role and getByRole

Lecture 109 Use setup.tc for an extended matcher like toBeInTheDocument

Lecture 110 Button role and getAllByRole for a flxible unit test

Lecture 111 userEvent , getByText and status role in unit test

Lecture 112 Repalce sleep with smart wait using waitFor

Lecture 113 Unit test for failure to appear in the UI after task has failed

Lecture 114 Unit test for empty string to appear in the UI if task is not dispatched

Lecture 115 Unit test with console.log and console.error

Lecture 116 Section summary

Lecture 117 Code at section end

Lecture 118 Coding Excercise 9

Lecture 119 Coding Excercise 9 - solution

Section 14: More requirements -> code changes -> unit test

Lecture 120 Section intro

Lecture 121 Add is scheduler started in logic and render to the UI

Lecture 122 Update test to get 100% coverage

Lecture 123 Render queue length

Lecture 124 Support async dispatch function

Lecture 125 Faketimer problem with async dispatch solved with flushPromises

Lecture 126 Unit test of async dispatch functions : add and getPosts

Lecture 127 Add enqueGetPosts in the UI + unit test + ad hoc vitest fix

Lecture 128 Task overlapping problem

Lecture 129 Implement step by step a real timer test for task overlapping

Lecture 130 Final task overlapping test + source code

Lecture 131 Add action with result to the UI

Lecture 132 Add try catch in dispatch

Lecture 133 Fix save on empty array for dequeue

Lecture 134 Code at section end

Lecture 135 Coding Excercise 10

Lecture 136 Coding Excercise 10 - solution

Section 15: Advanced typescript for better code

Lecture 137 Section intro

Lecture 138 The problems with string as action type and possible solutions

Lecture 139 Union of strings as action type

Lecture 140 Enum as action type

Lecture 141 The problematics of working with type any

Lecture 142 Use type unknown instead of type any

Lecture 143 From unknown type to the correct type using validation

Lecture 144 Unit test for code with unknown

Lecture 145 Motivation for generic task queue manager

Lecture 146 Design of generic storage using polymorphism , inheritance and interface

Lecture 147 Implement Persist class and IPersistStorage interface

Lecture 148 Implement class LocalStoragePersist and check with unit test

Lecture 149 Refactor and use queue length getter

Lecture 150 Code at section end

Lecture 151 Coding Excercise 11

Lecture 152 Coding Excercise 11 - solution

Section 16: React UI : Unit testing with react testing library - RTL

Lecture 153 Section intro

Lecture 154 Download react ui and invoke vanilla or react ui

Lecture 155 Tools to test react applications - mostly RTL

Lecture 156 Use jsdom to test that a text exists on react ui

Lecture 157 Use the RTL to create the first react unit test

Lecture 158 More unit tests using the RTL

Lecture 159 Unit test with document and RTL

Lecture 160 Complete the remaining tests using the RTL

Lecture 161 Fix react bug using unit test

Lecture 162 Use code coverage to remove unused code

Lecture 163 Section summary

Lecture 164 Code at section end

Lecture 165 Coding Excercise 12

Lecture 166 Coding Excercise 12 - solution

Section 17: Unit tests with Jest

Lecture 167 Section intro

Lecture 168 What is jest and its API relation with vitest

Lecture 169 Create jest setup

Lecture 170 Add watch mode

Lecture 171 Add coverage test

Lecture 172 Configure vitest to handle only the test directory

Lecture 173 Tweak tests with jest to compile

Lecture 174 Fix test with jest: add jsdom to jest.config.ts

Lecture 175 Fix test with jest: add matchers

Lecture 176 Fix test with jest regarding toContain

Lecture 177 Fix test with jest : dayjs problem -> add "esModuleInterop": true in tsconfig.js

Lecture 178 Fix test with jest : persist mock problems –> add clearMocks and replace mock()

Lecture 179 Use testMatch in jest.config.ts for better test file filtering

Lecture 180 Fix test with jest: problem with fetch –> replace with axios in src

Lecture 181 Build the comparison between jest and vitest

Lecture 182 Summary of the comparison between jest and vitest

Lecture 183 Code at section end

Lecture 184 Coding Excercise 13

Lecture 185 Coding Excercise 13 - solution

Section 18: Where to go from here

Lecture 186 Here we are - course summary

Lecture 187 Where to go from here - task queue manager

Lecture 188 Where to go from here - testing

Students that want to write better code with less bugs using unit tests,Frontend developers,Fullstack developers,Backend developers,React developers