add module 5

Author: kuroidoruido

demo-app/src/assets/discoveries.js

@@ -18,4 +18,7 @@ fetch('/api/v1/discoveries')
       )
       .join('');
     target.innerHTML = html;
+  })
+  .catch(() => {
+    target.innerHTML = lang === 'fr' ? 'Une erreur est survenue... 😰' : 'An error occurred... 😰';
   });

docs/assets/images/05-test-data-and-mocks/app-archi-overview.drawio.png

@@ -0,0 +1,48 @@
+<!-- .slide: class="transition" -->
+
+# Data strategies
+
+##==##
+
+# Use real services
+
+![center h-800](./assets/images/05-test-data-and-mocks/app-archi-overview.drawio.png)
+
+Notes:
+- E2E
+
+##==##
+
+# Mock external servers (pretty much E2E)
+
+![center h-800](./assets/images/05-test-data-and-mocks/strat-mock-external-servers.png)
+
+Notes:
+- E2E on the "team" point of view
+
+##==##
+
+# Mock every API calls (aka UI tests)
+
+![center h-800](./assets/images/05-test-data-and-mocks/strat-mock-all-calls.png)
+
+##==##
+
+# Mock only difficult use case with Playwright
+
+![center h-800](./assets/images/05-test-data-and-mocks/strat-mock-some-calls.png)
+
+Notes:
+- do we really need to tests theses cases?
+
+##==##
+
+<!-- .slide: class="quote-slide" -->
+
+## More you mock,
+## More your are stable,
+## BUT less you test the reality.
+
+Notes:
+- always a balance between stability / realism / testability
+- some cases need mocks

docs/assets/images/05-test-data-and-mocks/strat-mock-all-calls.png

@@ -0,0 +1,4 @@
+<!-- .slide: class="transition" -->
+
+# API Call mocks
+

docs/assets/images/05-test-data-and-mocks/strat-mock-external-servers.png

@@ -0,0 +1,71 @@
+<!-- .slide: class="transition" -->
+
+# How to do it with Playwright?
+
+##==##
+
+<!-- .slide: class="with-code" -->
+
+# Build a fake OK response
+
+```TypeScript [2-5]
+test('...', async ({ page }) => {
+  await page.route('*/**/api/v1/fruits', async route => {
+    const json = [{ name: 'Strawberry', id: 21 }];
+    await route.fulfill({ json });
+  });
+
+  await page.goto('/');
+});
+```
+<!-- .element: class="big-code" -->
+
+Notes:
+- create an interception of the api calls
+- you can read the request and build a new response
+
+##==##
+
+<!-- .slide: class="with-code" -->
+
+# Build a fake KO response
+
+```TypeScript [2-5]
+test('...', async ({ page }) => {
+  await page.route('*/**/api/v1/fruits', async route => {
+    await route.fulfill({ status: 404 });
+  });
+
+  await page.goto('/');
+});
+```
+<!-- .element: class="big-code" -->
+
+Notes:
+- create an interception of the api calls
+- you can read the request and build a new response
+
+
+##==##
+
+<!-- .slide: class="with-code" -->
+
+# Edit real response response
+
+```TypeScript [2-5]
+test('...', async ({ page }) => {
+  await page.route('*/**/api/v1/fruits', async route => {
+    const response = await route.fetch();
+    const json = await response.json();
+    json.push({ name: 'Loquat', id: 100 });
+    await route.fulfill({ response, json });
+  });
+
+  await page.goto('/');
+});
+```
+<!-- .element: class="big-code" -->
+
+Notes:
+- keep the real response, but patch it with the given json
+

docs/assets/images/05-test-data-and-mocks/strat-mock-some-calls.png

@@ -0,0 +1,14 @@
+<!-- .slide: class="transition" -->
+
+# Is it always possible?
+
+##==##
+
+<!-- .slide: class="transition-bg-blue-3 right" -->
+
+# CSR vs SSR
+
+Notes:
+- Client Side Rendering = Mostly SPA
+- SSR = Server Side Rendering
+- Not possible to mock API Call on SSR app

docs/markdown/05-test-data-and-mocks/10-data-strategies.md

@@ -6,12 +6,10 @@
 
 <br>
 
-1. TODO
-2. TODO
-3. TODO
+1. Create a file `discoveries.spec.ts`
+2. Test errors on Discoveries loading on the home page
+3. Test the case where we only have 2 products in the discovery
 
 <br>
 
-- TODO
-
 ### npm run 04-mock-error-use-case