Dashboard bugg

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 8080
+}

setup-jest.js

@@ -1,2 +1,3 @@
 import $ from 'jquery';
 global.$ = global.jQuery = $;
+$.fn.modal = jest.fn(() => $());// permet d'utiliser jest.fn avec jquerry (vu sur stack overflow)

src/__mocks__/store.js

@@ -62,5 +62,12 @@ export default {
         "fileUrl": "https://test.storage.tld/v0/b/billable-677b6.a…f-1.jpg?alt=media&token=4df6ed2c-12c8-42a2-b013-346c1346f732"
       }]
     })
+  },
+  post:(data)=>{
+    return Promise.resolve({
+      data,
+      status : 200
+    })
   }
+
 }

src/__tests__/Bills.js

@@ -1,18 +1,28 @@
 /**
  * @jest-environment jsdom
  */
-
-import { screen } from "@testing-library/dom"
+import'@testing-library/jest-dom'
+import { screen,fireEvent } from "@testing-library/dom"
 import BillsUI from "../views/BillsUI.js"
+import Bills from "../containers/Bills.js"
 import { bills } from "../fixtures/bills.js"
+import {ROUTES_PATH,ROUTES} from "../constants/routes.js"
+import store from "../__mocks__/store.js"
+import Router from '../app/Router.js'
 
 describe("Given I am connected as an employee", () => {
+  //billUI tests
   describe("When I am on Bills Page", () => {
+
     test("Then bill icon in vertical layout should be highlighted", () => {
-      const html = BillsUI({ data: []})
-      document.body.innerHTML = html
-      //to-do write expect expression
+
+      window.localStorage.setItem('user', JSON.stringify({type: 'Employee'}))// défini l'User en tant qu'employé dans le local storage
+      Object.defineProperty(window, "location", { value: { hash: ROUTES_PATH['Bills'] } });// défini l'url comme étant '#employee/bills'
+      document.body.innerHTML = `<div id="root"></div>` // crée le noeud pour que le router injecte l'objet correspondant à l'url
+      Router();// lance le router
+      expect(screen.getByTestId('icon-window').classList.contains('active-icon')).toBe(true) // vérifie si l'icone est en surbrillance
     })
+
     test("Then bills should be ordered from earliest to latest", () => {
       const html = BillsUI({ data: bills })
       document.body.innerHTML = html
@@ -23,3 +33,97 @@ describe("Given I am connected as an employee", () => {
     })
   })
 })
+describe('Given i am on the loading page',()=>{
+  test('Should show Loading...',()=>{
+    const html = BillsUI({loading : true})
+    document.body.innerHTML = html
+    expect(screen.getAllByText('Loading...')).toBeTruthy()
+
+  })
+})
+
+describe('Given i am on error page', () => {
+  test('should show the error message',()=>{
+    const html = BillsUI({error : 'error message'})
+    document.body.innerHTML = html
+    expect(screen.getAllByText('error message')).toBeTruthy()
+  })
+})
+
+//Bill tests
+
+describe('Given i am on bills page',()=>{
+    //methode handleClickNewBill
+    test('Should called the handleClickNewBill method when i click on newBill button',()=>{  
+      window.localStorage.setItem('user', JSON.stringify({type: 'Employee'}))
+      const html = BillsUI({ data: bills })
+      document.body.innerHTML = html
+      let pathname =  ROUTES_PATH['Bills']
+      const onNavigate = ((pathname) => document.body.innerHTML = ROUTES({ pathname }))
+      const bill= new Bills({
+        document,
+        onNavigate       
+      })    
+      const handleClickNewBill = jest.fn(bill.handleClickNewBill)
+      const buttonNewBill = screen.getByTestId('btn-new-bill')
+      expect(buttonNewBill).toBeTruthy()
+      buttonNewBill.addEventListener('click', handleClickNewBill)
+      fireEvent.click(buttonNewBill)
+      expect(handleClickNewBill).toHaveBeenCalled()
+      expect(screen.getByText('Envoyer une note de frais')).toBeTruthy()
+    })
+
+
+    //methode handleClickIconEye
+    test('Should called the handleClickIconEye when i click on iconEye',()=>{    
+      const html = BillsUI({ data: bills })
+      document.body.innerHTML = html
+      let pathname =  ROUTES_PATH['Bills']
+      const bill= new Bills({
+        document,
+        onNavigate: (pathname) => document.body.innerHTML = ROUTES({ pathname })
+      })  
+      const allIconEye = screen.getAllByTestId('icon-eye')
+      expect(allIconEye).toBeTruthy()
+      const iconEye1 = allIconEye[0]
+      const handleClickIconEye = jest.fn(bill.handleClickIconEye(iconEye1))
+      iconEye1.addEventListener('click', handleClickIconEye)
+      expect(iconEye1).toBeTruthy()        
+      fireEvent.click(iconEye1)
+      expect(handleClickIconEye).toHaveBeenCalled()
+      const modale = document.getElementById('modaleFile')
+      expect(modale).toBeTruthy()
+      expect(modale).toHaveTextContent('Justificatif')  
+    })
+
+})
+// test d'intégration GET
+describe("Given I am a user connected as Employee", () => {
+  describe("When I navigate to BillUI", () => {
+    test("fetches bills from mock API GET", async () => {
+       const getSpy = jest.spyOn(store, "get") // fonction simulée qui surveille l'appel de la méthode get de l'objet store mocké
+       const bills = await store.get() //récupère les données du store mocké
+       expect(getSpy).toHaveBeenCalledTimes(1) //sore.get a été appelé 1 fois
+       expect(bills.data.length).toBe(4) // les données contiennent 4 objets
+    })
+    test("fetches bills from an API and fails with 404 message error", async () => {
+      store.get.mockImplementationOnce(() => // simule un rejet de la promesse
+        Promise.reject(new Error("Erreur 404"))
+
+      )
+      const html = BillsUI({ error: "Erreur 404" })
+      document.body.innerHTML = html
+      const message = await screen.getByText(/Erreur 404/)
+      expect(message).toBeTruthy()
+    })
+    test("fetches messages from an API and fails with 500 message error", async () => {
+      store.get.mockImplementationOnce(() =>
+        Promise.reject(new Error("Erreur 500"))
+      )
+      const html = BillsUI({ error: "Erreur 500" })
+      document.body.innerHTML = html
+      const message = await screen.getByText(/Erreur 500/)
+      expect(message).toBeTruthy()
+    })
+  })
+})

src/__tests__/Dashboard.js

@@ -45,6 +45,7 @@ describe('Given I am connected as an Admin', () => {
       document.body.innerHTML = html
       expect(screen.getAllByText('Erreur')).toBeTruthy()
     })
+
   })
 
   describe('When I am on Dashboard page and I click on arrow', () => {
@@ -99,7 +100,7 @@ describe('Given I am connected as an Admin', () => {
         document.body.innerHTML = ROUTES({ pathname })
       }
       const store = null
-
+      // modifie le localStorage par le  localStorageMock
       Object.defineProperty(window, 'localStorage', { value: localStorageMock })
       const dashboard = new Dashboard({
         document, onNavigate, store, bills, localStorage: window.localStorage
@@ -211,13 +212,13 @@ describe('Given I am connected as Admin and I am on Dashboard page and I clicked
 describe("Given I am a user connected as Admin", () => {
   describe("When I navigate to Dashboard", () => {
     test("fetches bills from mock API GET", async () => {
-       const getSpy = jest.spyOn(store, "get")
-       const bills = await store.get()
+       const getSpy = jest.spyOn(store, "get") // fonction simulée qui surveille l'appel de la méthode get de l'objet store
+       const bills = await store.get() 
        expect(getSpy).toHaveBeenCalledTimes(1)
        expect(bills.data.length).toBe(4)
     })
     test("fetches bills from an API and fails with 404 message error", async () => {
-      store.get.mockImplementationOnce(() =>
+      store.get.mockImplementationOnce(() => // simule un rejet de la promesse
         Promise.reject(new Error("Erreur 404"))
       )
       const html = DashboardUI({ error: "Erreur 404" })
@@ -236,4 +237,3 @@ describe("Given I am a user connected as Admin", () => {
     })
   })
 })
-

src/__tests__/NewBill.js

@@ -1,18 +1,161 @@
 /**
  * @jest-environment jsdom
  */
-
-import { screen } from "@testing-library/dom"
+import '@testing-library/jest-dom'
+import { screen,fireEvent, getByTestId} from "@testing-library/dom"
 import NewBillUI from "../views/NewBillUI.js"
 import NewBill from "../containers/NewBill.js"
-
+import BillsUI  from '../views/BillsUI.js'
+import {localStorageMock } from '../__mocks__/localStorage.js'
+import { ROUTES ,ROUTES_PATH} from '../constants/routes.js'
+import Router from "../app/Router.js"
+import store from "../__mocks__/store.js"
 
 describe("Given I am connected as an employee", () => {
   describe("When I am on NewBill Page", () => {
-    test("Then ...", () => {
+    test("Then mail icon in vertical layout should be highlighted",()=>{
+      window.localStorage.setItem('user', JSON.stringify({type: 'Employee'}))// défini l'user en tant qu'employé dans le local storage
+      Object.defineProperty(window, "location", { value: { hash: ROUTES_PATH['NewBill'] } });// défini l'url comme étant '#employee/bill/new'
+      document.body.innerHTML = `<div id="root"></div>` // crée le noeud pour que le router injecte l'objet correspondant à l'url
+      Router();// lance le router
+      expect(screen.getByTestId('icon-mail').classList.contains('active-icon')).toBe(true) // vérifie si l'icone est en surbrillance
+    })
+    test("Then Envoyer une note de frais displayed", () => {
+      const html = NewBillUI()
+      document.body.innerHTML = html
+      expect(screen.getAllByText('Envoyer une note de frais')).toBeTruthy()
+    })
+
+    test('Then, I submit form-new-bill, handleSubmit called',()=>{
+      const html = NewBillUI()
+      document.body.innerHTML = html
+      let pathname =  ROUTES_PATH['NewBill']      
+      const onNavigate = (pathname) => {
+        document.body.innerHTML = ROUTES({ pathname })
+      }
+
+      // modifie le localStorage par le  localStorageMock
+      Object.defineProperty(window, 'localStorage', { value: localStorageMock })
+      window.localStorage.setItem('user', JSON.stringify({type: 'Employee'}))
+
+
+      const newBill = new NewBill({document, onNavigate})
+      expect(newBill).toBeDefined()
+      const handleSubmit = jest.fn(newBill.handleSubmit)
+      const newBillform = screen.getByTestId("form-new-bill")
+      newBillform.addEventListener('submit', handleSubmit)
+      fireEvent.submit(newBillform)
+      expect(handleSubmit).toHaveBeenCalled()
+
+    })
+
+    test('Then, I click on Justificatif, handleChangeFile called',()=> {
+      const html = NewBillUI()
+      document.body.innerHTML = html  
+      let pathname =  ROUTES_PATH['NewBill']   
+      const onNavigate = (pathname) => {
+        document.body.innerHTML = ROUTES({ pathname })
+      }
+
+      // modifie le localStorage par le  localStorageMock
+      Object.defineProperty(window, 'localStorage', { value: localStorageMock })
+      window.localStorage.setItem('user', JSON.stringify({type: 'Employee'}))    
+      const newBill = new NewBill({document, onNavigate})
+      const handleChangeFile = jest.fn(newBill.handleChangeFile)
+      const fileBtn = screen.getByTestId('file')
+      expect(fileBtn).toBeDefined()
+      fileBtn.addEventListener('click', handleChangeFile)
+      fireEvent.click(fileBtn)
+      expect(handleChangeFile).toHaveBeenCalled()
+
+
+    })
+
+  })
+})
+describe("When I select a file", () => {
+  test("Then it should be changed in the input", () => {
+    Object.defineProperty(window, 'localStorage', { value: localStorageMock })// Set localStorage
+    window.localStorage.setItem('user', JSON.stringify({type: 'Employee'}))// Set user as Employee in localStorage
+    const html = NewBillUI()
+    document.body.innerHTML = html
+    let pathname =  ROUTES_PATH['NewBill']   
+
+    const newBill = new NewBill({
+      document,
+      onNavigate: (pathname) => document.body.innerHTML = ROUTES({ pathname }),
+      firestore: null,
+      localStorage: window.localStorage,
+      validFormat : true
+    })     
+
+
+    const handleChangeFile = jest.fn(newBill.handleChangeFile)
+    const inputFile = screen.getByTestId("file")
+    inputFile.addEventListener('change', handleChangeFile)
+    fireEvent.change(inputFile, {
+      target: {
+        files: [new File(["test.jpeg"], "test.jpeg", { type: "image/jpeg" })]
+      }
+    })
+    expect(handleChangeFile).toHaveBeenCalled();
+    expect(inputFile.files[0].name).toBe("test.jpeg");
+  })
+})
+// test d'intégration POST
+describe("Given I am a user connected as Admin", () => {
+  describe("When I navigate to Dashboard", () => {
+    test("fetches bills from mock API POST", async () => {
       const html = NewBillUI()
+      document.body.innerHTML = html  
+      let pathname =  ROUTES_PATH['NewBill']   
+
+      const onNavigate = (pathname) => {
+        document.body.innerHTML = ROUTES({ pathname })
+      }      
+     const testBill = 
+      {
+        "id": "qcCK3SzECmaZAGRrHjaC",
+        "status": "refused",
+        "pct": 20,
+        "amount": 200,
+        "email": "a@a",
+        "name": "test2",
+        "vat": "40",
+        "fileName": "preview-facture-free-201801-pdf-1.jpg",
+        "date": "2002-02-02",
+        "commentAdmin": "pas la bonne facture",
+        "commentary": "test2",
+        "type": "Restaurants et bars",
+        "fileUrl": "https://test.storage.tld/v0/b/billable-677b6.a…f-1.jpg?alt=media&token=4df6ed2c-12c8-42a2-b013-346c1346f732"
+      }      
+
+       const getSpy = jest.spyOn(store, "post") // fonction simulée qui surveille l'appel de la méthode post de l'objet store       
+       const bills = await store.post(testBill) 
+       expect(getSpy).toHaveBeenCalledTimes(1)
+       expect(bills.status).toBe(200)
+       expect(bills.data.status).toBe("refused")
+       expect(bills.data.id).toBe("qcCK3SzECmaZAGRrHjaC")
+
+
+    })
+    test("fetches bills from an API and fails with 404 message error", async () => {
+      store.post.mockImplementationOnce(() => // simule un rejet de la promesse
+        Promise.reject(new Error("Erreur 404"))
+      )
+      const html = BillsUI({ error: "Erreur 404" })
+      document.body.innerHTML = html
+      const message = await screen.getByText(/Erreur 404/)
+      expect(message).toBeTruthy()
+    })
+    test("fetches messages from an API and fails with 500 message error", async () => {
+      store.post.mockImplementationOnce(() =>
+        Promise.reject(new Error("Erreur 500"))
+      )
+      const html = BillsUI({ error: "Erreur 500" })
       document.body.innerHTML = html
-      //to-do write assertion
+      const message = await screen.getByText(/Erreur 500/)
+      expect(message).toBeTruthy()
     })
   })
 })

src/app/Store.js

@@ -1,9 +1,10 @@
-
+// renvoi un msg d'erreur si le status de la réponse n'est pas ok
 const jsonOrThrowIfError = async (response) => {
   if(!response.ok) throw new Error((await response.json()).message)
   return response.json()
 }
 
+
 class Api {
   constructor({baseUrl}) {
     this.baseUrl = baseUrl;
@@ -25,7 +26,7 @@ class Api {
 const getHeaders = (headers) => {
   const h = { }
   if (!headers.noContentType) h['Content-Type'] = 'application/json'
-  const jwt = localStorage.getItem('jwt')
+  const jwt = localStorage.getItem('jwt') //jsonwebtocken
   if (jwt && !headers.noAuthorization) h['Authorization'] = `Bearer ${jwt}`
   return {...h, ...headers}
 }
@@ -53,7 +54,7 @@ class ApiEntity {
 }
 
 
-
+// selon la méthode appelé renvoi vers une méthode de l'apiEntity ou crée une nouvelle instance de cette api
 class Store {
   constructor() {
     this.api = new Api({baseUrl: 'http://localhost:5678'})