add 03 and 04 exercise blocks

Author: kettanaito

exercises/03.best-practices/01.solution.accessibility-selectors/README.mdx

@@ -0,0 +1,3 @@
+# Accessibility selectors
+
+Problem: don't riddle your code with implementation details like `data-testId`. Select elements on the page like the user would actually see them—using the ARIA roles.

exercises/03.best-practices/02.solution.user-events/README.mdx

@@ -0,0 +1,3 @@
+# User events
+
+Problem: testing interactivity can be tricky. Let's explore how to use the `userEvent` object to perform user interactions like clicks, hovers, and uploads. In this one, let's test the `<App />` component and actually upload a test file to see its preview.

exercises/03.best-practices/03.solution.inverse-assertions/README.mdx

@@ -0,0 +1,3 @@
+# Inverse assertions
+
+Problem: testing things that must _not_ appear on the page can lead to false-positive tests in no time. Let's learn about _inverse assertions_ that help you write such tests reliably.

exercises/03.best-practices/04.solution.component-wrappers/README.mdx

@@ -0,0 +1,3 @@
+# Component wrappers
+
+Problem: component rendering in tests can repeat things, like parent components. Let's see how to use the `wrapper` option of the `render()` function to simplify your test setup.

exercises/03.best-practices/05.solution.page-navigation/README.mdx

@@ -0,0 +1,3 @@
+# Page navigation
+
+Problem: the component you are testing does navigation to another page. Let's see what exactly you should test here on the integration level and how to do so.

exercises/03.best-practices/06.solution.network-mocking/README.mdx

@@ -0,0 +1,3 @@
+# Network mocking
+
+Problem: performing requests to an actual server makes your test dependent on the operability of that server, among other things. Instead, mock the network in your component tests using MSW.

exercises/03.best-practices/FINISHED.mdx

@@ -0,0 +1 @@
+# Best practices

exercises/03.best-practices/README.mdx

@@ -0,0 +1,3 @@
+# Best practices
+
+Best practices on writing integration tests.

exercises/04.debugging/01.solution.attach-a-debugger/README.mdx

@@ -0,0 +1,5 @@
+# Attach a debugger
+
+1. Create a Visual Studio Code config.
+1. Showcase how to run Vitest with `--inspect`/`--inspect-brk` flag (and the difference between them).
+1. Showcase how to attach a debugger to the running browser.

exercises/04.debugging/01.solution.attach-a-debugger/package.json

@@ -0,0 +1,4 @@
+{
+  "type": "module",
+  "name": "exercises_04.debugging_01.solution.attach-a-debugger"
+}

exercises/04.debugging/02.solution.breakpoints/README.mdx

@@ -0,0 +1,3 @@
+# Breakpoints
+
+1. Showcase how to step through a test using breakpoints.

exercises/04.debugging/02.solution.breakpoints/package.json

@@ -0,0 +1,4 @@
+{
+  "type": "module",
+  "name": "exercises_04.debugging_02.solution.breakpoints"
+}

exercises/04.debugging/03.solution.debug-console/README.mdx

@@ -0,0 +1,3 @@
+# Debug console
+
+1. Showcase how to use the Debug Console in Visual Studio Code to evaluate expressions while at a breakpoint.

exercises/04.debugging/03.solution.debug-console/package.json

@@ -0,0 +1,4 @@
+{
+  "type": "module",
+  "name": "exercises_04.debugging_03.solution.debug-console"
+}

exercises/04.debugging/README.mdx

@@ -0,0 +1,3 @@
+# Debugging tests
+
+Learn how to debug your browser tests in Vitest. Your runbook to follow when a test fails.

tsconfig.json

@@ -33,6 +33,15 @@
     },
     {
       "path": "exercises/02.vitest-browser-mode/06.solution.multiple-workspaces"
+    },
+    {
+      "path": "exercises/04.debugging/01.solution.attach-a-debugger"
+    },
+    {
+      "path": "exercises/04.debugging/02.solution.breakpoints"
+    },
+    {
+      "path": "exercises/04.debugging/03.solution.debug-console"
     }
   ]
 }