Real-World TypeScript Unit Testing

Focused View

Nathan Krasney

12:48:24

26 View

1. Getting started

1. Welcome to my course.mp4

06:34

2. Setup simple unit test project.mp4

04:57

3. Setup simple unit test project.html

4. Create your first unit test.mp4

07:59

5. Create your first unit test.html

6. Coding Excercise 1.mp4

02:15

7. Coding Excercise 1 solution.mp4

03:56

2. Testing concepts and tools

1. Section Intro.mp4

00:48

2. What is testing.mp4

03:04

3. What is testing.html

4. Unit test vs integration test vs e2e test.mp4

02:18

5. Unit test vs integration test vs e2e test.html

6. Side effects.mp4

01:17

7. Side effects.html

8. Properties of a good unit test.mp4

01:47

9. Properties of good unit test.html

10. Manual test vs automatic test.mp4

03:19

11. Manual test vs automatic test.html

12. Motivation for automatic testing.mp4

02:12

13. Motivation for automatic testing.html

14. Should you test all your code.mp4

02:13

15. Should you test all your code.html

16. Unit testing best practices.mp4

03:29

17. Unit testing best practices.html

18. Unit testing modes.mp4

02:46

19. Unit testing modes.html

20. Unit testing framework vitest and jest.mp4

04:10

21. Unit testing framework vitest and jest.html

22. Vitest.mp4

01:28

23. Vitest.html

24. Jest.mp4

00:46

25. Jest.html

3. Task queue manager- the system we will unit test

1. Section Intro.mp4

01:26

2. Simple system UI.mp4

04:00

3. Simple system UI.html

4. Block diagram.mp4

05:36

5. Block diagram.html

6. Sequence diagram.mp4

05:45

7. Sequence diagram.html

8. Source code.mp4

02:56

9. Source code.html

10. Motivation.mp4

03:46

11. Motivation.html

12. Specification.mp4

02:01

13. Specification.html

14. Project structure.mp4

01:25

15. Project structure.html

4. Unit test of pure logic code - TaskQueue

1. Section intro.mp4

00:45

2. Directory final setup.mp4

00:27

3. Unit test of an object or a class.mp4

01:43

4. Unit test of an object or a class.html

5. Choosing the first module to unit test.mp4

01:22

6. Choosing the first module to unit test.html

7. Setup unit test for TaskQueue.mp4

05:18

8. Setup unit test for TaskQueue.html

9. TaskQueue - test for empty queue.mp4

04:10

10. TaskQueue - test for empty queue.html

11. TaskQueue - test for non empty queue.mp4

06:21

12. TaskQueue - test for non empty queue.html

13. Fix the test using beforeEach and add clear function to TaskQueue.mp4

05:04

14. Fix the test using beforeEach and add clear function.html

15. Code at section end.html

16. Coding Excercise 2.mp4

02:34

17. Coding Excercise 2 - solution.mp4

08:03

5. Code coverage

1. Section intro.mp4

01:06

2. Code coverage meaning and motivation.mp4

00:58

3. Code coverage meaning and motivation.html

4. Do we need 100% code coverage.mp4

00:57

5. Do we need 100% code coverage.html

6. Inatallation.mp4

01:15

7. Inatallation.html

8. Usage.mp4

02:50

9. Usage.html

10. Coding Excercise 3.mp4

01:00

11. Coding Excercise 3 - solution.mp4

06:06

6. Unit testing of pure logic code - TaskDispatcher

1. Section intro.mp4

00:45

2. Choose the second module to unit test.mp4

03:58

3. Choose the second module to unit test.html

4. Dive into TaskDispatch code.mp4

02:07

5. Dive into TaskDispatch code.html

6. Prepare the test file.mp4

00:48

7. Prepare the test file.html

8. Unit test empty map - dispatch throw.mp4

06:35

9. Unit test empty map - dispatch throw.html

10. Unit test task not found - dispatch throw.mp4

03:54

11. Unit test task not found - dispatch throw.html

12. Function type as function argument issue.mp4

01:09

13. Function type as function argument issue.html

14. Refactor types.mp4

04:46

15. Refactor types.html

16. Test dispatch status is ok.mp4

03:48

17. Test dispatch status is ok.html

18. Test reveal bug in dispatch - debug and fix.mp4

03:00

19. Test reveal bug in dispatch - debug and fix.html

20. Test dispatch result is ok for add function.mp4

04:55

21. Test dispatch result is ok for add function.html

22. Check code coverge.mp4

00:31

23. Check code coverge.html

24. How to filter tests.mp4

03:49

25. How to filter tests.html

26. Code at section end.html

27. Coding Excercise 4.mp4

02:31

28. Coding Excercise 4 - solution.mp4

17:39

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

1. Section intro.mp4

00:55

2. What is a side effect.mp4

01:13

3. What is a side effect.html

4. What is a mock.mp4

00:48

5. What is a mock.html

6. Motivation for mocks.mp4

02:03

7. Motivation for mocks.html

8. API for mocks.mp4

00:49

9. API for mocks.html

10. Modules with side effects and module interaction.mp4

01:37

11. Modules with side effects and module interaction.html

12. Solitary (isolated) test vs sociable test.mp4

00:32

13. Solitary (isolated) test vs sociable test.html

8. Unit test of persist with side effect

1. Unit test using jsdom.mp4

19:47

2. Unit test using jsdom.html

3. Unit test with console.log and spyOn().mp4

18:13

4. Unit test with console.log and spyOn().html

5. Unit test with Storage.prototype and spyOn().mp4

06:46

6. Unit test with Storage.prototype and spyOn().html

7. Code at section end.html

8. Coding Excercise 5.mp4

01:46

9. Coding Excercise 5 - solution.mp4

12:23

9. Unit test of TaskQueue with persist module interaction

1. Unit test using sociable test.mp4

05:58

2. Unit test using sociable test.html

3. Motivation for unit test using isolated (solitary) test.mp4

04:33

4. Motivation for unit test using isolated (solitary) test.html

5. Using mock() and fn() for persist using isolated (solitary) test for TaskQueue.mp4

06:22

6. Using mock() and fn() for persist using isolated (solitary).html

7. Refactor taskQueue to a class.mp4

09:48

8. Refactor taskQueue to a class.html

9. Add persist related test cases and use sociable test for TaskQueue.mp4

10:16

10. Add persist related test cases and use sociable test for TaskQueue.html

11. Use isolated (solitary) test for added test cases.mp4

16:14

12. Use isolated (solitary) test for added test cases.html

13. Should you use sociable or isolated (solitary) test.mp4

02:26

14. Should you use sociable or isolated (solitary) test.html

15. Code at section end.html

16. Coding Excercise 6.mp4

02:21

17. Coding Excercise 6 - solution.mp4

12:57

10. Unit test of TaskScheduler with fake timer and module interaction

1. Test plan.mp4

01:26

2. Test plan.html

3. Use fake timers in unit test.mp4

07:41

4. Use fake timers in unit test.html

5. Test for result and add callback in TaskScheduler.mp4

12:33

6. Test for result and add callback in TaskScheduler.html

7. Finish the unit test.mp4

05:15

8. Finish the unit test.html

9. Summary unit test of TaskScheduler.mp4

02:06

10. Code at section end.html

11. Coding Excercise 7.mp4

01:42

12. Coding Excercise 7 - solution.mp4

03:16

11. Introduction to frontend unit testing

1. Section intro - Where are we now and how to continue.mp4

06:20

2. Where are we now and how to continue.html

3. Dom unit testing tools.mp4

01:53

4. Dom unit testing tools.html

5. Download and invoke the UI.mp4

08:56

6. Download and invoke the UI.html

7. Code at section end.html

12. Frontend unit testing with jsdom

1. Jsdom setup and simple unit test for h1 text.mp4

06:00

2. Jsdom setup and simple unit test for h1 text.html

3. Unit test for buttons count and text.mp4

06:15

4. Unit test for buttons count and text.html

5. Elegant unit test for buttons using enum and loop.mp4

02:07

6. Elegant unit test for buttons using enum and loop.html

7. Powerful unit test for enqueue add(1,2) button.mp4

06:49

8. Powerful unit test for enqueue add(1,2) button.html

9. Unit test with spyOn to test queue length buttton.mp4

01:51

10. Unit test with spyOn to test queue length buttton.html

11. Use spyOn to test for failure to appear in the UI.mp4

08:06

12. Use spyOn to test for failure to appear in the UI.html

13.1 Code at lesson end.html

13. More jsdom unit test to get 100% coverage.mp4

05:05

14. More jsdom unit test to get 100% coverage.html

15. Code at section end.html

16. Coding Excercise 8.mp4

00:17

17. Coding Excercise 8 - solution.mp4

02:03

13. Frontend unit testing with dom testing library

1. Introduction and motivation for testing library.mp4

02:13

2. Introduction and motivation for testing library.html

3. Setup for dom testing library.mp4

01:51

4. Setup for dom testing library.html

5. Flexible unit test for heading using role and getByRole.mp4

02:30

6. Flexible unit test for heading using role and getByRole.html

7. Use setup.tc for an extended matcher like toBeInTheDocument.mp4

01:58

8. Use setup.tc for an extended matcher.html

9. Button role and getAllByRole for a flxible unit test.mp4

02:17

10. Button role and getAllByRole for a flxible unit test.html

11. userEvent , getByText and status role in unit test.mp4

03:06

12. userEvent , getByText and status role in unit test.html

13. Repalce sleep with smart wait using waitFor.mp4

02:59

14. Repalce sleep with smart wait using waitFor.html

15. Unit test for failure to appear in the UI after task has failed.mp4

03:53

16. Unit test for failure to appear in the UI after task has failed.html

17. Unit test for empty string to appear in the UI if task is not dispatched.mp4

02:16

18. Unit test for empty string to appear in the UI.html

19. Unit test with console.log and console.error.mp4

05:10

20. Unit test with console.log and console.error.html

21. Section summary.mp4

01:21

22. Code at section end.html

23. Coding Excercise 9.mp4

03:10

24. Coding Excercise 9 - solution.mp4

17:38

14. More requirements - code changes - unit test

1. Section intro.mp4

01:43

2. Section intro.html

3. Add is scheduler started in logic and render to the UI.mp4

14:36

4. Add is scheduler started in logic and render to the UI.html

5. Update test to get 100% coverage.mp4

00:42

6. Update the test to get 100% coverage.html

7. Render queue length.mp4

02:59

8. Render queue length.html

9. Support async dispatch function.mp4

13:53

10. Support async dispatch function.html

11. Faketimer problem with async dispatch solved with flushPromises.mp4

02:38

12. Faketimer problem with async dispatch.html

13. Unit test of async dispatch functions add and getPosts.mp4

08:35

14. Unit test of async dispatch functions add and getPosts.html

15. Add enqueGetPosts in the UI + unit test + ad hoc vitest fix.mp4

05:38

16. Add enqueGetPosts in the UI + unit test + ad hoc vitest fix.html

17. Task overlapping problem.mp4

02:51

18. Task overlapping problem.html

19. Implement step by step a real timer test for task overlapping.mp4

09:35

20. Implement step by step a real timer test for task overlapping.html

21. Final task overlapping test + source code.mp4

05:30

22. Final task overlapping test + source code.html

23. Add action with result to the UI.mp4

07:51

24. Add action with result to the UI.html

25. Add try catch in dispatch.mp4

05:14

26. Add try catch in dispatch.html

27. Fix save on empty array for dequeue.mp4

03:45

28. Fix save on empty array for dequeue.html

29. Code at section end.html

30. Coding Excercise 10.mp4

00:34

31. Coding Excercise 10 - solution.mp4

06:23

15. Advanced typescript for better code

1. Section intro.mp4

01:08

2. Section intro.html

3. The problems with string as action type and possible solutions.mp4

01:38

4. The problems with string as action type and possible solutions.html

5. Union of strings as action type.mp4

02:55

6. Union of strings as action type.html

7. Enum as action type.mp4

11:45

8. Enum as action type.html

9. The problematics of working with type any.mp4

01:19

10. The problematics of working with type any.html

11. Use type unknown instead of type any.mp4

04:07

12. Use type unknown instead of type any.html

13. From unknown type to the correct type using validation.mp4

04:40

14. From unknown type to the correct type using validation.html

15. Unit test for code with unknown.mp4

08:07

16. Unit test for code with unknown.html

17. Motivation for generic task queue manager.mp4

01:37

18. Motivation for generic task queue manager.html

19. Design of generic storage using polymorphism , inheritance and interface.mp4

02:43

20. Design of generic storage using polymorphism , inheritance and interface.html

21. Implement Persist class and IPersistStorage interface.mp4

05:55

22. Implement Persist class and IPersistStorage interface.html

23. Implement class LocalStoragePersist and check with unit test.mp4

07:05

24. Implement class LocalStoragePersist and check with unit test.html

25. Refactor and use queue length getter.mp4

01:35

26. Refactor and use queue length getter.html

27. Code at section end.html

28. Coding Excercise 11.mp4

02:16

29. Coding Excercise 11 - solution.mp4

11:58

16. React UI Unit testing with react testing library - RTL

1. Section intro.mp4

00:24

2. Download react ui and invoke vanilla or react ui.mp4

06:12

3. Download react ui and invoke vanilla or react ui.html

4. Tools to test react applications - mostly RTL.mp4

02:48

5. Tools to test react applications - mostly RTL.html

6. Use jsdom to test that a text exists on react ui.mp4

07:37

7. Use jsdom to test that a text exists on react ui.html

8. Use the RTL to create the first react unit test.mp4

04:38

9. Use the RTL to create the first react unit test.html

10. More unit tests using the RTL.mp4

06:38

11. More unit tests using the RTL.html

12. Unit test with document and RTL.mp4

03:17

13. Unit test with document and RTL.html

14. Complete the remaining tests using the RTL.mp4

04:47

15. Complete the remaining tests using the RTL.html

16. Fix react bug using unit test.mp4

09:58

17. Fix react bug using unit test.html

18. Use code coverage to remove unused code.mp4

01:58

19. Use code coverage to remove unused code.html

20. Section summary.mp4

03:22

21. Code at section end.html

22. Coding Excercise 12.mp4

01:53

23. Coding Excercise 12 - solution.mp4

12:02

17. Unit tests with Jest

1. Section intro.mp4

01:23

2. What is jest and its API relation with vitest.mp4

01:21

3. What is jest and its API relation with vitest.html

4. Create jest setup.mp4

05:34

5. Create jest setup.html

6. Add watch mode.mp4

01:02

7. Add watch mode.html

8. Add coverage test.mp4

00:59

9. Add coverage test.html

10. Configure vitest to handle only the test directory.mp4

03:06

11. Configure vitest to handle only the test directory.html

12. Tweak tests with jest to compile.mp4

06:06

13. Tweak tests with jest to compile.html

14. Fix test with jest add jsdom to jest.config.ts.mp4

02:00

15. Fix test with jest add jsdom to jest.config.ts.html

16. Fix test with jest add matchers.mp4

01:29

17. Fix test with jest add matchers.html

18. Fix test with jest regarding toContain.mp4

03:18

19. Fix test with jest regarding toContain.html

20. Fix test with jest dayjs problem - add esModuleInterop true in tsconfig.js.mp4

01:22

21. Fix test with jest dayjs problem.html

22. Fix test with jest persist mock problems -- add clearMocks and replace mock().mp4

02:52

23. Fix test with jest persist mock problems.html

24. Use testMatch in jest.config.ts for better test file filtering.mp4

02:11

25. Use testMatch in jest.config.ts for better test file filtering.html

26. Fix test with jest problem with fetch -- replace with axios in src.mp4

07:02

27. Fix test with jest problem with fetch.html

28. Build the comparison between jest and vitest.mp4

12:58

29. Build the comparison between jest and vitest.html

30. Summary of the comparison between jest and vitest.mp4

01:23

31. Code at section end.html

32. Coding Excercise 13.mp4

01:25

33. Coding Excercise 13 - solution.mp4

08:23

18. Where to go from here

1. Here we are - course summary.mp4

04:18

2. Where to go from here - task queue manager.mp4

02:14

3. Where to go from here - testing.mp4

00:52

Description

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

Who is this for?

Students that want to write better code with less bugs using unit tests

Frontend developers

Fullstack developers

Backend developers

React developers

What You Need to Know?

Knowledge of typescript is required

More details

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 test

This 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

Who this course is for:
Students that want to write better code with less bugs using unit tests
Frontend developers
Fullstack developers
Backend developers
React developers

User Reviews

Rating

average 0

Total votes0

Focused display

B.s.c. and M.s.c Mechanical Engineering from Israel Institute of TechnologyI have more than 20 years experience developing software applications for Hi-Tec companies: Desktop , Mobile, WebI have experience as a freelancer and as a salaried working in startups and big companies.I have a lot of teaching experience at various levels

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.