Lastest fixes on test :

For Bills : - Write fist test logically in order to only need to complete the expectation. - For Dashboard adding a test checking that we have the big bill icon if we click two times on the bill
AlexGrouard · Jan 30, 2022 · f1f4bf2 · f1f4bf2
1 parent 7b7131b
commit f1f4bf2
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 33 deletions.
diff --git a/src/__tests__/Bills.js b/src/__tests__/Bills.js
@@ -2,20 +2,34 @@
  * @jest-environment jsdom
  */
 
-import { screen } from "@testing-library/dom"
+import {screen, waitFor} from "@testing-library/dom"
 import BillsUI from "../views/BillsUI.js"
 import { bills } from "../fixtures/bills.js"
+import { ROUTES_PATH} from "../constants/routes.js";
+import {localStorageMock} from "../__mocks__/localStorage.js";
+
+import router from "../app/Router.js";
 
 describe("Given I am connected as an employee", () => {
   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
+    test("Then bill icon in vertical layout should be highlighted", async () => {
+
+      Object.defineProperty(window, 'localStorage', { value: localStorageMock })
+      window.localStorage.setItem('user', JSON.stringify({
+        type: 'Employee'
+      }))
+      const root = document.createElement("div")
+      root.setAttribute("id", "root")
+      document.body.append(root)
+      router()
+      window.onNavigate(ROUTES_PATH.Bills)
+      await waitFor(() => screen.getByTestId('icon-window'))
+      const windowIcon = screen.getByTestId('icon-window')
       //to-do write expect expression
+
     })
     test("Then bills should be ordered from earliest to latest", () => {
-      const html = BillsUI({ data: bills })
-      document.body.innerHTML = html
+      document.body.innerHTML = BillsUI({ data: bills })
       const dates = screen.getAllByText(/^(19|20)\d\d[- /.](0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])$/i).map(a => a.innerHTML)
       const antiChrono = (a, b) => ((a < b) ? 1 : -1)
       const datesSorted = [...dates].sort(antiChrono)

diff --git a/src/__tests__/Dashboard.js b/src/__tests__/Dashboard.js
@@ -36,15 +36,13 @@ describe('Given I am connected as an Admin', () => {
   })
   describe('When I am on Dashboard page but it is loading', () => {
     test('Then, Loading page should be rendered', () => {
-      const html = DashboardUI({ loading: true })
-      document.body.innerHTML = html
+      document.body.innerHTML = DashboardUI({ loading: true })
       expect(screen.getAllByText('Loading...')).toBeTruthy()
     })
   })
   describe('When I am on Dashboard page but back-end send an error message', () => {
     test('Then, Error page should be rendered', () => {
-      const html = DashboardUI({ error: 'some error message' })
-      document.body.innerHTML = html
+      document.body.innerHTML = DashboardUI({ error: 'some error message' })
       expect(screen.getAllByText('Erreur')).toBeTruthy()
     })
   })
@@ -64,9 +62,7 @@ describe('Given I am connected as an Admin', () => {
       const dashboard = new Dashboard({
         document, onNavigate, store: null, bills:bills, localStorage: window.localStorage
       })
-      const html = DashboardUI({ data: { bills } })
-
-      document.body.innerHTML = html
+      document.body.innerHTML = DashboardUI({ data: { bills } })
 
       const handleShowTickets1 = jest.fn((e) => dashboard.handleShowTickets(e, bills, 1))
       const handleShowTickets2 = jest.fn((e) => dashboard.handleShowTickets(e, bills, 2))
@@ -110,25 +106,54 @@ describe('Given I am connected as an Admin', () => {
       const dashboard = new Dashboard({
         document, onNavigate, store: null, bills:bills, localStorage: window.localStorage
       })
-      const html = DashboardUI({ data: { bills } })
-      document.body.innerHTML = html
+      document.body.innerHTML = DashboardUI({ data: { bills } })
       const handleShowTickets1 = jest.fn((e) => dashboard.handleShowTickets(e, bills, 1))
       const icon1 = screen.getByTestId('arrow-icon1')
       icon1.addEventListener('click', handleShowTickets1)
       userEvent.click(icon1)
       expect(handleShowTickets1).toHaveBeenCalled()
       expect(screen.getByTestId(`open-bill47qAXb6fIm2zOKkLzMro`)).toBeTruthy()
-
       const iconEdit = screen.getByTestId('open-bill47qAXb6fIm2zOKkLzMro')
       userEvent.click(iconEdit)
       expect(screen.getByTestId(`dashboard-form`)).toBeTruthy()
     })
   })
 
+  describe('When I am on Dashboard page and I click 2 times on edit icon of a card', () => {
+    test('Then, big bill Icon should Appear',  () => {
+
+      const onNavigate = (pathname) => {
+        document.body.innerHTML = ROUTES({ pathname })
+      }
+
+      Object.defineProperty(window, 'localStorage', { value: localStorageMock })
+      window.localStorage.setItem('user', JSON.stringify({
+        type: 'Admin'
+      }))
+
+      const dashboard = new Dashboard({
+        document, onNavigate, store: null, bills:bills, localStorage: window.localStorage
+      })
+      document.body.innerHTML = DashboardUI({ data: { bills } })
+
+      const handleShowTickets1 = jest.fn((e) => dashboard.handleShowTickets(e, bills, 1))
+      const icon1 = screen.getByTestId('arrow-icon1')
+      icon1.addEventListener('click', handleShowTickets1)
+      userEvent.click(icon1)
+      expect(handleShowTickets1).toHaveBeenCalled()
+      expect(screen.getByTestId(`open-bill47qAXb6fIm2zOKkLzMro`)).toBeTruthy()
+      const iconEdit = screen.getByTestId('open-bill47qAXb6fIm2zOKkLzMro')
+      userEvent.click(iconEdit)
+      userEvent.click(iconEdit)
+      const bigBilledIcon = screen.queryByTestId("big-billed-icon")
+      expect(bigBilledIcon).toBeTruthy()
+    })
+  })
+
+
   describe('When I am on Dashboard and there are no bills', () => {
     test('Then, no cards should be shown', () => {
-      const html = cards([])
-      document.body.innerHTML = html
+      document.body.innerHTML = cards([])
       const iconEdit = screen.queryByTestId('open-bill47qAXb6fIm2zOKkLzMro')
       expect(iconEdit).toBeNull()
     })
@@ -142,8 +167,8 @@ describe('Given I am connected as Admin, and I am on Dashboard page, and I click
       window.localStorage.setItem('user', JSON.stringify({
         type: 'Admin'
       }))
-      const html = DashboardFormUI(bills[0])
-      document.body.innerHTML = html
+      document.body.innerHTML = DashboardFormUI(bills[0])
+
       const onNavigate = (pathname) => {
         document.body.innerHTML = ROUTES({ pathname })
       }
@@ -167,8 +192,8 @@ describe('Given I am connected as Admin, and I am on Dashboard page, and I click
       window.localStorage.setItem('user', JSON.stringify({
         type: 'Admin'
       }))
-      const html = DashboardFormUI(bills[0])
-      document.body.innerHTML = html
+      document.body.innerHTML = DashboardFormUI(bills[0])
+
       const onNavigate = (pathname) => {
         document.body.innerHTML = ROUTES({ pathname })
       }
@@ -194,8 +219,7 @@ describe('Given I am connected as Admin and I am on Dashboard page and I clicked
       window.localStorage.setItem('user', JSON.stringify({
         type: 'Admin'
       }))
-      const html = DashboardFormUI(bills[0])
-      document.body.innerHTML = html
+      document.body.innerHTML = DashboardFormUI(bills[0])
       const onNavigate = (pathname) => {
         document.body.innerHTML = ROUTES({ pathname })
       }

diff --git a/src/containers/Bills.js b/src/containers/Bills.js
@@ -11,23 +11,22 @@ export default class {
     if (buttonNewBill) buttonNewBill.addEventListener('click', this.handleClickNewBill)
     const iconEye = document.querySelectorAll(`div[data-testid="icon-eye"]`)
     if (iconEye) iconEye.forEach(icon => {
-      icon.addEventListener('click', (e) => this.handleClickIconEye(icon))
+      icon.addEventListener('click', () => this.handleClickIconEye(icon))
     })
     new Logout({ document, localStorage, onNavigate })
   }
 
-  handleClickNewBill = e => {
+  handleClickNewBill = () => {
     this.onNavigate(ROUTES_PATH['NewBill'])
   }
 
   handleClickIconEye = (icon) => {
     const billUrl = icon.getAttribute("data-bill-url")
     const imgWidth = Math.floor($('#modaleFile').width() * 0.5)
-    $('#modaleFile').find(".modal-body").html(`<div style='text-align: center;' class="bill-proof-container"><img width=${imgWidth} src=${billUrl} /></div>`)
+    $('#modaleFile').find(".modal-body").html(`<div style='text-align: center;' class="bill-proof-container"><img width=${imgWidth} src=${billUrl} alt="Bill" /></div>`)
     $('#modaleFile').modal('show')
   }
 
-  // not need to cover this function by tests
   getBills = () => {
     if (this.store) {
       return this.store
@@ -58,4 +57,4 @@ export default class {
       })
     }
   }
-}
+}
diff --git a/src/containers/Dashboard.js b/src/containers/Dashboard.js
@@ -13,7 +13,9 @@ export const filteredBills = (data, status) => {
       // in jest environment
       if (typeof jest !== 'undefined') {
         selectCondition = (bill.status === status)
-      } else {
+      }
+      /* istanbul ignore next */
+      else {
         // in prod environment
         const userEmail = JSON.parse(localStorage.getItem("user")).email
         selectCondition =
@@ -79,7 +81,7 @@ export default class {
   handleClickIconEye = () => {
     const billUrl = $('#icon-eye-d').attr("data-bill-url")
     const imgWidth = Math.floor($('#modaleFileAdmin1').width() * 0.8)
-    $('#modaleFileAdmin1').find(".modal-body").html(`<div style='text-align: center;'><img width=${imgWidth} src=${billUrl} /></div>`)
+    $('#modaleFileAdmin1').find(".modal-body").html(`<div style='text-align: center;'><img width=${imgWidth} src=${billUrl} alt="Bill"/></div>`)
     if (typeof $('#modaleFileAdmin1').modal === 'function') $('#modaleFileAdmin1').modal('show')
   }
 
@@ -98,7 +100,7 @@ export default class {
       $(`#open-bill${bill.id}`).css({ background: '#0D5AE5' })
 
       $('.dashboard-right-container div').html(`
-        <div id="big-billed-icon"> ${BigBilledIcon} </div>
+        <div id="big-billed-icon" data-testid="big-billed-icon"> ${BigBilledIcon} </div>
       `)
       $('.vertical-navbar').css({ height: '120vh' })
       this.counter ++
@@ -151,7 +153,6 @@ export default class {
 
   }
 
-  // not need to cover this function by tests
   getBillsAllUsers = () => {
     if (this.store) {
       return this.store
@@ -174,6 +175,7 @@ export default class {
   }
 
   // not need to cover this function by tests
+  /* istanbul ignore next */
   updateBill = (bill) => {
     if (this.store) {
     return this.store