Jest

README.md

@@ -699,7 +699,6 @@ export const loadTodoItemFromApi = (id) => {
 ```js
 // src/ui.js
 
-
 /**
  * Affiche dans l'interface le détails d'une tâche
  * @param {number} id 
@@ -721,4 +720,83 @@ export const displayTodoDetails = (id) => {
             .addEventListener('click', onClickLink);
     });
 };
+```
+
+A ce stade, notre routeur fonctionne comme on le souhaitait :
+* Il écoute les changements d'URLs dans le navigateur
+* Il analye l'URL et appelle le comportement correspondant
+* Les comportements affichent les contenus au sein de la balise `<main>` qui devient ce qu'on appelle un **outlet** (un élément qui affiche le contenu correspondant à l'URL)
+
+# Tester son code pour éviter les régressions
+
+## Installation de Jest
+
+`npm install --save-dev jest babel-jest @babel/core @babel/preset-env @types/jest`
+
+```js
+// babel.config.js
+module.exports = {
+  presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
+};
+```
+
+```json
+"scripts": {
+    "test": "jest",
+    "dev": "webpack --mode development",
+    "serve": "live-server --entry-file=./index.html",
+    "watch": "webpack --mode development --watch"
+  },
+```
+
+## Premier test
+
+```js
+// tests/app.test.js
+// test("it should work fine", () => {})
+it("should work fine", () => {
+    expect(true).toBe(true);
+})
+```
+
+## Aller plus loin et tester notre application
+```js
+// tests/utils.js
+
+/**
+ * Permet de simuler une attente dans nos tests
+ * @returns Promise<null>
+ */
+export const tick = () => {
+    return new Promise(resolve => {
+        setTimeout(() => resolve());
+    });
+}
+```
+
+```js
+// tests/app.test.js
+
+import { loadTodoFromApi } from "../src/todo.service.js";
+import { displayTodos } from "../src/app.js";
+
+jest.mock("../src/todo.service");
+
+test("it displays todo items from API", async () => {
+  document.body.innerHTML = `
+    <main></main>
+  `;
+
+  loadTodoFromApi.mockResolvedValue([
+    { id: 1, text: "MOCK_TODO", done: false },
+    { id: 2, text: "MOCK_TODO_2", done: true },
+  ]);
+
+  await displayTodos();
+
+  expect(document.querySelector("main ul")).not.toBeNull();
+  expect(document.querySelectorAll("ul li").length).toBe(2);
+  expect(document.querySelector("ul li").textContent).toContain("MOCK_TODO");
+  expect(document.querySelector("ul li:nth-child(2)").textContent).toContain("MOCK_TODO_2");
+});
 ```

jest.config.js

@@ -26,9 +26,10 @@ module.exports = {
   coverageDirectory: "coverage",
 
   // An array of regexp pattern strings used to skip coverage collection
-  // coveragePathIgnorePatterns: [
-  //   "/node_modules/"
-  // ],
+  coveragePathIgnorePatterns: [
+    "/node_modules/",
+    "/tests/utils.js"
+  ],
 
   // Indicates which provider should be used to instrument code for coverage
   coverageProvider: "v8",
@@ -102,7 +103,7 @@ module.exports = {
   // reporters: undefined,
 
   // Automatically reset mock state before every test
-  // resetMocks: false,
+  resetMocks: true,
 
   // Reset the module registry before running each individual test
   // resetModules: false,