Fix Dashboard tests and Application bugs

src/__mocks__/store.js

@@ -1,4 +1,4 @@
-export default {
+/* export default {
   get: () => {
     return Promise.resolve({
       data: [{
@@ -63,4 +63,52 @@ export default {
       }]
     })
   }
+} */
+const mockedBills = {
+  list() {
+    return Promise.resolve([{
+      "id": "47qAXb6fIm2zOKkLzMro",
+      "vat": "80",
+      "fileUrl": "https://firebasestorage.googleapis.com/v0/b/billable-677b6.a…f-1.jpg?alt=media&token=c1640e12-a24b-4b11-ae52-529112e9602a",
+      "status": "pending",
+      "type": "Hôtel et logement",
+      "commentary": "séminaire billed",
+      "name": "encore",
+      "fileName": "preview-facture-free-201801-pdf-1.jpg",
+      "date": "2004-04-04",
+      "amount": 400,
+      "commentAdmin": "ok",
+      "email": "a@a",
+      "pct": 20
+    }])
+
+  },
+  create(bill) {
+    return Promise.resolve({fileUrl: 'https://localhost:3456/images/test.jpg', key: '1234'})
+  },
+  update(bill) {
+    return Promise.resolve({
+      "id": "47qAXb6fIm2zOKkLzMro",
+      "vat": "80",
+      "fileUrl": "https://firebasestorage.googleapis.com/v0/b/billable-677b6.a…f-1.jpg?alt=media&token=c1640e12-a24b-4b11-ae52-529112e9602a",
+      "status": "pending",
+      "type": "Hôtel et logement",
+      "commentary": "séminaire billed",
+      "name": "encore",
+      "fileName": "preview-facture-free-201801-pdf-1.jpg",
+      "date": "2004-04-04",
+      "amount": 400,
+      "commentAdmin": "ok",
+      "email": "a@a",
+      "pct": 20
+    })
+  },
+}
+
+export default {
+  bills() {
+    return mockedBills
+    //return {}
+  },
 }
+

src/__tests__/Dashboard.js

@@ -7,11 +7,13 @@ import userEvent from '@testing-library/user-event'
 import DashboardFormUI from "../views/DashboardFormUI.js"
 import DashboardUI from "../views/DashboardUI.js"
 import Dashboard, { filteredBills, cards } from "../containers/Dashboard.js"
-import { ROUTES } from "../constants/routes"
+import { ROUTES, ROUTES_PATH } from "../constants/routes"
 import { localStorageMock } from "../__mocks__/localStorage.js"
-import store from "../__mocks__/store"
+import mockStore from "../__mocks__/store"
 import { bills } from "../fixtures/bills"
+import router from "../app/Router"
 
+jest.mock("../app/store", () => mockStore)
 
 describe('Given I am connected as an Admin', () => {
   describe('When I am on Dashboard page, there are bills, and there is one pending', () => {
@@ -48,7 +50,7 @@ describe('Given I am connected as an Admin', () => {
   })
 
   describe('When I am on Dashboard page and I click on arrow', () => {
-    test('Then, tickets list should be unfolding, and cards should contain first and lastname', async () => {
+    test('Then, tickets list should be unfolding, and cards should appear', async () => {
 
       const onNavigate = (pathname) => {
         document.body.innerHTML = ROUTES({ pathname })
@@ -60,15 +62,15 @@ describe('Given I am connected as an Admin', () => {
       }))
 
       const dashboard = new Dashboard({
-        document, onNavigate, store: null, bills:bills.bills, localStorage: window.localStorage
+        document, onNavigate, store: null, bills:bills, localStorage: window.localStorage
       })
-      const html = DashboardUI({ data: bills })
+      const html = DashboardUI({ data: { bills } })
 
       document.body.innerHTML = html
 
-      const handleShowTickets1 = jest.fn((e) => dashboard.handleShowTickets(e, bills.bills, 1))
-      const handleShowTickets2 = jest.fn((e) => dashboard.handleShowTickets(e, bills.bills, 2))
-      const handleShowTickets3 = jest.fn((e) => dashboard.handleShowTickets(e, bills.bills, 3))
+      const handleShowTickets1 = jest.fn((e) => dashboard.handleShowTickets(e, bills, 1))
+      const handleShowTickets2 = jest.fn((e) => dashboard.handleShowTickets(e, bills, 2))
+      const handleShowTickets3 = jest.fn((e) => dashboard.handleShowTickets(e, bills, 3))
 
       const icon1 = screen.getByTestId('arrow-icon1')
       const icon2 = screen.getByTestId('arrow-icon2')
@@ -77,51 +79,56 @@ describe('Given I am connected as an Admin', () => {
       icon1.addEventListener('click', handleShowTickets1)
       userEvent.click(icon1)
       expect(handleShowTickets1).toHaveBeenCalled()
-      userEvent.click(icon1)
       await waitFor(() => screen.getByTestId(`open-bill47qAXb6fIm2zOKkLzMro`) )
       expect(screen.getByTestId(`open-bill47qAXb6fIm2zOKkLzMro`)).toBeTruthy()
-      /*
       icon2.addEventListener('click', handleShowTickets2)
       userEvent.click(icon2)
       expect(handleShowTickets2).toHaveBeenCalled()
+      await waitFor(() => screen.getByTestId(`open-billUIUZtnPQvnbFnB0ozvJh`) )
+      expect(screen.getByTestId(`open-billUIUZtnPQvnbFnB0ozvJh`)).toBeTruthy()
 
       icon3.addEventListener('click', handleShowTickets3)
       userEvent.click(icon3)
       expect(handleShowTickets3).toHaveBeenCalled()
-      */
+      await waitFor(() => screen.getByTestId(`open-billBeKy5Mo4jkmdfPGYpTxZ`) )
+      expect(screen.getByTestId(`open-billBeKy5Mo4jkmdfPGYpTxZ`)).toBeTruthy()
     })
   })
 
   describe('When I am on Dashboard page and I click on edit icon of a card', () => {
-    test('Then, right form should be filled', () => {
-      const html = cards(bills)
-      document.body.innerHTML = html
+    test('Then, right form should be filled',  () => {
 
       const onNavigate = (pathname) => {
         document.body.innerHTML = ROUTES({ pathname })
       }
-      const store = null
 
       Object.defineProperty(window, 'localStorage', { value: localStorageMock })
+      window.localStorage.setItem('user', JSON.stringify({
+        type: 'Admin'
+      }))
+
       const dashboard = new Dashboard({
-        document, onNavigate, store, bills, localStorage: window.localStorage
+        document, onNavigate, store: null, bills:bills, localStorage: window.localStorage
       })
+      const html = DashboardUI({ data: { bills } })
+      document.body.innerHTML = html
+      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 handleEditTicket = jest.fn((e) => dashboard.handleEditTicket(e, bills[0], bills))
       const iconEdit = screen.getByTestId('open-bill47qAXb6fIm2zOKkLzMro')
-      iconEdit.addEventListener('click', handleEditTicket)
       userEvent.click(iconEdit)
-      expect(handleEditTicket).toHaveBeenCalled()
-      userEvent.click(iconEdit)
-      expect(handleEditTicket).toHaveBeenCalled()
+      expect(screen.getByTestId(`dashboard-form`)).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
-
       const iconEdit = screen.queryByTestId('open-bill47qAXb6fIm2zOKkLzMro')
       expect(iconEdit).toBeNull()
     })
@@ -213,26 +220,70 @@ 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()
-       expect(getSpy).toHaveBeenCalledTimes(1)
-       expect(bills.data.length).toBe(4)
+      localStorage.setItem("user", JSON.stringify({ type: "Admin", email: "a@a" }));
+      const root = document.createElement("div")
+      root.setAttribute("id", "root")
+      document.body.append(root)
+      router()
+      window.onNavigate(ROUTES_PATH.Dashboard)
+      await waitFor(() => screen.getByText("Validations"))
+      expect(screen.getByTestId("big-billed-icon")).toBeTruthy()
     })
+
     test("fetches bills from an API and fails with 404 message error", async () => {
-      store.get.mockImplementationOnce(() =>
-        Promise.reject(new Error("Erreur 404"))
+     jest.spyOn(mockStore, "bills")
+      mockStore.bills.mockImplementationOnce(() => {
+        return {
+          list : () =>  {
+            return Promise.reject(new Error("Erreur 404"))
+          }
+        }})
+      Object.defineProperty(
+          window,
+          'localStorage',
+          { value: localStorageMock }
       )
-      const html = DashboardUI({ error: "Erreur 404" })
-      document.body.innerHTML = html
+      window.localStorage.setItem('user', JSON.stringify({
+        type: 'Admin',
+        email: "a@a"
+      }))
+      const root = document.createElement("div")
+      root.setAttribute("id", "root")
+      document.body.appendChild(root)
+
+      router()
+
+      window.onNavigate(ROUTES_PATH.Dashboard)
+      await new Promise(process.nextTick);
       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"))
+      jest.spyOn(mockStore, "bills")
+      mockStore.bills.mockImplementationOnce(() => {
+        return {
+          list : () =>  {
+            return Promise.reject(new Error("Erreur 500"))
+          }
+        }})
+      Object.defineProperty(
+          window,
+          'localStorage',
+          { value: localStorageMock }
       )
-      const html = DashboardUI({ error: "Erreur 500" })
-      document.body.innerHTML = html
+      window.localStorage.setItem('user', JSON.stringify({
+        type: 'Admin',
+        email: "a@a"
+      }))
+      const root = document.createElement("div")
+      root.setAttribute("id", "root")
+      document.body.appendChild(root)
+
+      router()
+
+      window.onNavigate(ROUTES_PATH.Dashboard)
+      await new Promise(process.nextTick);
       const message = await screen.getByText(/Erreur 500/)
       expect(message).toBeTruthy()
     })

src/app/Router.js

@@ -52,14 +52,14 @@ export default () => {
       rootDiv.innerHTML = ROUTES({ pathname, loading: true })
       const bills = new Dashboard({ document, onNavigate, store, bills: [], localStorage })
       bills.getBillsAllUsers().then(bills => {
-        rootDiv.innerHTML = DashboardUI({ data: { bills } })
-        new Dashboard({ document, onNavigate, store, bills, localStorage })
-      }).catch(error => {
+          rootDiv.innerHTML = DashboardUI({data: {bills}})
+          new Dashboard({document, onNavigate, store, bills, localStorage})
+        }).catch(error => {
         rootDiv.innerHTML = ROUTES({ pathname, error })
       })
     }
   }
-  
+
   window.onpopstate = (e) => {
     const user = JSON.parse(localStorage.getItem('user'))
     if (window.location.pathname === "/" && !user) {
@@ -113,4 +113,4 @@ export default () => {
 
   return null
 }
- 
+

src/containers/Dashboard.js

@@ -73,11 +73,7 @@ export default class {
     $('#arrow-icon1').click((e) => this.handleShowTickets(e, bills, 1))
     $('#arrow-icon2').click((e) => this.handleShowTickets(e, bills, 2))
     $('#arrow-icon3').click((e) => this.handleShowTickets(e, bills, 3))
-    this.getBillsAllUsers()
     new Logout({ localStorage, onNavigate })
-    bills.forEach(bill => {
-      $(`#open-bill${bill.id}`).click((e) => this.handleEditTicket(e, bill, bills))
-    })
   }
 
   handleClickIconEye = () => {
@@ -171,7 +167,9 @@ export default class {
         }))
         return bills
       })
-      .catch(console.log)
+      .catch(error => {
+        throw error;
+      })
     }
   }
 

src/fixtures/bills.js

@@ -1,4 +1,4 @@
-export const bills = { bills : [{
+export const bills = [{
   "id": "47qAXb6fIm2zOKkLzMro",
   "vat": "80",
   "fileUrl": "https://test.storage.tld/v0/b/billable-677b6.a…f-1.jpg?alt=media&token=c1640e12-a24b-4b11-ae52-529112e9602a",
@@ -58,4 +58,4 @@ export const bills = { bills : [{
   "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"
 }
-] }
+]